# Node Red: A widget based dashboard working with Homey trough MQTT **URL:** \ **Category:** Apps\ **Created:** [October 3, 2019, 10:05am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798 "2019-10-03T10:05:10Z")\ **Posts on this page:** 20\ **Page:** 27
**Author:** ![Jeroen\_Kokhuis](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jeroen_kokhuis/32/12592_2.png) [@Jeroen\_Kokhuis](https://community.homey.app/u/Jeroen_Kokhuis)\ **Post date:** [August 8, 2020, 5:52pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/533 "2020-08-08T17:52:10Z")
The icons need to be on a webserver and accessible from the browser ---
**Author:** ![MFM\_Bart](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/mfm_bart/32/9492_2.png) [@MFM\_Bart](https://community.homey.app/u/MFM_Bart)\ **Post date:** [August 9, 2020, 4:32pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/534 "2020-08-09T16:32:02Z")
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](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??? ---
**Author:** ![Jeroen\_Kokhuis](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jeroen_kokhuis/32/12592_2.png) [@Jeroen\_Kokhuis](https://community.homey.app/u/Jeroen_Kokhuis)\ **Post date:** [August 10, 2020, 2:28pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/535 "2020-08-10T14:28:03Z")
> [@MFM\_Bart](#): > > 404 (Not Found) 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 ---
**Author:** ![MFM\_Bart](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/mfm_bart/32/9492_2.png) [@MFM\_Bart](https://community.homey.app/u/MFM_Bart)\ **Post date:** [August 10, 2020, 5:07pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/536 "2020-08-10T17:07:07Z")
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? ---
**Author:** ![Jeroen\_Kokhuis](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jeroen_kokhuis/32/12592_2.png) [@Jeroen\_Kokhuis](https://community.homey.app/u/Jeroen_Kokhuis)\ **Post date:** [August 15, 2020, 9:08pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/537 "2020-08-15T21:08:47Z")
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 ? ---
**Author:** ![Sphinx](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/sphinx/32/16534_2.png) [@Sphinx](https://community.homey.app/u/Sphinx)\ **Post date:** [August 17, 2020, 8:35pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/538 "2020-08-17T20:35:32Z")
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? ---
**Author:** ![Merpster](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/merpster/32/27588_2.png) [@Merpster](https://community.homey.app/u/Merpster)\ **Post date:** [August 18, 2020, 4:30pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/539 "2020-08-18T16:30:41Z")
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… 🕶 First question: Any example code how to get the animated Buitenradar also periodically updated? Tried myself but doesn’t work… ---
**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\ **Post date:** [August 19, 2020, 12:50pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/540 "2020-08-19T12:50:01Z")
Have you tried this?: > [@Satoer](#): > > 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: > > ```auto > 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 and reloads it. > Then connect this to a template node (the blue-green one) with this html: > > ```auto > > > ``` > > the {{msg.payload}} injects the new image and reloads the frame. ---
**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\ **Post date:** [August 19, 2020, 12:58pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/541 "2020-08-19T12:58:48Z")
Yes, you can use a function node to insert a string inside a string. Example: ![afbeelding](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/5/b/5b9a570e4544b5844bda89ffc5e60a3c317cfd39.png) ![afbeelding](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/c/f/cfa26281343572f83b763cd81a0d22370fab92b9.png) Function node javascript: ```auto 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}]` ---
**Author:** ![Sphinx](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/sphinx/32/16534_2.png) [@Sphinx](https://community.homey.app/u/Sphinx)\ **Post date:** [August 19, 2020, 1:11pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/542 "2020-08-19T13:11:59Z")
Wow thanks, help much appreciated! ---
**Author:** ![MoPepettes](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/mopepettes/32/14988_2.png) [@MoPepettes](https://community.homey.app/u/MoPepettes)\ **Post date:** [August 19, 2020, 4:59pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/543 "2020-08-19T16:59:41Z")
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… ---
**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\ **Post date:** [August 19, 2020, 6:28pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/544 "2020-08-19T18:28:12Z")
Sure, you can add a virtual device that executes a flow, or you can directly execute a flow with MQTT client: ![afbeelding](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/2/e/2e50b2233cdf7817b58e636041bdd2ded1876270.png) ---
**Author:** ![Merpster](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/merpster/32/27588_2.png) [@Merpster](https://community.homey.app/u/Merpster)\ **Post date:** [August 19, 2020, 6:37pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/546 "2020-08-19T18:37:48Z")
Yes, tried that and that works fine but is a static image. I would like to have the animated buitenradar to refresh periodically. [This](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/209) one I mean. How could I make that one refresh periodically? ---
**Author:** ![MoPepettes](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/mopepettes/32/14988_2.png) [@MoPepettes](https://community.homey.app/u/MoPepettes)\ **Post date:** [August 20, 2020, 5:59am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/547 "2020-08-20T05:59:27Z")
Yes, so easy… Thanks! ---
**Author:** ![MFM\_Bart](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/mfm_bart/32/9492_2.png) [@MFM\_Bart](https://community.homey.app/u/MFM_Bart)\ **Post date:** [August 22, 2020, 12:12pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/548 "2020-08-22T12:12:36Z")
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 ---
**Author:** ![Jeroen\_Kokhuis](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jeroen_kokhuis/32/12592_2.png) [@Jeroen\_Kokhuis](https://community.homey.app/u/Jeroen_Kokhuis)\ **Post date:** [August 23, 2020, 11:32am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/549 "2020-08-23T11:32:22Z")
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. ---
**Author:** ![Grooviee](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/grooviee/32/1363_2.png) [@Grooviee](https://community.homey.app/u/Grooviee)\ **Post date:** [August 24, 2020, 7:22pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/550 "2020-08-24T19:22:00Z")
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":"","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. ---
**Author:** ![Merpster](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/merpster/32/27588_2.png) [@Merpster](https://community.homey.app/u/Merpster)\ **Post date:** [August 25, 2020, 11:40am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/551 "2020-08-25T11:40:06Z")
Yeah, that is the same “Satoer random method” 😀 for a fixed image. At [this](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/209) location an animated picture is available. I am looking for way to get that one updated periodicaly. ---
**Author:** ![Grooviee](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/grooviee/32/1363_2.png) [@Grooviee](https://community.homey.app/u/Grooviee)\ **Post date:** [August 25, 2020, 6:47pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/552 "2020-08-25T18:47:09Z")
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":"","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}]` ---
**Author:** ![Merpster](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/merpster/32/27588_2.png) [@Merpster](https://community.homey.app/u/Merpster)\ **Post date:** [August 26, 2020, 7:01pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/553 "2020-08-26T19:01:47Z")
Yeah great!! Works for me as well! Thanks @Grooviee ! 👍 👍 [Previous page](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798.md?page=26) [Next page](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798.md?page=28)