Led icon changed


#1

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

image

.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>```

Simple LED indicator on dashboard
#2

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?

.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>

#3

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


#4

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

Any clue how to have alive booth ways?

Thanks in advance


#5

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…


#6

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.


#7

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


#8

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


#9

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


[{"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


#10

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


#11

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

[{"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

[{"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


Bar Graph Colors determined by values
#12

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