# Interactive template LED designer

**URL:** <https://discourse.nodered.org/t/interactive-template-led-designer/92576>\
**Category:** Share Your Projects\
**Tags:** dashboard-2\
**Created:** [22 October 2024 10:52 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576 "2024-10-22T10:52:02Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 October 2024 10:52 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/1 "2024-10-22T10:52:02Z")

</div>

Using CSS box-shadow to make a pleasing LED glow is complicated, especially with multiple layers of shadow.

This flow lets me adjust most of the available parameters and immediately see the results in ui-templates with either dark or light backgrounds.  
It also generates code to reproduce the finished LED design in a stand-alone ui-template.

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

![leddesignersmall](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/2/12f08bff348235e93873c42713c25a4aaa60bb10.gif)

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

Issues/Questions  
There is a disabled template in the flow which uses [Teleport](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#teleports) to move an example LED template to the title bar but styling sent as msg.class or msg.ui\_update.class are ignored here.  
Maybe someone can comment if I am abusing it or this is a bug in the Teleport function?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 October 2024 10:52 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/2 "2024-10-22T10:52:17Z")

</div>

```auto
[{"id":"79bce046534c0ccf","type":"tab","label":"Template LED Designer","disabled":false,"info":"","env":[]},{"id":"ac724f1e734c46b6","type":"group","z":"79bce046534c0ccf","name":"Outer glow","style":{"label":true},"nodes":["c0f0b5f0a1d23437","31f441d187f23f04","bbc41494a6dd7132","b923596c857ff429","e4d8f19803917b4b"],"x":314,"y":399,"w":172,"h":242},{"id":"8f03b32233bdc68e","type":"group","z":"79bce046534c0ccf","name":"Inner glow","style":{"label":true},"nodes":["b4b38930a78780af","08681a2beb80cd1e","8afa134f681ccef5","4e5ece07f044a555","9d03160a11ba8434","09bfc34a24bc4194"],"x":314,"y":659,"w":172,"h":282},{"id":"93d21fb95d78f780","type":"group","z":"79bce046534c0ccf","name":"LED Color","style":{"label":true},"nodes":["7159c544c83ff355","74816130302cd166","71048edb04c0542d"],"x":314,"y":39,"w":172,"h":162},{"id":"8c205b724865a089","type":"group","z":"79bce046534c0ccf","name":"Shape, size","style":{"label":true},"nodes":["6ea9f73003bb34f9","7c47dd2bf82bef62","5d7d858dee56a9b4"],"x":314,"y":219,"w":152,"h":162},{"id":"fa0964ef057b04dc","type":"group","z":"79bce046534c0ccf","style":{"stroke":"#0722fc","stroke-opacity":"1","fill":"none","fill-opacity":"1","label":true,"label-position":"nw","color":"#0722fc"},"nodes":["76dfa4f8b0ac5638","a7bfd5c9b62c8bae"],"x":314,"y":959,"w":152,"h":122},{"id":"cf2a7233c25bd941","type":"junction","z":"79bce046534c0ccf","x":540,"y":820,"wires":[["f6c11f466af0cbf2"]]},{"id":"f6c11f466af0cbf2","type":"junction","z":"79bce046534c0ccf","x":540,"y":540,"wires":[["e0f160bd042c06d0"]]},{"id":"2bbf38bc09ae261c","type":"junction","z":"79bce046534c0ccf","x":500,"y":1060,"wires":[["cf2a7233c25bd941"]]},{"id":"0c3c9e18d37c18e7","type":"junction","z":"79bce046534c0ccf","x":500,"y":120,"wires":[["d2a4e42a42b15f19"]]},{"id":"e0f160bd042c06d0","type":"junction","z":"79bce046534c0ccf","x":520,"y":340,"wires":[["d2a4e42a42b15f19"]]},{"id":"7159c544c83ff355","type":"ui-slider","z":"79bce046534c0ccf","g":"93d21fb95d78f780","group":"881df96fdaa9ca33","name":"hue","label":"hue","tooltip":"","order":1,"width":"2","height":"1","passthru":false,"outs":"all","topic":"hue","topicType":"str","thumbLabel":"always","showTicks":"false","min":0,"max":"359","step":1,"className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":390,"y":80,"wires":[["0c3c9e18d37c18e7"]]},{"id":"74816130302cd166","type":"ui-slider","z":"79bce046534c0ccf","g":"93d21fb95d78f780","group":"881df96fdaa9ca33","name":"saturation","label":"saturation","tooltip":"","order":2,"width":"2","height":"1","passthru":false,"outs":"all","topic":"saturation","topicType":"str","thumbLabel":"always","showTicks":"false","min":0,"max":"100","step":1,"className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":400,"y":120,"wires":[["0c3c9e18d37c18e7"]]},{"id":"71048edb04c0542d","type":"ui-slider","z":"79bce046534c0ccf","g":"93d21fb95d78f780","group":"881df96fdaa9ca33","name":"lightness","label":"lightness","tooltip":"","order":3,"width":"2","height":"1","passthru":false,"outs":"all","topic":"lightness","topicType":"str","thumbLabel":"always","showTicks":"false","min":0,"max":"100","step":1,"className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":400,"y":160,"wires":[["0c3c9e18d37c18e7"]]},{"id":"83a226cf7cf62a13","type":"ui-template","z":"79bce046534c0ccf","group":"e7f2467415b105af","page":"","ui":"","name":"LED1","order":1,"width":"1","height":"1","head":"","format":"<template>\n <div class=\"ledwrapperfordemo\">\n <div class=\"led\" :style=\"msg.style\"></div> \n </div>\n</template>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":790,"y":280,"wires":[[]]},{"id":"28eaf19fb7d8fe82","type":"ui-template","z":"79bce046534c0ccf","group":"e7f2467415b105af","page":"","ui":"","name":"LED2","order":2,"width":"1","height":"1","head":"","format":"<template>\n <div class=\"ledwrapperfordemo dark\">\n <div class=\"led\" :style=\"msg.style\"></div> \n </div>\n</template>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":790,"y":320,"wires":[[]]},{"id":"76dfa4f8b0ac5638","type":"ui-button","z":"79bce046534c0ccf","g":"fa0964ef057b04dc","group":"e7f2467415b105af","name":"","label":"Off","order":3,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"off","payloadType":"str","topic":"state","topicType":"str","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":390,"y":1000,"wires":[["2bbf38bc09ae261c"]]},{"id":"a7bfd5c9b62c8bae","type":"ui-button","z":"79bce046534c0ccf","g":"fa0964ef057b04dc","group":"e7f2467415b105af","name":"","label":"On","order":4,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"on","payloadType":"str","topic":"state","topicType":"str","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":390,"y":1040,"wires":[["2bbf38bc09ae261c"]]},{"id":"d2a4e42a42b15f19","type":"function","z":"79bce046534c0ccf","name":"Set style","func":"//-------------------------------\n// Update parameters in context storage\nconst ledparms = flow.get(\"ledparms\")\nif (! msg.topic) {node.warn (\"No topic : \" + msg.payload ) }\n\nledparms[msg.topic] = msg.payload\nflow.set(\"ledparms\", ledparms)\n\n//-------------------------------\n// CSS variables for LED color hue, saturation & lightness\nmsg.style = \"--hue:\" + ledparms.hue + \"; --saturation: \" + ledparms.saturation + \"%; \" \nmsg.style += \"--lightness: \" + ledparms.lightness + \"%; \"\n\n//-------------------------------\n// LED appearance fontsize controls LED diameter, border is border width.\nmsg.style += \"--fontsize:\" + ledparms.fontsize + \"rem; --border:\" + ledparms.border + \"rem; \"\n\n//-------------------------------\n// box shadow - outside glow\nmsg.boxshadow = \"box-shadow: \\n\"\nfor (let i = 1; i <= ledparms.outerlayers; i++) {\n // simplified by using linear transition in alpha and blur values\n const x = 0\n const y = 0\n let layer = \" \"\n layer = x + \"px \" + y + \"px \" + ledparms.outerblur * i / ledparms.outerlayers + \"rem \"\n layer += ledparms.outerspread + \"rem \"\n layer += \"hsla(\" + ledparms.hue + \",\" + ledparms.saturation + \"%, \" + ledparms.lightness + \"%, \"\n layer += ledparms.outeralpha * i / ledparms.outerlayers + \"%)\"\n msg.boxshadow = msg.boxshadow + layer + \",\\n\" \n}\n\n//-------------------------------\n// box shadow - inside glow\nfor (let i = 1; i <= ledparms.innerlayers; i++) {\n let layer = \" inset \" + ledparms.innerx + \"rem \" + ledparms.innery + \"rem \" + ledparms.innerblur * i / ledparms.innerlayers + \"rem \"\n layer += ledparms.innerspread + \"rem \"\n layer += \"hsla(\" + ledparms.hue + \",\" + ledparms.saturation + \"%, \" + ledparms.lightness + \"%, \"\n layer += ledparms.inneralpha * i / ledparms.innerlayers + \"%)\"\n msg.boxshadow += layer\n if (i < ledparms.innerlayers) { \n msg.boxshadow += \",\\n\"\n }\n else {\n msg.boxshadow += \";\"\n }\n}\n\nmsg.style += msg.boxshadow\n\n// -----------------------------------------\n// on/off have only two values so use msg.class and classes defined in CSS\n// could also use msg.ui_update.class\nmsg.class = ledparms.state + \" \" + ledparms.shape \nmsg.shape = \"\"\nif (ledparms.shape === \"round\") { msg.shape = \"border-radius: 50%;\"}\nif (ledparms.shape === \"square\") { msg.shape = \"border-radius: 8%;\" }\nif (ledparms.shape === \"diamond\") { msg.shape = \"border-radius: 8%; \\ntransform: rotate(45deg);\" }\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":640,"y":320,"wires":[["83a226cf7cf62a13","28eaf19fb7d8fe82","5a86c9c9eedd1eb5","def501ea2072f875","9fb114c83c7bea77"]]},{"id":"6ea9f73003bb34f9","type":"ui-slider","z":"79bce046534c0ccf","g":"8c205b724865a089","group":"eb07bbe3d7eccfaf","name":"Size","label":"Size","tooltip":"","order":2,"width":"2","height":"1","passthru":false,"outs":"all","topic":"fontsize","topicType":"str","thumbLabel":"always","showTicks":"false","min":"0.5","max":"5","step":"0.1","className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":390,"y":260,"wires":[["e0f160bd042c06d0"]]},{"id":"7c47dd2bf82bef62","type":"ui-slider","z":"79bce046534c0ccf","g":"8c205b724865a089","group":"eb07bbe3d7eccfaf","name":"Border","label":"Border","tooltip":"","order":3,"width":"2","height":"1","passthru":false,"outs":"all","topic":"border","topicType":"str","thumbLabel":"always","showTicks":"false","min":"0","max":"0.5","step":"0.01","className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":390,"y":300,"wires":[["e0f160bd042c06d0"]]},{"id":"89e87f077f4b80c9","type":"inject","z":"79bce046534c0ccf","name":"init","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"reset","payloadType":"str","x":130,"y":180,"wires":[["59ae92433d472997"]]},{"id":"c0f0b5f0a1d23437","type":"ui-slider","z":"79bce046534c0ccf","g":"ac724f1e734c46b6","group":"63d1ec89d34fbfd0","name":"Layers","label":"Layers","tooltip":"","order":1,"width":0,"height":0,"passthru":false,"outs":"all","topic":"outerlayers","topicType":"str","thumbLabel":"always","showTicks":"false","min":"0","max":"6","step":1,"className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":390,"y":440,"wires":[["f6c11f466af0cbf2"]]},{"id":"31f441d187f23f04","type":"ui-slider","z":"79bce046534c0ccf","g":"ac724f1e734c46b6","group":"63d1ec89d34fbfd0","name":"Alpha","label":"Alpha","tooltip":"","order":2,"width":0,"height":0,"passthru":false,"outs":"all","topic":"outeralpha","topicType":"str","thumbLabel":"always","showTicks":"false","min":0,"max":"100","step":"2","className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":390,"y":480,"wires":[["f6c11f466af0cbf2"]]},{"id":"bbc41494a6dd7132","type":"ui-slider","z":"79bce046534c0ccf","g":"ac724f1e734c46b6","group":"63d1ec89d34fbfd0","name":"Blur","label":"Blur","tooltip":"","order":3,"width":0,"height":0,"passthru":false,"outs":"all","topic":"outerblur","topicType":"str","thumbLabel":"always","showTicks":"false","min":0,"max":"5","step":"0.1","className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":390,"y":520,"wires":[["f6c11f466af0cbf2"]]},{"id":"b923596c857ff429","type":"ui-slider","z":"79bce046534c0ccf","g":"ac724f1e734c46b6","group":"63d1ec89d34fbfd0","name":"Spread","label":"Spread","tooltip":"","order":4,"width":0,"height":0,"passthru":false,"outs":"all","topic":"outerspread","topicType":"str","thumbLabel":"always","showTicks":"false","min":"-0.5","max":"0.5","step":"0.1","className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":400,"y":560,"wires":[["f6c11f466af0cbf2"]]},{"id":"adc04e946ff5b9c2","type":"change","z":"79bce046534c0ccf","name":"To context","rules":[{"t":"set","p":"ledparms","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":130,"y":300,"wires":[["5653d730cac75653"]]},{"id":"5653d730cac75653","type":"split","z":"79bce046534c0ccf","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"topic","property":"payload","x":110,"y":480,"wires":[["2f8473e88bd767d2"]]},{"id":"2f8473e88bd767d2","type":"switch","z":"79bce046534c0ccf","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"hue","vt":"str"},{"t":"eq","v":"saturation","vt":"str"},{"t":"eq","v":"lightness","vt":"str"},{"t":"eq","v":"fontsize","vt":"str"},{"t":"eq","v":"border","vt":"str"},{"t":"eq","v":"shape","vt":"str"},{"t":"eq","v":"outerlayers","vt":"str"},{"t":"eq","v":"outeralpha","vt":"str"},{"t":"eq","v":"outerblur","vt":"str"},{"t":"eq","v":"outerspread","vt":"str"},{"t":"eq","v":"innerlayers","vt":"str"},{"t":"eq","v":"inneralpha","vt":"str"},{"t":"eq","v":"innerblur","vt":"str"},{"t":"eq","v":"innerspread","vt":"str"},{"t":"eq","v":"innerx","vt":"str"},{"t":"eq","v":"innery","vt":"str"}],"checkall":"true","repair":false,"outputs":16,"x":215,"y":480,"wires":[["7159c544c83ff355"],["74816130302cd166"],["71048edb04c0542d"],["6ea9f73003bb34f9"],["7c47dd2bf82bef62"],["5d7d858dee56a9b4"],["c0f0b5f0a1d23437"],["31f441d187f23f04"],["bbc41494a6dd7132"],["b923596c857ff429"],["b4b38930a78780af"],["08681a2beb80cd1e"],["8afa134f681ccef5"],["4e5ece07f044a555"],["9d03160a11ba8434"],["09bfc34a24bc4194"]],"l":false},{"id":"b4b38930a78780af","type":"ui-slider","z":"79bce046534c0ccf","g":"8f03b32233bdc68e","group":"2ce59aaae1a6450a","name":"Layers","label":"Layers","tooltip":"","order":1,"width":0,"height":0,"passthru":false,"outs":"all","topic":"innerlayers","topicType":"str","thumbLabel":"always","showTicks":"false","min":"1","max":"6","step":1,"className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":390,"y":700,"wires":[["cf2a7233c25bd941"]]},{"id":"08681a2beb80cd1e","type":"ui-slider","z":"79bce046534c0ccf","g":"8f03b32233bdc68e","group":"2ce59aaae1a6450a","name":"Alpha","label":"Alpha","tooltip":"","order":2,"width":0,"height":0,"passthru":false,"outs":"all","topic":"inneralpha","topicType":"str","thumbLabel":"always","showTicks":"false","min":0,"max":"100","step":"2","className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":390,"y":740,"wires":[["cf2a7233c25bd941"]]},{"id":"8afa134f681ccef5","type":"ui-slider","z":"79bce046534c0ccf","g":"8f03b32233bdc68e","group":"2ce59aaae1a6450a","name":"Blur","label":"Blur","tooltip":"","order":3,"width":0,"height":0,"passthru":false,"outs":"all","topic":"innerblur","topicType":"str","thumbLabel":"always","showTicks":"false","min":0,"max":"5","step":"0.1","className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":390,"y":780,"wires":[["cf2a7233c25bd941"]]},{"id":"4e5ece07f044a555","type":"ui-slider","z":"79bce046534c0ccf","g":"8f03b32233bdc68e","group":"2ce59aaae1a6450a","name":"Spread","label":"Spread","tooltip":"","order":4,"width":0,"height":0,"passthru":false,"outs":"all","topic":"innerspread","topicType":"str","thumbLabel":"always","showTicks":"false","min":"-0.5","max":"0.5","step":"0.1","className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":400,"y":820,"wires":[["cf2a7233c25bd941"]]},{"id":"5d7d858dee56a9b4","type":"ui-radio-group","z":"79bce046534c0ccf","g":"8c205b724865a089","group":"eb07bbe3d7eccfaf","name":"Shape","label":"","order":1,"width":"2","height":"1","columns":"3","passthru":true,"options":[{"label":"⚫","value":"round","type":"str"},{"label":"⬛","value":"square","type":"str"},{"label":"◆","value":"diamond","type":"str"}],"payload":"","topic":"shape","topicType":"str","className":"","x":390,"y":340,"wires":[["e0f160bd042c06d0"]]},{"id":"d94c7bd4d3e83a09","type":"template","z":"79bce046534c0ccf","name":"Defaults","field":"payload","fieldType":"msg","format":"handlebars","syntax":"plain","template":"{\n \"hue\": 230,\n \"saturation\": 100,\n \"lightness\": 50,\n \"fontsize\": 3,\n \"border\": 0.01,\n \"shape\": \"round\",\n \"outerlayers\": 3,\n \"outeralpha\": 100,\n \"outerblur\": 2,\n \"outerspread\": 0,\n \"innerlayers\": 2,\n \"inneralpha\": 100,\n \"innerblur\": 2,\n \"innerspread\": 0,\n \"innerx\": 0.2,\n \"innery\": 0.2,\n \"state\": \"on\"\n}\n","output":"json","x":120,"y":260,"wires":[["adc04e946ff5b9c2"]]},{"id":"9d03160a11ba8434","type":"ui-slider","z":"79bce046534c0ccf","g":"8f03b32233bdc68e","group":"2ce59aaae1a6450a","name":"X offset","label":"X","tooltip":"","order":5,"width":0,"height":0,"passthru":false,"outs":"all","topic":"innerx","topicType":"str","thumbLabel":"always","showTicks":"false","min":"-1","max":"1","step":"0.1","className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":400,"y":860,"wires":[["cf2a7233c25bd941"]]},{"id":"09bfc34a24bc4194","type":"ui-slider","z":"79bce046534c0ccf","g":"8f03b32233bdc68e","group":"2ce59aaae1a6450a","name":"Y offset","label":"Y","tooltip":"","order":6,"width":0,"height":0,"passthru":false,"outs":"all","topic":"innery","topicType":"str","thumbLabel":"always","showTicks":"false","min":"-1","max":"1","step":"0.1","className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","x":400,"y":900,"wires":[["cf2a7233c25bd941"]]},{"id":"59ae92433d472997","type":"ui-button","z":"79bce046534c0ccf","group":"e7f2467415b105af","name":"Reset","label":"Reset","order":5,"width":"2","height":"1","emulateClick":true,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"reset","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":110,"y":220,"wires":[["d94c7bd4d3e83a09"]]},{"id":"2a65b4b0ef65df01","type":"ui-template","z":"79bce046534c0ccf","group":"","page":"","ui":"d45641ed6d39fea1","name":"","order":0,"width":0,"height":0,"head":"","format":".ledwrapperfordemo {\n justify-content: center; \n display: grid;\n min-width: 100%;\n min-height: 100px;\n}\n.ledwrapperfordemo.dark {\n background-color: #444;\n}\n.ledwrapperfordemo.light {\n background-color: #fff;\n}\n.led {\n border-width: var(--border);\n font-size: var(--fontsize); \n height: 1em; /* 1 em is font size of parent element (?) */\n width: 1em;\n border-style: solid;\n border-color: hsl(var(--hue), var(--saturation), var(--lightness));\n background-color: white;\n position : absolute;\n top: calc(50% - var(--fontsize)/2);\n left: calc(50% - var(--fontsize)/2)\n}\n.round .led {\n border-radius: 50%;\n}\n.square .led {\n border-radius: 8%;\n}\n.diamond .led {\n border-radius: 8%;\n transform: rotate(45deg);\n}\n\n.on .led {\n}\n.off .led {\n box-shadow: inset 0.1rem 0.1rem 0.7em 0 hsla(var(--hue), 8%, 57%, 100%) !important;\n border-color: hsl(var(--hue), 30%, 50%);\n}\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":100,"y":60,"wires":[[]]},{"id":"a107d205f53232c2","type":"ui-text-input","z":"79bce046534c0ccf","group":"9fdd47d372080b9d","name":"Export","label":"Copy this code into a ui-template node and feed it msg.class = \"on\" or \"off\"","order":1,"width":"10","height":"5","topic":"topic","topicType":"msg","mode":"textarea","tooltip":"","delay":300,"passthru":true,"sendOnDelay":false,"sendOnBlur":false,"sendOnEnter":true,"className":"","clearable":false,"sendOnClear":false,"icon":"","iconPosition":"left","iconInnerPosition":"inside","x":790,"y":400,"wires":[[]]},{"id":"e4d8f19803917b4b","type":"ui-text","z":"79bce046534c0ccf","g":"ac724f1e734c46b6","group":"63d1ec89d34fbfd0","order":5,"width":0,"height":0,"name":"text","label":"More layers makes a nicer glow especially on a dark background","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","className":"","x":390,"y":600,"wires":[]},{"id":"5a86c9c9eedd1eb5","type":"ui-template","z":"79bce046534c0ccf","d":true,"group":"e7f2467415b105af","page":"","ui":"","name":"LED on title bar BROKEN","order":6,"width":"1","height":"1","head":"","format":"<template>\n <Teleport v-if=\"mounted\" to=\"#app-bar-title\">\n <!-- Why does msg.class (or msg.ui_update.class) == \"round\" not work within Teleport? !-->\n <div class=\"led\" :style=\"msg.style\"></div>\n </Teleport>\n</template>\n<script>\n export default {\n data() {\n return {\n mounted: false\n }\n },\n mounted() {\n this.mounted = true\n }\n }\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":730,"y":240,"wires":[[]]},{"id":"9fb114c83c7bea77","type":"ui-template","z":"79bce046534c0ccf","group":"9fdd47d372080b9d","page":"","ui":"","name":"LED3","order":2,"width":"1","height":"1","head":"","format":"<template>\n <div class=\"led\" :style=\"msg.style\"></div>\n</template>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":790,"y":360,"wires":[[]]},{"id":"064d2bf7d7fb5610","type":"ui-text","z":"79bce046534c0ccf","group":"9fdd47d372080b9d","order":3,"width":"9","height":"1","name":"Thanks","label":"Thanks to","format":"{{msg.payload}}","layout":"row-left","style":false,"font":"","fontSize":16,"color":"#717171","className":"","x":780,"y":520,"wires":[]},{"id":"814b4b2bc7f57243","type":"inject","z":"79bce046534c0ccf","name":"go","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"https://tobiasahlin.com/blog/layered-smooth-box-shadows/ and https://shadows.brumm.af/","payloadType":"str","x":650,"y":520,"wires":[["064d2bf7d7fb5610"]]},{"id":"def501ea2072f875","type":"template","z":"79bce046534c0ccf","name":"Export","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<template>\n <div class=\"{{flow.ledparms.shape}} led\"></div>\n</template>\n<style>\n.led {\n border-width: {{flow.ledparms.border}}rem;\n font-size: {{flow.ledparms.fontsize}}rem; \n height: 1em;\n width: 1em;\n border-style: solid;\n border-color: hsl({{flow.ledparms.hue}}, {{flow.ledparms.saturation}}%, {{flow.ledparms.lightness}}%);\n background-color: white;\n {{shape}}\n}\n.round.led { /* Because it's div class=\"round led\" the selector can't have a space */\n border-radius: 50%;\n}\n.square.led {\n border-radius: 8%;\n}\n.diamond.led {\n border-radius: 8%;\n transform: rotate(45deg);\n}\n.on .led { /* Need a space here. on and off passed as msg.class so applied to the widget div containing the led */\n {{boxshadow}}\n}\n.off .led {\n box-shadow: inset 0.1rem 0.1rem 0.7em 0 hsla({{flow.ledparms.hue}}, 8%, 57%, 100%) !important;\n border-color: hsl({{flow.ledparms.hue}}, 30%, 50%);\n}\n</style>","output":"str","x":630,"y":400,"wires":[["a107d205f53232c2"]]},{"id":"ebea5fec2c0dd365","type":"comment","z":"79bce046534c0ccf","name":"Still broken","info":"","x":680,"y":200,"wires":[]},{"id":"810f7e9733e4e68a","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"5351b50f6c6905e9","order":4,"width":1,"height":1},{"id":"aa9bde6270d1cedc","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"5351b50f6c6905e9","order":7,"width":1,"height":1},{"id":"67fc88938ba57d45","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"5351b50f6c6905e9","order":10,"width":1,"height":1},{"id":"6a1688c5c3ea5f8f","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"5351b50f6c6905e9","order":13,"width":1,"height":1},{"id":"e2b8b5cc5d0a11ee","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"5351b50f6c6905e9","order":16,"width":1,"height":1},{"id":"fc1a91037622b7b2","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"5351b50f6c6905e9","order":18,"width":1,"height":1},{"id":"6c7926bd4777ccf2","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"5351b50f6c6905e9","order":21,"width":1,"height":1},{"id":"0b906f7b0c07d764","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"5351b50f6c6905e9","order":24,"width":1,"height":1},{"id":"e088c79f5a2b65cd","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"5351b50f6c6905e9","order":27,"width":1,"height":1},{"id":"95daf928228b2d2e","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"5351b50f6c6905e9","order":30,"width":1,"height":1},{"id":"63c0d7d57ca33161","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"5351b50f6c6905e9","order":32,"width":1,"height":1},{"id":"7a69087311bcd0bd","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"5351b50f6c6905e9","order":34,"width":1,"height":1},{"id":"19a1d0d949640f22","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"5351b50f6c6905e9","order":36,"width":1,"height":1},{"id":"45b54e6ba4c9047f","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"c09523b839ddf307","order":4,"width":1,"height":1},{"id":"159db9e693c3044a","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"c09523b839ddf307","order":7,"width":1,"height":1},{"id":"2d72ae4e3440038b","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"c09523b839ddf307","order":10,"width":1,"height":1},{"id":"d1c0d323198a1854","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"c09523b839ddf307","order":13,"width":1,"height":1},{"id":"f3ac2e2c4cfef1ec","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"c09523b839ddf307","order":16,"width":1,"height":1},{"id":"3e45da0a5cdb7d52","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"c09523b839ddf307","order":18,"width":1,"height":1},{"id":"6fecb0194fdeae58","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"c09523b839ddf307","order":21,"width":1,"height":1},{"id":"a7182a27205d9631","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"c09523b839ddf307","order":24,"width":1,"height":1},{"id":"6ff0ddf1f119fb6e","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"c09523b839ddf307","order":27,"width":1,"height":1},{"id":"740318e46fb7f5ce","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"c09523b839ddf307","order":30,"width":1,"height":1},{"id":"2c72a02ecaf53398","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"c09523b839ddf307","order":32,"width":1,"height":1},{"id":"ed58a9c120ce4b5f","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"c09523b839ddf307","order":34,"width":1,"height":1},{"id":"07d8c4c4c3c66cd4","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"c09523b839ddf307","order":36,"width":1,"height":1},{"id":"205719c5787d14af","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"947f00adb68bed21","order":4,"width":1,"height":1},{"id":"0af7b3c33175a5b0","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"947f00adb68bed21","order":7,"width":8,"height":1},{"id":"951300d54be54e6f","type":"ui_spacer","z":"79bce046534c0ccf","name":"spacer","group":"947f00adb68bed21","order":9,"width":1,"height":1},{"id":"881df96fdaa9ca33","type":"ui-group","name":"Colour","page":"51d1c6c2726f1ba3","width":"2","height":"1","order":4,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"e7f2467415b105af","type":"ui-group","name":"Result","page":"51d1c6c2726f1ba3","width":"2","height":"1","order":5,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"eb07bbe3d7eccfaf","type":"ui-group","name":"Shape","page":"51d1c6c2726f1ba3","width":"2","height":"1","order":3,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"63d1ec89d34fbfd0","type":"ui-group","name":"Outer glow","page":"51d1c6c2726f1ba3","width":"2","height":"1","order":2,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"2ce59aaae1a6450a","type":"ui-group","name":"Inner glow","page":"51d1c6c2726f1ba3","width":"2","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"d45641ed6d39fea1","type":"ui-base","name":"This is my ui-base","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"9fdd47d372080b9d","type":"ui-group","name":"Export","page":"51d1c6c2726f1ba3","width":"10","height":"1","order":6,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"5351b50f6c6905e9","type":"ui_group","name":"BME ColA","tab":"704020d306ae5506","order":2,"disp":false,"width":"4","collapse":false,"className":""},{"id":"c09523b839ddf307","type":"ui_group","name":"BME ColB","tab":"704020d306ae5506","order":3,"disp":false,"width":"4","collapse":false,"className":""},{"id":"947f00adb68bed21","type":"ui_group","name":"charts","tab":"704020d306ae5506","order":6,"disp":false,"width":"12","collapse":false,"className":""},{"id":"51d1c6c2726f1ba3","type":"ui-page","name":"Template LED Designer","ui":"d45641ed6d39fea1","path":"/led","icon":"home","layout":"grid","theme":"0d92c765bfad87e6","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":true,"disabled":false},{"id":"704020d306ae5506","type":"ui_tab","name":"ESP BME","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

Edit2 Fixed export of box-shadow CSS  
Edit3 Deleted comment "Notes on dynamic styling for ui-templates" to get under the 32000 character limit for content.  
Edit4 Tweeked exported CSS in the light of @Buckskin's suggestions below

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [22 October 2024 11:40 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/3 "2024-10-22T11:40:22Z")

</div>

👏 👏 👏

Great stuff @jbudd

---

<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 October 2024 21:01 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/4 "2024-10-22T21:01:01Z")

</div>

`<!-- Why does msg.class (or msg.ui_update.class) == "round" not work within Teleport? !-->`

If you set the CSS styles to

```auto
.led.round {
    border-radius: 50%;

    }
    
.led.off {
    box-shadow: inset 0.1rem 0.1rem 0.7em 0 hsla(var(--hue), 8%, 57%, 100%) !important;
    border-color: hsl(var(--hue), 30%, 50%);
}

```

It works

I think this is the issue

```auto
.class1.class2	.name1.name2	Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2	.name1 .name2	Selects all elements with name2 that is a descendant of an element with name1

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [22 October 2024 21:17 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/5 "2024-10-22T21:17:17Z")

</div>

Thank you for that @Buckskin,  
I knew there is a difference between a selector with two div names with/without spaces but I didn't know exactly what.

I will try it and update the code above.

Currently working on the export which has stopped including the CSS for the box-shadow (Only the whole point of the exercise!)

---

<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 October 2024 21:23 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/6 "2024-10-22T21:23:33Z")

