Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    Display web widget on mirror through iFrame?

    Troubleshooting
    9
    60
    40601
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • K
      kasperb last edited by

      Hello,

      I was wondering if there’s any easy way to display a widget on your mirror. In this example I’d like to display:

      (source: http://www.mta.info/mta-service-status-widget)

      I’ve tried displaying a website, by using the iFrame module, but I can’t get it to work. In addition, I’ve tried using an iFrame using the Helloworld module but the site remains blank (I initially tried using just Google.com).

      Thanks in advance for any suggestions.

      1 Reply Last reply Reply Quote 0
      • R
        roramirez Core Contributors last edited by

        Hi,

        Why dont use the URL http://service.mta.info/ServiceStatus/status.html?widget=yes into module https://github.com/desertblade/iFrame ?

        K 1 Reply Last reply Reply Quote 0
        • K
          kasperb @roramirez last edited by

          @roramirez I tried that, but for some reason I can’t get the iFrame module to work. When I enter the code from the instructions/readme in the config.js it breaks the file (I wish I could post it here, but I just broke my micro sd when putting the RPI in a case :-I)

          1 Reply Last reply Reply Quote 0
          • E
            eugekiller last edited by eugekiller

            Hi I am also having the same problem. I am trying to load a youtube playlist to iFrame. I cloned iFrame in to modules, then navigated in to it did npm install. Then put this in config.js

            var config = {
            port: 8080,

            language: 'en',
            timeFormat: 12,
            units: 'imperial',
            
            modules: [
            	{
            		module: 'alert',
            	},
            	{
            		module: 'clock',
            		position: 'top_right'
            	},
            	{
            		module: 'currentweather',
            		position: 'top_left',
            		config: {
            			location: 'New York',
            			locationID: '',  //ID from http://www.openweathermap.org
            			appid: '2159d1e91ad638a2b6face1e0cc76bce'
            		}
            	},
            	{
            		module: 'weatherforecast',
            		position: 'top_left',
            		header: 'Weather Forecast',
            		config: {
                          location: 'Totowa',
            			locationID: '5105455',  //ID from http://www.openweathermap.org
                             appid: '2159d1e91ad638a2b6face1e0cc76bce'
            		}
            	},
                        {
            		module: 'calendar',
            		header: 'Oksanas Calendar',
            		position: 'top_left',
            		config: {
            			calendars: [
            				{
            					symbol: 'calendar-check-o ',
            					url: 'NONE'
            				}
            			]
            		}
            	},
                        {
            		module: 'calendar',
            		header: 'TYLER JOBS',
            		position: 'top_right',
            		config: {
            			calendars: [
            				{
            					symbol: 'calendar-check-o ',
            					url: 'NONE'
            				}
            			]
            		}
            	},
            	{
            		module: 'calendar',
            		header: 'SHANE JOBS',
            		position: 'top_right',
            		config: {
            			calendars: [
            				{
            					symbol: 'calendar-check-o ',
            					url: 'NONE'
            				}
            			]
            		}
            	},
                        {
            module: 'MMM-Traffic',
            header: 'OFFICE DRIVE',
            position: 'bottom_right',
            classes: 'dimmed medium', //optional, default is 'bright medium', only applies to commute info not route_name
            config: {
                api_key: 'NONE',
                mode: 'driving',
                origin: '43 Madison St, Pequannock Township, NJ 07440',
                destination: '99 Dell Glen Avenue, Lodi, NJ 0764',
                arrival_time: '', //optional, but needs to be in 24 hour time if used.
                route_name: 'Home to Work',
                changeColor: true,
                showGreen: false,
                limitYellow: 5, //Greater than 5% of journey time due to traffic
                limitRed: 20, //Greater than 20% of journey time due to traffic
                traffic_model: 'pessimistic',
                interval: 120000 //2 minutes
            }
            },
            	{
            module: 'MMM-Traffic',
            header: 'Oksana Russian Office',
            position: 'bottom_left',
            classes: 'dimmed medium', //optional, default is 'bright medium', only applies to commute info not route_name
            config: {
                api_key: 'NONE',
                mode: 'driving',
                origin: '43 Madison St, Pequannock Township, NJ 07440',
                destination: '45 U.S. 46, Ridgefield Park, NJ 07660',
                arrival_time: '', //optional, but needs to be in 24 hour time if used.
                route_name: 'Home to Work',
                changeColor: true,
                showGreen: false,
                limitYellow: 5, //Greater than 5% of journey time due to traffic
                limitRed: 20, //Greater than 20% of journey time due to traffic
                traffic_model: 'pessimistic',
                interval: 120000 //2 minutes
            }
            },
                          {
                module: 'iFrame',
                position: 'bottom_bar', // This can be any of the regions.
                config: {
                    // See 'Configuration options' for more information.
                        url: "<iframe width="560" height="315" src="https://www.youtube.com/embed/6kgH6kqNuWM?list=PL24DEF584E7DBB4CF" frameborder="0" allowfullscreen></iframe>"
                        width: "50px" // Optional. Default: 100%
                        height: "50px" //Optional. Default: 100px
                    }
                }
            },
                          {
            		module: 'newsfeed',
            		position: 'top_bar',
            		config: {
            			feeds: [
            				{
            					title: "NEWS 12",
            					url: "http://newjersey.news12.com/cmlink/1.4124770#"
            				}
            			],
            			showSourceTitle: true,
            			showPublishDate: true
            		}
            	},
            ]
            1 Reply Last reply Reply Quote 0
            • yawns
              yawns Moderator last edited by yawns

              I see several formatting errors (missing , and too many } ). I did not test it, but please try this instead. Oh, and please remove your api keys and your personal calendar urls before posting the config file on the internet 🙂

              {
              	module: 'iFrame',
              	position: 'bottom_bar', // This can be any of the regions.
              	config: {
              		// See 'Configuration options' for more information.
              		url: "https://www.youtube.com/embed/6kgH6kqNuWM?list=PL24DEF584E7DBB4CF",
              		width: "50px", // Optional. Default: 100%
              		height: "50px", //Optional. Default: 100px
              	}
              },
              
              E K 2 Replies Last reply Reply Quote 1
              • R
                roramirez Core Contributors last edited by

                @kasperb @eugekiller as said @yawns, you need config only the URL not html code for iframe tag.

                1 Reply Last reply Reply Quote 0
                • E
                  eugekiller @yawns last edited by

                  @yawns said in Display web widget on mirror through iFrame?:

                  {
                  module: ‘iFrame’,
                  position: ‘bottom_bar’, // This can be any of the regions.
                  config: {
                  // See ‘Configuration options’ for more information.
                  url: “https://www.youtube.com/embed/6kgH6kqNuWM?list=PL24DEF584E7DBB4CF”,
                  width: “50px”, // Optional. Default: 100%
                  height: “50px”, //Optional. Default: 100px
                  }
                  },

                  Thanks that did it :). But one question any way to make it auto play?
                  Right now it loads it but i have to use the mouse to hit play on it.

                  1 Reply Last reply Reply Quote 0
                  • R
                    roramirez Core Contributors last edited by

                    Well, autoplay is a option of Youtube,

                    Add autoplay=1 to url

                    https://www.youtube.com/embed/6kgH6kqNuWM?list=PL24DEF584E7DBB4CF&autoplay=1

                    1 Reply Last reply Reply Quote 1
                    • E
                      eugekiller last edited by

                      Thank You Guys worked like a charm. 🙂

                      1 Reply Last reply Reply Quote 0
                      • K
                        kasperb @yawns last edited by

                        @yawns Great, thanks so much, it’s working now 🙂

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 5
                        • 6
                        • 1 / 6
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy