# 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:** 14

<div class="post-metadata">

**Author:** ![Keverjeroen](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/keverjeroen/32/369_2.png) [@Keverjeroen](https://community.homey.app/u/Keverjeroen)\
**Post date:** [January 24, 2020, 6:50pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/269 "2020-01-24T18:50:22Z")

</div>

Oops, I made a screenshot of the wrong button. But yes, I use msg.icon as variable in the button. 😉

I did found 1 example for changing the icon, but not sure if that is the best way to do it:

> **[Examples of Colour change button and switch](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650)**
>
> A simple example of a button that has two states and changes colour/text and icon based on those two states ...

---

<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:** [January 24, 2020, 8:25pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/270 "2020-01-24T20:25:43Z")

</div>

> [@Keverjeroen](#):
>
> if(msg.payload \<= “2”){

This is also a bug in the code. You are comparing it with the string/character “2”. Not the number 2. Everything between quotes is text (in every program language I know of). So you need to remove the quotes. You also need to make sure you are receiving a integer (number) in the payload. If it’s a string (=text) than it needs to be converted to a integer (number). (But I don’t think this is necessary)

> **[JavaScript parseInt() Method](https://www.w3schools.com/jsref/jsref_parseint.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

---

<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:** [January 24, 2020, 8:32pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/271 "2020-01-24T20:32:13Z")

</div>

Well… I’ve just checked my nodes, and I do exactly the same. I use the same topics to set the light dim level and temperature. For the light I use a slider between 0 and 100.  
But I use different devices. Mi-light and a Plugwise anna thermostat. Don’t think that makes a difference though.

Can you turn on and off lights trough MQTT / Node Red?

---

<div class="post-metadata">

**Author:** ![WilliamW](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/williamw/32/13743_2.png) [@WilliamW](https://community.homey.app/u/WilliamW)\
**Post date:** [January 24, 2020, 11:57pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/272 "2020-01-24T23:57:52Z")

</div>

You can used switch to turn on/off

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/7/f/7fb97c65a02a488bd935c6db884c9626a18c41c1.png)

---

<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:** [January 25, 2020, 3:42am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/273 "2020-01-25T03:42:55Z")

</div>

Those are the right topics.  
You can check in the devices topic tree that the device is controllable via …/set. It will have a parameter $settable = true.

You need the payload value you publish to be ‘raw’ text not json and to adhere to the $format value that is also posted within the device hierarchy. From memory on Homey it is a dim value between 0 and 1.0 but I might have that wrong - I’ve been using another controller a lot recently.

Edit… I now see that Michel is using 0-100 so I guess I remembered it wrong.  
$format = 0:100

---

<div class="post-metadata">

**Author:** ![robertklep](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/robertklep/32/160628_2.png) [@robertklep](https://community.homey.app/u/robertklep)\
**Post date:** [January 25, 2020, 5:56am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/274 "2020-01-25T05:56:37Z")

</div>

> [@Satoer](#):
>
> This is also a bug in the code

Not really. As per MDN:

> When comparing a number and a string, the string is converted to a number value. JavaScript attempts to convert the string numeric literal to a `Number` type value. First, a mathematical value is derived from the string numeric literal. Next, this value is rounded to nearest `Number` type value.

So it works as expected. I do agree that for the sake of code-clarity, it would be better to use a numerical value directly.

---

<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:** [January 25, 2020, 11:33am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/275 "2020-01-25T11:33:58Z")

</div>

> [@xAPPO](#):
>
> Edit… I now see that Michel is using 0-100 so I guess I remembered it wrong.  
> $format = 0:100

I believe HomeyScript and HomeyDuino is using the 0-1 floating point DIM scale. (So Homey probably works internal also with the 0-1 scale). So that’s probably the confusion. The MQTT-hub probably just converts it.

---

<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:** [January 25, 2020, 11:39am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/276 "2020-01-25T11:39:34Z")

</div>

Never knew that Javascript is that forgiving 😳.

---

<div class="post-metadata">

**Author:** ![Keverjeroen](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/keverjeroen/32/369_2.png) [@Keverjeroen](https://community.homey.app/u/Keverjeroen)\
**Post date:** [January 25, 2020, 3:39pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/277 "2020-01-25T15:39:12Z")

</div>

Yeah you’re right, it’s not how it should be, but it works. Bu to be totally sure, I’ve changed the Function to:

```
var image;
image = "wi-wu-chancesnow"
msg.icon = image;
return msg;

```

And still, the icon doens’t change…

---

<div class="post-metadata">

**Author:** ![robertklep](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/robertklep/32/160628_2.png) [@robertklep](https://community.homey.app/u/robertklep)\
**Post date:** [January 25, 2020, 3:45pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/278 "2020-01-25T15:45:02Z")

</div>

According to the documentation:

> The **Icon** can be defined, as either a [Material Design icon](https://klarsys.github.io/angular-material-icons/)_(e.g. ‘check’, ‘close’)_ or a [Font Awesome icon](https://fontawesome.com/v4.7.0/icons/)_(e.g. ‘fa-fire’)_ , or a [Weather icon](https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md). You can use the full set of google material icons if you add ‘mi-’ to the icon name. e.g. ‘mi-videogame\_asset’.

It doesn’t sound to me like it can be templated. Especially because the documentation explicitly states that:

> The colours of the text and background may be set. **They can also be set by a message property…**

So text and background _can_ be templated.

---

<div class="post-metadata">

**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:** [January 25, 2020, 4:21pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/279 "2020-01-25T16:21:17Z")

</div>

This is maybe usable as example for icon changing.

> **[Change icon on switch](https://discourse.nodered.org/t/change-icon-on-switch/956)**
>
> Good afternoon, I know how to how to show a image on a text box or there are options on a template, however on the standard switch node there is the option to change the icon I have tried to set this as custom and set the name of the .png image...

---

<div class="post-metadata">

**Author:** ![Roy\_Hopman](https://avatars.discourse-cdn.com/v4/letter/r/7cd45c/32.png) [@Roy\_Hopman](https://community.homey.app/u/Roy_Hopman)\
**Post date:** [January 25, 2020, 5:12pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/280 "2020-01-25T17:12:01Z")

</div>

I have found the problem to be in the dimming. Homey acts on 0-100 and it works perfectly now.

---

<div class="post-metadata">

**Author:** ![Roy\_Hopman](https://avatars.discourse-cdn.com/v4/letter/r/7cd45c/32.png) [@Roy\_Hopman](https://community.homey.app/u/Roy_Hopman)\
**Post date:** [January 25, 2020, 5:13pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/281 "2020-01-25T17:13:19Z")

</div>

Could anyone hint on how to get the Button icons to work? it keeps replying with a ? on dashboard.

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/b/d/bdfa5c531bc58821a10b64442349682e88f98787.png)

---

<div class="post-metadata">

**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:** [January 25, 2020, 8:01pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/282 "2020-01-25T20:01:19Z")

</div>

Empty field and only fill in the icon name (without quotes and so on).

---

<div class="post-metadata">

**Author:** ![Roy\_Hopman](https://avatars.discourse-cdn.com/v4/letter/r/7cd45c/32.png) [@Roy\_Hopman](https://community.homey.app/u/Roy_Hopman)\
**Post date:** [January 25, 2020, 11:16pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/283 "2020-01-25T23:16:14Z")

</div>

If i enter plain ‘light’ which is a standard icon in node red it still returns as a questionnark. Am i missing something?

---

<div class="post-metadata">

**Author:** ![Morad\_Ahassad](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/morad_ahassad/32/9579_2.png) [@Morad\_Ahassad](https://community.homey.app/u/Morad_Ahassad)\
**Post date:** [January 26, 2020, 1:44am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/284 "2020-01-26T01:44:48Z")

</div>

Hi

I have installed and configured both the client and the Hub in Homey. I run the broker on a Raspberry PI. Communication works fine. I´ve tested the first two examples you posted. Here is the problem for me. The switch moves in the dashboard when I turn on and off the light from the Homey App but when i try to turn the light on/off in the dashboard it doesn´t work. I Don´t understand whats wrong. Really need your help, its driving crazy.

---

<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:** [January 26, 2020, 11:47am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/285 "2020-01-26T11:47:11Z")

</div>

It’s hard to guess what’s wrong without seeing the code. Can you select the nodes you use, then press the hamburger icon (top right) =\> Export. And paste the generated JSON in a message (between code brackets).

> [@Roy\_Hopman](#):
>
> If i enter plain ‘light’ which is a standard icon in node red it still returns as a questionnark. Am i missing something?

You need to use the Font Awsome 4.7.0 icons

> **[Font Awesome Icons](https://fontawesome.com/v4/icons/)**
>
> Font Awesome, the iconic font and CSS framework

There is no fa-automobile… you need to use **fa-car** (Only the bold text) or **fa-lightbulb-o** for a light

---

<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:** [January 26, 2020, 12:58pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/286 "2020-01-26T12:58:11Z")

</div>

I tested it, and it seems like you can’t inject an icon in a button node. There is a solution though. There is a simple but powerful template node (the blue ui one). And you can implement any html you want. You can also just put the html for a button inside it, and style (inject code) the way you want.  
(There’s some padding around the button, I haven’t looked into how to removing this. Probably a simple css hack to remove this)

![Button-icon](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/3/9/39fc9c9e3c9ec6fbe45ed6ba93286f71b9258891.png)

```auto
<script>
var value = "hello world";
this.scope.action = function() { return value; }
</script>

<md-button ng-click="send({payload:action()})" style="padding: 0px 0px 0px 0px;!important"><i class="{{msg.payload}}"></i> Click me!</md-button>

```

Node-red JSON:

```auto
[{"id":"8c704093.fe2b6","type":"ui_button","z":"48744450.148de4","name":"","group":"bec4a4a3.5c9928","order":2,"width":0,"height":0,"passthru":false,"label":"Home icon","tooltip":"","color":"","bgcolor":"","icon":"","payload":"fa fa-home","payloadType":"str","topic":"","x":190,"y":200,"wires":[["6bce650f.f5e7b4"]]},{"id":"c15a05c5.d102a8","type":"ui_button","z":"48744450.148de4","name":"","group":"bec4a4a3.5c9928","order":1,"width":0,"height":0,"passthru":false,"label":"Trash icon","tooltip":"","color":"","bgcolor":"","icon":"","payload":"fa fa-trash","payloadType":"str","topic":"","x":190,"y":240,"wires":[["6bce650f.f5e7b4"]]},{"id":"6bce650f.f5e7b4","type":"ui_template","z":"48744450.148de4","group":"bec4a4a3.5c9928","name":"Template Button","order":3,"width":0,"height":0,"format":"<script>\nvar value = \"hello world\";\nthis.scope.action = function() { return value; }\n</script>\n\n<md-button ng-click=\"send({payload:action()})\" style=\"padding: 0px 0px 0px 0px;!important\"><i class=\"{{msg.payload}}\"></i> Click me!</md-button>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":460,"y":220,"wires":[["a431ad14.0d423"]]},{"id":"a431ad14.0d423","type":"debug","z":"48744450.148de4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":710,"y":220,"wires":[]},{"id":"bec4a4a3.5c9928","type":"ui_group","z":"","name":"test","tab":"c63b7d19.a7f4f","disp":true,"width":"6","collapse":false},{"id":"c63b7d19.a7f4f","type":"ui_tab","z":"","name":"Homey Dashboard 2","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

Example code for icon buttons:  
[https://www.w3schools.com/howto/howto\_css\_icon\_buttons.asp](https://www.w3schools.com/howto/howto_css_icon_buttons.asp)

Also, check out the help-info of the node’s if you want to know how to receive and send info in / out a template node:

 ![afbeelding](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/2/2/22c001545f99db6abacc5a31c3857702d52c6265.png)

---

<div class="post-metadata">

**Author:** ![Keverjeroen](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/keverjeroen/32/369_2.png) [@Keverjeroen](https://community.homey.app/u/Keverjeroen)\
**Post date:** [January 26, 2020, 1:50pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/287 "2020-01-26T13:50:58Z")

</div>

I’ve used the msg.ui\_control now to thange the icon of a button. With msg.ui\_control you can change almost everything in the dashboard.

```
var color;

if(msg.payload <= 15){
// It is cold (lets make button blue and set icon)
 color = "#1848DC"
 msg.ui_control = {icon:"wi-wu-chancesnow", tooltip:"Het is koud"};
}
else if(msg.payload <= 21){
// It is normal (lets make button orange and set icon)
 color = "#FF6813"
 msg.ui_control = {icon:"wi-wu-cloudy", tooltip:"Lekker warm"};
}
else{
    // It is hot (lets make button red and set icon)
 color = "#ff1b13"
 msg.ui_control = {icon:"wi-wu-mostlysunny", tooltip:"Het is heet"};
}
msg.background = color;
return [msg];

```

Here you’ll find more info: [https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md](https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md)

---

<div class="post-metadata">

**Author:** ![Roy\_Hopman](https://avatars.discourse-cdn.com/v4/letter/r/7cd45c/32.png) [@Roy\_Hopman](https://community.homey.app/u/Roy_Hopman)\
**Post date:** [January 26, 2020, 10:41pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/288 "2020-01-26T22:41:14Z")

</div>

Hi Morad.

Did you include a topic on the mqtt sender?  
You would require to add the topic of the light tou wish to toggle. Use Mqtt explorer to see all communicated mqtt topics. Once you find the light,  
Place /set at the end of the topic. So it will look like something like this:

Homie/homey/ganglicht1/onoff/set

That’s the base to make it work.

You can go the advanced route if you wish to be able to see the button move when you switch a button using homey’s app. Let me know if You need assistance.

Note that i also just learned all of this but i’m happy to assist whenever i can

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

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