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

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 :joy:

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

this is what it looks like now:
image
image
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}]
1 Like

I’m happy with it now

1 Like

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

@Jeroen_Kokhuis
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

I have already tried it but I did not succeed

Can you also tell us how you did it? :slight_smile:

Where did you get those icons from?

1 Like

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?

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}]

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:

<!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:

More info:

@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)?

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.

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?

Where are your icons? Are they accessible?

try:

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

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.

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?

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

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

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.

1 Like