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

<div class="post-metadata">

**Author:** ![Benno\_Berreboom](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/benno_berreboom/32/8297_2.png) [@Benno\_Berreboom](https://community.homey.app/u/Benno_Berreboom)\
**Post date:** [July 20, 2020, 6:24am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/492 "2020-07-20T06:24:59Z")

</div>

Who can help me the text white instead of black  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/9/6/9608e484391ec3e9b9ef273fc56c1b750e7ce72b.png)

---

<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:** [July 20, 2020, 7:27am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/493 "2020-07-20T07:27:47Z")

</div>

@Benno_Berreboom  
Try to set the Dashboard theme to “Dark” instead of “Light”.

---

<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:** [July 20, 2020, 7:53pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/494 "2020-07-20T19:53:32Z")

</div>

@Satoer @Tangodelta

Guys i’ve got the Cam working but with a 1:1 script from Tangodelta i got some strange lines.  
Any idea? you guys usually perform magic so if someone knows…

 ![IMG_845517316](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/4/0/401a0b75b370f9bff70066040d55efc71e5e9e73.jpeg)

---

<div class="post-metadata">

**Author:** ![Benno\_Berreboom](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/benno_berreboom/32/8297_2.png) [@Benno\_Berreboom](https://community.homey.app/u/Benno_Berreboom)\
**Post date:** [July 20, 2020, 8:00pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/495 "2020-07-20T20:00:03Z")

</div>

Yes thanks

---

<div class="post-metadata">

**Author:** ![Marius\_van\_der\_Werff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/marius_van_der_werff/32/8815_2.png) [@Marius\_van\_der\_Werff](https://community.homey.app/u/Marius_van_der_Werff)\
**Post date:** [July 22, 2020, 11:08am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/496 "2020-07-22T11:08:55Z")

</div>

Just a small question, I want to put a Nest Hub in every room in the future, which can then serve as an alarm clock for the kids and as a bell that we will eat 🙂 What I wonder with Node Red is also for every user to cast a separate screen? Homey Dash does this by creating several family members and then casting the correct ID so that everyone can see and operate their “own” screen. Or should I make multiple Node Red servers (if I can at all)? Greetings Marius

---

<div class="post-metadata">

**Author:** ![Wout\_F](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/wout_f/32/7474_2.png) [@Wout\_F](https://community.homey.app/u/Wout_F)\
**Post date:** [July 24, 2020, 8:54am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/497 "2020-07-24T08:54:34Z")

</div>

Thanks to all the tutorials and tips in this topic, I’ve managed to put together a nice basic dashboard for my home. One thing I can’t seem to fix though, are the sliders that control my lights. When I use a slider to set a light to let’s say 60% brightness, the sliders starts jumping around after I let go of it. This lasts for a few seconds, and then the slider settles on a value.

```
[
{
    "id": "ae143277.7ac31",
    "type": "mqtt in",
    "z": "6565bb43.7585a4",
    "name": "MQTT receiver",
    "topic": "homie/homey-topic/office/dim",
    "qos": "2",
    "datatype": "auto",
    "broker": "5172e388.b0d61c",
    "x": 420,
    "y": 200,
    "wires": [
        [
            "37ad688b.1295b8"
        ]
    ]
},
{
    "id": "37ad688b.1295b8",
    "type": "ui_slider",
    "z": "6565bb43.7585a4",
    "name": "Office_dimmer",
    "label": "Office",
    "tooltip": "",
    "group": "c8120b8a.407038",
    "order": 2,
    "width": "7",
    "height": 1,
    "passthru": true,
    "outs": "all",
    "topic": "homie/homey-topic/office/dim/set",
    "min": 0,
    "max": "100",
    "step": "1",
    "x": 900,
    "y": 200,
    "wires": [
        [
            "645a00a9.954a5"
        ]
    ]
},
{
    "id": "645a00a9.954a5",
    "type": "mqtt out",
    "z": "6565bb43.7585a4",
    "name": "MQTT Light transmit",
    "topic": "",
    "qos": "",
    "retain": "",
    "broker": "5172e388.b0d61c",
    "x": 1340,
    "y": 240,
    "wires": []
},
{
    "id": "5172e388.b0d61c",
    "type": "mqtt-broker",
    "z": "",
    "name": "Homey MQTT",
    "broker": "192.168.1.121",
    "port": "1883",
    "clientid": "",
    "usetls": false,
    "compatmode": true,
    "keepalive": "60",
    "cleansession": true,
    "birthTopic": "",
    "birthQos": "0",
    "birthPayload": "",
    "closeTopic": "",
    "closeQos": "0",
    "closePayload": "",
    "willTopic": "",
    "willQos": "0",
    "willPayload": ""
},
{
    "id": "c8120b8a.407038",
    "type": "ui_group",
    "z": "",
    "name": "Lights",
    "tab": "9caa644f.969818",
    "order": 1,
    "disp": true,
    "width": "8",
    "collapse": false
},
{
    "id": "9caa644f.969818",
    "type": "ui_tab",
    "z": "",
    "name": "Homey Dashboard",
    "icon": "dashboard",
    "disabled": false,
    "hidden": false
}

```

]

Any ideas?

---

<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:** [July 24, 2020, 11:19pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/498 "2020-07-24T23:19:09Z")

</div>

I think this is because when you slide the slider, it outputs MQTT messages with values to Homey. Homey sets the new values of the lights brightness. Because it changes the value, it also outputs an MQTT message with this new value…

But you are probably still sliding the slider, and the slider is already on a new value before node red receives this new (now old) value back from Homey. This will make the slider jump between value’s.

A solution is to adjust the slider node to only send the new value on release (there’s a setting for it). Or, if you want a more dynamic control, you could start a timer to ignore incoming brightness messages for X seconds.

---

<div class="post-metadata">

**Author:** ![Wout\_F](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/wout_f/32/7474_2.png) [@Wout\_F](https://community.homey.app/u/Wout_F)\
**Post date:** [July 25, 2020, 7:11am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/499 "2020-07-25T07:11:57Z")

</div>

I’ve switched it to only sending values on release, it’s the easier option for now. Will look into setting timers. Thanks 🙂

---

<div class="post-metadata">

**Author:** ![Rivaol25](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rivaol25/32/14054_2.png) [@Rivaol25](https://community.homey.app/u/Rivaol25)\
**Post date:** [July 26, 2020, 8:00am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/500 "2020-07-26T08:00:25Z")

</div>

Good morning all.  
I am preparing my dashboard, I progress little by little with my weak knowledge.  
Thank you for this forum which is of great help.  
However I try to create a Weather group and there I block a bit.  
I have the open weather nodes, a valid API but I don’t know what to output to have a pleasant view with the temperature of the day, the weather conditions, and the forecast over a few days.  
Does anyone have an example of flow?  
thank you in advance

---

<div class="post-metadata">

**Author:** ![Benno\_Berreboom](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/benno_berreboom/32/8297_2.png) [@Benno\_Berreboom](https://community.homey.app/u/Benno_Berreboom)\
**Post date:** [July 26, 2020, 4:15pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/501 "2020-07-26T16:15:53Z")

</div>

Hello who can help me with a smart meter with yield L1 L2 L3 and L1 L2 L3 consumption and volts L1 L2 L3 and totals of day week month and gas

---

<div class="post-metadata">

**Author:** ![peltsi51](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peltsi51/32/12564_2.png) [@peltsi51](https://community.homey.app/u/peltsi51)\
**Post date:** [July 26, 2020, 6:03pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/502 "2020-07-26T18:03:49Z")

</div>

What are you trying to achieve?

---

<div class="post-metadata">

**Author:** ![Benno\_Berreboom](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/benno_berreboom/32/8297_2.png) [@Benno\_Berreboom](https://community.homey.app/u/Benno_Berreboom)\
**Post date:** [July 26, 2020, 6:13pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/503 "2020-07-26T18:13:01Z")

</div>

visual dashboard on the wall

---

<div class="post-metadata">

**Author:** ![peltsi51](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peltsi51/32/12564_2.png) [@peltsi51](https://community.homey.app/u/peltsi51)\
**Post date:** [July 26, 2020, 6:13pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/504 "2020-07-26T18:13:56Z")

</div>

What help do you need?

---

<div class="post-metadata">

**Author:** ![Benno\_Berreboom](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/benno_berreboom/32/8297_2.png) [@Benno\_Berreboom](https://community.homey.app/u/Benno_Berreboom)\
**Post date:** [July 26, 2020, 6:15pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/505 "2020-07-26T18:15:40Z")

</div>

an example maybe someone has already made this

---

<div class="post-metadata">

**Author:** ![peltsi51](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peltsi51/32/12564_2.png) [@peltsi51](https://community.homey.app/u/peltsi51)\
**Post date:** [July 26, 2020, 6:37pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/506 "2020-07-26T18:37:39Z")

</div>

Can’t really know what you have and what you need help with. If you have a device that measures the values that you want to show it’s same as any other measurement brought to the dashboard.

I paste the nodered code that I have in use, but I’m affraid that won’t quite help you.

```
[{"id":"12d837be.b1dde8","type":"ui_gauge","z":"83cd7b2a.0122c8","name":"","group":"eb842aba.93e218","order":1,"width":7,"height":5,"gtype":"donut","title":"Yhteensä","label":"kW","format":"{{value/1000|number:1}}","min":0,"max":"15000","colors":["#2d72b8","#e6e600","#ca3838"],"seg1":"5000","seg2":"10000","x":660,"y":180,"wires":[]},{"id":"c2d195ef.ac6028","type":"mqtt in","z":"83cd7b2a.0122c8","name":"Sähkö 3-vaihe teho","topic":"homey/sahkomittari-3-vaihe/measure-power","qos":"0","datatype":"auto","broker":"b565f6e0.5e4dc8","x":190,"y":180,"wires":[["12d837be.b1dde8"]]},{"id":"99e4e294.406d","type":"mqtt in","z":"83cd7b2a.0122c8","name":"Sähkö L1 teho","topic":"homey/sahkomittari-l1/measure-power","qos":"0","datatype":"auto","broker":"b565f6e0.5e4dc8","x":170,"y":280,"wires":[["226d55be.cc775a"]]},{"id":"17b04699.f28869","type":"mqtt in","z":"83cd7b2a.0122c8","name":"Sähkö L2 teho","topic":"homey/sahkomittari-l2/measure-power","qos":"0","datatype":"auto","broker":"b565f6e0.5e4dc8","x":170,"y":340,"wires":[["423e2023.4ec69"]]},{"id":"8afa1609.d2f038","type":"mqtt in","z":"83cd7b2a.0122c8","name":"Sähkö L3 teho","topic":"homey/sahkomittari-l3/measure-power","qos":"0","datatype":"auto","broker":"b565f6e0.5e4dc8","x":170,"y":400,"wires":[["711bde73.e7eff"]]},{"id":"711bde73.e7eff","type":"ui_text","z":"83cd7b2a.0122c8","group":"eb842aba.93e218","order":5,"width":0,"height":0,"name":"","label":"L3","format":"{{msg.payload}} W","layout":"row-spread","x":390,"y":400,"wires":[]},{"id":"226d55be.cc775a","type":"ui_text","z":"83cd7b2a.0122c8","group":"eb842aba.93e218","order":3,"width":0,"height":0,"name":"","label":"L1","format":"{{msg.payload}} W","layout":"row-spread","x":390,"y":280,"wires":[]},{"id":"423e2023.4ec69","type":"ui_text","z":"83cd7b2a.0122c8","group":"eb842aba.93e218","order":4,"width":0,"height":0,"name":"","label":"L2","format":"{{msg.payload}} W","layout":"row-spread","x":390,"y":340,"wires":[]},{"id":"eb842aba.93e218","type":"ui_group","z":"","name":"Sähkömittari","tab":"f55170ad.1ca0e","order":1,"disp":true,"width":7,"collapse":false},{"id":"b565f6e0.5e4dc8","type":"mqtt-broker","z":"","name":"homey","broker":"192.168.11.152","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"f55170ad.1ca0e","type":"ui_tab","z":"","name":"Laaja","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
```

---

<div class="post-metadata">

**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:** [July 27, 2020, 9:14pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/507 "2020-07-27T21:14:12Z")

</div>

Hi @Roy_Hopman,

I really like your style sheet. Unfortunatlely css and me aren’t a great match, so would you like to share your code?

---

<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:** [July 27, 2020, 10:06pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/508 "2020-07-27T22:06:59Z")

</div>

It’s already shared over here:

> [@Node Red: A widget based dashboard working with Homey trough MQTT](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/443):
>
> Here it is, my custom CSS for my Node-Red DashBoard. Whitout the CSS, it’s look like this. Just copy and import it in Node-Red and you get this. The CSS code. [{"id":"d81aa8bc.35b81","type":"ui\_template","z":"d6fa9f2d.3d501","group":"339d0edc.4ffe02","name":"Node-Red Dashboard Custom CSS","order":1,"width":0,"height":0,"format":"\<style\>\nroot, a, button, p, div {\n -webkit-user-select: none !important;\n}\n\nbody {\n bac…

---

<div class="post-metadata">

**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:** [July 29, 2020, 10:52pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/509 "2020-07-29T22:52:48Z")

</div>

Oh I’m sorry, the last time I read the op it wasn’t there. But thanks a lot for sharing! 😃

---

<div class="post-metadata">

**Author:** ![johannes1702](https://avatars.discourse-cdn.com/v4/letter/j/db5fbb/32.png) [@johannes1702](https://community.homey.app/u/johannes1702)\
**Post date:** [July 30, 2020, 10:13am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/510 "2020-07-30T10:13:23Z")

</div>

I have a question: Is there any way to show the time of alarms set in Homey? And to change it? 🙂  
Johannes

---

<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:** [July 30, 2020, 10:56am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/511 "2020-07-30T10:56:11Z")

</div>

I don’t even think it’s possible to change the time of Homey directly inside a flow? (I only see on / off). It’s probably doable, but I think you need the help of HomeyScript to do that.  
NodeRed =\> HomeyFlow (activated on MQTT client) =\> Run HomeyScript =\> Change Alarm time

If you only set the alarm inside node-red, there’s no need to communicate changes with Node-red.

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

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