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

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    background: -webkit-linear-gradient(\n    55deg,\n    #009785 0%,\n    #245aa5 50%,\n    #b800e9 100%\n    );\n    -webkit-touch-callout: none !important;\n}\n\nbody.nr-dashboard-theme md-toolbar,\nbody.nr-dashboard-theme md-content md-card {\n    background-color: transparent !important;\n    color: #FFFFFF;\n}\n\nui-card-panel {\n    background-color: rgba(255,255,255,0.1) !important;\n    border-radius: 10px !important;\n}\n    \n#Homey_Dashboard_Navigation {\n    background-color: transparent !important;\n    border-radius: 10px !important;\n}\n\n.md-card.md-default-theme, md-card {\n    border-radius: 10px;\n}\n\n.nr-dashboard-switch.ng-scope {\n    background-color: rgba(255,255,255,.2) !important;\n}\n\n.nr-dashboard-switch.ng-scope:hover {\n    background-color: rgba(255,255,255,.5) !important;\n}\n\n.nr-dashboard-theme .nr-dashboard-button .md-button {\n    background-color: rgba(255,255,255,.2);\n}\n\n.md-button {\n    border-radius: 10px;\n}\n\n.nr-dashboard-cardpanel layout-column {\n    background-color: rgba(255,255,255,0.2) !important;\n    background-color: transparent !important;\n    border-radius: 10px !important;\n}\n\n.nr-dashboard-theme ui-card-panel {\n    border: none;\n}\n\n.nr-dashboard-template {\n    overflow-y: visible;\n}\n.nr-dashboard-theme md-content md-card {\n    background-color: transparent !important;\n}\n\n.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n    color: rgba(255, 255, 255, 0.5);\n}\n</style>\n\n<script>\ndocument.ontouchmove = function (e) {\n    e.preventDefault();\n}\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":420,"y":160,"wires":[[]]},{"id":"339d0edc.4ffe02","type":"ui_group","z":"","name":"Heure","tab":"a2490d0e.a872b","order":1,"disp":false,"width":"6","collapse":false},{"id":"a2490d0e.a872b","type":"ui_tab","z":"","name":"Homey Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

With some modifications, you have the final Dashboard.

7 Likes

Nice, I’ve added it to the first page.

1 Like

Is there someone who has the ikea node up and running?

It won’t find my ikea gateway

this is what i have in the code and it doesn’t work for me

[{“id”:“32211b1e.661164”,“type”:“mqtt in”,“z”:“3710c95a.3a55f6”,“name”:“set Lightscene”,“topic”:“homie/homey-bunderstraat/setlightscene”,“qos”:“2”,“datatype”:“auto”,“broker”:“6a86d592.e1abcc”,“x”:430,“y”:360,“wires”:[[“4dc1057a.fdb4cc”,“aa74077f.56aa68”]]},{“id”:“4dc1057a.fdb4cc”,“type”:“function”,“z”:“3710c95a.3a55f6”,“name”:“Activate Button”,“func”:“var color;\n\nif(msg.payload === “Avond”){\n// state is true (lets make button green)\n color = “#53c653”;\n}\nelse{\n // state is false (lets make button blue)\n color = “#0094ce”;\n}\n\nmsg = {background:color};\nreturn msg;”,“outputs”:1,“noerr”:0,“x”:660,“y”:340,“wires”:[[“4df08771.8b0278”]]},{“id”:“4df08771.8b0278”,“type”:“ui_button”,“z”:“3710c95a.3a55f6”,“name”:“sfeerlicht”,“group”:“ceb9ab36.573ae8”,“order”:2,“width”:3,“height”:1,“passthru”:true,“label”:“Sfeerlicht”,“tooltip”:"",“color”:"",“bgcolor”:"{{msg.background}}",“icon”:"",“payload”:“Avond”,“payloadType”:“str”,“topic”:“homie/homey-bunderstraat/sfeerlicht/button/set”,“x”:870,“y”:340,“wires”:[[“606a32bc.a8311c”]]},{“id”:“606a32bc.a8311c”,“type”:“mqtt out”,“z”:“3710c95a.3a55f6”,“name”:"",“topic”:"",“qos”:"",“retain”:“true”,“broker”:“6a86d592.e1abcc”,“x”:1090,“y”:360,“wires”:},{“id”:“aa74077f.56aa68”,“type”:“function”,“z”:“3710c95a.3a55f6”,“name”:“Activate Button”,“func”:“var color;\n\nif(msg.payload === “allesuit”){\n// state is true (lets make button green)\n color = “#53c653”;\n}\nelse{\n // state is false (lets make button blue)\n color = “#0094ce”;\n}\n\nmsg = {background:color};\nreturn msg;”,“outputs”:1,“noerr”:0,“x”:660,“y”:380,“wires”:[[“2ac5009f.977a2”]]},{“id”:“2ac5009f.977a2”,“type”:“ui_button”,“z”:“3710c95a.3a55f6”,“name”:“Alles uit”,“group”:“ceb9ab36.573ae8”,“order”:2,“width”:3,“height”:1,“passthru”:true,“label”:“Alles UIT”,“tooltip”:"",“color”:"",“bgcolor”:"{{msg.background}}",“icon”:"",“payload”:“allesuit”,“payloadType”:“str”,“topic”:“homie/homey-bunderstraat/alles-uit-scene/button/set”,“x”:870,“y”:380,“wires”:[[“606a32bc.a8311c”]]},{“id”:“6a86d592.e1abcc”,“type”:“mqtt-broker”,“z”:"",“name”:“MQTT Server Bunderstraat”,“broker”:“192.168.1.109”,“port”:“1883”,“clientid”:"",“usetls”:false,“compatmode”:false,“keepalive”:“60”,“cleansession”:true,“birthTopic”:"",“birthQos”:“0”,“birthPayload”:"",“closeTopic”:"",“closeQos”:“0”,“closePayload”:"",“willTopic”:"",“willQos”:“0”,“willPayload”:""},{“id”:“ceb9ab36.573ae8”,“type”:“ui_group”,“z”:"",“name”:“Scenes”,“tab”:“5064ff32.6db5c”,“order”:5,“disp”:false,“width”:6,“collapse”:false},{“id”:“5064ff32.6db5c”,“type”:“ui_tab”,“z”:"",“name”:“Dashboard Home”,“icon”:“fa-home”,“order”:1,“disabled”:false,“hidden”:false}]

Wow! Thank you! I did just a copy / paste of the code and my dashboard already looks great! Now I have a great base to edit my dashboard. Thanks.

1 Like

Hi @rkokkelk

Could you share your flows on setting the buttons and how you manage to change colors, etc. Thanks!

I’m using only a button template, just because you can change only the icon color with the switch template, with the button you have access to the background color. The trick for keeping the state of of your object is using a boolean variable and store it.

My flow for the button template :slightly_smiling_face:

[{"id":"bf6f5dba.1e48f8","type":"ui_button","z":"d6fa9f2d.3d501","name":"ON/OFF Lampe Bureau","group":"a9bd2e1d.1bde3","order":8,"width":3,"height":1,"passthru":false,"label":"{{msg.topic}}","tooltip":"","color":"","bgcolor":"{{msg.background}}","icon":"fa-power-off fa-2x","payload":"lightstate_bureau","payloadType":"global","topic":"homie/homey-topic/lampebureau/onoff/set","x":810,"y":1360,"wires":[["864c9074.1dfa4"]]},{"id":"864c9074.1dfa4","type":"function","z":"d6fa9f2d.3d501","name":"Toggle On / Off","func":"var lightstate_bureau = flow.get(\"lightstate_bureau\") || false;\nmsg.payload = !lightstate_bureau;\nreturn msg;","outputs":1,"noerr":0,"x":1040,"y":1360,"wires":[["b4126e1c.ec2c3"]],"inputLabels":["input"],"outputLabels":["to button"]},{"id":"7788fc72.df1b3c","type":"mqtt in","z":"d6fa9f2d.3d501","name":"MQTT Lampe Bureau","topic":"homie/homey-topic/lampebureau/onoff","qos":"0","datatype":"auto","broker":"eda480cd.72d73","x":380,"y":1360,"wires":[["6561ae0e.a2bac"]]},{"id":"6561ae0e.a2bac","type":"function","z":"d6fa9f2d.3d501","name":"Object State","func":"var lightstate_bureau = flow.get(\"lightstate_bureau\") || undefined;\nvar label;\nvar color;\n\nif(msg.payload === \"true\"){\n label = 'LAMPE BUREAU';\n color = \"#FFC815\";\n lightstate_bureau = true;\n}\nelse{\n label = 'LAMPE BUREAU';\n color = \"\";\n lightstate_bureau = false;\n}\n\nflow.set(\"lightstate_bureau\",lightstate_bureau);\nmsg = {topic:label, background:color};\n\nreturn msg;","outputs":1,"noerr":0,"x":590,"y":1360,"wires":[["bf6f5dba.1e48f8"]]},{"id":"b4126e1c.ec2c3","type":"mqtt out","z":"d6fa9f2d.3d501","name":"MQTT Lampe Bureau","topic":"homie/homey-topic/lampebureau/onoff/set","qos":"","retain":"","broker":"eda480cd.72d73","x":1260,"y":1360,"wires":[]},{"id":"a9bd2e1d.1bde3","type":"ui_group","z":"","name":"Eclairage","tab":"a2490d0e.a872b","order":9,"disp":true,"width":"6","collapse":true},{"id":"eda480cd.72d73","type":"mqtt-broker","z":"","name":"Homey MQTT Riko","broker":"192.168.0.34","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"homey-topic/hub/status","birthQos":"2","birthRetain":"false","birthPayload":"msg.payload","closeTopic":"","closeQos":"2","closeRetain":"false","closePayload":"","willTopic":"","willQos":"2","willRetain":"false","willPayload":""},{"id":"a2490d0e.a872b","type":"ui_tab","z":"","name":"Homey Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
2 Likes

Hello @DeepBlueNine , I have taken over your process and adapted it to my lamp. The status of the lamp is displayed correctly. The lamp can be switched off but not switched on. Do you know what that could be? Thank you very much!

Hi @lirand
Try to put a “Debug” node after the “Toggle ON/OFF” and check if the button works fine.

I get the following message:
homie/homey-topic/stehleuchtewz/onoff/set : msg.payload : boolean
false

Maybe you have misspelled your boolean variable in the node function, can you share your flow or check it ? You can also try to switch the light ON/OFF, but not with the Dashboard, maybe with Homey, and check if you see true/false in the Node-Red debug.

Sorry guys, but this is a real noob question. I tried to find my answer somewhere among the the 400+ replies here but I didn’t manage. I just setup Node Red on Docker (Synology) today, created a MQTT broker on the same platform (Mosquitto) and succesfully setup MQTT Hub and Client on Homey.

I tested with Satoer’s flow (MQTT Receiver to output debug), and actually I got a hit right away. But in the debug log it looks like it only displays a certain kind of devices, like temperature sensors and stuff like that. I can’t find any lights or other devices (yes, the MQTT hub broadcasts all devices)

Any ideas what went wrong or how I can troubleshoot?

Switch on and off the lights inside Homey, do you see any debug information?

Still experimenting. The layout is still far from finished, but I have some nice functionality already:

Some temperatures. The background colors of the temperatures change acording to the temperature. For the bedroom and outside temp, even the icon changes (empty meter up to full meter).

Modes. The buttons work and only the activated mode is blue, te others transparant.

Locks. The icons are closed for closed locks and open for open locks. Background color also changes.

Gas/power. Used power and gas from today

Roborock. State of the vacuum cleaner is stated and i can start/stop it.

Still a lot of work to do. But thanks to this topic it’s getting better bit by bit.

6 Likes

How did you do that the symbols change when the status changes?

You can change the on and off icon from switch nodes:
afbeelding

Hi Satoer! I got that fixed, sorry for disturbing you! I will try to catch up on every post, this is really interesting!!

Hi all,

Such a lengthy but very intersting topic. Started to learn about Node Red and MQTT a few days ago and really love it :slight_smile:

One question: Let’s assume I put a button on a dashboard and want to trigger a flow with this in Homey. Is there any nice way in doing it? Really sorry if I missed it in the long thread.

Johannes

The TEST button with the open lock is a switch. That one works like @Satoer says. But you can’t change the background color of a switch and the font of the text looks a bit diferent. So I use buttons instead of switches now. For example with the “Keukendeur” I use a Function with this code:

var color;

if(msg.payload === "true"){
 color = "#FFC815"
 msg.ui_control = {icon:"fa-2x fa-unlock", tooltip:"Deur open"};
}

else{
 color = "rgba(255, 255, 255,.08)"
 msg.ui_control = {icon:"fa-2x fa-lock", tooltip:"Deur dicht"};
}
msg.background = color;
return [msg];

Or import this in to node-red:

[{"id":"a65e9076.3be4c","type":"mqtt in","z":"7b4023c5.1e24fc","name":"MQTT HA Voordeur","topic":"homie/homey-topic/hal-deur-plus/alarm-contact","qos":"2","datatype":"auto","broker":"649f9a36.29ece4","x":130,"y":1900,"wires":[["d55af3ce.c3078"]]},{"id":"94484bae.f300f8","type":"ui_button","z":"7b4023c5.1e24fc","name":"","group":"ba312333.3bdaf","order":12,"width":0,"height":0,"passthru":false,"label":"HA Voordeur","tooltip":"","color":"","bgcolor":"{{msg.background}}","icon":"{{msg.icon}}","payload":"","payloadType":"str","topic":"","x":730,"y":1900,"wires":[[]]},{"id":"d55af3ce.c3078","type":"function","z":"7b4023c5.1e24fc","name":"Kleur en icoon","func":"var color;\n\nif(msg.payload === \"true\"){\n color = \"#FFC815\"\n msg.ui_control = {icon:\"fa-2x fa-unlock\", tooltip:\"Deur open\"};\n}\n\nelse{\n color = \"rgba(255, 255, 255,.08)\"\n msg.ui_control = {icon:\"fa-2x fa-lock\", tooltip:\"Deur dicht\"};\n}\nmsg.background = color;\nreturn [msg];\n\n\n","outputs":1,"noerr":0,"x":380,"y":1900,"wires":[["94484bae.f300f8"]]},{"id":"649f9a36.29ece4","type":"mqtt-broker","z":"","name":"MQTT server Jeroen","broker":"192.168.178.129","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"ba312333.3bdaf","type":"ui_group","z":"","name":"Group 3","tab":"bf9cdcc.4e7c92","order":3,"disp":false,"width":"3","collapse":false},{"id":"bf9cdcc.4e7c92","type":"ui_tab","z":"","name":"Startscherm","icon":"home","order":1,"disabled":false,"hidden":false}]
2 Likes

Can you explane to me how to do this? I look around in Node Red but have no idea where to paste the code you have shared.

Hi @Jan_Willem_Visser
It’s explained in the first post of @Satoer, here : Node Red: A widget based dashboard working with Homey trough MQTT