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

The icons need to be on a webserver and accessible from the browser

I know and it is on a webserver.

If I inspect the webpage (dashboard node red) I get the following error: GET http://192.168.1.51:8080/qiotnode/a971548f9d2c11eab52fade6eb293823/ui/share/CACHEDEV1_DATA/.qpkg/QIoT/qiot-node-red/icons/deur.png 404 (Not Found)

I changed the name of the icon to ‘deur’. and it is defenitly in that directory. I don’t know what I am doing wrong???

It seems to me that you’re in the wrong folder.

I should look like ( on a raspberry pi):

/home/user/.node-red/node_modules/node-red-dashboard/dist

In this folder there’s a file called : icon120x120.png maybe you can search for that file and find the root of your Node Red webserver

Hi,
Thank you for helping me.

I found the folder and the file: /qiotnode/a971548f9d2c11eab52fade6eb293823/ui/icon120x120
.png and that icon works! But if I put my icon in the same folder I get the same error as in my last post.

Any ideas?

You have to search for the node-red-dashboard/dist folder. Maybe there are more folders with the file called icon120x120.png.

Sorry i am not familiar with the qnap nas. This is what I found on google. Can you find this folder?
/share/CACHEDEV1_DATA/homes/YOUR USERNAME/.node-red/node_modules/node-red-dashboard/dist ?

Hey guys. Im trying to communicate with my dali lighting system through tcp strings and it works great so far.
But now i want to use a slider to dim and not just send a single command.
The command i wanna send is >V:1,C:11,G:18,L:10,F:200# where i wanna alter the “L:10” (Dim percentage) to whatever percentage a slider node it is set at and transmit this whenever the slider it altered.
Can anybody tell me the easiest way to have the slider alter a portion of the string before its send to the tcp node?

My guess it that somebody with some java skills can pull this of with a function node perhaps?

Hi Everyone,

I am a relatively new user. Migrated a few month ago from HomeWizard to Homey and now experimenting with Node Red Dashboards (Node Red and broker running on a Pi4). Will share some of the progress later when it is a bit decent… :sunglasses:

First question: Any example code how to get the animated Buitenradar also periodically updated?

Tried myself but doesn’t work…

Have you tried this?:

Yes, you can use a function node to insert a string inside a string.
Example:
afbeelding

afbeelding

Function node javascript:

msg.payload="V:1,C:11,G:18,L:"+msg.payload+",F:200#";
return msg;

