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

**URL:** <https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798>\
**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:** 26

<div class="post-metadata">

**Author:** ![johannes1702](https://avatars.discourse-cdn.com/v4/letter/j/db5fbb/32.png) [@johannes1702](https://community.homey.app/u/johannes1702)\
**Post date:** [July 30, 2020, 11:10am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/512 "2020-07-30T11:10:50Z")

</div>

Probably the simplest would be to define several alarms and activate/deactivate those then through flows using NodeRed.

Not having the usecase yet, experimenting right now a lot with ioBroker too. But have to make a decision for which system I go going forward. Tough one 😂

---

<div class="post-metadata">

**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 1, 2020, 8:29am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/513 "2020-08-01T08:29:26Z")

</div>

Does anyone know how to get the icon in front of the name?

this is what it looks like now:  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/4/b/4b2c8fad37e3f588561d57ea075a936173fc2537.png)  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/3/e/3e6f5ab35ff9c670b1495ae9d2b1ef910d86bf92.png)  
and I also want to change te color of the icon into whtie

This is the flow:

```
[{"id":"cca1182f.49c2f8","type":"mqtt in","z":"b631e7cf.50e618","name":"MQTT Achterdeur","topic":"homie/homey/sensor/home/achterdeur/alarm-contact","qos":"2","datatype":"auto","broker":"73391d85.40a3c4","x":210,"y":80,"wires":[["6c9f092f.4990d8"]]},{"id":"37657b18.ce13d4","type":"ui_button","z":"b631e7cf.50e618","name":"","group":"683da792.adc908","order":1,"width":0,"height":0,"passthru":false,"label":"Achterdeur","tooltip":"Achterdeur","color":"{{msg.colour}}","bgcolor":"{{msg.background}}","icon":"{{msg.icon}}","payload":"","payloadType":"str","topic":"","x":810,"y":80,"wires":[[]]},{"id":"6c9f092f.4990d8","type":"function","z":"b631e7cf.50e618","name":"Kleur en icoon","func":"var color;\n\nif(msg.payload === \"true\"){\n color = \"white\"\n msg.ui_control = {icon:\"http://192.168.1.6/mp3/door-open.svg\", tooltip:\"Deur open\"};\n}\n\nelse{\n msg.ui_control = {icon:\"http://192.168.1.6/mp3/door-closed.svg\", tooltip:\"Deur dicht\"};\n color = \"white\"\n \n}\nmsg.icon = color;\nreturn [msg];","outputs":1,"noerr":0,"initialize":"","finalize":"","x":540,"y":80,"wires":[["37657b18.ce13d4"]]},{"id":"73391d85.40a3c4","type":"mqtt-broker","z":"","name":"Homey MQTT","broker":"192.168.1.93","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"683da792.adc908","type":"ui_group","z":"b631e7cf.50e618","name":"Deuren","tab":"73600d64.c7bb84","order":5,"disp":true,"width":6,"collapse":false},{"id":"73600d64.c7bb84","type":"ui_tab","z":"","name":"Beneden","icon":"dashboard","disabled":false,"hidden":false}]
```

---

<div class="post-metadata">

**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 2, 2020, 7:30pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/514 "2020-08-02T19:30:00Z")

</div>

![Screenshot_20200802-212641](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/8/6/861d87c3fe422cd60ea6f17ed4433714626b0b40.jpeg)

I’m happy with it now

---

<div class="post-metadata">

**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 4, 2020, 9:26am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/515 "2020-08-04T09:26:45Z")

</div>

Does someone know how to show a garbage collector on node red? The company whoes collecting the garbage is Rova.

---

<div class="post-metadata">

