Display web widget on mirror through 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?