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
- 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) :
Displaying TRENDnet snapshot (displayLastUpdate: false) :
PING Nok (displayLastUpdate: true) :
PING OK but content not yet loaded (displayLastUpdate: true) :
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
cd ~/MagicMirror/modules/MMM-iFrame-Ping
git pull
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"
}
},
]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
|
Snapshot URL : http://website.com:port/image/jpeg.cgi (Works only without "Snapshot URL Authentication")
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 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:[email protected]/mjpeg.cgi. For more info, check out http://forums.dlink.com/index.php?PHPSESSID=ag1ne0jgnnl7uft3s1ssts14p4&topic=59173.0.
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
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
See MMM-iFrame-Ping.css file for details of configurable field
Several other iFrame modules exists for MagicMirror, main others:
- iFrame from desertblade : the original one with basics functions : one URL, no periodic refresh
- MMM-iFrame from alberttwong : allow several rotating URL but no periodic refresh of the content
- MMM-iFrameReload from TheBogueRat : one possible URL with periodic refresh
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent