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

[Odechr]

@Satoer: I think i read somwhere that you wanted to controll hue. This might work, but directly connected to the hub: https://flows.nodered.org/node/node-red-contrib-huemagic

[Morad_Ahassad]

Thank you Roy for you answer.

I followed the guide and i´ve entered the topic. Also in the debug window i can see that topic is commuicated when i change the the light status in the dashboard. So Everything looks to be communicating as it should.
When i turn the light on / off with the Homey app, the topic is shown in the debug window in Node-red.
thank you for your help.

[{“id”:“f2dac12a.e5ce4”,“type”:“ui_switch”,“z”:“a6a98136.9fb52”,“name”:“Light switch “,“label”:“Light”,“tooltip”:””,“group”:“875eec98.94cf9”,“order”:9,“width”:“3”,“height”:“1”,“passthru”:false,“decouple”:“false”,“topic”:“homie/homey-topic/slingan/onoff/set”,“style”:"",“onvalue”:“true”,“onvalueType”:“bool”,“onicon”:"",“oncolor”:"",“offvalue”:“false”,“offvalueType”:“bool”,“officon”:"",“offcolor”:"",“x”:150,“y”:240,“wires”:[[“7d5c23f2.42c3cc”]]},{“id”:“7d5c23f2.42c3cc”,“type”:“mqtt out”,“z”:“a6a98136.9fb52”,“name”:“MQTT Light transmit”,“topic”:"",“qos”:“2”,“retain”:"",“broker”:“10d009aa.b387c6”,“x”:620,“y”:240,“wires”:},{“id”:“875eec98.94cf9”,“type”:“ui_group”,“z”:"",“name”:“Lampen”,“tab”:“7766afc2.589bb”,“order”:1,“disp”:true,“width”:“6”,“collapse”:false},{“id”:“10d009aa.b387c6”,“type”:“mqtt-broker”,“z”:"",“name”:“Homey MQTT”,“broker”:“192.168.50.238”,“port”:“1883”,“clientid”:"",“usetls”:false,“compatmode”:true,“keepalive”:“60”,“cleansession”:true,“birthTopic”:"",“birthQos”:“0”,“birthPayload”:"",“closeTopic”:"",“closeQos”:“0”,“closePayload”:"",“willTopic”:"",“willQos”:“0”,“willPayload”:""},{“id”:“7766afc2.589bb”,“type”:“ui_tab”,“z”:"",“name”:“Homey Dashboard”,“icon”:“dashboard”,“order”:1,“disabled”:false,“hidden”:false}]

[Roy_Hopman]

Is it working properly now?

[Roy_Hopman]

Hi Satoer,

Have tried the standard icons which seems so work without script requirements. Only if they are to be used on certain terms you’ll need to code it. Thank you once again for your help.

[Roy_Hopman]

Ive been reading node red forums on how to style the dashboard, but as of yet i have only found options using a ccs and html. Is there any way for me to fill the dashboard without having to learn ccs? Currently i have a couple of switches and information set up. I would like to include my 2 hikvision cams (live stream if possible) and possibly an alarm tab later on. If i look at all the examples here on the forum they are all nice and square, but mine is blocky because i dont have more information to put in there. Is there any ‘filler’ or something for this?

Also tried to have time/day on top and all others nicely alligned a little under that but that also seems to require coding skills i dont have

[Morad_Ahassad]

Hi,

Finally it works… After a couple of restarts of the client app.

Thank you!

[Roy_Hopman]

Hi Joost,

Sorry to bother you but i have been trying to get a news feed on my Dashboard just like you have. i started out with an RSS receiver but i can’t get it to work properly. Are you willing to share your script with the NOS newsfeed?

Thanks in advance,

[Roy_Hopman]

Hi Satoer,

Did you find any solution for the RGB wheel in the end? i can’t seem to get this to work. Have also posted on the MQTT Hub to find the cause of my RGB wheel not functioning. It would just be nice to have a second TAB on Dashboard with a large RGB wheel to control my living room + open kitchen.

If you still have no solution, could you please share one of the Scripts of the color buttons you have made? i will then just recreate the same with a range of colors to choose from.

[Satoer]

@Roy_Hopman

Have tried the standard icons which seems so work without script requirements. Only if they are to be used on certain terms you’ll need to code it. Thank you once again for your help.

Have you seen the Solution from user @Keverjeroen? If you want dynamic icon’s this is a better solution than mine:

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

I’ve used the msg.ui_control now to thange the icon of a button. With msg.ui_control you can change almost everything in the dashboard. var color; if(msg.payload <= 15){ // It is cold (lets make button blue and set icon) color = "#1848DC" msg.ui_control = {icon:"wi-wu-chancesnow", tooltip:"Het is koud"}; } else if(msg.payload <= 21){ // It is normal (lets make button orange and set icon) color = "#FF6813" msg.ui_control = {icon:"wi-wu-cloudy", tooltip:"Lekker warm"}; } else{ // It is h…

@Roy_Hopman

Ive been reading node red forums on how to style the dashboard, but as of yet i have only found options using a ccs and html. Is there any way for me to fill the dashboard without having to learn ccs?

You can adjust all the sizes of the grid over here:

You can also add things like buienradar.

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

You don’t have to refresh the whole page for using buien radar (or any other image that needs updating). Just use a timestamp node that triggers every minute (or 5 minutes or whatever). Connect that to a function node with this: msg.payload = "https://api.buienradar.nl/image/1.0/RadarMapNL?w=720&h=600?"+Math.random(); return msg; The “?”+Math.random(); makes the difference. Everything behind the ? gets ignored, but with the random number behind it, the browser thinks it’s a different image an…

@Roy_Hopman

Is there any ‘filler’ or something for this?

In the lay-out section, you can add fillers to every group:

@Roy_Hopman

Hi Satoer,

Did you find any solution for the RGB wheel in the end?

Well… my Homeyscript solution I posted works perfectly fine (I’ve already shared the script over there). It’s a bit of a ugly workaround but it have not failed me once. User @xAPPO had a follow up on that post with more possible solutions:

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

According to the homie3 specification it should just be 3 values h,s,v comma delimited to the color topic. They should be 0-255,0-100,0-100 color=200,70,80 no spaces I have not tried this on Homey but that’s how I’m using it on Hubitat with homie. I’ll try it later if I can find a colour bulb to add. There is another variant when in RGB mode that supports the same 3 values RGB but each is 0-255 this time. Im assuming this wasn’t Homey’ised’ as 0.0 to 1.0 float values… like dim level.

I have not tried to investigate further (didn’t had the time). And I don’t recall see a working confirmation from him.

One thing you also should ask yourself: “Am I really going to use it”. Because I have made a nice interface: If I enable a light, a whole extra interface appears to control the color, white mode or brightness… But I actually hardly use it. It’s just way more convenient to use the scene buttons and let every light set a preconfigured state.

The light setup in my usage is a bit complicated setup. If I need to share it, I need to simplify it to make it a bit more understandable I think. And need to translate everything, because somehow I have the annoying habit to mix English and Dutch together

[Roy_Hopman]

Thank you for your information. it’s really nice to have someone on this topic that has traveled this path. I’ll try to answer the simple questions for any other newcomers, it i’m not that far yet.

I agree with you there. i don’t know if i will use it, but i do know that i dont want to open the Homey app to change color.

Do you send a topic similar to : Homie/topic/LAMPNAME/color/set/RED for these buttons or does that require translation as well?

PS; Dutch/English is not a problem at all. i can do both. But i primarily wanted to example for the color buttons to see the build and topics used.

[Joost_van_Liempt]

Hi Roy,

I used the HTTP get command instead of the RSS feed. The withdrawal of the rss is that it will only load the new items (so most of the time just one item)
Unfortunately I am not able to export right now, so hereby some screenshots.
The xml is just the xml node without any changes.

[Roy_Hopman]

I have copied your exact setup, it works perfectly.
Thank you very much!

[Roy_Hopman]

In case you might ever consider trying the color picker. Here is a functioning example.

[{"id":"929a741d.744728","type":"csv","z":"c1ef2e20.6f3b3","name":"","sep":",","hdrin":"","hdrout":"","multi":"one","ret":"\\n","temp":"h, s, v","skip":"0","strings":true,"x":330,"y":1620,"wires":[["54346b96.16e034"]]},{"id":"c0240a88.dd5588","type":"function","z":"c1ef2e20.6f3b3","name":"hsv Conversion","func":"var h =  msg.payload[0]\nvar s = (msg.payload[1] * 100)\nvar v = (msg.payload[2] * 100)\n\nh = parseFloat(h).toFixed(0)\ns = parseFloat(s).toFixed(0)\nv = parseFloat(v).toFixed(0)\n\nmsg.payload = h + \",\" + s + \",\" + v \n\nreturn msg;\n\n//{\"r\":255,\"g\":0,\"b\":0}","outputs":1,"noerr":0,"x":750,"y":1760,"wires":[["e7e00f4d.bc3ce"]]},{"id":"54346b96.16e034","type":"split","z":"c1ef2e20.6f3b3","name":"","splt":",","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":500,"y":1660,"wires":[["15064a40.19fb86"]]},{"id":"15064a40.19fb86","type":"join","z":"c1ef2e20.6f3b3","name":"","mode":"custom","build":"array","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":false,"timeout":"","count":"3","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":620,"y":1700,"wires":[["c0240a88.dd5588"]]},{"id":"e7e00f4d.bc3ce","type":"mqtt out","z":"c1ef2e20.6f3b3","name":"","topic":"homie/homey-topic/rgbwe27eettafel/color/set","qos":"","retain":"","broker":"84b6add6.23c45","x":1030,"y":1760,"wires":[]},{"id":"8ae9ca8e.0f16d8","type":"ui_colour_picker","z":"c1ef2e20.6f3b3","name":"","label":"","group":"82c82961.92a878","format":"hsv","outformat":"object","showSwatch":true,"showPicker":true,"showValue":true,"showHue":true,"showAlpha":false,"showLightness":false,"square":"false","dynOutput":"false","order":6,"width":"5","height":"5","passthru":true,"topic":"","x":150,"y":1620,"wires":[["929a741d.744728"]]},{"id":"84b6add6.23c45","type":"mqtt-broker","z":"","name":"Homey MQTT","broker":"192.168.1.118","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"82c82961.92a878","type":"ui_group","z":"","name":"Verlichting Beneden","tab":"db91ccc9.eb26a","order":2,"disp":true,"width":"5","collapse":false},{"id":"db91ccc9.eb26a","type":"ui_tab","z":"","name":"Homeydash","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

[Roy_Hopman]

could you please share a functioning example. if i copy the script provided by Tangodelta i get three seperate nodes. i tried to connect them, change URL to a test RTSP (rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov) but i cant get it working.

[Tangodelta]

hi Joost, do u have the json for this setup?

[Satoer]

Excelent! this does work directly without my Homeyscript workaround. Thanks!

[Roy_Hopman]

@Tangodelta

or could you help with this?

[Tangodelta]

RTSP is not supported

[Roy_Hopman]

Roy_Hopman

1m

I have two Hikvision 8MP camera’s for which i would like to have a livestream on my dashboard.
They are accessible from 192.168.1.64. On the Node red forum there was an example of an MMFPEG stream but the addiitonal MMFPEG NODES required were no longer avialable to be downloaded.
I saw an earlier post from Satoer / You regarding a stream example. But if i import that version, i only get three seperate nodes without link.

What would you recommend me to use?

[Satoer]

@Roy_Hopman

I saw an earlier post from Satoer / You regarding a stream example. But if i import that version, i only get three seperate nodes without link.

I should work with 3 nodes (allthough I don’t know what code you tried).
I don’t stream the video stream. I refresh every sec the snapshot image. You can do it faster, but it kind of depends on the network speed/image size etc.

the “get camera feed code” is:

msg.payload = "http://user:password@192.168.001.001:443/snap.jpg?"+Math.random();
return msg;

You need to change the user / password and Ip adress (test the feed in a browser). You need to keep the

?"+Math.random();

this adds a random number behind the image so the browser know that it needs to load the new image (otherwise the browser sees the same image, and won’t reload it). everything after the “?” gets ignored.
the template code is:

<img width: height="100%" width="100%"  src="{{msg.payload}}">

JSON:
[{"id":"441598c5.f53d9","type":"function","z":"48744450.148de4","name":"Get camera feed","func":"msg.payload = \"http://user:password@192.168.001.001:443/snap.jpg?\"+Math.random();\nreturn msg;\n\n","outputs":1,"noerr":0,"x":330,"y":800,"wires":[["c76d0966.93f5b"]]},{"id":"91ce1d6f.da1118","type":"inject","z":"48744450.148de4","name":"","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":800,"wires":[["441598c5.f53d9"]]},{"id":"c76d0966.93f5b","type":"ui_template","z":"48744450.148de4","group":"bec4a4a3.5c9928","name":"Show Camera","order":1,"width":"6","height":"5","format":"<img width: height=\"100%\" width=\"100%\" src=\"{{msg.payload}}\">","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":540,"y":800,"wires":[[]]},{"id":"bec4a4a3.5c9928","type":"ui_group","z":"","name":"test","tab":"c63b7d19.a7f4f","disp":true,"width":"6","collapse":false},{"id":"c63b7d19.a7f4f","type":"ui_tab","z":"","name":"Homey Dashboard 2","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
(can someone explain how you paste a single line code json? I see some users post that way)

Note: if you hide the camera “feed” I strongly recommend to code some disabling code, otherwise it keeps reloading the image in the background.

Note2: This works on Firefox and Safari on my iPad 2. Other browsers might block it, because you are downloading a image on a secure website. If it doesn’t work in your browser, test it on Firefox or lower security settings for the dashboard.