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

**URL:** <https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798>\
**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:** 30

<div class="post-metadata">

**Author:** ![Jeroen\_Kokhuis](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jeroen_kokhuis/32/12592_2.png) [@Jeroen\_Kokhuis](https://community.homey.app/u/Jeroen_Kokhuis)\
**Post date:** [September 14, 2020, 9:07pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/595 "2020-09-14T21:07:54Z")

</div>

On the same server as Node Red. In the node red dist folder

---

<div class="post-metadata">

**Author:** ![Jeroen\_Kokhuis](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jeroen_kokhuis/32/12592_2.png) [@Jeroen\_Kokhuis](https://community.homey.app/u/Jeroen_Kokhuis)\
**Post date:** [September 16, 2020, 6:55am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/596 "2020-09-16T06:55:07Z")

</div>

Now when I turn my lights off then the lights will turn on automatically. This is my flow:

```
[{"id":"9f116efb.7362c","type":"mqtt in","z":"ad80e500.3c7e98","name":"MQTT receiver light","topic":"homie/homey-5d14b942367eb80ccf0c77c3/woonkamer/onoff","qos":"2","datatype":"auto","broker":"a4ac80e1.bc5fe","x":190,"y":560,"wires":[["75713fab.deb13"]]},{"id":"75713fab.deb13","type":"function","z":"ad80e500.3c7e98","name":"Kleur en icoon","func":"// note that this flow is triggered by an mqtt message AND by the repeating timestamp node\n// here we deal with the message payload only\nif (msg.payload === \"true\"){\n\n flow.set(\"statusWoonkamerLamp\", true);\n}\nelse if (msg.payload ===\"false\") {\n flow.set(\"statusWoonkamerLamp\", false);\n}\nelse {\n // don't do anything here as this could be your timestamp trigger\n}\n\n// here we deal with the flow variable.\nif (flow.get(\"statusWoonkamerLamp\")){\n msg.ui_control = {icon:\"icons/light-bulb-on-60.png\", tooltip:\"Licht is aan\"};\n msg.label = \"Licht is aan\"\n}\nelse {\n msg.ui_control = {icon:\"icons/light-bulb-off-60.png\", tooltip:\"Licht is uit\"};\n msg.label = \"Licht is uit\"\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":560,"wires":[["1cf370ef.c5275f"]]},{"id":"1ef377ea.07b3a8","type":"mqtt out","z":"ad80e500.3c7e98","name":"MQTT Transmitter","topic":"homie/homey-5d14b942367eb80ccf0c77c3/woonkamer/onoff/set","qos":"","retain":"","broker":"a4ac80e1.bc5fe","x":1030,"y":560,"wires":[]},{"id":"1cf370ef.c5275f","type":"ui_template","z":"ad80e500.3c7e98","group":"b290cc21.d734d","name":"Woonkamer","order":7,"width":4,"height":3,"format":"<md-button class=\"btn1\" id=\"buttonlight\" style=\"background-color:#ff333333\" ng-click=\"send({payload: msg.payload })\"> \n <img id=\"imgofbutton\" src=\"{{msg.ui_control.icon}}\">\n <div class=\"textofbutton\">\n <b id=\"buttonslighttext\">Woonkamer</b>\n </div>\n</md-button>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":650,"y":560,"wires":[["6ce1b6de.567ff8"]]},{"id":"6ce1b6de.567ff8","type":"function","z":"ad80e500.3c7e98","name":"","func":"\nif (msg.payload === \"false\" ){\n msg.payload = \"true\";\n}\nelse { msg.payload = \"false\";\n}\nreturn [msg];","outputs":1,"noerr":0,"initialize":"","finalize":"","x":820,"y":560,"wires":[["1ef377ea.07b3a8"]]},{"id":"cf84f42a.fdca58","type":"mqtt out","z":"ad80e500.3c7e98","name":"MQTT Transmitter","topic":"homie/homey-5d14b942367eb80ccf0c77c3/woonkamer/dim/set","qos":"","retain":"","broker":"a4ac80e1.bc5fe","x":1030,"y":640,"wires":[]},{"id":"2d570c90.8fbc24","type":"mqtt in","z":"ad80e500.3c7e98","name":"MQTT receiver light","topic":"homie/homey-5d14b942367eb80ccf0c77c3/woonkamer/dim","qos":"2","datatype":"auto","broker":"a4ac80e1.bc5fe","x":190,"y":640,"wires":[["6bc7cc75.5d06d4","b2bcb601.de5fb8"]]},{"id":"6bc7cc75.5d06d4","type":"debug","z":"ad80e500.3c7e98","name":"light_slider","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":450,"y":700,"wires":[]},{"id":"279500ed.f416b","type":"ui_template","z":"ad80e500.3c7e98","group":"b290cc21.d734d","name":"Woonkamerdim","order":14,"width":4,"height":1,"format":"<div id=\"slidernew1\">\n <md-slider-container>\n <md-slider min=\"0\" max=\"100\" ng-model=\"msg.payload\" ng-change=\"send(msg)\"></md-slider>\n <span style=\"padding-right: 18px; text-align: right\">{{msg.payload}}</span>\n</md-slider-container> \n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":660,"y":640,"wires":[["cf84f42a.fdca58"]]},{"id":"b2bcb601.de5fb8","type":"function","z":"ad80e500.3c7e98","name":"set variable","func":"flow.set(\"statusWoonkamerLampDim\", msg.payload);\n// here we deal with the flow variable.\nflow.get(\"statusWoonkamerLampDim\")\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":430,"y":640,"wires":[["279500ed.f416b"]]},{"id":"242fdd78.18f232","type":"inject","z":"ad80e500.3c7e98","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"15","crontab":"","once":true,"onceDelay":"5","topic":"","payload":"","payloadType":"date","x":210,"y":520,"wires":[["75713fab.deb13"]]},{"id":"a4ac80e1.bc5fe","type":"mqtt-broker","z":"","name":"Homey MQTT","broker":"192.168.1.6","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"b290cc21.d734d","type":"ui_group","z":"","name":"Buttons","tab":"2a0bd1d7.7ca9ce","order":1,"disp":false,"width":30,"collapse":false},{"id":"2a0bd1d7.7ca9ce","type":"ui_tab","z":"","name":"Tab3","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
```

---

<div class="post-metadata">

**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 16, 2020, 4:30pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/597 "2020-09-16T16:30:39Z")

</div>

Since we share a similar set of flows; please note that in my function nodes:

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/c/8/c881a0a1d3523a1feefa18e845a7f67e2d9fbaec.png)

