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

That’s only nodered, Mqtt is port 1883.

Thank you for your reply :ok_hand: just started with node red and much to learn!

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}]

Have you tried using a switch instead of using a button?
I personally never used the “flow” option. I always send booleans:
afbeelding

Hi Satoer,
Thanks for your quick reply.

Okay i will try the switsh in stead of the button
You mean this switch?
Naamloos

Do you mean this setting concerning the Boolean?
Naamloos

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.

is there a way I can set up presence as viewable in the dashboard? :slight_smile:

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 ?

Yes. Create a virtual switch and a flow to make that go on/off with presence, then connect that switch to your dashboard.

wow, fancy. Is that a still image with custom buttons over it?

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

I do stuff with this one: node-red-contrib-tado-client (node) - Node-RED

For example geolocation from Tado to Homey:Tado Thuis/Afwezig na update - #46 by M_a_r_c_o

1 Like

Where do you paste the CSS? I found the themes tab etc, but that is it… GOgle isn’t useful ;S

It is a still image (svg) to which svg elements have been added.

1 Like

Is that your actual house?

Yes, based on original plans. All precisely scaled :slight_smile:

Damn nice! Are there any guide for us “dummies” how to make something like this?

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.

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

  2. Exported 3D model to png

  3. Imported 3d png into Inkscape
    https://inkscape.org/

  4. Exported svg from Inkscape

  5. Added svg contrib ui node to nodered

  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:

  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!

2 Likes

Thanks man! Or women :grin: will definitely try it out after i get a little more familiar with node red