Complete Json:
[{"id":"d8a8ae69.65b66","type":"ui_slider","z":"48744450.148de4","name":"","label":"Slider","tooltip":"","group":"bec4a4a3.5c9928","order":0,"width":0,"height":0,"passthru":true,"outs":"all","topic":"","min":0,"max":10,"step":1,"x":110,"y":760,"wires":[["917be2c7.a33418"]]},{"id":"917be2c7.a33418","type":"function","z":"48744450.148de4","name":"Insert Payload into Link","func":"msg.payload=\"V:1,C:11,G:18,L:\"+msg.payload+\",F:200#\";\nreturn msg;","outputs":1,"noerr":0,"x":330,"y":760,"wires":[["df9b3f2d.3ef2c"]]},{"id":"df9b3f2d.3ef2c","type":"ui_text","z":"48744450.148de4","group":"bec4a4a3.5c9928","order":21,"width":0,"height":0,"name":"","label":"Output","format":"{{msg.payload}}","layout":"row-spread","x":550,"y":760,"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}]

Wow thanks, help much appreciated!

Hi! Is there a way to start homey’s flows throught Node-Red? I don’t find how so it seems i have to reproduce them in NR…

Sure, you can add a virtual device that executes a flow, or you can directly execute a flow with MQTT client:

Yes, tried that and that works fine but is a static image.
I would like to have the animated buitenradar to refresh periodically.
This one I mean.
How could I make that one refresh periodically?

Yes, so easy… Thanks!

I can find the folder .node-red (there is more than 1) But Netherlands of them has the /dist folder.

I will keep searching to find a solution.

Thanks

Or you have to setup a different server to host your icon files. But I think the easiest way is in the node red folder.

I use this to get the Buienradar image and refresh every 15 minutes:

[{"id":"a073462b.6568e","type":"ui_template","z":"e1ed6e00.37fd88","group":"bdf77f28.7118c8","name":"Buienradar","order":5,"width":6,"height":6,"format":"<img height=\"100%\" width=\"100%\" src=\"{{msg.payload}}\">","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1010,"y":2720,"wires":[[]]},{"id":"68f9ee3e.0efc88","type":"function","z":"e1ed6e00.37fd88","name":"Get Buienradar Image","func":"msg.payload = \"https://api.buienradar.nl/image/1.0/RadarMapNL?w=720&h=600?\"+Math.random();\nreturn msg; ","outputs":1,"noerr":0,"x":680,"y":2720,"wires":[["a073462b.6568e"]]},{"id":"f309c828.4d30c8","type":"inject","z":"e1ed6e00.37fd88","name":"Every 15 minutes","topic":"","payload":"","payloadType":"date","repeat":"900","crontab":"","once":true,"onceDelay":0.1,"x":110,"y":2720,"wires":[["68f9ee3e.0efc88","1cada0af.293a4f","cf1276ba.394ea"]]},{"id":"bdf77f28.7118c8","type":"ui_group","z":"","name":"Klimaat","tab":"9d501db7.f7b67","order":4,"disp":true,"width":"6","collapse":false},{"id":"9d501db7.f7b67","type":"ui_tab","z":"","name":"HomeyDashboard","icon":"dashboard","order":1,"disabled":false,"hidden":true}]

I just noticed that the buienradar API isn’t giving back the animated image, not sure what happened with that. It might be an API issue, but I’m not sure.

Yeah, that is the same “Satoer random method” :grinning: for a fixed image.
At this location an animated picture is available.
I am looking for way to get that one updated periodicaly.

I think I have it figured out. If you make a request for the url in the iframe, you get a gif-image in your browser. With some trial-and-error, I get this flow which shows me the buienradar animated image:

[{"id":"78ed0d27.c53a24","type":"inject","z":"fa45fe5a.53b81","name":"Every 15 minutes","topic":"","payload":"","payloadType":"date","repeat":"900","crontab":"","once":true,"onceDelay":0.1,"x":110,"y":2720,"wires":[["d78790a1.4bd8f","2bf7d008.4902b","6616b073.16eee8"]]},{"id":"6616b073.16eee8","type":"function","z":"fa45fe5a.53b81","name":"Set buienradar url","func":"msg.payload = \"https://image.buienradar.nl/2.0/image/animation/RadarMapRainNL?height=512&width=500&margin-left=100&extension=gif&renderBackground=True&renderBranding=False&renderText=True&history=3&forecast=16&skip=1&rndtime=\"+Math.random()\nreturn msg;","outputs":1,"noerr":0,"x":350,"y":2720,"wires":[["12ad73ba.44335c"]]},{"id":"12ad73ba.44335c","type":"http request","z":"fa45fe5a.53b81","name":"Get Buienradar image","method":"GET","ret":"bin","paytoqs":false,"url":"{{{payload}}}","tls":"","persist":false,"proxy":"","authType":"","x":640,"y":2720,"wires":[["2d8ae528.c2dc4a"]]},{"id":"2d8ae528.c2dc4a","type":"base64","z":"fa45fe5a.53b81","name":"","action":"","property":"payload","x":860,"y":2720,"wires":[["3cfca5f9.f35a9a"]]},{"id":"3cfca5f9.f35a9a","type":"ui_template","z":"fa45fe5a.53b81","group":"52043a11.69f594","name":"Buienradar","order":5,"width":6,"height":6,"format":"<img src=\"data:image/gif;base64,{{msg.payload}}\" width=\"100%\" height=\"100%\">","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1010,"y":2720,"wires":[[]]},{"id":"52043a11.69f594","type":"ui_group","z":"","name":"Klimaat","tab":"8278744b.f1e7b","order":4,"disp":true,"width":"6","collapse":false},{"id":"8278744b.f1e7b","type":"ui_tab","z":"","name":"HomeyDashboard","icon":"dashboard","order":1,"disabled":false,"hidden":true}]

Yeah great!! Works for me as well!
Thanks @Grooviee ! :+1: :+1: