# 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:** 8
**Author:** ![Angel\_Escudero](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/angel_escudero/32/13512_2.png) [@Angel\_Escudero](https://community.homey.app/u/Angel_Escudero)\ **Post date:** [December 19, 2019, 11:39pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/144 "2019-12-19T23:39:02Z")
Yes. I have already seen how you created two fields, one for the date and one for the time. But, where can you change the font size each of them ?. I know it’s a rookie question … ---
**Author:** ![Jan\_Willem\_Visser](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jan_willem_visser/32/10747_2.png) [@Jan\_Willem\_Visser](https://community.homey.app/u/Jan_Willem_Visser)\ **Post date:** [December 19, 2019, 11:40pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/145 "2019-12-19T23:40:21Z")
i.m not home at the moment. tommorow i make a printscreen en show it. Some info from the web > **[Getting bigger font](https://discourse.nodered.org/t/getting-bigger-font/229/6)** > > as example i do it like this result: ---
**Author:** ![Angel\_Escudero](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/angel_escudero/32/13512_2.png) [@Angel\_Escudero](https://community.homey.app/u/Angel_Escudero)\ **Post date:** [December 19, 2019, 11:41pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/146 "2019-12-19T23:41:46Z")
Thank you very much in advance!!! ---
**Author:** ![Angel\_Escudero](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/angel_escudero/32/13512_2.png) [@Angel\_Escudero](https://community.homey.app/u/Angel_Escudero)\ **Post date:** [December 20, 2019, 12:16pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/147 "2019-12-20T12:16:14Z")
Yes. I have seen that post. But, in the case of the date and time it does not work. Or at least I have been unable to make it work. Grateful for the help. ---
**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\ **Post date:** [December 20, 2019, 7:54pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/148 "2019-12-20T19:54:34Z")
> [@Jan\_Willem\_Visser](#): > > My dash so far… And I’m proud of it😊 > > ![IMG-20191219-WA0008](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/e/a/ea02ed46754e10d3e010baf1b8a3813ebadfe7cd.jpeg) ![Palpatine](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/7/6/762366d640175bdac668c0436e6b3db8890dbe47.png) ---
**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\ **Post date:** [December 20, 2019, 7:59pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/149 "2019-12-20T19:59:27Z")
> [@Angel\_Escudero](#): > > Yes. I have seen that post. But, in the case of the date and time it does not work. Or at least I have been unable to make it work. I’ve also been struggling with the font sizes of a text node. Somehow I only could set about 3 sizes. Eventually I just use a template node and put a piece of html inside it. Just as easy: `

{{msg.payload}}

` ---
**Author:** ![Kalle\_Kronbeck](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/kalle_kronbeck/32/13158_2.png) [@Kalle\_Kronbeck](https://community.homey.app/u/Kalle_Kronbeck)\ **Post date:** [December 20, 2019, 8:26pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/150 "2019-12-20T20:26:19Z")
How do you make a special page for each device? I thougt all pages in node red started here at ip-adress:1880/ui? ---
**Author:** ![Tangodelta](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/tangodelta/32/9471_2.png) [@Tangodelta](https://community.homey.app/u/Tangodelta)\ **Post date:** [December 20, 2019, 8:49pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/151 "2019-12-20T20:49:45Z")
Yes, misunderstand me right, within the ui you define as many pages you want for your devices/rooms. ---
**Author:** ![Erik\_M\_Madsen](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/erik_m_madsen/32/18191_2.png) [@Erik\_M\_Madsen](https://community.homey.app/u/Erik_M_Madsen)\ **Post date:** [December 21, 2019, 7:28am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/152 "2019-12-21T07:28:46Z")
@Tangodelta care to share your red node code? Looks Great what you have done 💪😄 ---
**Author:** ![Angel\_Escudero](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/angel_escudero/32/13512_2.png) [@Angel\_Escudero](https://community.homey.app/u/Angel_Escudero)\ **Post date:** [December 21, 2019, 2:01pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/153 "2019-12-21T14:01:49Z")
Hello @Satoer Before I continue writing, I want to thank the dedication and the effort to explain things. It is appreciated, and much! I know that I am very clumsy and I am learning little by little, based on tutorials and help how yours. I created the template node and added the html code that you sent me in the way I attached it in the photo. But now he shows me nothing. He is sure that I am wrong and I ask for help to see where the fault may be.! Thanks!!! ![flow](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/9/7/9735af0a491d3c87b6d69bcd3335e915a8bf4878.jpeg) ![html](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/8/b/8b11fea3ad40c7df0ce11a32cfb201bcc03519d9.jpeg) ---
**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\ **Post date:** [December 21, 2019, 2:15pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/154 "2019-12-21T14:15:33Z")
Thanks. You’ve used the wrong template node. You need the blue/green dashboard template node. Not the orange function template node: ![template node](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/9/b/9b18b0fbed721307ffc8e8ddb39220707555dc48.png) You don’t need the text node at the end of your screenshot. The template node shows the text. ---
**Author:** ![Erik\_M\_Madsen](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/erik_m_madsen/32/18191_2.png) [@Erik\_M\_Madsen](https://community.homey.app/u/Erik_M_Madsen)\ **Post date:** [December 21, 2019, 2:28pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/155 "2019-12-21T14:28:09Z")
Ahhhhhhh…just found out to make the layout 😂😂🤪🤪🤪 ---
**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\ **Post date:** [December 21, 2019, 2:42pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/156 "2019-12-21T14:42:08Z")
You are referring to pages Node-red call the “Flows” right? I mean those tabs above the screen in the node-red “back-end” editor. ![nodered-flows](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/a/f/af947eb622fd11f596ea0d616eaf3ab4d96ff788.png) Or did you find a way to create more dashboards? I know I can create multiple pages with dashboards and swipe trough them (or by activating the menu), but I don’t know if you can create a complete separate dashboard on a different url. ---
**Author:** ![Retrov](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/retrov/32/17240_2.png) [@Retrov](https://community.homey.app/u/Retrov)\ **Post date:** [December 27, 2019, 8:08am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/157 "2019-12-27T08:08:51Z")
What´s the recommended way of using the MQTT in Node Red? Adding more receives for each topic or using a function that will split out each topic to the correct nodes in the dashboard? ---
**Author:** ![M\_a\_r\_c\_o](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/m_a_r_c_o/32/146_2.png) [@M\_a\_r\_c\_o](https://community.homey.app/u/M_a_r_c_o)\ **Post date:** [December 27, 2019, 1:05pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/158 "2019-12-27T13:05:06Z")
Both are possible, but using the split is more neat and does not create a subscription for each device to MQTT (network connection as well). Using split then you only need 2 MQTT connections, the incoming one and the outgoing one in Node-red. These 2 connections will be more busy with traffic of course. I like to reduce network connections and like splitting as local process. ---
**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\ **Post date:** [December 27, 2019, 3:57pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/159 "2019-12-27T15:57:05Z")
I don’t think it really matters. I even think splitting yourself will create extra workload. Every MQTT receiver node is connected to the (same) configured MQTT server. The server probably handles every MQTT communication. A MQTT receiver node probably isn’t more than a filter itself. If you going to wildcard this node and split / filter this again, you are actually adding extra workload to the system (you filter it twice). In the end it probably doesn’t really matter either way. I think adding more receiver nodes is neater. ---
**Author:** ![M\_a\_r\_c\_o](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/m_a_r_c_o/32/146_2.png) [@M\_a\_r\_c\_o](https://community.homey.app/u/M_a_r_c_o)\ **Post date:** [December 27, 2019, 4:22pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/160 "2019-12-27T16:22:46Z")
In case of maintenance/changes at mqtt or devices; do you need to edit lots of mqtt recievers one by one or edit one big splitter. ---
**Author:** ![Angel\_Escudero](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/angel_escudero/32/13512_2.png) [@Angel\_Escudero](https://community.homey.app/u/Angel_Escudero)\ **Post date:** [December 27, 2019, 4:39pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/161 "2019-12-27T16:39:36Z")
Sorry @Satoer for not answering you before. It worked very well! Thank you for the explanation and for your time. Now, go for a weather forecast widget. THANKS!!! ---
**Author:** ![Kalle\_Kronbeck](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/kalle_kronbeck/32/13158_2.png) [@Kalle\_Kronbeck](https://community.homey.app/u/Kalle_Kronbeck)\ **Post date:** [December 28, 2019, 1:42pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/162 "2019-12-28T13:42:28Z")
I have built some Esp8266 now with PIR sensors and ESp Easy software. I now have setup so on my node red dashboard I got a red glowing square when a motion is detected. But would also like a Timestamp or somethings that tell me when the latest movement was detected. Does any one know how to do that ? ---
**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\ **Post date:** [December 29, 2019, 10:45am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/163 "2019-12-29T10:45:29Z")
I do something similar with my doorbell. The dashboard is displaying a list when someone rings the doorbell and nobody’s home (with timestamp). (This list is displayed with the "UI control node, but I removed this for simplicity) First I save the time in a global variable (I just kept the part where I save it to a global variable. In my case I also use this output to show the time on the dashboard). ![Time-to-GlobalVariable](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/a/0/a0440c9924a0c77f3720e0ea0780b67e439be5a6.png) code: `[{"id":"f7659dad.57d9f","type":"inject","z":"467bd729.816768","name":"","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":false,"onceDelay":0.1,"x":290,"y":660,"wires":[["ba05c850.2c39a"]]},{"id":"ba05c850.2c39a","type":"simpletime","z":"467bd729.816768","name":"Tijd","x":470,"y":660,"wires":[["5adef1da.d861a8"]]},{"id":"5adef1da.d861a8","type":"moment","z":"467bd729.816768","name":"","topic":"","input":"payload","inputType":"msg","inTz":"Europe/Berlin","adjAmount":"1","adjType":"hours","adjDir":"add","format":"HH:mm:ss","locale":"POSIX","output":"","outputType":"msg","outTz":"Etc/UTC","x":680,"y":660,"wires":[["ab0c78f6.64d5e8"]]},{"id":"ab0c78f6.64d5e8","type":"function","z":"467bd729.816768","name":"Store Time in global variable","func":"var Time=global.get(\"GlobalTime\") || '';\nglobal.set(\"GlobalTime\",msg.payload);\n\nreturn msg;","outputs":1,"noerr":0,"x":960,"y":660,"wires":[[]]}]` Then whenever someone rings the doorbell, I use the current time and add this to a list-node: ![ListGenerate](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/1/d/1db94fee9ca26f9e00aeb1bb36e34bc8c29e3da3.png) code: `[{"id":"2c5a53b7.a352b4","type":"mqtt in","z":"e8b0aeb7.ea41","name":"Deurbel gedrukt niemand in huis","topic":"homey/doorbell/pressedaway","qos":"2","datatype":"auto","broker":"d776df12.63afa","x":290,"y":2360,"wires":[["e2e48528.a86328"]]},{"id":"e2e48528.a86328","type":"function","z":"e8b0aeb7.ea41","name":"Add bell warning to list","func":"var WaarschuwingLijst=flow.get(\"FlowWaarschuwingLijst\") || [];\nvar TimeVar=global.get(\"GlobalTime\") || '';\nWaarschuwingLijst.push({\"title\":TimeVar,\"description\":\": Aangebeld\",\"icon_name\":\"fa-bell\"});\nflow.set(\"FlowWaarschuwingLijst\",WaarschuwingLijst);\nmsg.payload = WaarschuwingLijst;\nreturn msg;","outputs":1,"noerr":0,"x":580,"y":2360,"wires":[["9a202a56.ac21"]]},{"id":"9a202a56.ac21","type":"ui_list","z":"e8b0aeb7.ea41","group":"74a5e2ed.11c31c","name":"List","order":2,"width":"6","height":"8","lineType":"three","actionType":"none","allowHTML":false,"outputs":0,"topic":"","x":790,"y":2360,"wires":[]},{"id":"d776df12.63afa","type":"mqtt-broker","z":"","name":"Homey MQTT","broker":"192.168.178.26","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"74a5e2ed.11c31c","type":"ui_group","z":"","name":"Waarschuwingen","tab":"f735aa47.f5cd18","order":9,"disp":true,"width":"6","collapse":false},{"id":"f735aa47.f5cd18","type":"ui_tab","z":"","name":"Homey Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]` If you want to clear the list, just use this javascript behind a button: `flow.set('FlowWaarschuwingLijst',[]); return msg;` You probably need to install the list node if you want to use it the same way like I do. > **[node-red-node-ui-list](https://flows.nodered.org/node/node-red-node-ui-list)** > > Node-RED Dashboard UI widget node for simple list But the essence is that you add a timestamp to a global array every time motion is detected. [Previous page](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798.md?page=7) [Next page](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798.md?page=9)