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