Display web widget on mirror through iFrame?

[kasperb]

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.

[roramirez]

Hi,

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

[kasperb]

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

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