Interactive template LED designer

Share Your Projects
1

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
image1567×591 71.6 KB

leddesignersmall

image
image471×592 56.9 KB

Issues/Questions
There is a disabled template in the flow which uses Teleport 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?

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

3

:clap: :clap: :clap:

Great stuff @jbudd

4

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

If you set the CSS styles to

.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

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

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

6

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

1 Like
7

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.

8

Just in case your interest revives

<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>
1 Like
9

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 that would be very helpfull. Thanks...

10

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.

11

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

12

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.

13

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

1 Like
14

My 2 cents

[{"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
image753×225 23 KB

image
image756×224 24.9 KB

image
image754×225 21.9 KB

4 Likes
15

Diwali Round the corner. perfect setup !!

1 Like
16

Ah yes you are right, seems 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?

17

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

2 Likes
18

LED

Chaser would be great...

19

Like night rider?

Or a Christmas tree?

1 Like
20

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
image300×168 58.7 KB

image
image300×168 29.1 KB

image
image275×183 29.8 KB

2 Likes