I use reverse boolean logic: where a true is received from the MQTT broker on the left-hand side, the function node sends out a false message on the right-hand side and vice versa.

This is my code:

```
if (msg.payload === "true"){ // RECEIVE TRUE
    msg.color = "#FFAA00";    
    flow.set("state", "false"); // SEND FALSE
}
else { // RECEIVE FALSE
    msg.color = "#44AAFF";
    flow.set("state", "true"); // SEND TRUE
}
return msg;

```

Hope this helps.

---

<div class="post-metadata">

**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:** [September 16, 2020, 5:05pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/598 "2020-09-16T17:05:54Z")

</div>

> [@Jeroen\_Kokhuis](#):
>
> When I click on Deploy in Node Red the values are empty. So I have to wait for the values to be sent again from MQTT hub. What I want is to reload the value form MQTT hub on reload of the page.

I’ve discovered that it also depends on the broker. Apparently some brokers keep track of all settings and rebroadcast them if Node-red is deployed. (If I press deploy I get a massive amount of MQTT data on the debug node). This was not the case when I used the Homey MQTT broker. You can also manually re-broadcast all settings by pressing the “Broadcast” button inside the MQTT Hub configuration panel.

---

<div class="post-metadata">

**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:** [September 16, 2020, 8:53pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/599 "2020-09-16T20:53:54Z")

</div>

Nice thanks for sharing. Did you know there’s a great list UI node for node red?

> **[node-red-node-ui-list](https://flows.nodered.org/node/node-red-node-ui-list)**
>
> Node-RED Dashboard UI widget node for simple list

  
 ![afbeelding](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/a/c/ac003855da588013bbdd1eca25bab467c693435b.png)  
You simply add all kinds of things like icons easily to the list without need to code the html yourself 😉

---

<div class="post-metadata">

**Author:** ![xAPPO](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/xappo/32/13726_2.png) [@xAPPO](https://community.homey.app/u/xAPPO)\
**Post date:** [September 16, 2020, 9:19pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/600 "2020-09-16T21:19:51Z")

</div>

A full spec MQTT broker has an ability to remember all messages if the client posts them with ‘retained true’ . So every time a new client connects and subscribes to the MQTT broker all that ‘retained’ information is sent - even if the originating client is no longer connected.

If the original client does not publish ‘retained’ then when a new client connects and subscribes it will receive no information. It’s a function of the original publishing client.

Some versions of MQTT hub published state with retain false but I believe the latest - or beta version, publishes with retained true. I do not know the capabilities of the inbuilt MQTT broker.

---

<div class="post-metadata">

**Author:** ![Akumu](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/akumu/32/8812_2.png) [@Akumu](https://community.homey.app/u/Akumu)\
**Post date:** [September 17, 2020, 6:35am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/601 "2020-09-17T06:35:05Z")

</div>

Hi All,

Just began to make my own dahsboard, and followed the tutorial in the beginning of this post.  
It is working good, however i noticed when i turned on a lamp via the homey app, or a lamp turned on via a flow, the status on my dashboard doesn’t change. This is what i got, do i miss something?

Also, is there some good instruction how to style the dashboard with css? or how did you do it?  
Thanks in advance!

 ![Nodered_lights](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/5/1/51d5a684a3c1c386033c4bdb72e689f8914fa75d.png)

---

<div class="post-metadata">

**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 17, 2020, 8:46am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/602 "2020-09-17T08:46:19Z")

</div>

It seems that I need to check this out 😉 - Thanks!

---

<div class="post-metadata">

**Author:** ![tmaniac](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/tmaniac/32/338_2.png) [@tmaniac](https://community.homey.app/u/tmaniac)\
**Post date:** [September 17, 2020, 11:07am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/603 "2020-09-17T11:07:00Z")

</div>

Hey folks; i have a little question.  
Been messing about with the Node-Red dashboard for a while now and i’m almost happy with my buttons.

The custom CSS in the startpost really helped getting closer to my desired look, thanks for that!

The 1 thing i would like though is to have the button have a “glowing” border when the light is on.

Currently i have it like this:  
Button when light is off  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/2/a/2ae3155191223dd2eaeb5d5ea18f33752583cb46.png)  
Button when light is on.  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/8/8/8855e68d51ac96861ef61b15e2d5b2e46dfc8411.png)

and the corresponding json for it;

> [{“id”:“325c798d.0afbc6”,“type”:“ui\_button”,“z”:“5c665611.5dc198”,“name”:“HueTV-Button”,“group”:“50cbc251.33a45c”,“order”:1,“width”:“2”,“height”:“2”,“passthru”:false,“label”:“”,“tooltip”:“”,“color”:“{{msg.iconcolor}}”,“bgcolor”:“”,“icon”:“fa-lightbulb-o fa-4x”,“payload”:“lightstate”,“payloadType”:“global”,“topic”:“homie/homey-topic/hue-color—tv-meubel/onoff/set”,“x”:740,“y”:100,“wires”:[[“e5f9e9a3.404a98”]]},{“id”:“e5f9e9a3.404a98”,“type”:“function”,“z”:“5c665611.5dc198”,“name”:“Toggle On / Off”,“func”:“//this function runs when you are pressing the button.\n// read current state of light\nvar lightstate = flow.get("lightstate") || false;\n\n//Payload is NOT (!) the lightstate. inverts the boolean (true / false)\nmsg.payload = !lightstate;\n\nreturn msg;”,“outputs”:1,“noerr”:0,“initialize”:“”,“finalize”:“”,“x”:920,“y”:100,“wires”:[[“b6593e0f.a6364”]],“inputLabels”:[“input”],“outputLabels”:[“to button”]},{“id”:“c4d79b8.c4b7668”,“type”:“mqtt in”,“z”:“5c665611.5dc198”,“name”:“MQTT TV - Status”,“topic”:“homie/homey-topic/hue-color—tv-meubel/onoff”,“qos”:“2”,“datatype”:“auto”,“broker”:“398b4fb0.59644”,“x”:330,“y”:100,“wires”:[[“bdba58a8.5fbe68”]]},{“id”:“bdba58a8.5fbe68”,“type”:“function”,“z”:“5c665611.5dc198”,“name”:“store the state of light”,“func”:“var lightstate = flow.get("lightstate") || undefined;\nvar label;\nvar color;\n\nif(msg.payload === "true"){\n// state is true (lets make button green)\n label = "ON";\n lightstate = true;\n iconcolor = ‘yellow’;\n}\nelse{\n // state is false (lets make button red)\n label = "OFF";\n lightstate = false;\n iconcolor = ‘white’;\n}\n\nflow.set("lightstate",lightstate);\nmsg = {enabled:true, topic:label, iconcolor:iconcolor};\nreturn msg;”,“outputs”:1,“noerr”:0,“initialize”:“”,“finalize”:“”,“x”:540,“y”:100,“wires”:[[“325c798d.0afbc6”]]},{“id”:“b6593e0f.a6364”,“type”:“mqtt out”,“z”:“5c665611.5dc198”,“name”:“MQTT Light transmit”,“topic”:“”,“qos”:“”,“retain”:“”,“broker”:“398b4fb0.59644”,“x”:1120,“y”:100,“wires”:},{“id”:“50cbc251.33a45c”,“type”:“ui\_group”,“z”:“”,“name”:“TV”,“tab”:“d0e7bb9b.ea1608”,“order”:2,“disp”:false,“width”:“2”,“collapse”:false},{“id”:“398b4fb0.59644”,“type”:“mqtt-broker”,“z”:“”,“name”:“Homey MQTT”,“broker”:“nodered.vandenberge.nu”,“port”:“8883”,“tls”:“d041e890.a6d038”,“clientid”:“NodeRed”,“usetls”:true,“compatmode”:true,“keepalive”:“60”,“cleansession”:true,“birthTopic”:“”,“birthQos”:“0”,“birthPayload”:“”,“closeTopic”:“”,“closeQos”:“0”,“closePayload”:“”,“willTopic”:“”,“willQos”:“0”,“willPayload”:“”},{“id”:“d0e7bb9b.ea1608”,“type”:“ui\_tab”,“z”:“”,“name”:“test”,“icon”:“dashboard”,“order”:26},{“id”:“d041e890.a6d038”,“type”:“tls-config”,“z”:“”,“name”:“”,“cert”:“”,“key”:“”,“ca”:“”,“certname”:“”,“keyname”:“”,“caname”:“”,“servername”:“”,“verifyservercert”:false}]

How can i make it so that an enabled light gets a border?  
I call it a glowing border but of course it’s just a yellow or green border 😉

thanks for any help!

---

<div class="post-metadata">

**Author:** ![Pascal](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/pascal/32/627_2.png) [@Pascal](https://community.homey.app/u/Pascal)\
**Post date:** [September 17, 2020, 9:05pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/604 "2020-09-17T21:05:32Z")

</div>

![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/9/c/9c22ec1409680e2266211bdda4819e2360385c31.jpeg) Thanks for this nice topic, didn’t know this was a thing, just started to build my dashboard, so still a WiP… First worked on the CSS (not done yet), now adding all devices… what a work haha. Will post some screenshots when it’s more filled with stuff/devices.

---

<div class="post-metadata">

**Author:** ![DeepBlueNine](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/deepbluenine/32/18637_2.png) [@DeepBlueNine](https://community.homey.app/u/DeepBlueNine)\
**Post date:** [September 18, 2020, 6:17am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/605 "2020-09-18T06:17:20Z")

</div>

Hi @tmaniac  
Just add this css to your bulb icon:  
` text-shadow: 0px 0px 20px rgba(255, 255, 255, 1);`  
Where 20px is the blur radius, 255,255,255 is a white color, and 1 is the opacity.  
 ![Glow-Icons](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/e/c/ec63d55c615d61745a80400358095f9dbc567dfa.jpeg)

---

<div class="post-metadata">

**Author:** ![tmaniac](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/tmaniac/32/338_2.png) [@tmaniac](https://community.homey.app/u/tmaniac)\
**Post date:** [September 18, 2020, 7:24am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/606 "2020-09-18T07:24:08Z")

</div>

oeh! i like your style 🙂  
care to share? (so i can copy it shamelessly?)

@DeepBlueNine  
Forgive me, i’m a very complete beginner with CSS etc.  
Where do i add the code? in the UI template or someplace else?

---

<div class="post-metadata">

**Author:** ![DeepBlueNine](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/deepbluenine/32/18637_2.png) [@DeepBlueNine](https://community.homey.app/u/DeepBlueNine)\
**Post date:** [September 18, 2020, 7:39am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/607 "2020-09-18T07:39:54Z")

</div>

@tmaniac  
You can get my CSS here : [Custom Node-Red CSS](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/443)  
Yes, add the CSS in your UI Template, in my example, I’m using the “fa-user” icon, so I’ve added this code in my UI Template :  
`.fa-user:hover { text-shadow: 0px 0px 20px rgba(255, 255, 255, 1); }`

---

<div class="post-metadata">

**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 22, 2020, 9:42am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/608 "2020-09-22T09:42:03Z")

</div>

Hi @DeepBlueNine,  
This is for hovering only. But how can I make the icon glowing when then light is on, and not-glowing when the light is off? Is this even possible?  
Thanks for your valuable contributions!

---

<div class="post-metadata">

**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 22, 2020, 9:43am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/609 "2020-09-22T09:43:03Z")

</div>

Hi all,  
I have installed node red in docker on my NAS.  
Does anyone know how I can get node red platform upgrades installed, should they arrive?  
Thanks!

---

<div class="post-metadata">

**Author:** ![DeepBlueNine](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/deepbluenine/32/18637_2.png) [@DeepBlueNine](https://community.homey.app/u/DeepBlueNine)\
**Post date:** [September 22, 2020, 2:25pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/610 "2020-09-22T14:25:21Z")

</div>

Hi @RogerSt  
Yes, that’s possible, you just need to create a function like this, before the UI Template :

```
var label;
var color;
var icon;
var classportail;

if(msg.payload === true){
 label = "OUVERT";
 color = "red";
 icon = "fa 3x fa-unlock";
 classportail = "gate-open";
}
else{
 label = "FERMÉ";
 color = "green";
 icon = "fa 3x fa-lock";
 classportail = "gate-closed";
}

msg = {cportail:classportail, topic:label, background:color, status:icon};
return msg;

```

And the code for the UI Template :  
`<div class="{msg.cportail}}">{{msg.topic}}</div>`

The CSS code must be something like that, where text-shadow is the glowing effect :  
`.gate-open { text-shadow: 0px 0px 20px rgba(255, 255, 255, 1); }`

It work’s fine in my dashboard.  
 ![Glow-FX](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/6/9/697bd940efb1cfdf5e12ac9d06a3fdcc86477ecb.jpeg)

---

<div class="post-metadata">

**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 24, 2020, 7:31pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/611 "2020-09-24T19:31:59Z")

</div>

Thanks, this works where I use different icons for different states. Where I use the same icon but a different icon color, this is not a solution.  
I will first try to find a solution myself.  
Superb feedback for you Eric.

---

<div class="post-metadata">

**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 25, 2020, 8:47am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/612 "2020-09-25T08:47:51Z")

</div>

How have you incorporated the icon in your UI template?  
I already had a class=“msg.icon” and now I need to add a class=“msg.cportail” to the icon.  
This does not seem to work.

My message:

```
pl="Doorbell";
icnColor="#FFAA00"; 
icon="fa fa-bell-o";
classportal = "bell-o-glow";
msg = {cportal:classportal, payload:pl, Iconcolor:icnColor, IconShape:icon};

```

My UI template:

```
<span style="vertical-align:middle; font-size:25px; color: rgb(255, 255, 255); text-align: center; " class="fr-class-transparency">
   <div class="{{msg.cportal}}"> <i style="color:{{msg.Iconcolor}}!important;" class="{{msg.IconShape}}" aria-hidden="true"></i></div>&nbsp;
<span>{{msg.payload}}</span>
</span>

```

My CSS:

```
.fa-bell-o-glow { text-shadow: 0px 0px 20px rgba(255, 255, 255, 1); }
.fa-bell-o-noglow { text-shadow: 0px 0px 0px rgba(255, 255, 255, 1);}

```

No glowing happens… Sorry still quite new on this…

---

<div class="post-metadata">

**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 25, 2020, 9:05am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/613 "2020-09-25T09:05:54Z")

</div>

In the Hub app settings, there us a button “Broadcast” which will publish the state of all devices on demand. No automated solution unfortunately…

---

<div class="post-metadata">

**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:** [September 25, 2020, 9:22am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/614 "2020-09-25T09:22:55Z")

</div>

@RogerSt A ‘birth message’ can be used to automatically trigger a broadcast.

[Previous page](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798.md?page=29)

[Next page](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798.md?page=31)