Icons not showing

Hello,

I'm just starting with node red and I have a question.

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":"json","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":690,"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.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.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.icon2}}\" 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":"icon0","pt":"msg","to":"ui_control.icon","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":980,"y":1340,"wires":[["fa29baef.f13828","d5311bc8.f195c8"]]},{"id":"33279851.5568f8","type":"change","z":"6a2785b5.687a8c","name":"","rules":[{"t":"set","p":"icon1","pt":"msg","to":"ui_control.icon","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":980,"y":1520,"wires":[["fa29baef.f13828","5c5ab5b2.3b7e6c","ee74d1d4.e2803"]]},{"id":"77521da2.4e54f4","type":"change","z":"6a2785b5.687a8c","name":"","rules":[{"t":"set","p":"icon2","pt":"msg","to":"ui_control.icon","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":980,"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":"2c406478.cf1c8c","type":"change","z":"6a2785b5.687a8c","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"temp °C / humi %","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"temp","fromt":"str","to":"temperature","tot":"flow"},{"t":"change","p":"payload","pt":"msg","from":"humi","fromt":"str","to":"humidity","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":1200,"y":1820,"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}]

and this is how it looks like:
image

This first icon is showing but the second and third not. Can someone please help me with this?

Put a debug node (set to display the Complete msg object) after the json node and run the flow. Then copy the contents of the object and paste it to a reply. Then I (or someone else) will have a chance to see what you are doing.

Where are the images/icons stored??

Here is the output after te json node:

[{"GarbageTypeCode":"RESTAFVAL","GarbageType":"Restafval","Date":"2020-08-13T00:00:00","Regular":true},{"GarbageTypeCode":"GFT","GarbageType":"GFT","Date":"2020-08-21T00:00:00","Regular":true},{"GarbageTypeCode":"PMD","GarbageType":"PMD","Date":"2020-08-28T00:00:00","Regular":true}]

image

Where are the images/icons stored??

at the same webserver as Node Red. In a map called /icons/ and its accessible from:

http://192.168.1.6:1880/ui/icons/restafval_60.png

Ok one of the issues is your template node. You have three msgs that will arrive at different times that will build the contents of the template. So whena msg goes thru the change node "set msg.icon2" it creates a msg.icon2 to pass to the template node, but msg.icon1 and msg.icon0 will not exist in that msg so there will be no reference in the html code that is built.

You will need to use a join node to join all three msgs before passing on to the template node. You might want to look at some of the examples for the join node:

Thanks for the solution. It works now:

image

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.