**Author:** ![Marc](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/marc/32/11229_2.png) [@Marc](https://community.homey.app/u/Marc)\
**Post date:** [August 4, 2020, 1:46pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/516 "2020-08-04T13:46:33Z")

</div>

@Jeroen_Kokhuis  
[https://inzamelkalender.rova.nl/nl/..JOUWPOSTCODE../..JOUWHUISNUMMER../](https://inzamelkalender.rova.nl/nl/..JOUWPOSTCODE../..JOUWHUISNUMMER../) haalt de laatst bekende data op voor het inzamelen. Deze kun je denk ik wel op een dashboard krijgen

---

<div class="post-metadata">

**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 4, 2020, 6:15pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/517 "2020-08-04T18:15:48Z")

</div>

I have already tried it but I did not succeed

---

<div class="post-metadata">

**Author:** ![VanGilles](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/vangilles/32/11478_2.png) [@VanGilles](https://community.homey.app/u/VanGilles)\
**Post date:** [August 4, 2020, 9:32pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/519 "2020-08-04T21:32:02Z")

</div>

> [@Jeroen\_Kokhuis](#):
>
> I’m happy with it now

Can you also tell us how you did it? 🙂

---

<div class="post-metadata">

**Author:** ![Wout\_F](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/wout_f/32/7474_2.png) [@Wout\_F](https://community.homey.app/u/Wout_F)\
**Post date:** [August 5, 2020, 7:54am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/520 "2020-08-05T07:54:31Z")

</div>

Where did you get those icons from?

---

<div class="post-metadata">

**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 5, 2020, 8:29am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/521 "2020-08-05T08:29:16Z")

</div>

> **[Door Icon Packs Svg Psd Png - Door Icons , Transparent Cartoon, Free...](https://www.netclipart.com/isee/mJbRbi_door-icon-packs-svg-psd-png-door-icons/)**
>
> Download and share Door Icon Packs Svg Psd Png - Door Icons, Cartoon. Seach more similar FREE transparent cliparts ,carttons and silhouettes.

---

<div class="post-metadata">

**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 5, 2020, 9:45am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/522 "2020-08-05T09:45:56Z")

</div>

I’m still strugglin with the garbage collector and I finaly get some data in the output. This is wat I get:

```
    msg : Object
object
_msgid: "63a55522.6d127c"
topic: ""
payload: "[{"GarbageTypeCode":"GFT","GarbageType":"GFT","Date":"2020-08-07T00:00:00","Regular":true},{"GarbageTypeCode":"RESTAFVAL","GarbageType":"Restafval","Date":"2020-08-13T00:00:00","Regular":true},{"GarbageTypeCode":"GFT","GarbageType":"GFT","Date":"2020-08-21T00:00:00","Regular":true}]"

```

But how can I display these GarbageType and Date in the node red dashboard?

---

<div class="post-metadata">

**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 5, 2020, 9:49am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/523 "2020-08-05T09:49:48Z")

</div>

This is my flow:

`[{"id":"a633df99.a4974","type":"mqtt in","z":"c6510160.98713","name":"MQTT Achterdeur","topic":"homie/homey/sensor/home/achterdeur/alarm-contact","qos":"2","datatype":"auto","broker":"73391d85.40a3c4","x":190,"y":120,"wires":[["30e7e8ad.878cb8"]]},{"id":"30e7e8ad.878cb8","type":"function","z":"c6510160.98713","name":"Kleur en icoon","func":"var color;\n\nif(msg.payload === \"true\"){\n msg.ui_control = {icon:\"icons/door-open-white.svg\", tooltip:\"Deur open\"};\n msg.label = \"Achterdeur is open\"\n \n}\n\nelse{\n msg.ui_control = {icon:\"icons/door-closed-white.svg\", tooltip:\"Deur dicht\"};\n msg.label = \"Achterdeur is dicht\"\n}\nmsg.icon = color;\nreturn [msg];","outputs":1,"noerr":0,"initialize":"","finalize":"","x":520,"y":120,"wires":[["8c543b82.e4fd48"]]},{"id":"8c543b82.e4fd48","type":"ui_text","z":"c6510160.98713","group":"64fb8fc3.e0a71","order":1,"width":0,"height":0,"name":"","label":"Achterdeur","format":"<img src=\"{{msg.ui_control.icon}}\" width=\"30\" height=\"30\">","layout":"row-spread","x":790,"y":120,"wires":[]},{"id":"73391d85.40a3c4","type":"mqtt-broker","z":"","name":"Homey MQTT","broker":"192.168.1.93","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"64fb8fc3.e0a71","type":"ui_group","z":"","name":"Deuren","tab":"73600d64.c7bb84","order":4,"disp":true,"width":"6","collapse":false},{"id":"73600d64.c7bb84","type":"ui_tab","z":"","name":"Beneden","icon":"dashboard","disabled":false,"hidden":false}]`

---

<div class="post-metadata">

**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 5, 2020, 10:22am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/524 "2020-08-05T10:22:31Z")

</div>

> [@Jeroen\_Kokhuis](#):
>
> `[{"GarbageTypeCode":"GFT","GarbageType":"GFT","Date":"2020-08-07T00:00:00","Regular":true},{"GarbageTypeCode":"RESTAFVAL","GarbageType":"Restafval","Date":"2020-08-13T00:00:00","Regular":true},{"GarbageTypeCode":"GFT","GarbageType":"GFT","Date":"2020-08-21T00:00:00","Regular":true}]`

You can acces individual data from this json array in a script node: `payload[0]["date"]` This will get you the first date.

Paste this code:

```auto
<!DOCTYPE html>
<html>
   <body>
      <p>Access an array value of a JSON object.</p>
      <p id="test"></p>
      <script>
         var myObj, x;
         myObj = {
           "payload":[{"GarbageTypeCode":"GFT","GarbageType":"GFT","Date":"2020-08-07T00:00:00","Regular":true},{"GarbageTypeCode":"RESTAFVAL","GarbageType":"Restafval","Date":"2020-08-13T00:00:00","Regular":true},{"GarbageTypeCode":"GFT","GarbageType":"GFT","Date":"2020-08-21T00:00:00","Regular":true}]
         };
         x = myObj.payload[0]["Date"];
         document.getElementById("test").innerHTML = x;
      </script>
   </body>
</html>

```

Inside the “Try it” editor and press run:

> **[W3Schools online HTML editor](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro)**
>
> The W3Schools online code editor allows you to edit code and view the result in your browser

More info:

> **[JSON Arrays](https://www.w3schools.com/js/js_json_arrays.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

---

<div class="post-metadata">

**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 5, 2020, 11:38am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/525 "2020-08-05T11:38:41Z")

</div>

@Satoer

Thanks for your explanation. But I can not get all the data into the template

This is what I found on W3schools:

```
<!DOCTYPE html>
<html>
<body>

<p>Looping through arrays inside arrays.</p>

<p id="demo"></p>

<script>
var myObj, i, j, x = "";
myObj = {
  "name":"John",
  "age":30,
  "cars": [
{"name":"Ford", "models":["Fiesta", "Focus", "Mustang"]},
{"name":"BMW", "models":["320", "X3", "X5"]},
{"name":"Fiat", "models":["500", "Panda"] }
  ]
}
for (i in myObj.cars) {
  x += "<h2>" + myObj.cars[i].name + "</h2>";
  for (j in myObj.cars[i].models) {
x += myObj.cars[i].models[j] + "<br>";
  }
}
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

```

And how to load the data form the json (msg.payload)?

---

<div class="post-metadata">

**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 6, 2020, 10:15am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/526 "2020-08-06T10:15:20Z")

</div>

I not getting any further. Hope someone can help me.

This is my command to get data from the garbage collector:

```
curl -v --cookie "RovaLc_inwoners={\"Id\":XXXXXX,\"ZipCode\":\"XXXXXX\",\"HouseNumber\":\"XX\",\"HouseAddition\":null,\"Municipality\":\"Vriezenveen\",\"Province\":null,\"Firstname\":null,\"Lastname\":null,\"UserAgent\":\"\",\"School\":null,\"Street\":null,\"Country\":null,\"Portal\":null,\"AreaLevel\":5,\"City\":\"Vriezenveen\",\"Ip\":null}" https://www.rova.nl/api/TrashCalendar/GetCalendarItems?portal=inwoners

```

The output is in JSON and I want that to display in Node Red. But I’ve been trying for a week now, but I dont get any further.

---

<div class="post-metadata">

**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 6, 2020, 5:13pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/527 "2020-08-06T17:13:41Z")