</div>

This has to be done in the `uiTemplate` node as changing the classes in your class template node stops main LEDs working. I think this is to do with where `msg.class` gets added. In the main code it is added to the widget, not the LED, in the Teleport node it gets added to the LED

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [23 October 2024 20:36 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/7 "2024-10-23T20:36:25Z")

</div>

I couldn't get the styling to work with the LED teleported into the page header except by getting rid of msg.class for shape & on/off, instead doing everything with msg.style.

It seemed too much effort for an unlikely use case so I gave up.

---

<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:** [23 October 2024 21:58 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/8 "2024-10-23T21:58:26Z")

</div>

Just in case your interest revives

```auto
<template>
    <Teleport v-if="mounted" to="#app-bar-title">
        <!-- Why does msg.class (or msg.ui_update.class) == "round" not work within Teleport? !-->
        <div class="led" :class="msg.class" :style="msg.style"></div>
    </Teleport>
</template>
<script>
    export default {
        data() {
            return {
                mounted: false
            }
        },
        mounted() {
            this.mounted = true
        }
    }
</script>

<style>
    .round.led {
        border-radius: 50%;
    }
    .square.led {
    border-radius: 8%;
    }
    .diamond.led {
        border-radius: 8%;
        transform: rotate(45deg);
    }

    .on.led {
    
    }

    .off.led {
        box-shadow: inset 0.1rem 0.1rem 0.7em 0 hsla(var(--hue), 8%, 57%, 100%) !important;
        border-color: hsl(var(--hue), 30%, 50%);
    }

</style>

```

