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

I have added my blinds to my dashboard with a slider. It works great.

But has anyone added a sunscreen with 3 possibilities (up/down/stop) and show it here?
I tried with the inject node and a switch node.

Thanks

If you change:

if(msg.payload === "true"){

to:

if(msg.payload > 0){

it should work. You are basically saying: "If the heating power is higher than 0 “BoilerState = true” (else false). You can change the number if you want it to activate on a higher value.

Complete code:

var BoilerState=global.get("BoilerState") || false;
if(msg.payload > 0){
   global.set("BoilerState",true);
}else{
   global.set("BoilerState",false);
}
return msg;

(The code can be optimized to two lines, but I think this is more understandable)

@Satoer That’s working. Thank you very much :slight_smile:

Wow, this looks very promising; I’m also going to try this one out! HomeyDash was a great start, but like Satoer said; a lot of presses are needed to controll the one or another. I’ve also stumbled across this beautifull theme for Home assistent, but I’ve no knowledge of it;

Is this somehow useable with Node Red @Satoer ?

1 Like

I think everything is possible. But I haven’t dived in different templates myself. I just use default template.
I recently stumbled upon the node-red dashboard from user @DeepBlueNine. I believe he made some custom CSS to make it look more like the Homey-Dash design.

2 Likes

You can change a lot of things by modifying the Node-Red CSS. For example, by changing the background from my custom css, and with a dark background for the groups, instead of the white, you have this :

By changing just 2 CCS lines, you have a new Dashboard :slightly_smiling_face:
With some work on the CSS, you can make a Dashboard that’s look like this Home Assitant theme.

5 Likes

Do you use the UI template node for this?

Yes, an UI Template, in the <head> section.

Would be cool if you want to share your template with us. :slight_smile: I’ve played around with the CSS is the template, and I can get some things done, like a gradient background and some (alsmost) transparant / milky parts, but it is far from what you’ve created.

how do you program the Execute MQTT Lightscene? i cant get it to work the buttons don’t change from color

I still have one Node-Red tutorial for the French section to make, but after, I’ll post my custom CSS with some explanations here.

6 Likes

It activates virtual buttons. When these buttons are “pressed”, or activated trough MQTT:
homie/homey-topic/sfeerlicht/button/set (true)
they activate a flow:

can you please send me the code i can’t get it to work

But have you added this in the flow:


This will send a message to Node-red and act on it (make the button change color for example).
Have you looked at the node red MQTT debug window and watch if there’s an incoming message?

Yes in node red debug the message comes in but the output don’t work and the button is not changing color. Tonight i post my flow and node red pictures so you can take a look

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