</div>

Hi There,

I am also trying to use downloaded icons for my dashboard. I downloaded them on my qnap nas in a node red folder.  
In settings.js I have put this line: httpStatic: ‘./share/CACHEDEV1\_DATA/.qpkg/QIoT/qiot-node-red/icons’,

This is the flow:

[{“id”:“63fd77ba.bce298”,“type”:“function”,“z”:“4b4433f7.0354cc”,“name”:"",“func”:" msg.ui\_control = {icon:"/netclipart.com-doors-clipart-724960.png", tooltip:“deur open”};\n",“outputs”:1,“noerr”:0,“x”:233,“y”:79.5,“wires”:[[“4124b7ed.086fd8”]]},{“id”:“ab5270b0.cf33”,“type”:“mqtt in”,“z”:“4b4433f7.0354cc”,“name”:“MQTT receiver”,“topic”:“homie/homey-topic/sensor-tuindeur/alarm-contact”,“qos”:“2”,“broker”:“de270e2d.3eb008”,“x”:85,“y”:69,“wires”:[[“63fd77ba.bce298”]]},{“id”:“4124b7ed.086fd8”,“type”:“ui\_button”,“z”:“4b4433f7.0354cc”,“name”:"",“group”:“99febb17.22b278”,“order”:8,“width”:0,“height”:0,“passthru”:false,“label”:“button”,“tooltip”:"",“color”:"",“bgcolor”:"",“icon”:“netclipart.com-doors-clipart-724960.png”,“payload”:"",“payloadType”:“str”,“topic”:"",“x”:379,“y”:75,“wires”:[]},{“id”:“de270e2d.3eb008”,“type”:“mqtt-broker”,“z”:"",“name”:"",“broker”:“192.168.1.51”,“port”:“1883”,“clientid”:"",“usetls”:false,“compatmode”:true,“keepalive”:“60”,“cleansession”:true,“willTopic”:"",“willQos”:“0”,“willRetain”:“false”,“willPayload”:"",“birthTopic”:"",“birthQos”:“0”,“birthRetain”:“false”,“birthPayload”:""},{“id”:“99febb17.22b278”,“type”:“ui\_group”,“z”:"",“name”:“Beveiliging”,“tab”:“ec9cbcda.4e5da”,“disp”:true,“width”:“8”,“collapse”:false},{“id”:“ec9cbcda.4e5da”,“type”:“ui\_tab”,“z”:"",“name”:“Beveiliging”,“icon”:“pan\_tool”,“order”:4,“disabled”:false,“hidden”:false}]

