• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Display web widget on mirror through iFrame?

Scheduled Pinned Locked Moved Troubleshooting
60 Posts 9 Posters 60.2k Views 9 Watching
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 Offline
    kasperb @roramirez
    last edited by Dec 6, 2016, 2:43 AM

    @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 Offline
      eugekiller
      last edited by eugekiller Dec 6, 2016, 2:29 PM Dec 6, 2016, 1:59 PM

      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
      • Y Offline
        yawns Moderator
        last edited by yawns Dec 6, 2016, 2:08 PM Dec 6, 2016, 2:07 PM

        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 Dec 6, 2016, 2:36 PM Reply Quote 1
        • R Offline
          roramirez Core Contributors
          last edited by Dec 6, 2016, 2:25 PM

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

          Easy module development with MagicMirror Module Template

          1 Reply Last reply Reply Quote 0
          • E Offline
            eugekiller @yawns
            last edited by Dec 6, 2016, 2:36 PM

            @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 Offline
              roramirez Core Contributors
              last edited by Dec 6, 2016, 2:38 PM

              Well, autoplay is a option of Youtube,

              Add autoplay=1 to url

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

              Easy module development with MagicMirror Module Template

              1 Reply Last reply Reply Quote 1
              • E Offline
                eugekiller
                last edited by Dec 6, 2016, 2:52 PM

                Thank You Guys worked like a charm. :)

                1 Reply Last reply Reply Quote 0
                • K Offline
                  kasperb @yawns
                  last edited by Dec 7, 2016, 1:47 AM

                  @yawns Great, thanks so much, it’s working now :-)

                  1 Reply Last reply Reply Quote 0
                  • Mitch1138M Offline
                    Mitch1138
                    last edited by Jan 17, 2017, 6:24 PM

                    I am able to get iFrame to display a widget and it works well, the the widget is not updated. Is there a way to force an update every 15 min or so?

                    Thanks, Mitch

                    R 1 Reply Last reply Jan 18, 2017, 12:19 AM Reply Quote 0
                    • R Offline
                      roramirez Core Contributors @Mitch1138
                      last edited by Jan 18, 2017, 12:19 AM

                      @Mitch1138 There no way to force update using iFrame. Its a something is possible add a option for autorefresh. I think will not difficult added. Why do you no try?

                      Easy module development with MagicMirror Module Template

                      1 Reply Last reply Reply Quote 1
                      • 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 Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy