Skip to content
Module for MagicMirror² that allow to display an iFrame of (m)any web content to your MagicMirror²
JavaScript CSS
Branch: master
Clone or download

README.md

MMM-iFrame-Ping

The MMM-iFrame-Ping module is for MagicMirror². It allow to display an iFrame of (m)any web content to your MagicMirror. Infortunately, not all websites support being in a iFrame.

MagicMirror Forum post : https://forum.magicmirror.builders/topic/8481/mmm-iframe-ping

Main functionalities

  • Allow periodic refresh of the iFrame, or not (configurable), this allow to display images or video
  • Ping the URL before trying to display the content. Display an error (with the last successful PING date and time) if the host is not reachable. PING code from MMM-Ping by CFenner
  • If a PIR-sensor using MMM-PIR-Sensor module is used, the iFrame will not be updated during screen off (this behavior works also with all other module that send the notification "USER_PRESENCE") and will be refresh with screen on.
  • If the iFrame-Ping module is hidden (by REMOTE-CONTROL or any Carousel module for example), the iFrame will not be updated. As soon as one MMM-iFrame-Ping module will be again displayed on the screen, an update will be requested.
  • Possibility to display the date and time of the last update request (configurable)
  • CSS file

Known issue :

  • In case the url can be reach by PING but cannot be displayed on a iFrame, no info will be given... To debug this case look on the MagicMirror console (Ctrl+Shit+i) and search the error. In that situation, no PING result will be displayed (Neither OK nor NOK ! No info !)

Some screenshot :

Displaying YouTube (displayLastUpdate: true) : MMM-iFrame-Ping

Displaying TRENDnet snapshot (displayLastUpdate: false) : MMM-iFrame-Ping

PING Nok (displayLastUpdate: true) : MMM-iFrame-Ping

PING OK but content not yet loaded (displayLastUpdate: true) : MMM-iFrame-Ping

Installation

Git clone this repo into ~/MagicMirror/modules directory :

cd ~/MagicMirror/modules
git clone https://github.com/AgP42/MMM-iFrame-Ping.git

and add the configuration section in your Magic Mirror config file

Update

cd ~/MagicMirror/modules/MMM-iFrame-Ping
git pull

Module configuration

To use this module, add it to the modules array in the config/config.js file:

modules: [
	{
		module: 'MMM-iFrame-Ping',
		position: 'middle_center',	// This can be any of the regions.
		config: {
			// See 'Configuration options' for more information.
			url: "https://magicmirror.builders/", //url to display
			height:"100%", 
			width:"100%",
			autoRefresh: true, //set to false for video
			updateInterval: 1, //in min. Only if autoRefresh: true
			displayLastUpdate: true,
			width: "100%", // Optional. Default: 100%
			height: "400px", //Optional. Default: 100px
			scrolling: "no" 
			}
	},
]

Configuration options

The following properties can be configured:

Option Description
url the URL in the iFrame

Example: See use case examples bellow. https://github.com/AgP42/MMM-iFrame-Ping/blob/master/README.md#use-case-examples
Default value: "http://magicmirror.builders/"
width the width of the iFrame

Example:"100%"
Example:"200px"
Default value: "100%"
height the width of the iFrame

Example:"100%"
Example:"300px"
Default value: "100px"
scrolling Allow a scroll bar or not

Default value: "no"
autoRefresh Set to true to allow an autorefresh of the iFrame

Default value: true
updateInterval the update internal for the iFrame, in minutes. If autoRefresh: true

Example for 30 seconds:0.5
Default value: 0.5
displayLastUpdate If true this will display the last update time at the end of the task list. See screenshot bellow

Possible values: boolean
Default value: false
displayLastUpdateFormat Format to use for the time display if displayLastUpdate:true

Possible values: See [Moment.js formats](http://momentjs.com/docs/#/parsing/string-format/)
Default value: 'ddd - HH:mm:ss'
logDebug Set to true to have all log infos on the console

Default value: false

Use case examples

TRENDnet camera (snapshots)

Snapshot URL : http://website.com:port/image/jpeg.cgi (Works only without "Snapshot URL Authentication")

Nest Camera streaming

Nest Camera doesn't support the PING, consequently this module will not be able to display them (Issue). Please use another iFrame module to display Nest Camera stream...(See bellow)

D-Link Camera streaming

D-Link cameras streams can be easily embedded into an iFrame. Some cameras require a username and password. You can construct a URL that looks like this http://admin:password@10.0.1.7/mjpeg.cgi. For more info, check out http://forums.dlink.com/index.php?PHPSESSID=ag1ne0jgnnl7uft3s1ssts14p4&topic=59173.0.

Youtube streaming

Just got to the video you want (see bellow more details). Click share and embed and pull out the url and add the autoplay parameter (eg. https://www.youtube.com/embed/pcmjht0Hqvw?autoplay=1).

Youtube playlist streaming (thanks to theramez)

You can stream any public playlist or make your own playlist (this requires a youtube account). With your own playlist streaming on the mirror, you are able to change the contents directly on YouTube (adding videos, removing others, adding live channels and broadcasts..etc) using your mobile or desktop, without changing anything to the mirror and it'll be updated automatically 🥇

To do so : firstly, go to the first video in any playlist, right click and choose Copy embed code as seen here MMM-iFrame-Ping

now paste it on any notepad. It should look like that :

<iframe width="853" height="480" src="https://www.youtube.com/embed/XMIc4uTAMh0?list=PLbIZ6k-SE9ShGEZ_wuvG3hatiC6jWJgVm" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

we only need the source src part so copy this part only, it should look like that :

https://www.youtube.com/embed/XMIc4uTAMh0?list=PLbIZ6k-SE9ShGEZ_wuvG3hatiC6jWJgVm

copy this link to the module url: in config.js file and voila! you've a full playlist in your mirror... but wait a minute videos are not auto playable and I want to add a shuffle! also what happens when the list play is finished? here comes the fun part (^_^) you can simply add tags called YouTube player parameters within your link just like that link&TAG so in our example to enable autoplay add tag:

autoplay=1

so our link will be

https://www.youtube.com/embed/XMIc4uTAMh0?list=PLbIZ6k-SE9ShGEZ_wuvG3hatiC6jWJgVm&autoplay=1

you can add multiple tags like link&TAG1&TAG2&TAG3 to enable list repeating add tag

loop=1

to remove the YouTube logo from the control bar add

modestbranding=1

to disable videos annotations add

iv_load_policy=3

Small hint: you can test your link in the browser easily : just open a new tab and paste it to see how it will be exactly on the mirror

so we'll edit our link to make it autoplayable and disable annoying annotations and remove YouTube logo

https://www.youtube.com/embed/XMIc4uTAMh0?list=PLbIZ6k-SE9ShGEZ_wuvG3hatiC6jWJgVm&autoplay=1&modestbranding=1&iv_load_policy=3

wanna edit the YouTube player more ? here is the full list of tags in The Official YouTube API page under Supported Parameters table : to disable keyboard inputs to the player, add

disablekb=1

to disable the player controls completely for more clean look, add

controls=0

CSS use

See MMM-iFrame-Ping.css file for details of configurable field

Other iFrame modules:

Several other iFrame modules exists for MagicMirror, main others:

The MIT License (MIT)

Copyright © 2018 Agathe Pinel

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

The software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

You can’t perform that action at this time.