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

AgP42

unfortunately it is not easy, this is due to safety mechanisms of iframes that prevent to send password…

Personally I just removed the password of my camera :face_screaming_in_fear:

But you can try some cleverer solutions, search google for “iframe password” or “iframe authentifaction” and you can try to get some clues.
Here is one answer that I found interesting : https://stackoverflow.com/questions/15639280/basic-authentication-for-a-url-in-an-iframe

If you find a way, please let us know !
(and if it include some change on the code, I can also implement it, but so far I didn’t find any technical way…)

Good luck !

AgP42

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

@sdetweil

Yes, I restarted my Pi and normal link is playing video now
https://www.youtube.com/embed/JGwWNGJdvx8?autoplay=1

~~My playlist is still not working
https://www.youtube.com/embed/0-rG98j2DWE?list=PLa51J4RKCoTXCfr-qubj2FUgPADypF3Gk?autoplay=1~~

scratch that it’s working!!! :-) something must needed a refresh in the services

Great !

Happy to read that ! Enjoy your wonderfull Mirror :smiling_face_with_open_mouth_smiling_eyes:

Chris62

@AgP42

Hi

I don’t actually have a password set for the camera, it has been factory reset to the defaults which just gives a username admin and a blank password field. My url looks like this http://admin:@ipaddress:port/video/mjpg.cgi. Maybe this is the cause of the issue?

Chris.

smassy

@AgP42

Hello again, I’m trying to use the embeded calls “SWD_…” but there is something I’m not getting.

var recipe = {
  transcriptionHook: {
    "playlist_sylvain": {
      pattern: "liste sylvain",
      command: "playlist_1"
    },
    "playlist_lewis": {
      pattern: "liste lewis capaldi",
      command: "playlist_2"
    },
    "playlist_pause": {
      pattern: "arrêt lecture",
      command: "playlist_pause"
    },
    "playlist_play": {
      pattern: "démarre lecture",
      command: "playlist_play"
    },

  },
  command: {
     "playlist_1": {
             notificationExec: {
                     notification: "SWD_URL",
                     payload: {
                             url:["https://www.youtube.com/embed/0-rG98j2DWE?list=PLa51J4RKCoTXCfr-qubj2FUgPADypF3Gk&autoplay=1"],
                     }
             }
     },
     "playlist_2": {
             notificationExec: {
                    notification: "SWD_URL",
                    payload: {
                            url:["https://www.youtube.com/embed/bCuhuePlP8o?list=RDEMsPjiovzEgfLLK2w1FvFTOg&autoplay=1"],
                    }
             }
     },
     "playlist_pause": {
             notificationExec: {
                    notification: "SWD_PAUSE",
                    }
             },
     "playlist_play": {
             notificationExec: {
                    notification: "SWD_PLAY",
                    }
             },
     },
}

exports.recipe = recipe

Lists are starting correctly but when calling SWD_PAUSE it’s doing nothing and SWD_PLAY restart the list at beginning. Any clue?

AgP42

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

@AgP42

Hello again, I’m trying to use the embeded calls “SWD_…” but there is something I’m not getting.
Lists are starting correctly but when calling SWD_PAUSE it’s doing nothing and SWD_PLAY restart the list at beginning. Any clue?

Hello,

yes, it is (unfortunately) the normal behavior, as written on the documentation :

- Play(or restart)/Pause/Stop the update and rotation of URLs

In fact I cannot stop the video itself, as it would imply to be connected to YouTube API. Here we “just” display the video. The function “play/pause” are for the rotation of the videos or playlist. If you want to stop the video, the best way will be to have an empty playlist that you can start to stop everything else.

I know it is bad looking and not intuitive, but I cannot do better with the technical solution with iFrames…

Sorry !

Newtothis

@AgP42

Hi!

Love the module, very well done!

I am using MMM-TelegramBot to control my Mirror, did you ever look into seeing if you could intergrate your module with Telegram?

Thanks

:)

AgP42

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

@AgP42

Hi!

Love the module, very well done!

I am using MMM-TelegramBot to control my Mirror, did you ever look into seeing if you could intergrate your module with Telegram?

Thanks

:)

Hi,

yes I remember that I had a look on it some months ago and by that time I thought it will not be very complicated to do…
I don’t really have much time thoses weeks (even months…), but yes someday I may develop that interface ;-)

Newtothis

@AgP42 No worries! Thanks for the reply :)

ueffchen

Hi
the module loads initially after updating config.js or rebooting the MM, but it doesn’t refresh the iframe.
Is there anything in the settings that I should do different?
Thanks, ueffchen

{
		module: 'MMM-SmartWebDisplay',
		position: 'top_right',	// 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:"330px", //hauteur du cadre en pixel ou %
			width:"330px", //largeur
               		updateInterval: 30, //in min. Set it to 0 for no refresh (for videos)
                	NextURLInterval: 30, //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: false, //to display the last update of the URL
			displayLastUpdateFormat: 'ddd - HH:mm:ss', //format of the date and time to display
                	url: ["https://gadgets.buienradar.nl/gadget/zoommap/?lat=51.29724&lng=6.84929&overname=2&zoom=11&naam=ratingen&size=2b&voor=1"],         	
			scrolling: "no" // allow scrolling or not. html 4 only
			}
	},

Alain

@ueffchen I have the exact same problem. However, for some reason, when I turn the “displayLastUpdate:” to “true”, it begins updating at the interval set in “updateInterval”. Turn it back to “false”, and it stops updating.

Not ideal, since it displays a line of information I don’t want to see; but it does refresh.

If someone could help, I would appreciate it too!

Thank you
Alain

AgP42

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

Hi
the module loads initially after updating config.js or rebooting the MM, but it doesn’t refresh the iframe.
Is there anything in the settings that I should do different?
Thanks, ueffchen

{
		module: 'MMM-SmartWebDisplay',
		position: 'top_right',	// 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:"330px", //hauteur du cadre en pixel ou %
			width:"330px", //largeur
               		updateInterval: 30, //in min. Set it to 0 for no refresh (for videos)
                	NextURLInterval: 30, //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: false, //to display the last update of the URL
			displayLastUpdateFormat: 'ddd - HH:mm:ss', //format of the date and time to display
                	url: ["https://gadgets.buienradar.nl/gadget/zoommap/?lat=51.29724&lng=6.84929&overname=2&zoom=11&naam=ratingen&size=2b&voor=1"],         	
			scrolling: "no" // allow scrolling or not. html 4 only
			}
	},

Hi @ueffchen,

when I test the url on iFrame tester (here : iFrame), I don’t need any refresh, the radar is live display without any refresh.
Isn’t it the same on the mirror ?

Otherwise on the config, as you have only 1 URL, this param "NextURLInterval: 30, " has to be set to 0 (but it cannot be the reason of non-refresh…)

And as you set the "updateInterval: 30, ", then here you request a refresh every 30 MINUTES, was it the refresh you wanted ?

Bye,
AgP

AgP42

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

@ueffchen I have the exact same problem. However, for some reason, when I turn the “displayLastUpdate:” to “true”, it begins updating at the interval set in “updateInterval”. Turn it back to “false”, and it stops updating.

Not ideal, since it displays a line of information I don’t want to see; but it does refresh.

If someone could help, I would appreciate it too!

Thank you
Alain

Hello @Alain ,

yes strange behavior indeed !

Could you please share your full config to check what could be wrong ?

Thanks,
AgP

Phil__

This post is deleted!

brotherbrown831

I have seen a few examples of people displaying Action-tiles URLs in the MM. The action-tiles team does not allow username and passwords to be passed in the URL, the user must login to Action-tiles and then can navigate directly to the URL. Is there a solution to this requirement within SmartWebDisplay?

AgP42

@brotherbrown831
sorry but I don’t understand what you want to do, do you want to use a URL with a name and password on it ?
Or do you want to use a pop up to log in and then access a URL ?
You say “the action-tiles team”, what it this ? Do you have any documentation ?

Thanks for a bit more detail ;-)

AgP42

@Newtothis @rafaelcota

You asked the compatibility with the module MMM-TelegramBot, and I finally took the time today to integrate it.

It is in “beta” so far, I must now write the documentation (really less fun that writing code :smiling_face_with_halo: )

The code is here : https://github.com/AgP42/MMM-SmartWebDisplay/tree/beta, if you could test and let me know your feedback it will be very appreciated !!

The commands are (still time to change them if you don’t like thoses ones…) :
/swd_next
/swd_prev
/swd_play
/swd_pause
/swd_stop
/swd_url (then the url you want to display on your MagicMirror)
for example “/swd_url http://magicmirror.builders/”

for the URL I didn’t give the possibility to send a list, but could be improved.

Thanks for your feedback !

AgP42

Hello,

I finalize the version, it is now available for everyone !

To update (as every module) :

cd ~/MagicMirror/modules/MMM-SmartWebDisplay
git pull

Enjoy ;-)

Alain

@AgP42 Hi - sorry for not replying sooner.
Full config file as follows:

/* Magic Mirror Config Sample
 *
 * By Michael Teeuw http://michaelteeuw.nl
 * MIT Licensed.
 *
 * For more information how you can configurate this file
 * See https://github.com/MichMich/MagicMirror#configuration
 *
 */

