# Led icon changed

**URL:** <https://discourse.nodered.org/t/led-icon-changed/656>\
**Category:** Dashboard\
**Created:** [7 June 2018 09:21 UTC](https://discourse.nodered.org/t/led-icon-changed/656 "2018-06-07T09:21:01Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [7 June 2018 09:21 UTC](https://discourse.nodered.org/t/led-icon-changed/656/1 "2018-06-07T09:21:01Z")

</div>

I have no idea why (maybe I did something without realizing but the case is that originally I had round leds and now are square, does some know what could be the reason?

I put below a picture with the round previous icons (which I would like to get back) and the new square ones + the code on the template.

Thanks in advance

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d4ac3ea64ca353d537d70a8157d21f2a91ee99b6.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/3cbb94b3c677053754ff4bdd0d2859fa7a794f4a.png)

````auto
.led {
    float: right;
    padding: 3px;
    width: 10px;
    height: 10px;
    margin: 5px 5px 5px 5px;
    border-radius: 50%;
    
}
</style>

<div><span class="led" style="background-color: {{msg.payload}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload}} 0 3px 15px;"></span></div>```
````

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [7 June 2018 10:01 UTC](https://discourse.nodered.org/t/led-icon-changed/656/2 "2018-06-07T10:01:56Z")

</div>

Not having your flow, I copied that into a template (made a slight adjustment) and I get a round circle - what browser are you using?

```auto
.led {
    float: right;
    padding: 3px;
    width: 10px;
    height: 10px;
    margin: 5px 5px 5px 5px;
    border-radius: 50%;
    
}
</style>

<div>
    <span class="led" style="background-color: green; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload}} 0 3px 15px;">
     hello   
    </span>
</div>

```

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [7 June 2018 11:49 UTC](https://discourse.nodered.org/t/led-icon-changed/656/3 "2018-06-07T11:49:35Z")

</div>

I have checked and see it square on my windows computer, on my android phone and on my android tablet… curious

The exact template is:

`[{"id":"9593bcf.6e0a34","type":"ui_template","z":"712ddec8.883c8","group":"7fccc952.17a8e8","name":"Status luz entrada","order":3,"width":"1","height":"1","format":"<style>\n.led {\n float: right;\n padding: 3px;\n width: 10px;\n height: 10px;\n margin: 5px 5px 5px 5px;\n border-radius: 50%;\n \n}\n</style>\n\n<div><span class=\"led\" style=\"background-color: {{msg.payload}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload}} 0 3px 15px;\"></span></div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1150,"y":3280,"wires":[[]]},{"id":"7fccc952.17a8e8","type":"ui_group","z":"","name":"luces","tab":"7b345faa.30565","order":1,"disp":true,"width":"7","collapse":true},{"id":"7b345faa.30565","type":"ui_tab","z":"","name":"SALON","icon":"fa-television","order":1}]`

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [7 June 2018 12:22 UTC](https://discourse.nodered.org/t/led-icon-changed/656/4 "2018-06-07T12:22:53Z")

</div>

I have just discovered this happens if on the same dashboard tab I have another template where I expected to be square, I don't know the reason but looks booth template can not life in same tab, as soon as I disable that one the previous ones became again round.

`[{"id":"fc9f6ae0.92b1b8","type":"ui_template","z":"712ddec8.883c8","group":"707911c8.4d3a5","name":"Luz","order":5,"width":"7","height":"3","format":"<style>\n.led {\n float: right;\n padding: 3px;\n width: 24px;\n height: 10px;\n margin: 4px 2px 8px 0px;\n border-radius: 0%;\n \n}\n</style>\n\n<h1 fill=lime>LUMINOSIDAD SALA</h1>\n\n<div>\n\n\n<span class=\"led\" style=\"background-color: {{msg.payload[9]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[9]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[8]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[8]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[7]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[7]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[6]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[6]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[5]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[5]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[4]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[4]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[3]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[3]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[2]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[2]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[1]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[1]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[0]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[0]}} 0 3px 15px;\"></span>\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":1070,"y":180,"wires":[[]]},{"id":"707911c8.4d3a5","type":"ui_group","z":"","name":"sensores","tab":"7b345faa.30565","order":3,"disp":true,"width":"7","collapse":true},{"id":"7b345faa.30565","type":"ui_tab","z":"","name":"SALON","icon":"fa-television","order":1}]`

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/8c75ece637286c1235f7154ff2ae502c9275c28d.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/370983e0bf10e7b69c4fa860ff3d8fe92fe34434.png)

Any clue how to have alive booth ways?

Thanks in advance

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [7 June 2018 13:15 UTC](https://discourse.nodered.org/t/led-icon-changed/656/5 "2018-06-07T13:15:57Z")

</div>

So you have two CSS directives for the `.led` class, one with `border-radius: 50%` and the other with `border-radius: 0%`. Whichever one ends up defined last in the html will override the other.

You can define one class for all leds, and add different classes for the shapes (and colors, and sizes, and states, etc):

```
.led {
    float: right;
    padding: 3px;
    width: 24px;
    height: 10px;
    margin: 4px 2px 8px 0px;
 }
.round {
    border-radius: 50%;
}
.square {
    border-radius: 0%;
}

```

and then assign multiple classes as necessary:

```
<span class="led round green bright">

```

If you make one set of all the class definitions for all your dashboard pages, you can put it into its own `ui_template` node, and set the option to “Add to `<head>` section”. This helps make sure that your individual `ui_template` nodes don’t clash, and gives a convenient place to manage all the classes.

Keep is mind that the dashboard is a single page application, and all of the dashboard pages (tabs/groups) are rendered together, although only certain parts are visible/active at one time. _I may be wrong about that, but if so I’m sure one of the developers will correct me…_

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [7 June 2018 13:22 UTC](https://discourse.nodered.org/t/led-icon-changed/656/6 "2018-06-07T13:22:40Z")

</div>

I’m assuming you are developing this for your own use and you know you can see the difference. But for anyone else finding this thread…

A red dot (or rectangle) that changes to do green dot isn’t distinguishable for about 8% of the population who are Red/ Green colourblind.

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [7 June 2018 17:13 UTC](https://discourse.nodered.org/t/led-icon-changed/656/7 "2018-06-07T17:13:34Z")

</div>

shrickus thanks a lot

I understood weel with your explanation, what I have done is just change the template for the square ones to "led-square" to define a different object to avoid the interference and now is solved.

Really thanks

Ukmoose, is just for me at home, if I invite someone at home I will take care that does not belong to this 8% in advance 😛

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/5e1da563a5b5276152a738cb57b371cc143238e3.png)

---

<div class="post-metadata">

**Author:** ![luisgcu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/luisgcu/32/4549_2.png) [@luisgcu](https://discourse.nodered.org/u/luisgcu)\
**Post date:** [21 November 2018 03:59 UTC](https://discourse.nodered.org/t/led-icon-changed/656/8 "2018-11-21T03:59:34Z")

</div>

hola david, puedes compartir tu flow para usarlo como aprendisaje?

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [23 November 2018 10:56 UTC](https://discourse.nodered.org/t/led-icon-changed/656/9 "2018-11-23T10:56:54Z")

</div>

Que necesitas exactamente? si son los iconos de los interruptores:

```auto

[{"id":"9697e2fb.c46fe","type":"change","z":"712ddec8.883c8","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"1","fromt":"num","to":"<i class=\"fa fa-lightbulb-o fa-2x nr-dashboard-warning\"></i>","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"0","fromt":"num","to":"<p><i class=\"fa fa-lightbulb-o fa-2x\"></i> ","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":960,"y":3240,"wires":[["f70cab64.9dd638"]]},{"id":"f70cab64.9dd638","type":"ui_text","z":"712ddec8.883c8","group":"7fccc952.17a8e8","order":1,"width":"1","height":"1","name":"icon status entrada","label":"","format":"{{msg.payload}}","layout":"row-center","x":1150,"y":3240,"wires":[]},{"id":"cfc1bdaf.5f1b6","type":"function","z":"712ddec8.883c8","name":"check","func":"if (msg.payload === 0){\n msg.payload = \"#FF0000\";\n return msg;\n}else if (msg.payload === 1){\n msg.payload = \"#00FF00\";\n return msg;\n}\n","outputs":1,"noerr":0,"x":930,"y":3280,"wires":[["9593bcf.6e0a34"]]},{"id":"9593bcf.6e0a34","type":"ui_template","z":"712ddec8.883c8","group":"7fccc952.17a8e8","name":"Status luz entrada","order":3,"width":"1","height":"1","format":"<style>\n.led {\n float: right;\n padding: 3px;\n width: 10px;\n height: 10px;\n margin: 5px 5px 5px 5px;\n border-radius: 50%;\n \n}\n</style>\n\n<div><span class=\"led\" style=\"background-color: {{msg.payload}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload}} 0 3px 15px;\"></span></div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1150,"y":3280,"wires":[[]]},{"id":"7fccc952.17a8e8","type":"ui_group","z":"","name":"luces","tab":"7b345faa.30565","order":2,"disp":true,"width":"7","collapse":true},{"id":"7b345faa.30565","type":"ui_tab","z":"","name":"SALON","icon":"fa-television","order":2}]

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3e370d291c17b22be2f6e26b32b9868e22aed3f9.png)

---

<div class="post-metadata">

**Author:** ![luisgcu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/luisgcu/32/4549_2.png) [@luisgcu](https://discourse.nodered.org/u/luisgcu)\
**Post date:** [23 November 2018 20:46 UTC](https://discourse.nodered.org/t/led-icon-changed/656/10 "2018-11-23T20:46:52Z")

</div>

> [@davidcgu](#):
>
> [{"id":"9697e2fb.c46fe","type":"change","z":"712ddec8.883c8","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"1","fromt":"num","to":"\<i class="fa fa-lightbulb-o fa-2x nr-dashboard-warning"\>\</i\>","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"0","fromt":"num","to":"\<p\>\<i class="fa fa-lightbulb-o fa-2x"\>\</i\> ","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":960,"y":3240,"wires":[["f70cab64.9dd638"]]},{"id":"f70cab64.9dd638","type":"ui\_text","z":"712ddec8.883c8","group":"7fccc952.17a8e8","order":1,"width":"1","height":"1","name":"icon status entrada","label":"","format":"{{msg.payload}}","layout":"row-center","x":1150,"y":3240,"wires":},{"id":"cfc1bdaf.5f1b6","type":"function","z":"712ddec8.883c8","name":"check","func":"if (msg.payload === 0){\n msg.payload = "#FF0000";\n return msg;\n}else if (msg.payload === 1){\n msg.payload = "#00FF00";\n return msg;\n}\n","outputs":1,"noerr":0,"x":930,"y":3280,"wires":[["9593bcf.6e0a34"]]},{"id":"9593bcf.6e0a34","type":"ui\_template","z":"712ddec8.883c8","group":"7fccc952.17a8e8","name":"Status luz entrada","order":3,"width":"1","height":"1","format":"\<style\>\n.led {\n float: right;\n padding: 3px;\n width: 10px;\n height: 10px;\n margin: 5px 5px 5px 5px;\n border-radius: 50%;\n \n}\n\</style\>\n\n\<div\>\<span class="led" style="background-color: {{msg.payload}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload}} 0 3px 15px;"\>\</span\>\</div\>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1150,"y":3280,"wires":[]},{"id":"7fccc952.17a8e8","type":"ui\_group","z":"","name":"luces","tab":"7b345faa.30565","order":2,"disp":true,"width":"7","collapse":true},{"id":"7b345faa.30565","type":"ui\_tab","z":"","name":"SALON","icon":"fa-television","order":2}]

muchas gracias @davidcgu por compartir, mas bien lo que me interesa es como agrupar varios switch e indicadores en una sola seccion al igual que los botones, me interesa ver como hacer los led rectangulares en vez de circulares. gracias de antemano. si fueras tan amable me compartes la columna de luces con sus switches y la otra columna donde agrupas los botones de subir , parar y bajar persiana..  
Saludos  
luisgcu

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [24 November 2018 07:25 UTC](https://discourse.nodered.org/t/led-icon-changed/656/11 "2018-11-24T07:25:51Z")

</div>

Hola Luis,

PAra agrupar solo tienes que dimensionar para que te coincida segun diseñes el dashboard, en mi caso en las luces yo tengo un ancho de 7 y pongo por este order:  
Icono de status (bombilla amarilla o blanca con un ancho de 1x1)  
switch (con un ancho de 5x1)  
led de status (verde/rojo con un ancho de 1x1)

El flow es el que te indique antes y queda tal y como la captura que te puse, para el led en rojo lo tienes en el flow, es el template.

Para un led quadrado te dejo este como ejemplo:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/a5ff391412e32f5b7c48304dae726ae5e7711d3f.png)

```auto
[{"id":"fc9f6ae0.92b1b8","type":"ui_template","z":"712ddec8.883c8","group":"707911c8.4d3a5","name":"Luz","order":9,"width":"7","height":"2","format":"<style>\n.led-square {\n float: right;\n padding: 3px;\n width: 24px;\n height: 10px;\n margin: 4px 2px 8px 0px;\n border-radius: 0%;\n \n}\n</style>\n\nLUMINOSIDAD SALON\n\n<div>\n\n\n<span class=\"led-square\" style=\"background-color: {{msg.payload[9]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[9]}} 0 3px 15px;\"></span>\n<span class=\"led-square\" style=\"background-color: {{msg.payload[8]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[8]}} 0 3px 15px;\"></span>\n<span class=\"led-square\" style=\"background-color: {{msg.payload[7]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[7]}} 0 3px 15px;\"></span>\n<span class=\"led-square\" style=\"background-color: {{msg.payload[6]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[6]}} 0 3px 15px;\"></span>\n<span class=\"led-square\" style=\"background-color: {{msg.payload[5]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[5]}} 0 3px 15px;\"></span>\n<span class=\"led-square\" style=\"background-color: {{msg.payload[4]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[4]}} 0 3px 15px;\"></span>\n<span class=\"led-square\" style=\"background-color: {{msg.payload[3]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[3]}} 0 3px 15px;\"></span>\n<span class=\"led-square\" style=\"background-color: {{msg.payload[2]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[2]}} 0 3px 15px;\"></span>\n<span class=\"led-square\" style=\"background-color: {{msg.payload[1]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[1]}} 0 3px 15px;\"></span>\n<span class=\"led-square\" style=\"background-color: {{msg.payload[0]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[0]}} 0 3px 15px;\"></span>\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1070,"y":180,"wires":[[]]},{"id":"56cab024.6d431","type":"function","z":"712ddec8.883c8","name":"LED colors","func":"var bargraph = [\"#666600\",\"#666600\",\"#666600\",\"#666600\",\"#666600\",\"#666600\",\"#666600\",\"#666600\",\"#666600\",\"#666600\"];\nvar bargraphON = [\"#FFFF00\",\"#FFFF00\",\"#FFFF00\",\"#FFFF00\",\"#FFFF00\",\"#FFFF00\",\"#FFFF00\",\"#FFFF00\",\"#FFFF00\",\"#FFFF00\"];\n\nfor (var i = 0; i < msg.payload; i++){\n bargraph[i] = bargraphON[i];\n}\nmsg.payload = bargraph;\nreturn msg;","outputs":1,"noerr":0,"x":913,"y":179,"wires":[["fc9f6ae0.92b1b8"]]},{"id":"707911c8.4d3a5","type":"ui_group","z":"","name":"sensores","tab":"7b345faa.30565","order":4,"disp":true,"width":"7","collapse":true},{"id":"7b345faa.30565","type":"ui_tab","z":"","name":"SALON","icon":"fa-television","order":2}]

```

Te dejo otro de muestra que uso para el nivel de audio para que veas como uso los colores:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/152aab644bc796bc0a846668e6e29e43a78e7221.png)

```auto
[{"id":"e2b77de7.53f6b","type":"ui_template","z":"712ddec8.883c8","group":"e41daecb.93f06","name":"Volumen","order":13,"width":"0","height":"0","format":"<style>\n.led {\n float: right;\n padding: 3px;\n width: 10px;\n height: 12px;\n margin: 4px 2px 8px 0px;\n border-radius: 0%;\n \n}\n</style>\n\n<div>Volumen\n<span class=\"led\" style=\"background-color: {{msg.payload[13]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[13]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[12]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[12]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[11]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[11]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[10]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[10]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[9]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[9]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[8]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[8]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[7]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[7]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[6]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[6]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[5]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[5]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[4]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[4]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[3]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[3]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[2]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[2]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[1]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[1]}} 0 3px 15px;\"></span>\n<span class=\"led\" style=\"background-color: {{msg.payload[0]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.payload[0]}} 0 3px 15px;\"></span>\n</div>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1240,"y":2400,"wires":[[]]},{"id":"8ce8522e.5747b","type":"function","z":"712ddec8.883c8","name":"LED colors","func":"var bargraph = [\"#006600\",\"#006600\",\"#006600\",\"#006600\",\"#666600\",\"#666600\",\"#666600\",\"#666600\",\"#8A4B08\",\"#8A4B08\",\"#8A4B08\",\"#660000\",\"#660000\",\"#660000\"];\nvar bargraphON = [\"#00FF00\",\"#00FF00\",\"#00FF00\",\"#00FF00\",\"#FFFF00\",\"#FFFF00\",\"#FFFF00\",\"#FFFF00\",\"#FE9A2E\",\"#FE9A2E\",\"#FE9A2E\",\"#FF0000\",\"#FF0000\",\"#FF0000\"];\n\nfor (var i = 0; i < msg.payload; i++){\n bargraph[i] = bargraphON[i];\n}\nmsg.payload = bargraph;\nreturn msg;","outputs":1,"noerr":0,"x":1070,"y":2400,"wires":[["e2b77de7.53f6b"]]},{"id":"e41daecb.93f06","type":"ui_group","z":"","name":"MEDIA","tab":"b5ad9abd.3a6c38","order":3,"disp":true,"width":"7","collapse":false},{"id":"b5ad9abd.3a6c38","type":"ui_tab","z":"","name":"TV & AUDIO","icon":"wifi","order":4}]

```

Espero te sirva.

Suerte

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [27 November 2018 16:18 UTC](https://discourse.nodered.org/t/led-icon-changed/656/12 "2018-11-27T16:18:58Z")

</div>

Hi! Just to let you know I updated the code for the LED Bar graph display to be easier to modify:  
[https://flows.nodered.org/flow/1538793825685bd8f08e4aea16ca2c74](https://flows.nodered.org/flow/1538793825685bd8f08e4aea16ca2c74)

---

<div class="post-metadata">

**Author:** ![yoiang](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yoiang/32/4831_2.png) [@yoiang](https://discourse.nodered.org/u/yoiang)\
**Post date:** [31 December 2018 08:01 UTC](https://discourse.nodered.org/t/led-icon-changed/656/13 "2018-12-31T08:01:32Z")

</div>

@hugobox it's great! You should publish this as a node package if you have the time.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [31 December 2018 09:51 UTC](https://discourse.nodered.org/t/led-icon-changed/656/14 "2018-12-31T09:51:20Z")

</div>

@hugobox, that is indeed another ui-node candidate 😉 You know that you can ask us if you need assistence!

Although I don't see the link between your node and the above discussion? And I don't have time to translate the entire discussion to english. And afterwards from english to dutch, wich is my native language...

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [1 January 2019 20:38 UTC](https://discourse.nodered.org/t/led-icon-changed/656/15 "2019-01-01T20:38:09Z")

</div>

Hopefully I'll take the time to learn to to do a ui-contrib node! I'm sure I'll have questions, no worries!!!

I saw from the pics what seemed like my old led bar graph code and thought they'd want to know about the new version, but it's possibly off-topic as I also havn't translated the thread.

---

<div class="post-metadata">

**Author:** ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)\
**Post date:** [22 August 2021 09:49 UTC](https://discourse.nodered.org/t/led-icon-changed/656/16 "2021-08-22T09:49:33Z")

</div>

Hi @hugobox , I came across your led bargraph flow, thank you very much for sharing your code which seems clear, elegant and concise.

I am trying to turn it into just a row of leds with minimal template code that just accepts as input an array of colours in a single msg.

I am getting an infinite Aerial digest loop error but their help and explanation unfortunately does not mean anything to me.

Could you or anyone else here please give me a hint as to how it can be declared and implemented.

Best regards oz

---

<div class="post-metadata">

**Author:** ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)\
**Post date:** [22 August 2021 13:09 UTC](https://discourse.nodered.org/t/led-icon-changed/656/17 "2021-08-22T13:09:48Z")

</div>

Hi all, this is my simple template code:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/9/493e6323cf53303dc988318427c2062b309fe871.png)

```auto
<script>
(function($scope) {
    
// Inspired by https://flows.nodered.org/user/Hugobox
let led_count = 32;
let label = "GPIO";
var initialised = false;
var bargraph = new Array(led_count).fill("#000000")

//From Hotnip :cause a small delay while things load
//ideally this would be an init event or on all parts of document loaded
//(may not be necessary!)
//setTimeout(function() {
// //debugger
// $scope.init();
//},100);

/**
* Initialise state
*/
//$scope.init = function () {
// //debugger
// console.log("$scope.init called. ");
// if( initialised === false ){
// //debugger
// initialised = true
// console.log("Collecting settings from persistent storage:");
// $scope.send(bargraph);
// }
//};

    $scope.$watch('msg', function() {
        
        if ($scope.msg){
            if ($scope.msg.hasOwnProperty('payload') && 
                typeof $scope.msg.payload == "object" &&
                Array.isArray( $scope.msg.payload ) && 
                $scope.msg.payload.length == led_count){
                
                $scope.msg.label = label
                for( let i=0; i<led_count; i++){
                    if ( typeof $scope.msg.payload[i] == "string" ){
                        if ( $scope.msg.payload[i].trim().toUpperCase().match(/#[0-9A-F]{6}/9) == $scope.msg.payload[i].trim().toUpperCase() ){
                            bargraph[i] = $scope.msg.payload[i].trim().toUpperCase()
                        }
                    }            
                }
                $scope.msg.bargraph = bargraph.reverse()
                $scope.msg.bargraph = bargraph.reverse()
            }else if (typeof $scope.msg.payload !== "array"){
                $scope.msg = {"bargraph":[...bargraph], "payload": [], "label":label}
            }   
        }else{
            $scope.msg = {"bargraph":[...bargraph], "payload": [], "label":label}
        }
    });
})(scope);

</script>

<style>
.bargraph {
    float: right;
    padding: 3px;
    width: 3px;
    height: 10px;
    margin: 4px 2px 8px 0px;
    border-radius: 0%;
}
</style>

<div>{{msg.label}}
    <div ng-repeat="led in msg.bargraph">
        <p>{{led}}</p>
        <ul>
            <li ng-repeat="i in led"; class="bargraph" style="background-colour: {{i}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{i}} 0 3px 15px;">{{i}}</li>
        </ul>
    </div>
</div>

```

This gives two browser error that I cannot find:

1. 404 - GET [http://127.0.0.1:1893/ui/loading.html](http://127.0.0.1:1893/ui/loading.html) and
2. Uncaught SyntaxError: missing ) after argument list

Can anyone help me please ?

---

<div class="post-metadata">

**Author:** ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)\
**Post date:** [22 August 2021 15:28 UTC](https://discourse.nodered.org/t/led-icon-changed/656/18 "2021-08-22T15:28:46Z")

</div>

Hi anyone, I have started again from scratch with a minimum (as I see it) of code and am clear of the syntax error. I still have error 1. but when I inject an array of three colours the ui display vanishes.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/8/38699d81edf13ab6486d0017789e7e68a070443a.png)

Before 'Inject':  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/1/f1aa5cccb08c3e0f007013b54fbe131a4c71736d.png)  
After 'Inject':  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/f/afc67819ae354657c1e228dec8bd38661dfb0325.png)

Should I open a new topic anyone ?

```auto
[
    {
        "id": "7e1c80b7bacaa1eb",
        "type": "debug",
        "z": "77b9551a682cccf9",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 490,
        "y": 160,
        "wires": []
    },
    {
        "id": "edb3ddb6cd354130",
        "type": "ui_template",
        "z": "77b9551a682cccf9",
        "group": "879c5e97.07fff",
        "name": "LED Array",
        "order": 13,
        "width": "3",
        "height": "2",
        "format": "<script>\n(function($scope) {\n// Inspired by https://flows.nodered.org/user/Hugobox\nlet led_count = 3 //amount of LEDs\nlet label = \"GPIO\"\n\nvar bargraph = new Array(led_count).fill(\"#000000\")\n\n$scope.$watch('msg', function() {\n \nif ($scope.msg){\n if ($scope.msg.hasOwnProperty('payload') &&\n typeof $scope.msg.payload == \"object\" &&\n Array.isArray( $scope.msg.payload ) &&\n $scope.msg.payload.length == led_count){\n\nconsole.log(\"msg.payload[0]=\" + String($scope.msg.payload[0]))\n $scope.msg.label = label\n for(let i=0; i<led_count; i++){\n bargraph[i]=$scope.msg.payload[i]\n }\n// $scope.msg.bargraph = bargraph.reverse()\n// $scope.msg.bargraph = bargraph.reverse()\n }else if (typeof $scope.msg.payload !== \"number\"){\n $scope.msg = {\"bargraph\":[...bargraph], \"payload\": 0, \"label\":label}\n } \n}else{\n $scope.msg = {\"bargraph\":[...bargraph], \"payload\": 0, \"label\":label}\n}\n });\n})(scope);\n</script>\n\n<style>\n.bargraph {\n float: right;\n padding: 3px;\n width: 3px;\n height: 10px;\n margin: 4px 2px 8px 0px;\n border-radius: 0%;\n}\n</style>\n\n<div>{{msg.label}}\n<div>\n <span ng-repeat=\"led in msg.bargraph track by $index\">\n <span class=\"bargraph\" style=\"background-color: {{msg.bargraph[led]}}; box-shadow: black 0 -1px 1px 0px, inset black 0 -1px 4px, {{msg.bargraph[led]}} 0 3px 15px;\"></span>\n </span>\n</div>\n</div>\n",
        "storeOutMessages": false,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "x": 370,
        "y": 160,
        "wires": [
            [
                "7e1c80b7bacaa1eb"
            ]
        ]
    },
    {
        "id": "29bb58bf97a78ce9",
        "type": "inject",
        "z": "77b9551a682cccf9",
        "name": "msg.payload=[\"#ff0000\",\"#00ff00\",\"#0000ff\"]",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[\"#ff0000\",\"#00ff00\",\"#0000ff\"]",
        "payloadType": "jsonata",
        "x": 430,
        "y": 120,
        "wires": [
            [
                "edb3ddb6cd354130"
            ]
        ]
    },
    {
        "id": "879c5e97.07fff",
        "type": "ui_group",
        "name": "n:14.17.5 r:2.0.5 d:20.30.0",
        "tab": "105c5e70.b644f2",
        "order": 4,
        "disp": true,
        "width": "8",
        "collapse": true
    },
    {
        "id": "105c5e70.b644f2",
        "type": "ui_tab",
        "name": "dashboard template",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [22 August 2021 17:42 UTC](https://discourse.nodered.org/t/led-icon-changed/656/19 "2021-08-22T17:42:21Z")

</div>

I think that would be a good idea as the existing header does not cover your problem

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [22 August 2021 17:47 UTC](https://discourse.nodered.org/t/led-icon-changed/656/20 "2021-08-22T17:47:28Z")

</div>

@ozpos As this original topic is very old, and your issue has nothing to do with the original anyhow (aside from using some of the LED code example), perhaps a moderator can move your posts into a relevant topic?

Meanwhile I am unclear as to your goal here... Do you want to make a bar graph based on an array (as in some of the examples in this original topic), or do you want to dynamically change an existing bars colours based on some other form of input?

[Next page](https://discourse.nodered.org/t/led-icon-changed/656.md?page=2)