# 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:** 36
**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:** [February 6, 2021, 7:28pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/719 "2021-02-06T19:28:45Z")
That’s only nodered, Mqtt is port 1883. ---
**Author:** ![CB83](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/cb83/32/30125_2.png) [@CB83](https://community.homey.app/u/CB83)\ **Post date:** [February 6, 2021, 9:25pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/720 "2021-02-06T21:25:15Z")
Thank you for your reply 👌 just started with node red and much to learn! ---
**Author:** ![Kees\_Van\_der\_linden](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/kees_van_der_linden/32/32625_2.png) [@Kees\_Van\_der\_linden](https://community.homey.app/u/Kees_Van_der_linden)\ **Post date:** [February 9, 2021, 4:16pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/721 "2021-02-09T16:16:47Z")
I have a weird problem and can’t solve it. I have some buttons on my dashboard to switch some lights. First problem: After starting my dashboard I cannot switch my lights. When i push (on my dashboard) the button to switch on the light i see In MQTT Explorer a “true” is send from the dashboard to Homey but no reaction. I have first switch the lights via my Homey app and then i can switch the light from the Node Red dashboard. Second problem: When i switch on one light it is not possble to switch the other lights. The other light is sending a false to Homey (seeing in the debugger and MQTT Explorer). First i have to unswitch the first light and then i can switch another light (then it is sending a true ). Below an example of my lights. ``` [{"id":"64ad8e1c.e4af","type":"mqtt out","z":"a7848b32.0d1518","name":"MQTT transmit","topic":"","qos":"0","retain":"","broker":"b445c9bc.6efa58","x":780,"y":380,"wires":[]},{"id":"a74d3afa.619068","type":"ui_button","z":"a7848b32.0d1518","name":"kast","group":"7f4f08e7.ea2438","order":6,"width":3,"height":1,"passthru":false,"label":"Kast","tooltip":"","color":"","bgcolor":"{{color}}","icon":"fa-2x fa-power-off","payload":"state","payloadType":"flow","topic":"homie/homey-topic/woonkamer-kast/onoff/set","x":510,"y":380,"wires":[["64ad8e1c.e4af"]]},{"id":"409f7d07.beb0f4","type":"function","z":"a7848b32.0d1518","name":"State2Color","func":"if (msg.payload === \"true\"){\n msg.color = \"green\"; \n flow.set(\"state\", \"false\");\n}\nelse {\n msg.color = \"#C0C0C0\";\n flow.set(\"state\", \"true\");\n }\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":350,"y":380,"wires":[["a74d3afa.619068"]]},{"id":"fa0edc3b.bfc19","type":"mqtt in","z":"a7848b32.0d1518","name":"Receiver Kast","topic":"homie/homey-topic/woonkamer-kast/onoff","qos":"2","datatype":"auto","broker":"b445c9bc.6efa58","x":130,"y":380,"wires":[["409f7d07.beb0f4"]]},{"id":"b445c9bc.6efa58","type":"mqtt-broker","name":"","broker":"192.168.1.14","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"7f4f08e7.ea2438","type":"ui_group","name":"Woonkamer","tab":"cf91514e.cbeaf","order":2,"disp":true,"width":"6","collapse":true},{"id":"cf91514e.cbeaf","type":"ui_tab","name":"Homey Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}] ``` ---
**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:** [February 9, 2021, 4:25pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/722 "2021-02-09T16:25:40Z")
Have you tried using a switch instead of using a button? I personally never used the “flow” option. I always send booleans: ![afbeelding](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/4/d/4dac65873179cb2190531928388da1c57091202a.png) ---
**Author:** ![Kees\_Van\_der\_linden](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/kees_van_der_linden/32/32625_2.png) [@Kees\_Van\_der\_linden](https://community.homey.app/u/Kees_Van_der_linden)\ **Post date:** [February 9, 2021, 4:37pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/723 "2021-02-09T16:37:42Z")
Hi Satoer, Thanks for your quick reply. Okay i will try the switsh in stead of the button You mean this switch? ![Naamloos](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/6/1/6154c911ab87507b2f041322fed8e986a77c3e06.jpeg) Do you mean this setting concerning the Boolean? ![Naamloos](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/5/a/5afb4ca91052acb4061392234c41a94ae160c0e2.jpeg) ---
**Author:** ![Kees\_Van\_der\_linden](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/kees_van_der_linden/32/32625_2.png) [@Kees\_Van\_der\_linden](https://community.homey.app/u/Kees_Van_der_linden)\ **Post date:** [February 9, 2021, 8:51pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/724 "2021-02-09T20:51:56Z")
I replaced my buttens with the switches and it is much more stable. But still i have the problem: first use de switches in the Homey app before they work on the dashboard. ---
**Author:** ![victoroos](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/victoroos/32/8344_2.png) [@victoroos](https://community.homey.app/u/victoroos)\ **Post date:** [February 11, 2021, 4:10pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/725 "2021-02-11T16:10:37Z")
is there a way I can set up presence as viewable in the dashboard? 🙂 ---
**Author:** ![CB83](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/cb83/32/30125_2.png) [@CB83](https://community.homey.app/u/CB83)\ **Post date:** [February 11, 2021, 8:26pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/726 "2021-02-11T20:26:19Z")
ive been trying to modify my dashboard by moving around buttons, graphs etc. But i cant seem to understand how to move them around. I go to “layout” but i am not allowed to move the different things i have there. What am i doing wrong ? ---
**Author:** ![Torbjorn\_Melbye](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/torbjorn_melbye/32/18194_2.png) [@Torbjorn\_Melbye](https://community.homey.app/u/Torbjorn_Melbye)\ **Post date:** [February 13, 2021, 7:22pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/727 "2021-02-13T19:22:43Z")
Yes. Create a virtual switch and a flow to make that go on/off with presence, then connect that switch to your dashboard. ---
**Author:** ![victoroos](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/victoroos/32/8344_2.png) [@victoroos](https://community.homey.app/u/victoroos)\ **Post date:** [February 15, 2021, 10:33am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/729 "2021-02-15T10:33:16Z")
wow, fancy. Is that a still image with custom buttons over it? ---
**Author:** ![victoroos](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/victoroos/32/8344_2.png) [@victoroos](https://community.homey.app/u/victoroos)\ **Post date:** [February 15, 2021, 12:40pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/731 "2021-02-15T12:40:36Z")
lights, and turning of and on works. NExt two steps… setting light colour (color temp mostly!)/ brightness (for hue) and Temperature of a room with tado. Any tips where to look for? This is tough, but so much fun to dive into ---
**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:** [February 15, 2021, 1:06pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/732 "2021-02-15T13:06:06Z")
> [@victoroos](#): > > Temperature of a room with tado. Any tips where to look for? I do stuff with this one: [node-red-contrib-tado-client (node) - Node-RED](https://flows.nodered.org/node/node-red-contrib-tado-client) For example geolocation from Tado to Homey:[Tado Thuis/Afwezig na update - #46 by M\_a\_r\_c\_o](https://community.homey.app/t/tado-thuis-afwezig-na-update/27784/46) ---
**Author:** ![victoroos](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/victoroos/32/8344_2.png) [@victoroos](https://community.homey.app/u/victoroos)\ **Post date:** [February 15, 2021, 1:46pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/733 "2021-02-15T13:46:40Z")
Where do you paste the CSS? I found the themes tab etc, but that is it… GOgle isn’t useful ;S ---
**Author:** ![Alcor](https://avatars.discourse-cdn.com/v4/letter/a/a88e4f/32.png) [@Alcor](https://community.homey.app/u/Alcor)\ **Post date:** [February 15, 2021, 2:04pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/734 "2021-02-15T14:04:05Z")
It is a still image (svg) to which svg elements have been added. ---
**Author:** ![CB83](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/cb83/32/30125_2.png) [@CB83](https://community.homey.app/u/CB83)\ **Post date:** [February 15, 2021, 4:12pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/735 "2021-02-15T16:12:46Z")
Is that your actual house? ---
**Author:** ![Alcor](https://avatars.discourse-cdn.com/v4/letter/a/a88e4f/32.png) [@Alcor](https://community.homey.app/u/Alcor)\ **Post date:** [February 15, 2021, 5:54pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/736 "2021-02-15T17:54:45Z")
Yes, based on original plans. All precisely scaled 🙂 ---
**Author:** ![CB83](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/cb83/32/30125_2.png) [@CB83](https://community.homey.app/u/CB83)\ **Post date:** [February 15, 2021, 6:20pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/737 "2021-02-15T18:20:07Z")
Damn nice! Are there any guide for us “dummies” how to make something like this? ---
**Author:** ![Kees\_Van\_der\_linden](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/kees_van_der_linden/32/32625_2.png) [@Kees\_Van\_der\_linden](https://community.homey.app/u/Kees_Van_der_linden)\ **Post date:** [February 15, 2021, 7:40pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/738 "2021-02-15T19:40:05Z")
I have a small problem: When i display my Dashboard on an ipad1, some pane’s overlap. Any idea? I don’t have this problem on my desktop. ![iPad1](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/8/b/8b96398000e4cca7d67217c4808bde484c506ffb.jpeg) ---
**Author:** ![Alcor](https://avatars.discourse-cdn.com/v4/letter/a/a88e4f/32.png) [@Alcor](https://community.homey.app/u/Alcor)\ **Post date:** [February 16, 2021, 6:37pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/739 "2021-02-16T18:37:36Z")
I consider myself to be a dummy… If you don’t mind learning from a amateur: 1. Made a 3d model in SweetHome3D [Sweet Home 3D : User's guide](http://www.sweethome3d.com/userGuide.jsp) 2. Exported 3D model to png 3. Imported 3d png into Inkscape [https://inkscape.org/](https://inkscape.org/) 4. Exported svg from Inkscape 5. Added svg contrib ui node to nodered > **[node-red-contrib-ui-svg](https://flows.nodered.org/node/node-red-contrib-ui-svg)** > > A Node-RED widget node to show interactive SVG (vector graphics) in the dashboard 1. Opened exported svg in text editor (e.g. notepad). Copied data from text editor 2. Pasted data from text editor in contrib-ui-svg node 3. Opened svg editor included in the contrib-ui-svg and added elements. Named elements. Example on how to do this: > **[bartbutenaers/node-red-contrib-ui-svg](https://github.com/bartbutenaers/node-red-contrib-ui-svg)** > > A Node-RED widget node to show interactive SVG (vector graphics) in the dashboard 1. Deploy Issues: Although I converted the 3D model to an svg, it is not a ‘true’ svg in the sense that it is still a basic picture, not consisting of separate elements. I do not have enough knowledge on how to make a 3D model consisting of separate elements. Hope this helps! ---
**Author:** ![CB83](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/cb83/32/30125_2.png) [@CB83](https://community.homey.app/u/CB83)\ **Post date:** [February 17, 2021, 7:31am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/740 "2021-02-17T07:31:12Z")
Thanks man! Or women 😁 will definitely try it out after i get a little more familiar with node red [Previous page](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798.md?page=35) [Next page](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798.md?page=37)