---

<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:** [24 October 2024 08:13 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/9 "2024-10-24T08:13:26Z")

</div>

That looks really nice!! Thanks for sharing your experiments!

If anybody has the time/knowledge to add that functionality to the [node-red-dashboard-2-ui-led](https://github.com/FlowFuse/node-red-dashboard-2-ui-led) that would be very helpfull. Thanks...

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [24 October 2024 08:42 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/10 "2024-10-24T08:42:31Z")

</div>

> [@BartButenaers](#):
>
> add that functionality to the [node-red-dashboard-2-ui-led](https://github.com/FlowFuse/node-red-dashboard-2-ui-led)

It was the absence of a class "on" or "off" with the LED node that provoked me to play with template LEDs. Otherwise we could take the styling generated by this flow and apply it to the widget.

I see that the inner glow of the stock LED is provided by a white radial gradient rather than my white background and coloured box shadow. It scales to smaller size LEDs better than my version.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [24 October 2024 10:13 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/11 "2024-10-24T10:13:14Z")

</div>

Does it have a 'blink' option ? not needing an external logical input to blink the LED ?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [24 October 2024 10:25 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/12 "2024-10-24T10:25:49Z")

</div>

It doesn't even have an 'on' option! You have to send it msg.class = 'on' or 'off'.

Or ... 'on', 'off', 'on' etc.

I did wonder if CSS transforms (?) could generate a fade in/out effect but did not attempt it.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [24 October 2024 13:11 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/13 "2024-10-24T13:11:46Z")

</div>

If you want to incorporate blinking, you could borrow/adapt the classes from this demo:

> [@What is the BEST way to flash a Dashboard LED?](https://discourse.nodered.org/t/what-is-the-best-way-to-flash-a-dashboard-led/67588/6):
>
> Here is CSS flashing and all core nodes (except for node-red-dashboard of course) [chrome\_jH95dPIDb1] [{"id":"2928440d2d7837b3","type":"ui\_button","z":"aaa27ee4852b402b","name":"","group":"360b409060b23c5b","order":1,"width":3,"height":1,"passthru":false,"label":"Flash red 1","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"red on blink c1","payloadType":"str","topic":"setClass","topicType":"str","x":210,"y":60,"wires":[["808ff37d8b2460e3"]]},{"id":"d36145aea2…

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [24 October 2024 14:48 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/14 "2024-10-24T14:48:51Z")

</div>

My 2 cents

```auto
[{"id":"d2a44a40f3c085a0","type":"ui-template","z":"8240715f881ef736","group":"6f47b8907c5da63a","page":"","ui":"","name":"led red","order":2,"width":"1","height":"1","head":"","format":"<template>\n <div>\n <div class=\"led red\" :class=\"modifier\"></div>\n </div>\n \n</template>\n\n<script>\n export default {\n data() { \n return {\n modifier:\"\" \n }\n },\n watch: {\n msg: function () {\n if(this.msg?.class){\n this.modifier = this.msg.class\n } \n }\n }\n }\n</script>\n<style>\n \n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":870,"y":640,"wires":[[]]},{"id":"646a81390eb982aa","type":"ui-template","z":"8240715f881ef736","group":"","page":"","ui":"29792df7d7b05e2e","name":"css","order":0,"width":0,"height":0,"head":"","format":"\ndiv:has(>.led) {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.blue{\n --hue:240;\n}\n.red{\n --hue:50;\n}\n.yellow{\n --hue:95;\n}\n.green{\n --hue:135;\n}\n\n.purple{\n --hue:320;\n}\n.cyan{\n --hue:185;\n}\n\n.led {\n --h: var(--hue, 50);\n \n --clr-ok-100: oklch(97% 0.02 var(--h));\n --clr-ok-200: oklch(89% 0.05 var(--h));\n --clr-ok-300: oklch(75% 0.11 var(--h));\n --clr-ok-400: oklch(73% 0.21 var(--h));\n --clr-ok-500: oklch(68% 0.28 var(--h));\n --clr-ok-600: oklch(45% 0.21 var(--h));\n --clr-ok-700: oklch(34% 0.12 var(--h));\n --clr-ok-800: oklch(15% 0.05 var(--h));\n --clr-ok-900: oklch(13% 0.03 var(--h));\n aspect-ratio: 1;\n height: calc(var(--widget-row-height) *1);\n position: relative;\n border-radius: 100vh;\n background: linear-gradient(130deg, \n oklch(from var(--clr-ok-100) l 0 h) 0%,\n oklch(from var(--clr-ok-700) l 0 h) 100%);\n}\n\n.led:before,\n.led:after {\n content: \"\";\n position: absolute;\n inset: 0;\n margin: auto;\n border-radius: inherit;\n}\n\n.led:before {\n aspect-ratio: 1;\n rotate: 326deg;\n height: 80%;\n filter: brightness(1.3);\n background: radial-gradient(ellipse 96% 74%, \n var(--clr-ok-500) 0%, \n var(--clr-ok-500) 29%, \n var(--clr-ok-600) 60%, \n var(--clr-ok-900) 100%);\n}\n\n.led:after {\n aspect-ratio: 1;\n height: 60%;\n background: radial-gradient(farthest-corner at 5% 5%,\n var(--clr-ok-100) 0%, \n transparent 60%, \n transparent 100%);\n}\n.led.off:before{\n filter: brightness(0.4);\n}\n.led.full:before{\n filter: brightness(2);\n}\n.led.blink:before{\n animation: blink 150ms infinite;\n}\n@keyframes blink {\n 50% { \n filter: brightness(0.4);\n }\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":870,"y":880,"wires":[[]]},{"id":"3e5caa6cb02e670e","type":"ui-template","z":"8240715f881ef736","group":"6f47b8907c5da63a","page":"","ui":"","name":"led blue","order":3,"width":"1","height":"1","head":"","format":"<template>\n <div>\n <div class=\"led blue\" :class=\"modifier\"></div>\n </div>\n \n</template>\n\n<script>\n export default {\n data() { \n return {\n modifier:\"\" \n }\n },\n watch: {\n msg: function () {\n if(this.msg?.class){\n this.modifier = this.msg.class\n } \n }\n }\n }\n</script>\n<style>\n \n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":880,"y":680,"wires":[[]]},{"id":"8f3d26f1e3bc94b4","type":"ui-template","z":"8240715f881ef736","group":"6f47b8907c5da63a","page":"","ui":"","name":"led yellow","order":4,"width":"1","height":"1","head":"","format":"<template>\n <div>\n <div class=\"led yellow\" :class=\"modifier\"></div>\n </div>\n \n</template>\n\n<script>\n export default {\n data() { \n return {\n modifier:\"\" \n }\n },\n watch: {\n msg: function () {\n if(this.msg?.class){\n this.modifier = this.msg.class\n } \n }\n }\n }\n</script>\n<style>\n \n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":880,"y":720,"wires":[[]]},{"id":"4bb75cdc9e0bff84","type":"ui-template","z":"8240715f881ef736","group":"6f47b8907c5da63a","page":"","ui":"","name":"led green","order":5,"width":"1","height":"1","head":"","format":"<template>\n <div>\n <div class=\"led green\" :class=\"modifier\"></div>\n </div>\n \n</template>\n\n<script>\n export default {\n data() { \n return {\n modifier:\"\" \n }\n },\n watch: {\n msg: function () {\n if(this.msg?.class){\n this.modifier = this.msg.class\n } \n }\n }\n }\n</script>\n<style>\n \n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":880,"y":760,"wires":[[]]},{"id":"2d1fe096d66474f8","type":"ui-template","z":"8240715f881ef736","group":"6f47b8907c5da63a","page":"","ui":"","name":"led purple","order":6,"width":"1","height":"1","head":"","format":"<template>\n <div>\n <div class=\"led purple\" :class=\"modifier\"></div>\n </div>\n \n</template>\n\n<script>\n export default {\n data() { \n return {\n modifier:\"\" \n }\n },\n watch: {\n msg: function () {\n if(this.msg?.class){\n this.modifier = this.msg.class\n } \n }\n }\n }\n</script>\n<style>\n \n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":880,"y":800,"wires":[[]]},{"id":"02e7b4cca32344ee","type":"ui-template","z":"8240715f881ef736","group":"6f47b8907c5da63a","page":"","ui":"","name":"led cyan","order":7,"width":"1","height":"1","head":"","format":"<template>\n <div>\n <div class=\"led cyan\" :class=\"modifier\"></div>\n </div>\n \n</template>\n\n<script>\n export default {\n data() { \n return {\n modifier:\"\" \n }\n },\n watch: {\n msg: function () {\n if(this.msg?.class){\n this.modifier = this.msg.class\n } \n }\n }\n }\n</script>\n<style>\n \n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":880,"y":840,"wires":[[]]},{"id":"d12f7893fbe88c72","type":"function","z":"8240715f881ef736","name":"function 1","func":"msg.class = \" \"\nif(msg.payload != \"on\"){\n msg.class = msg.payload\n}\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":640,"y":740,"wires":[["d2a44a40f3c085a0","3e5caa6cb02e670e","8f3d26f1e3bc94b4","4bb75cdc9e0bff84","2d1fe096d66474f8","02e7b4cca32344ee"]]},{"id":"ea457a1134fa534a","type":"ui-button-group","z":"8240715f881ef736","name":"","group":"6f47b8907c5da63a","order":1,"width":6,"height":1,"label":"Led's state","rounded":true,"useThemeColors":true,"passthru":false,"options":[{"label":"OFF","icon":"","value":"off","valueType":"str","color":"#999999"},{"label":"ON","icon":"","value":"on","valueType":"str","color":"#009933"},{"label":"FULL","icon":"","value":"full","valueType":"str","color":"#ff6666"},{"label":"BLINK","icon":"","value":"blink","valueType":"str","color":"#009999"}],"topic":"topic","topicType":"msg","x":470,"y":740,"wires":[["d12f7893fbe88c72"]]},{"id":"6f47b8907c5da63a","type":"ui-group","name":"Leds","page":"19eb6d108e9275e2","width":"6","height":"1","order":1,"showTitle":true,"className":"leds","visible":"true","disabled":"false","groupType":"default"},{"id":"29792df7d7b05e2e","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":[],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"19eb6d108e9275e2","type":"ui-page","name":"Examples","ui":"29792df7d7b05e2e","path":"/examples","icon":"","layout":"grid","theme":"a965ccfef139317a","order":3,"className":"","visible":true,"disabled":"false"},{"id":"a965ccfef139317a","type":"ui-theme","name":"Default","colors":{"surface":"#ffffff","primary":"#338109","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

EDIT: added images to not force copy/import/see-it/like-or-not

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/3/6391b29783ac2e31e8c5f02707ce0e5e4334277d.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/c/ac89ade48785e2b78b141f18f4b21463514d8ac7.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/4/840bd953d32a43f70a3f0385ef7efd8d438c96d6.png)

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [24 October 2024 15:02 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/15 "2024-10-24T15:02:18Z")

</div>

Diwali Round the corner. perfect setup !!

---

<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:** [24 October 2024 18:00 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/16 "2024-10-24T18:00:58Z")

</div>

> [@jbudd](#):
>
> It was the absence of a class "on" or "off" with the LED node that provoked me to play with template LEDs. Otherwise we could take the styling generated by this flow and apply it to the widget.

Ah yes you are right, [seems](https://github.com/FlowFuse/node-red-dashboard-2-ui-led/blob/main/ui/components/UILed.vue#L109) there is only an 'on' class. I have never had the time to learn about CSS unfortunately, so going perhaps I am going to ask a stupid question now: can't you add an 'off' class to that node?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [24 October 2024 21:25 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/17 "2024-10-24T21:25:49Z")

</div>

> [@BartButenaers](#):
>
> there is only an 'on' class. ... can't you add an 'off' class to that node?

Yes you are right there is a class .nrdb-ui-led-bulb-on.  
I can't add an "off" class because there is no class field in the widget config, at least not in the current version.

There was a discussion about the LED widget a week or two back. The one where you castigated folks for developing templates rather than fixing the existing nodes 😛

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [25 October 2024 09:26 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/18 "2024-10-25T09:26:53Z")

</div>

![LED](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/c/dc4174e1031c91d67bd3760a9622546c27928022.gif)

Chaser would be great...

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [25 October 2024 09:52 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/19 "2024-10-25T09:52:57Z")

</div>

> [@smanjunath211](#):
>
> Chaser would be great

Like [night rider](https://codepen.io/jo-m1b/pen/YzXBQdZ)?

https://codepen.io/jo-m1b/embed/YzXBQdZ?default-tab=result

Or a [Christmas tree](https://codepen.io/tobyj/pen/QjvEex)?

https://codepen.io/tobyj/embed/QjvEex?default-tab=result

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [25 October 2024 11:49 UTC](https://discourse.nodered.org/t/interactive-template-led-designer/92576/20 "2024-10-25T11:49:04Z")

</div>

> [@Steve-Mcl](#):
>
> Or a [Christmas tree](https://codepen.io/tobyj/pen/QjvEex)

Yes.  
Although, our traditional lights are actually lamps burning oil, modernity has taken over and we use lights for outdoors now more so now after the advent of LEDs.  
and of course lots of fireworks!

Happy Diwali in advance..

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/c/ccb7cf34b198d60967685c893380e43d62554859.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/3/93c2d66fea39198f4173c1a12bda0523ed347b36.jpeg)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/7/67cce47380d693ca3d3596ccc945e5c4edefc7d6.jpeg)

[Next page](https://discourse.nodered.org/t/interactive-template-led-designer/92576.md?page=2)