Display web widget on mirror through iFrame?

[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
		}
	},
]

[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
	}
},

[roramirez]

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

[eugekiller]

@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.

[roramirez]

Well, autoplay is a option of Youtube,

Add autoplay=1 to url

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

[eugekiller]

Thank You Guys worked like a charm. :)

[kasperb]

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

[Mitch1138]

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

[roramirez]

@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?

[Mitch1138]

Thanks, I like your confidence in my abilities! I will keep working on trying to find a way to update the link.

[strawberry 3.141]

@Mitch1138 as a hint, check how other modules update their content.

[Mitch1138]

Thanks for the tip, but I didn’t have a lot of success. I punted and installed Auto Refresh Plus extension in Chrome. Running in server mode I can use this to refresh the page on a predefined time cycle.

[roramirez]

Is more easy than that. Check out the function and use of scheduleUpdate function.
https://github.com/MichMich/MagicMirror/blob/master/modules/default/currentweather/currentweather.js
Is of currentweather module.

[michael24h]

hello
I also heve problem with iframer. This is what put in my config. but can’t make auto play with adding -->&autoplay=1

{
			module: 'iFrame',
			position: 'bottom_left', // This can be any of the regions.
				config: {
				// See 'Configuration options' for more information.
                url:  src="https://www.youtube.com/embed/I7hV-5GHWhc",
                width: '360px', // Optional. Default: 100%
                height: '360px', //Optional. Default: 100px
				}
			
		},

[michael24h]

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

&autoplay=1

Anyone

[michael24h]

already resolved the problem, replace “&” with “?” in the url the video.

Thanks

[looolz]

same problem, still not working. Loading the module breaks the file. Here is my code:

	{
        module: 'iFrame',
        position: 'bottom_bar', // This can be any of the regions.
        config: {
            // See 'Configuration options' for more information.
                url: "http://www.yr.no/sted/Norge/Oslo/Oslo/Oslo/meteogram.png"
                width: "828px" // Optional. Default: 100%
                height: "272px" //Optional. Default: 100px
            }
        },

The only detail I’ve found in the documentation that seems a little off, is that it suggests the URL formatting to be as such:

url: "http:http://example.com/" 

But that still doesn’t work.

[michael24h]

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

http://www.yr.no/sted/Norge/Oslo/Oslo/Oslo/meteogram.png

this one work on my clock

{
module: ‘iFrame’,
position: ‘bottom_left’, // This can be any of the regions.
config: {
// See ‘Configuration options’ for more information.
url: “http://www.yr.no/sted/Norge/Oslo/Oslo/Oslo/meteogram.png”,
width: ‘220%’, // Optional. Default: 100%
height: ‘360px’, //Optional. Default: 100px
}

	},

[michael24h]

            url: "http://www.yr.no/sted/Norge/Oslo/Oslo/Oslo/meteogram.png",
           your missing " , " after .png

[looolz]

@michael24h aaaaaaaah!

Yes! That worked, thanks!