What do I have to change in order to get it working?

---

<div class="post-metadata">

**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 7, 2020, 11:40am UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/528 "2020-08-07T11:40:49Z")

</div>

> [@Jeroen\_Kokhuis](#):
>
> [{“id”:“a633df99.a4974”,“type”:“mqtt in”,“z”:“c6510160.98713”,“name”:“MQTT Achterdeur”,“topic”:“homie/homey/sensor/home/achterdeur/alarm-contact”,“qos”:“2”,“datatype”:“auto”,“broker”:“73391d85.40a3c4”,“x”:190,“y”:120,“wires”:[[“30e7e8ad.878cb8”]]},{“id”:“30e7e8ad.878cb8”,“type”:“function”,“z”:“c6510160.98713”,“name”:“Kleur en icoon”,“func”:“var color;\n\nif(msg.payload === "true"){\n msg.ui\_control = {icon:"icons/door-open-white.svg", tooltip:"Deur open"};\n msg.label = "Achterdeur is open"\n \n}\n\nelse{\n msg.ui\_control = {icon:"icons/door-closed-white.svg", tooltip:"Deur dicht"};\n msg.label = "Achterdeur is dicht"\n}\nmsg.icon = color;\nreturn [msg];”,“outputs”:1,“noerr”:0,“initialize”:“”,“finalize”:“”,“x”:520,“y”:120,“wires”:[[“8c543b82.e4fd48”]]},{“id”:“8c543b82.e4fd48”,“type”:“ui\_text”,“z”:“c6510160.98713”,“group”:“64fb8fc3.e0a71”,“order”:1,“width”:0,“height”:0,“name”:“”,“label”:“Achterdeur”,“format”:“\<img src="{{msg.ui\_control.icon}}" width="30" height="30"\>”,“layout”:“row-spread”,“x”:790,“y”:120,“wires”:},{“id”:“73391d85.40a3c4”,“type”:“mqtt-broker”,“z”:“”,“name”:“Homey MQTT”,“broker”:“192.168.1.93”,“port”:“1883”,“clientid”:“”,“usetls”:false,“compatmode”:true,“keepalive”:“60”,“cleansession”:true,“birthTopic”:“”,“birthQos”:“0”,“birthPayload”:“”,“closeTopic”:“”,“closeQos”:“0”,“closePayload”:“”,“willTopic”:“”,“willQos”:“0”,“willPayload”:“”},{“id”:“64fb8fc3.e0a71”,“type”:“ui\_group”,“z”:“”,“name”:“Deuren”,“tab”:“73600d64.c7bb84”,“order”:4,“disp”:true,“width”:“6”,“collapse”:false},{“id”:“73600d64.c7bb84”,“type”:“ui\_tab”,“z”:“”,“name”:“Beneden”,“icon”:“dashboard”,“disabled”:false,“hidden”:false}]

Where are your icons? Are they accessible?

try:

`http:://ip of node red dashboard/port/ui/netclipart.com-doors-clipart-724960.png`

---

<div class="post-metadata">

**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 7, 2020, 3:43pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/529 "2020-08-07T15:43:40Z")

