Node Red: A widget based dashboard working with Homey trough MQTT

Solved!

Hi - in order to keeping the screen on / activating the screen for node red, I have found an android app which can do exactly that - enable screen when moving / keep screen on (not recommended due to potential burn-in).

I use the Fully Kiosk Browser since a few weeks. The paid version has the feature to keep the screen on. Many other features are there but for me this was a missing key feature.

One problem down - 99 to go :stuck_out_tongue:

Fully Kiosk Browser works great once you’ve set it up completely.
You can also send commands to the browser with actions from node-red. And you can set up Fully remotely, so if your dashboard screen is build into a wall you don’t have to dismount it every time to set up.
You can turn the screen on/off on events, which is great when, for example, motion is detected on your security camera or the doorbell rings and immediately shows the video feed.

Currently my dashboard screen always turns into a photo slideshow.
When you walk by it’s activated by camera motion.
But when the doorbell rings node-red sends a command to stop the screensaver/slideshow, and to turn on the screen. Then my doorbell video pop-ups full screen for 60 seconds.

For whoever is looking for a full-screen video feed for “X” seconds after a certain action (doorbell or motion detection) that displays on the Fully Kiosk Browser (no matter the current state).

Here’s my little tutorial.
First make sure that external access is activated in the Kios Browser in order to receive commands.

[ 1 ]
Now you have to create a flow that publishes true or false in a certain topic.
Of course you can change this according to your own actions to trigger this event.
In here also is the trigger to hide the video feed after 60 seconds.

[ 2 ]
Then you have to create a new group in your tab.
Mine is called “Er is aangebeld” (translates to doorbell rings).
You can create this group on all of your tabs if you want this to work on all of your tabs.

Now it’s important this group is the first group in your tab, and the size is set up to be full screen on your dashboard (for example 24 blocks wide).

[ 3 ]
Once the group is created you can put your video feed in with a template node from the dashboard menu.
For example:

[{"id":"b9729ece.63eb6","type":"ui_template","z":"bbff3fe8.ed376","group":"93b4660d.f54d08","name":"Deurbel video","order":2,"width":20,"height":16,"format":"<iframe type=\"text/html\" frameborder=\"0\" align = \"center\" width=\"1100\" height=\"700\" src=\"//video.nest.com/embedded/live/XXXXXXXXXXX?autoplay=1\" allowfullscreen></iframe>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1820,"y":300,"wires":[[]]},{"id":"93b4660d.f54d08","type":"ui_group","name":"Er is aangebeld","tab":"8146c75c.872268","order":1,"disp":false,"width":"24","collapse":false},{"id":"8146c75c.872268","type":"ui_tab","name":"Huis","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

[ 4 ]
In node red we first need to always hide this group at load.

[{"id":"25c2555a.8316aa","type":"inject","z":"bbff3fe8.ed376","name":"Hide Nest Hello at Load","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"{\"group\":{\"hide\":[\"Huis_Er_is_aangebeld\"]}}","payloadType":"json","x":1410,"y":80,"wires":[["96251858.4edc08"]]},{"id":"96251858.4edc08","type":"ui_ui_control","z":"bbff3fe8.ed376","name":"","x":1660,"y":80,"wires":[[]]}]

- Change “Huis” to your own tab name, and change “Er_is_aangebeld” to your own group name.

[ 5 ]
Now you have to create an action for both Node-RED and the Kiosk browser.
A- To show the Node-RED group triggered by the action.
B- To stop the screensaver (if running)
C- To turn on the screen
D- To hide the group again after “X” seconds (time is set in the homey flow).

[{"id":"9ef4589d.288bb8","type":"ui_ui_control","z":"bbff3fe8.ed376","name":"","x":1900,"y":140,"wires":[[]]},{"id":"723c342b.42680c","type":"mqtt in","z":"bbff3fe8.ed376","name":"","topic":"homie/homey-topic/nest/doorbell","qos":"2","datatype":"auto","broker":"d094d3b7.a558a8","nl":false,"rap":true,"rh":0,"x":1410,"y":140,"wires":[["6a9e888b.416d48","743aaee2.dafeb","a4a6c4b.80b4c38"]]},{"id":"6a9e888b.416d48","type":"function","z":"bbff3fe8.ed376","name":"Show Nest Hello","func":"if(msg.payload === \"true\"){\n   msg.payload = {\"group\":{\"show\":[\"Huis_Er_is_aangebeld\"]}};  \n}else{\n   msg.payload = {\"group\":{\"hide\":[\"Huis_Er_is_aangebeld\"]}};\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1690,"y":140,"wires":[["9ef4589d.288bb8"]]},{"id":"743aaee2.dafeb","type":"http request","z":"bbff3fe8.ed376","name":"","method":"GET","ret":"txt","paytoqs":"ignore","url":"http://192.168.1.XX:2323/?cmd=screenOn&password=PASSWORD","tls":"","persist":false,"proxy":"","authType":"","x":1670,"y":180,"wires":[[]]},{"id":"a4a6c4b.80b4c38","type":"http request","z":"bbff3fe8.ed376","name":"","method":"GET","ret":"txt","paytoqs":"ignore","url":"http://192.168.1.XX:2323/?cmd=stopScreensaver&password=PASSWORD","tls":"","persist":false,"proxy":"","authType":"","x":1630,"y":220,"wires":[[]]},{"id":"d094d3b7.a558a8","type":"mqtt-broker","name":"Homey MQTT","broker":"192.168.1.77","port":"1883","clientid":"","usetls":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"sessionExpiry":""}]

- In the function node, change “Huis” to your own tab name, and change “Er_is_aangebeld” to your own group name.
- In the http request node, change IP and Password according to the IP and Password of your Fully Kios Browser.

Then you should have something like this:

.

Yes I know my garden is a mess :see_no_evil:, it will be redone next month… :laughing:

3 Likes

@Cuprani, great tutorial … thanks for sharing.

I have a large android touch screen in my kitchen and am researching another setup, using the Android Widgets. I use widgets for the news, calendar, weather etc and would like to simply add active-widgets for devices or flows. All solutions like Node Red, are full screen solutions.

Did anyone find a solution and create a MQTT widget in Android, which can directly control Homey devices? Obviously this would work on Android phones too.

You should take a look at the Android app Tasker and the Tasker plugin Join.

I use these in the way you describe your usecase, although it doesn’t use mqtt for communication with Homey, but it uses webhooks instead.

There are also some topics on this forum about this.

There is also a mqtt publisher tasker plugin.

I really like this approach. I will try and check it out in the near future.

it is really sooo nice my dashboard become beautiful. but you shared that you can make the buttons on dark mode. what can I change on the template code that you shared it to have the dark mode buttons. please can you help me on it.
Thank you so much. :slight_smile:

3 Likes

Hi Badr,
Can you please share the screenhots of your dashboards?
Would be good to see what you made :slight_smile:
Roger

Do you have a template how i can use background pictures?

Here a pic of my dashboard

4 Likes

How much time did it take you?

Hmmmm. Couple of hours a day a few weeks

@Badr_al-moraggab

could you explain how you realized the transparent groups, please?

Very easy to understand and informative.
Petje af :slight_smile:

1 Like

Also a mobile version

2 Likes

You can also install Eclipse-Mosquitto (MQTT Server also in a Docker Container)

1 Like

All, I have already for a long time a Node-Red Dashboard running on an old iPad 3.
For some reason every now and then the loading of the website is off and the view changed.
Only way to fix this is to close the browser and restart Node-Red dashboard at the iPad.
Does someone know what triggers this issue, and how to solve it?

My Raspberry crashed and all flows are lost… Also no backup…
Good opportunity to start all over and make a new design, but i already bumped into the first problem.

When I look at the MQTT explorer i do not see any changes with my Fibaro units when controlling them via Homey. I do see the Sonoff (tasmota) units reflecting the actions i do via Homey. Below picture show my Fibaro (hallway) and my Sonoff (veranda wall)

Screen Shot 2022-02-14 at 9.48.10 AM

Does anybody has an idea why the Fibaro only shows 2 topics?

Edit: Problem solved, i needed to open the MQTT hub app and uncheck/checkk all devices.