MMM-SmartWebDisplay : display web contents (including YouTube) on your MM

AgP42

Dear all,

Following several requests on my previous module MMM-iFrame-Ping, I have created a new one on the same topic (= web display using iFrame object) with different functionalities, see a comparison at the end.

Functionalities of this module :

Several rotating URLs, it is possible to change the URL to display through :
- a timer (configurable)
- through notification by any other module
- by http request (using MMM-RemoteControl)
- by a fork (modification) of MMM-RemoteControl that add a menu to control MMM-SmartWebDisplay, see screenshot bellow
Periodic refresh of the URL, or not (configurable), this allow to display images or video
Allow to receive notification for the following actions :
- Change the URL or the list of URLs to displays, and update refresh timer value and rotating timer value (This mean that you can change the video to display on your mirror by sending a message from your phone or PC)
- Go to the next/previous URL of the list
- Play/Pause/Stop the update and rotation of URLs
  These notifications can by sent by several other MM module and also (thanks to MMM-RemoteControl) by external http request, as for example IFTTT or Tasker (Android)
If a PIR-sensor using MMM-PIR-Sensor module is used, the display 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 MMM-SmartWebDisplay module is hidden (by MMM-RemoteControl or any Carousel module for example), the URL display will not be updated. As soon as one MMM-SmartWebDisplay 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)
Possibility to declare several instances (but so far the notification will address all the instances together)
CSS file

Screenshot :
The module displaying YouTube :

Modification of the module MMM-RemoteControl to allow controling MMM-SmartWebDisplay :

Comparison MMM-iFrame-Ping VS MMM-SmartWebDisplay :

Advantage MMM-iFrame-Ping :

only display content if reachable and display the last date and time it was reachable

Advantages MMM-SmartWebDisplay :

Several instances
Several URL with auto rotation possible
Notification to send new URL to display and to manage Next/Previous/Play/Pause/Stop commands
Special version of MMM-RemoteControl to allow Next/Previous/Play/Pause/Stop commands easily

Bugs and next to code:

Being able to send the new URL through MMM-RemoteControl
Manage the notification with several instances (to send the notification only to one instance and not all)
Any other idea ??

v2.0 - oct 2019

Add support of MMM-TelegramBot to send commands to the module

All infos and installation instruction :
[card:AgP42/MMM-SmartWebDisplay]

And the modified version of MMM-RemoteControl :
[card:AgP42/MMM-Remote-Control]

Seann

@agp42 Nice work! I recently added a similar modification to MMM-Remote-Control to submit custom url’s to an iframe, however I thought it might be a little difficult for people to use. I mainly created it for youtube and after all of my work on it I realized there’s already a youtube module which allows you to connect to the mirror as a smart device.

shbatm

@AgP42 Nice work!

Just to let you know, I did a bunch of work on a version of MMM-Remote-Control that automatically exposes an API for controlling other modules, and each module can send a notification with it’s own capabilities/API. It sounds like a good use case for this module. Instead of maintaining a separate fork, you send a module notification on startup with the capabilities, and it will automatically add a menu item to the Remote Control as well as add an API path at http://magicmirrorip:8080/api/module/smartwebdisplay/. Right now you could accept a URL from the API, but I still haven’t implemented a custom payload from the remote (you can still send the play/pause/etc. commands.

AgP42

@seann

Thanks for your support ! ;-)
Yes it is also very oft my problem : I send time to develop something and then I realize that someone else already did it much better !
But it least it’s fun and you always learn better by doing youself !:smiling_face_with_open_mouth_cold_sweat:

Seann

@agp42 Can’t agree more, I did enjoy learning how to do it myself and already what I learned has came in handy for another module I have worked on. It’s still good to have ideas like this too.
I’m looking forward to seeing your code for sending the new URL through the control too. Keep up the good work.

AgP42

@shbatm

Good to know, it fact I am very unsatisfied that I had to create a “bad fork” of RemoteControl, it is a dirty way to work and I don’t really like that… :face_with_cold_sweat:

Did you create a dedicated post for your fork and API ?

If RemoteControl is not maintained anymore as it seams to be, it can be a good idea to create a new “major fork” maintained with new functions as for example API for the possibility for other module to integrate menu easily !

The official MMM-RemoteControl has already 56 fork ! :face_screaming_in_fear:
It will be interesting to see if they contains interesting features and having a new major branch.

I didn’t look into your code deeply yet but I will do it and try to use it for my need instead of my own fork…

Anyway I don’t have enough time myself to invest into the creation of the NextRemoteControl, but if you do so I will definitively follow and support that great initiative !

AgP42

@seann :thumbs_up_light_skin_tone:

rafaelcota

This looks great, I’ll try it, but since you’re asking for other ideas, probably it will be a good one to make it compatible with MMM-TelegramBot, that way you can control your NEXT, PREV, etc from outside your local network using Telegram.
Enjoy

AgP42

@rafaelcota

I didn’t know the MMM-TelegramBot, but I just check the documentation (incredibly well written ! :face_with_tears_of_joy: ) and it seams very easy to integrate, so I will add it on my coding to do list for the next version !

Thanks for the tip !

swvalenti

Question, so this could display a RTSP security camera feed?

AgP42

@swvalenti
No, it can display anything (or almost) that can be displayed on a web browser, so not an RTSP camera feed.
But for this you can use MMM-RTSPStream

swvalenti

@agp42 said in MMM-SmartWebDisplay : display web contents (including YouTube) on your MM:

@swvalenti
No, it can display anything (or almost) that can be displayed on a web browser, so not an RTSP camera feed.
But for this you can use MMM-RTSPStream

@AgP42 Understood thanks for responding.

shbatm

@agp42 said in MMM-SmartWebDisplay : display web contents (including YouTube) on your MM:

Did you create a dedicated post for your fork and API ?

https://forum.magicmirror.builders/topic/9291/mmm-remote-control-v2-dev-extensible-rest-api-dynamic-menus-and-socket-communications-plus-other-updates

@Jopyth is still the maintainer of MMM-Remote-Control, and I’ve sent a PR to have my changes included in the official repo; if he’s anything like me, this is a hobby and efforts on it come and go as time and other projects allow. Feel free to use my fork for now and if/when they get merged, I’ll let you know. I’ve been trying to include several Issue fixes in my branch as well to wrap them all up into 1 update.

Zwirbel

@AgP42 Could you explain how to “declare several instances” with this module? I tried to add it twice (once for bottom_left and once for bottom_middle, but it only shows the iFrame of bottom_left…

Zwirbel

Ok, I have found the error myself: the position “bottom_middle” does not exist, I have to use “bottom_center”. Now it works!

Anthony

@AgP42
I already have installed MMM-RemoteControl in my MM. If I remove it and reinstall it from your repository will it install the new feture as well to control SWD?

peterh

I’m loving this module, but having slight issue. it seems if i use the adjustment for height or width the area resizes but does not scale the image by the percentage as i would expect.

                            height:"50 %", //hauteur du cadre en pixel ou %
                            width:"50 %", //largeur

produces a 50 pixel square image

and

                          height:"50%", //hauteur du cadre en pixel ou %
                            width:"50%", //largeur

produces an image that is half the size but cropped, showing only the top left 1/4 of the image.

If anyone can see an error in my config please let me know :-)

  {
  module: 'MMM-SmartWebDisplay',
  header: "South Doodlakine Radar",
  position: 'bottom_right',       // This can be any of the regions.
  config: {
                 logDebug: false, //set to true to get detailed debug logs. To see them : "Ctrl+Shift+i"
                 //height:"524", //hauteur du cadre en pixel ou %
                 //width:"564", //largeur
                 height:"50%", //hauteur du cadre en pixel ou %
                 width:"50%", //largeur
                 updateInterval: 1, 
                 NextURLInterval: 0.5, 
                 displayStateInfos: false, 
                 displayLastUpdate: false,
                 displayLastUpdateFormat: 'ddd - HH:mm:ss', //format of the date and time to display
                 url: ["http://www.bom.gov.au/radar/IDR58B.gif?123", "http://www.bom.gov.au/radar/IDR58B.gif?345"], 
                 scrolling: "no" 
               }
  },

regards

PeterH

lukas1760

Great job! But…is it possible to show html file saved in rpi folder?

zjonesz

Have the same problem as PeterH, does anyone have a fix?

smassy

@AgP42 said in MMM-SmartWebDisplay : display web contents (including YouTube) on your MM:

through notification by any other module

Hello,

First: Good job, module is very nice and easy to implement.

I have a little problem to understand how to change URL by notification from another module. I am using MMM-Assistant2 with a recipe but I’m not sure how to configure it. A little help would be greatly appreciated.

config.js:
{
module: ‘MMM-SmartWebDisplay’,
position: ‘bottom_left’, // This can be any of the regions.
config: {
// See ‘Configuration options’ for more information.
logDebug: false, //set to true to get detailed debug logs. To see them : “Ctrl+Shift+i”
height:“200px”, //hauteur du cadre en pixel ou %
width:“300px”, //largeur
updateInterval: 0, //in min. Set it to 0 for no refresh (for videos)
NextURLInterval: 0, //in min, set it to 0 not to have automatic URL change. If only 1 URL given, it will be updated
displayStateInfos: false, //to display if the module is on autoloop, or stop.
displayLastUpdate: true, //to display the last update of the URL
displayLastUpdateFormat: ‘ddd - HH:mm:ss’, //format of the date and time to display
url: [“https://www.youtube.com/embed/9xXww6Yyl34?list=PLa51J4RKCoTXCfr-qubj2FUgPADypF3Gk”], //source of the URL to be displayed
scrolling: “no” // allow scrolling or not. html 4 only
}
},

Recipe (playlist.js)
var recipe = {
transcriptionHook: {
“playlist_sylvain”: {
pattern: “liste sylvain”,
command: “playlist_1”
},
},
command: {
“playlist_1”: {
moduleExec: {
module: [“MMM-SmartWebDisplay”],
exec: (module, params, key) => {
module: ({url: [“http://www.google.com”]}) //test url
}
}
},
},
}
exports.recipe = recipe

What I am missing?

Thank you!

MMM-SmartWebDisplay : display web contents (including YouTube) on your MM

My fork

API Details:

Use Case: