# Node Red: A widget based dashboard working with Homey trough MQTT **URL:** \ **Category:** Apps\ **Created:** [October 3, 2019, 10:05am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798 "2019-10-03T10:05:10Z")\ **Posts on this page:** 20\ **Page:** 38
**Author:** ![Cuprani](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/cuprani/32/3575_2.png) [@Cuprani](https://community.homey.app/u/Cuprani)\ **Post date:** [May 15, 2021, 9:05pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/763 "2021-05-15T21:05:49Z")
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? ---
**Author:** ![Cuprani](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/cuprani/32/3575_2.png) [@Cuprani](https://community.homey.app/u/Cuprani)\ **Post date:** [May 16, 2021, 10:33pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/764 "2021-05-16T22:33:44Z")
Solved! ---
**Author:** ![RogerSt](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rogerst/32/12432_2.png) [@RogerSt](https://community.homey.app/u/RogerSt)\ **Post date:** [May 23, 2021, 8:08pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/765 "2021-05-23T20:08:03Z")
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 😛 ---
**Author:** ![Cuprani](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/cuprani/32/3575_2.png) [@Cuprani](https://community.homey.app/u/Cuprani)\ **Post date:** [May 24, 2021, 8:39am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/766 "2021-05-24T08:39:57Z")
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. ---
**Author:** ![Cuprani](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/cuprani/32/3575_2.png) [@Cuprani](https://community.homey.app/u/Cuprani)\ **Post date:** [May 24, 2021, 9:42am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/767 "2021-05-24T09:42:46Z")
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. ![HomeyFlowDoorbell](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/2/2/22a3c113b0a74fcc794c5a7017dcb8e6f0823324.jpeg) **[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":"","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: ![NodeRedFlowDoorbell](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/6/d/6da75616e0d949f26f3eb87e9ae3d5594768da82.jpeg) . [![](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/2/9/29c431947cc3360247cdf9c4fbd87aaf285ab678.jpeg "Node-RED and Fully Kiosk Browser triggered by Nest Hello Doorbell") ](https://www.youtube.com/watch?v=U_35qVUv_Xg) _Yes I know my garden is a mess 🙈, it will be redone next month… 😆_ ---
**Author:** ![Jomi](https://avatars.discourse-cdn.com/v4/letter/j/c2a13f/32.png) [@Jomi](https://community.homey.app/u/Jomi)\ **Post date:** [June 2, 2021, 11:09am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/768 "2021-06-02T11:09:30Z")
@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. ---
**Author:** ![Joenoo](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/joenoo/32/18671_2.png) [@Joenoo](https://community.homey.app/u/Joenoo)\ **Post date:** [June 3, 2021, 6:46am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/769 "2021-06-03T06:46:13Z")
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. ---
**Author:** ![HarriedeGroot](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/harriedegroot/32/56160_2.png) [@HarriedeGroot](https://community.homey.app/u/HarriedeGroot)\ **Post date:** [June 3, 2021, 11:22am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/770 "2021-06-03T11:22:03Z")
There is also a [mqtt publisher](https://play.google.com/store/apps/details?id=net.nosybore.mqttpublishplugin) tasker plugin. ---
**Author:** ![RogerSt](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rogerst/32/12432_2.png) [@RogerSt](https://community.homey.app/u/RogerSt)\ **Post date:** [June 7, 2021, 7:43pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/771 "2021-06-07T19:43:58Z")
I really like this approach. I will try and check it out in the near future. ---
**Author:** ![Badr\_al-moraggab](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/badr_al-moraggab/32/33941_2.png) [@Badr\_al-moraggab](https://community.homey.app/u/Badr_al-moraggab)\ **Post date:** [June 30, 2021, 7:01am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/773 "2021-06-30T07:01:07Z")
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. 🙂 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/a/d/ad8b80f731fde1a87d128ccdbd67490dd199cabb.jpeg) ---
**Author:** ![RogerSt](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rogerst/32/12432_2.png) [@RogerSt](https://community.homey.app/u/RogerSt)\ **Post date:** [September 1, 2021, 9:17am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/774 "2021-09-01T09:17:43Z")
Hi Badr, Can you please share the screenhots of your dashboards? Would be good to see what you made 🙂 Roger ---
**Author:** ![Bulletcather](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/bulletcather/32/13738_2.png) [@Bulletcather](https://community.homey.app/u/Bulletcather)\ **Post date:** [September 2, 2021, 6:58am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/775 "2021-09-02T06:58:19Z")
Do you have a template how i can use background pictures? ---
**Author:** ![Peter\_de\_Vos](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peter_de_vos/32/151925_2.png) [@Peter\_de\_Vos](https://community.homey.app/u/Peter_de_Vos)\ **Post date:** [September 11, 2021, 6:14pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/776 "2021-09-11T18:14:33Z")
![Screenshot_2021-09-11-13-06-21-428](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/9/9/99914eea8c5d886711f6b9f21d275d79bf2786f7.jpeg) Here a pic of my dashboard ---
**Author:** ![Quakerix](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/quakerix/32/10155_2.png) [@Quakerix](https://community.homey.app/u/Quakerix)\ **Post date:** [September 11, 2021, 6:35pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/777 "2021-09-11T18:35:47Z")
How much time did it take you? ---
**Author:** ![Peter\_de\_Vos](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peter_de_vos/32/151925_2.png) [@Peter\_de\_Vos](https://community.homey.app/u/Peter_de_Vos)\ **Post date:** [September 11, 2021, 7:22pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/778 "2021-09-11T19:22:00Z")
Hmmmm. Couple of hours a day a few weeks ---
**Author:** ![SvenRhein](https://avatars.discourse-cdn.com/v4/letter/s/e495f1/32.png) [@SvenRhein](https://community.homey.app/u/SvenRhein)\ **Post date:** [September 17, 2021, 8:30am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/779 "2021-09-17T08:30:12Z")
@Badr_al-moraggab could you explain how you realized the transparent groups, please? ---
**Author:** ![RogerSt](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rogerst/32/12432_2.png) [@RogerSt](https://community.homey.app/u/RogerSt)\ **Post date:** [October 30, 2021, 4:20pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/780 "2021-10-30T16:20:30Z")
Very easy to understand and informative. Petje af 🙂 ---
**Author:** ![Peter\_de\_Vos](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peter_de_vos/32/151925_2.png) [@Peter\_de\_Vos](https://community.homey.app/u/Peter_de_Vos)\ **Post date:** [October 30, 2021, 5:09pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/781 "2021-10-30T17:09:27Z")
![Screenshot_20211030-190709](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/3/e/3e883403481bebf67b1735373e320e0a888c788d.jpeg) Also a mobile version ---
**Author:** ![ChrisBoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/chrisboer/32/1252_2.png) [@ChrisBoer](https://community.homey.app/u/ChrisBoer)\ **Post date:** [December 13, 2021, 10:03pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/782 "2021-12-13T22:03:15Z")
You can also install Eclipse-Mosquitto (MQTT Server also in a Docker Container) ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/1/4/14518666fa49a81579d3245ef8282469afd9da43.png) ---
**Author:** ![Joost\_van\_Liempt](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/joost_van_liempt/32/9927_2.png) [@Joost\_van\_Liempt](https://community.homey.app/u/Joost_van_Liempt)\ **Post date:** [February 7, 2022, 11:27am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/784 "2022-02-07T11:27:58Z")
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? ![IMG_3254](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/d/7/d706abb6747578521876c6acf4aeea9df4a08653.jpeg) [Previous page](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798.md?page=37) [Next page](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798.md?page=39)