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

[Cuprani]

I’ve installed Mosquitto MQTT Broker on my Windows 10 Server, but I can’t seem to reach it from other devices in my network.

I’ve tried from several MQTT clients from different platforms (homey, android, other PC) but it just won’t connect.

The broker is up and running. I have MQTT Explorer on the same server which connect to the broker through local host without any problem.

I’ve already added rules on Windows Firewall to allow all incoming and outgoing traffic on port 1883.

I think it has something to do with my router settings. I use an Ubiquiti USG router, all devices in my network have static IP’s on the same subnet (178.168.1.xxx).
Do I need to change something in my router settings in order to allow traffic on 1883 on my local network?

[Cuprani]

Solved!

[RogerSt]

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

[Cuprani]

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.

[Cuprani]

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:

.

Node-RED and Fully Kiosk Browser triggered by Nest Hello Doorbell

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

[Jomi]

@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.

[Joenoo]

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.

[HarriedeGroot]

There is also a mqtt publisher tasker plugin.

[RogerSt]

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

[Badr_al-moraggab]

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.

[RogerSt]

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

[Bulletcather]

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

[Peter_de_Vos]

Here a pic of my dashboard

[Quakerix]

How much time did it take you?

[Peter_de_Vos]

Hmmmm. Couple of hours a day a few weeks

[SvenRhein]

@Badr_al-moraggab

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

[RogerSt]

Very easy to understand and informative.
Petje af

[Peter_de_Vos]

Also a mobile version

[ChrisBoer]

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

[Joost_van_Liempt]

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?