var config = {
address: "0.0.0.0", // Address to listen on, can be:
                     // - "localhost", "127.0.0.1", "::1" to listen on loopback interface
                     // - another specific IPv4/6 to listen on a specific interface
                     // - "", "0.0.0.0", "::" to listen on any interface
                     // Default, when address config is left out, is "localhost"
port: 8080,
ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1", "192.168.0.43", "192.168.0.46"], // Set [] to allow all IP addresses
                                                      // or add a specific IPv4 of 192.168.1.5 :
                                                      // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
                                                      // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
                                                      // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

language: "en",
timeFormat: 24,
units: "metric",

modules: [
{
module: "alert",
},
{
module: "updatenotification",
position: "top_bar"
},
{
module: "clock",
position: "top_left"
},
{
module: "calendar",
header: "US Holidays",
position: "bottom_right",
config: {
calendars: [
{
symbol: "calendar-check",
url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics" }
]
}
},
{
module: "compliments",
position: "middle_center"
},
{
module: "currentweather",
position: "top_left",
config: {
location: "Satellite Beach",
locationID: "4172173",  //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
appid: "xxx"
}
},
{
module: "weatherforecast",
position: "bottom_left",
header: "Weather Forecast",
config: {
location: "Satellite Beach",
locationID: "4172173",  //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
appid: "xxx"
}
},
{
module: "newsfeed",
position: "bottom_bar",
config: {
feeds: [
{
title: "New York Times",
url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml"
}
],
showSourceTitle: true,
showPublishDate: true,
broadcastNewsFeeds: true,
broadcastNewsUpdates: true
}
  },
{
      module: "MMM-Remote-Control",
// position: "top_right",
        // uncomment the following line to show the URL of the remote control on the mirror
        // you can hide this module afterwards from the remote control itself
        config: {
            apiKey: "xxx"
        }
    },
{
module: "MMM-SmartWebDisplay",
position: "top_right", // This can be any of the regions.
config: {
// See 'Configuration options' for more information.
logDebug: true, //set to true to get detailed debug logs. To see them : "Ctrl+Shift+i"
height:"300px", //hauteur du cadre en pixel ou %
width:"525px", //largeur
                updateInterval: 1, //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: 'HH:mm:ss', //format of the date and time to display
                url: ["https://xxx/public/magic1.html"], //source of the URL to be displayed
scrolling: "no" // allow scrolling or not. html 4 only
}
  },
{
module: "MMM-PIR-Sensor",
config: {
sensorPin: 22,
powerSavingNotification: false,
powerSavingDelay: 100
}
},
{
        module: "MMM-Astronauts",
        position: "bottom_center",
        config: {
useHeader: false,                // true if you want a header      
header: "",                      // Change in config file. useHeader must be true
maxWidth: "300px",
animationSpeed: 3000,            // fade speed
        }
    },
]

};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}

AgP42

Hi @Alain,

first please remove all your apikey on your post before :winking_face:

I see that you also use the MMM-PIR-sensor module, with a delay of 100s, this is probably the root cause of the strange behavior that you saw.

Let me explains you my analysis :

Here is how this sensor work (Source) :
PIR

The delay of detection or non-detection as to be set directly on the sensor !

So your sensor will sent to the module “MMM-PIR-Sensor” 2 possible states “HIGH” (presence) or “LOW” (no presence).

Each time the MMM-PIR-Sensor will receive a modification of the sensor status, it will sent immediately (to everyone, so to MMM-SmartWebDisplay too) a notification saying “USER_PRESENCE=true” or false.

Developer Notes (MMM-PIR-Sensor)

This module broadcasts a USER_PRESENCE notification with the payload beeing true or false you can use it to pause or disable your module.

The “powerSavingDelay” is applied after this notification is sent to everyone.

And my module “MMM-SmartWebDisplay” use this notification to stop and restart the update timer.

So by setting 100s of delay on the MMM-PIR-Sensor module, it probably totally mix up all the update timer management of my module. :loudly_crying_face:

A small example :

Nobody in front of the mirror for long time, so Mirror is off
you arrives close to the Mirror, that activate the PIR sensor, the Mirror wakes up and MMM-SmartWebDisplay also wakes up, update the html page to display and set a new refresh in 1 min (because you configure it with 1min)
your sensor doesn’t detects you anymore : during 100s, so 1min40s your Mirror will stay ON without any notification (because you desactivate “powerSavingNotification”), but MMM-SmartWebDisplay (and all other modules) received the notification “USER_PRESENCE=false”, so MMM-SmartWebDisplay stops the update of the html page.
if your sensor detects you again during this 100s, then you should see the update of the html (directly when the sensor will send the info to the Mirror) --> Do you confirm this ?

So for me your problem is on the adjustment of your PIR sensor and the value you set for this module configuration. You can follow this very good page to adjust correctly your sensor : PIR sensor

Personally I adjust the detection delay on the sensor itself and I just set 10s of “powerSavingDelay” after a notification (powerSavingNotification: true).

I hope my explaination was clear enough !

Good luck and let me know if you still face issues,

Bye
AgP42

BD0G

@brotherbrown831
Sure. What one does is create an actiontiles panel that they want displayed. Then copy the URL that points directly at the panel. This URL must use the http:// prefix in the address and cannot start with just panel.actiontiles.com/
Then turn the refresh setting within the config.js settings to 0
(for no refresh)
The first time that MMM-SmartWebDisplay loads the page/actiontiles panel one will be prompted to log on. Use your credentials to log on. They will be saved by the browser that is running your MagicMirror instance.

Then in the future MMM-SmartWebDisplay will just display the panel itself without the need to log on each time. So there is no need to pass the username and password “within” the URL address. There is a caveat. If you panel contains camera feeds (live Video or Still Image) your camera tile within the panel “may” need logon details like username and password to display. These will not work as username and password cannot be “passed” within the
URL string and be processed.
Just create a panel without the camera streams to be displayed.