</div>

Hi,

The icons are on my nas in a icons folder: //nas:port/foto/icons/ and also in the node red structure: /share/CACHEDEV1\_DATA/.qpkg/QIoT/qiot-node-red/icons. The icons are accessible, but still no picture on the dashboard.

---

<div class="post-metadata">

**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 7, 2020, 7:27pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/530 "2020-08-07T19:27:34Z")

</div>

You can try to put the icons in the node red root folder. I’ve made an folder icons in the node red root folder.

Is the icon displayed when you access it via http: // path to your icon?

---

<div class="post-metadata">

**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 7, 2020, 7:44pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/531 "2020-08-07T19:44:19Z")

</div>

I’m getting furhter with my garbage collector. This is my flow:

```
 [{"id":"aebc50d6.7a096","type":"exec","z":"6a2785b5.687a8c","command":"curl -v --cookie \"RovaLc_inwoners={\\\"Id\\\":901516,\\\"ZipCode\\\":\\\"7671GT\\\",\\\"HouseNumber\\\":\\\"22\\\",\\\"HouseAddition\\\":null,\\\"Municipality\\\":\\\"Vriezenveen\\\",\\\"Province\\\":null,\\\"Firstname\\\":null,\\\"Lastname\\\":null,\\\"UserAgent\\\":\\\"\\\",\\\"School\\\":null,\\\"Street\\\":null,\\\"Country\\\":null,\\\"Portal\\\":null,\\\"AreaLevel\\\":5,\\\"City\\\":\\\"Vriezenveen\\\",\\\"Ip\\\":null}\" https://www.rova.nl/api/TrashCalendar/GetCalendarItems?portal=inwoners","addpay":true,"append":"","useSpawn":"false","timer":"","oldrc":false,"name":"Garbage","x":320,"y":1520,"wires":[["62e9a645.7593c8"],[],[]]},{"id":"6cf8f848.71eea8","type":"inject","z":"6a2785b5.687a8c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":150,"y":1520,"wires":[["aebc50d6.7a096"]]},{"id":"62e9a645.7593c8","type":"json","z":"6a2785b5.687a8c","name":"","property":"payload","action":"","pretty":false,"x":510,"y":1520,"wires":[["adda730.3e3399","ca2a3140.79d94","1c43746.9aef78c","d544a03.f9af16"]]},{"id":"adda730.3e3399","type":"debug","z":"6a2785b5.687a8c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":710,"y":1840,"wires":[]},{"id":"ca2a3140.79d94","type":"function","z":"6a2785b5.687a8c","name":"Kleur en icoon","func":"if(msg.payload[2].GarbageType === \"GFT\"){\n msg.ui_control = {icon:\"icons/gft_60.png\", tooltip:\"GFT\"};\n msg.label = \"\"\n}\nif(msg.payload[2].GarbageType == \"Restafval\"){\n msg.ui_control = {icon:\"icons/restafval_60.png\", tooltip:\"Restafval\"};\n msg.label = \"\"\n}\nif(msg.payload[2].GarbageType == \"PMD\"){\n msg.ui_control = {icon:\"icons/pmd_60.png\", tooltip:\"PMD afval\"};\n msg.label = \"\"\n}\nreturn [msg];","outputs":1,"noerr":0,"initialize":"","finalize":"","x":740,"y":1720,"wires":[["96b5ffcb.45c77","77521da2.4e54f4"]]},{"id":"1c43746.9aef78c","type":"function","z":"6a2785b5.687a8c","name":"Kleur en icoon","func":"if(msg.payload[1].GarbageType === \"GFT\"){\n msg.ui_control = {icon:\"icons/gft_60.png\", tooltip:\"GFT\"};\n msg.label = \"\"\n}\nif(msg.payload[1].GarbageType == \"Restafval\"){\n msg.ui_control = {icon:\"icons/restafval_60.png\", tooltip:\"Restafval\"};\n msg.label = \"\"\n}\nif(msg.payload[1].GarbageType == \"PMD\"){\n msg.ui_control = {icon:\"icons/pmd_60.png\", tooltip:\"PMD afval\"};\n msg.label = \"\"\n}\nreturn [msg];","outputs":1,"noerr":0,"initialize":"","finalize":"","x":740,"y":1520,"wires":[["33279851.5568f8","df2ef7d5.21a4f8"]]},{"id":"d544a03.f9af16","type":"function","z":"6a2785b5.687a8c","name":"Kleur en icoon","func":"if(msg.payload[0].GarbageType === \"GFT\"){\n msg.ui_control = {icon:\"icons/gft_60.png\", tooltip:\"GFT\"};\n msg.label = \"\"\n}\nif(msg.payload[0].GarbageType == \"Restafval\"){\n msg.ui_control = {icon:\"icons/restafval_60.png\", tooltip:\"Restafval\"};\n msg.label = \"\"\n}\nif(msg.payload[0].GarbageType == \"PMD\"){\n msg.ui_control = {icon:\"icons/pmd_60.png\", tooltip:\"PMD afval\"};\n msg.label = \"\"\n}\nreturn [msg];","outputs":1,"noerr":0,"initialize":"","finalize":"","x":740,"y":1340,"wires":[["baf4da2.70b8b28","3084d4a3.297d8c","9c0fb2dd.c32c3"]]},{"id":"baf4da2.70b8b28","type":"ui_text","z":"6a2785b5.687a8c","group":"11a007f.21b0df8","order":3,"width":0,"height":0,"name":"","label":"","format":" <img src=\"{{msg.ui_control.icon}}\" width=\"30\" height=\"30\">{{msg.payload[0].GarbageType}}{{msg.payload[0].Date | date:\"dd-MM\"}}","layout":"row-left","x":950,"y":1420,"wires":[]},{"id":"5c5ab5b2.3b7e6c","type":"ui_text","z":"6a2785b5.687a8c","group":"11a007f.21b0df8","order":3,"width":0,"height":0,"name":"","label":"","format":" <img src=\"{{msg.payload1}}\" width=\"30\" height=\"30\">{{msg.payload[1].GarbageType}}{{msg.payload[1].Date | date:\"dd-MM\"}}","layout":"row-left","x":1310,"y":1600,"wires":[]},{"id":"96b5ffcb.45c77","type":"ui_text","z":"6a2785b5.687a8c","group":"11a007f.21b0df8","order":3,"width":0,"height":0,"name":"","label":"","format":" <img src=\"{{msg.ui_control.icon}}\" width=\"30\" height=\"30\">{{msg.payload[2].GarbageType}}{{msg.payload[2].Date | date:\"dd-MM\"}}","layout":"row-left","x":950,"y":1760,"wires":[]},{"id":"fa29baef.f13828","type":"ui_template","z":"6a2785b5.687a8c","group":"ecb16f49.be2bc","name":"","order":3,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html>\n<body>\n<table style=\"width:100%\">\n <tr>\n <th align=\"left\">Afval</th>\n <th align=\"left\">Soort</th> \n <th align=\"left\">Ophaaldag</th>\n </tr>\n <tr>\n <td><img src=\"{{msg.ui_control.icon0}}\" width=\"30\" height=\"30\"></td>\n <td>{{msg.payload[0].GarbageType}}</td> \n <td>{{msg.payload[0].Date | date:\"dd-MM\"}}</td>\n </tr>\n <tr>\n <td><img src=\"{{msg.ui_control.icon1}}\" width=\"30\" height=\"30\"></td>\n <td>{{msg.payload[1].GarbageType}}</td>\n <td>{{msg.payload[1].Date | date:\"dd-MM\"}}</td>\n </tr>\n <tr>\n <td><img src=\"{{msg.payload2}}\" width=\"30\" height=\"30\"></td>\n <td>{{msg.payload[2].GarbageType}}</td>\n <td>{{msg.payload[2].Date | date:\"dd-MM\"}}</td>\n </tr>\n</table>\n\n</body>\n</html>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1320,"y":1520,"wires":[[]]},{"id":"d5311bc8.f195c8","type":"debug","z":"6a2785b5.687a8c","name":"payload0","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1280,"y":1300,"wires":[]},{"id":"3084d4a3.297d8c","type":"change","z":"6a2785b5.687a8c","name":"","rules":[{"t":"set","p":"ui_control.icon0","pt":"msg","to":"ui_control.icon","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1010,"y":1340,"wires":[["fa29baef.f13828","d5311bc8.f195c8"]]},{"id":"33279851.5568f8","type":"change","z":"6a2785b5.687a8c","name":"","rules":[{"t":"set","p":"ui_control.icon1","pt":"msg","to":"ui_control.icon","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1010,"y":1520,"wires":[["fa29baef.f13828","5c5ab5b2.3b7e6c","ee74d1d4.e2803"]]},{"id":"77521da2.4e54f4","type":"change","z":"6a2785b5.687a8c","name":"","rules":[{"t":"set","p":"payload2","pt":"msg","to":"ui_control.icon","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":990,"y":1720,"wires":[["fa29baef.f13828"]]},{"id":"ee74d1d4.e2803","type":"debug","z":"6a2785b5.687a8c","name":"payload1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1280,"y":1380,"wires":[]},{"id":"df2ef7d5.21a4f8","type":"debug","z":"6a2785b5.687a8c","name":"payload 1 voor change","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"ui_control.icon","targetType":"msg","statusVal":"","statusType":"auto","x":1000,"y":1480,"wires":[]},{"id":"9c0fb2dd.c32c3","type":"debug","z":"6a2785b5.687a8c","name":"payload 0 voor change","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"ui_control.icon","targetType":"msg","statusVal":"","statusType":"auto","x":1000,"y":1280,"wires":[]},{"id":"11a007f.21b0df8","type":"ui_group","z":"","name":"Afval","tab":"1d6f099d.5cd136","order":4,"disp":true,"width":"6","collapse":false},{"id":"ecb16f49.be2bc","type":"ui_group","z":"","name":"Afval","tab":"1d6f099d.5cd136","order":5,"disp":true,"width":"6","collapse":false},{"id":"1d6f099d.5cd136","type":"ui_tab","z":"","name":"Test","icon":"dashboard","disabled":false,"hidden":false}]

```

This is the dashboard:

![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/f/8/f837a3312bfab8f8c67c86d6a3de35161f62659e.png)

The first icon is displayed but the second and third are not. I hope that anyone can help me with this.

---

<div class="post-metadata">

**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 8, 2020, 4:38pm UTC](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798/532 "2020-08-08T16:38:33Z")

</div>

the icon is didplayed through: file://micronikje453a/foto/icons/open\_deur.png. It is not shared on the internet. But I think the nas is blocking the image.

[Previous page](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798.md?page=25)

[Next page](https://community.homey.app/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798.md?page=27)