[{"id":"adc94590cadb05ad","type":"tab","label":"Template LED Designer","disabled":false,"info":"","env":[]},{"id":"cb731667f6c70d12","type":"group","z":"adc94590cadb05ad","name":"Outer glow","style":{"label":true},"nodes":["b50cec078b1081a5","7ed46c6898d71144","789e3cf5ccb90957","23813cce6b54249a","213f04ce38544ff8"],"x":314,"y":399,"w":172,"h":242},{"id":"01ca7fadd24f0312","type":"group","z":"adc94590cadb05ad","name":"Inner glow","style":{"label":true},"nodes":["358d558584dca94d","733872005931609e","a2ae4552703ef9b0","9ee749b4bf6ae694","17d3216efca5b730","54dcefe7f0237636"],"x":314,"y":659,"w":172,"h":282},{"id":"118ed72d10143c41","type":"group","z":"adc94590cadb05ad","name":"LED Color","style":{"label":true},"nodes":["721fb7ee2c159201","795c67278b5d3469","a3825477f14f04d5"],"x":314,"y":39,"w":172,"h":162},{"id":"8e0f2b60b09fea46","type":"group","z":"adc94590cadb05ad","name":"Shape, size","style":{"label":true},"nodes":["c4c53f8ac161da83","713e912a0c64826c","f071d581c05f052f"],"x":314,"y":219,"w":152,"h":162},{"id":"a8854e82f7fc0de6","type":"group","z":"adc94590cadb05ad","style":{"stroke":"#0722fc","stroke-opacity":"1","fill":"none","fill-opacity":"1","label":true,"label-position":"nw","color":"#0722fc"},"nodes":["652da433dcd83684","6bc52cac1867d060"],"x":314,"y":959,"w":152,"h":122},{"id":"bb3fd52eac7d808a","type":"junction","z":"adc94590cadb05ad","x":540,"y":820,"wires":[["87547eca2a177409"]]},{"id":"87547eca2a177409","type":"junction","z":"adc94590cadb05ad","x":540,"y":540,"wires":[["47cf1f7d9cf33d4e"]]},{"id":"bea36c57475afab7","type":"junction","z":"adc94590cadb05ad","x":500,"y":1060,"wires":[["bb3fd52eac7d808a"]]},{"id":"efcc6b25564e6991","type":"junction","z":"adc94590cadb05ad","x":500,"y":120,"wires":[["baaf788722c49da9"]]},{"id":"47cf1f7d9cf33d4e","type":"junction","z":"adc94590cadb05ad","x":520,"y":340,"wires":[["baaf788722c49da9"]]},{"id":"721fb7ee2c159201","type":"ui-slider","z":"adc94590cadb05ad","g":"118ed72d10143c41","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":[["efcc6b25564e6991"]]},{"id":"795c67278b5d3469","type":"ui-slider","z":"adc94590cadb05ad","g":"118ed72d10143c41","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":[["efcc6b25564e6991"]]},{"id":"a3825477f14f04d5","type":"ui-slider","z":"adc94590cadb05ad","g":"118ed72d10143c41","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":[["efcc6b25564e6991"]]},{"id":"dd88640771dcbbf5","type":"ui-template","z":"adc94590cadb05ad","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":"9781d51b3cf57b21","type":"ui-template","z":"adc94590cadb05ad","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":"652da433dcd83684","type":"ui-button","z":"adc94590cadb05ad","g":"a8854e82f7fc0de6","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":[["bea36c57475afab7"]]},{"id":"6bc52cac1867d060","type":"ui-button","z":"adc94590cadb05ad","g":"a8854e82f7fc0de6","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":[["bea36c57475afab7"]]},{"id":"baaf788722c49da9","type":"function","z":"adc94590cadb05ad","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":[["dd88640771dcbbf5","9781d51b3cf57b21","f46c39ae71d0298e","5db16ee4c517e010","16e53ef74a024257"]]},{"id":"c4c53f8ac161da83","type":"ui-slider","z":"adc94590cadb05ad","g":"8e0f2b60b09fea46","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":[["47cf1f7d9cf33d4e"]]},{"id":"713e912a0c64826c","type":"ui-slider","z":"adc94590cadb05ad","g":"8e0f2b60b09fea46","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":[["47cf1f7d9cf33d4e"]]},{"id":"c49e5d395ffe61f0","type":"inject","z":"adc94590cadb05ad","name":"init","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"reset","payloadType":"str","x":130,"y":180,"wires":[["8efbdf07738a4435"]]},{"id":"b50cec078b1081a5","type":"ui-slider","z":"adc94590cadb05ad","g":"cb731667f6c70d12","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":[["87547eca2a177409"]]},{"id":"7ed46c6898d71144","type":"ui-slider","z":"adc94590cadb05ad","g":"cb731667f6c70d12","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":[["87547eca2a177409"]]},{"id":"789e3cf5ccb90957","type":"ui-slider","z":"adc94590cadb05ad","g":"cb731667f6c70d12","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":[["87547eca2a177409"]]},{"id":"23813cce6b54249a","type":"ui-slider","z":"adc94590cadb05ad","g":"cb731667f6c70d12","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":[["87547eca2a177409"]]},{"id":"e9a2211069ca66ee","type":"change","z":"adc94590cadb05ad","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":[["35a8878786f7e0d1"]]},{"id":"35a8878786f7e0d1","type":"split","z":"adc94590cadb05ad","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"topic","property":"payload","x":110,"y":480,"wires":[["9b41bc361e2cbe26"]]},{"id":"9b41bc361e2cbe26","type":"switch","z":"adc94590cadb05ad","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":[["721fb7ee2c159201"],["795c67278b5d3469"],["a3825477f14f04d5"],["c4c53f8ac161da83"],["713e912a0c64826c"],["f071d581c05f052f"],["b50cec078b1081a5"],["7ed46c6898d71144"],["789e3cf5ccb90957"],["23813cce6b54249a"],["358d558584dca94d"],["733872005931609e"],["a2ae4552703ef9b0"],["9ee749b4bf6ae694"],["17d3216efca5b730"],["54dcefe7f0237636"]],"l":false},{"id":"358d558584dca94d","type":"ui-slider","z":"adc94590cadb05ad","g":"01ca7fadd24f0312","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":[["bb3fd52eac7d808a"]]},{"id":"733872005931609e","type":"ui-slider","z":"adc94590cadb05ad","g":"01ca7fadd24f0312","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":[["bb3fd52eac7d808a"]]},{"id":"a2ae4552703ef9b0","type":"ui-slider","z":"adc94590cadb05ad","g":"01ca7fadd24f0312","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":[["bb3fd52eac7d808a"]]},{"id":"9ee749b4bf6ae694","type":"ui-slider","z":"adc94590cadb05ad","g":"01ca7fadd24f0312","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":[["bb3fd52eac7d808a"]]},{"id":"f071d581c05f052f","type":"ui-radio-group","z":"adc94590cadb05ad","g":"8e0f2b60b09fea46","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":[["47cf1f7d9cf33d4e"]]},{"id":"6cf1c5954cd00378","type":"template","z":"adc94590cadb05ad","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":[["e9a2211069ca66ee"]]},{"id":"17d3216efca5b730","type":"ui-slider","z":"adc94590cadb05ad","g":"01ca7fadd24f0312","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":[["bb3fd52eac7d808a"]]},{"id":"54dcefe7f0237636","type":"ui-slider","z":"adc94590cadb05ad","g":"01ca7fadd24f0312","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":[["bb3fd52eac7d808a"]]},{"id":"8efbdf07738a4435","type":"ui-button","z":"adc94590cadb05ad","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":[["6cf1c5954cd00378"]]},{"id":"c37c9760102faab2","type":"ui-template","z":"adc94590cadb05ad","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":"90824845c6ab10d6","type":"ui-text-input","z":"adc94590cadb05ad","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":"213f04ce38544ff8","type":"ui-text","z":"adc94590cadb05ad","g":"cb731667f6c70d12","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":"f46c39ae71d0298e","type":"ui-template","z":"adc94590cadb05ad","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":"16e53ef74a024257","type":"ui-template","z":"adc94590cadb05ad","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":"d1d4ae34fc057660","type":"ui-text","z":"adc94590cadb05ad","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":"24ba7d65d2d7ae9f","type":"inject","z":"adc94590cadb05ad","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":[["d1d4ae34fc057660"]]},{"id":"5db16ee4c517e010","type":"template","z":"adc94590cadb05ad","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 {\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 {\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":[["90824845c6ab10d6"]]},{"id":"079ed3253e241eb6","type":"comment","z":"adc94590cadb05ad","name":"Still broken","info":"","x":680,"y":200,"wires":[]},{"id":"67655352fc5c80c4","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"5351b50f6c6905e9","order":4,"width":1,"height":1},{"id":"a45c3c8a2363bc17","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"5351b50f6c6905e9","order":7,"width":1,"height":1},{"id":"6e313d1a0b5b84cc","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"5351b50f6c6905e9","order":10,"width":1,"height":1},{"id":"a2faadc2c5b303b4","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"5351b50f6c6905e9","order":13,"width":1,"height":1},{"id":"259ded76fbb0ac95","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"5351b50f6c6905e9","order":16,"width":1,"height":1},{"id":"1d0d524957409ae1","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"5351b50f6c6905e9","order":18,"width":1,"height":1},{"id":"99f9a21a578c9b56","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"5351b50f6c6905e9","order":21,"width":1,"height":1},{"id":"0076ec11163fcc8b","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"5351b50f6c6905e9","order":24,"width":1,"height":1},{"id":"87b7475cdc96806a","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"5351b50f6c6905e9","order":27,"width":1,"height":1},{"id":"2b35fb3bc1bfa3b8","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"5351b50f6c6905e9","order":30,"width":1,"height":1},{"id":"61b95427fd4fbfb3","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"5351b50f6c6905e9","order":32,"width":1,"height":1},{"id":"93bc8364158d3f17","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"5351b50f6c6905e9","order":34,"width":1,"height":1},{"id":"db3316eddd24859d","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"5351b50f6c6905e9","order":36,"width":1,"height":1},{"id":"a7ca6b765e1a7e7e","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"c09523b839ddf307","order":4,"width":1,"height":1},{"id":"de4e6f94693cc7c8","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"c09523b839ddf307","order":7,"width":1,"height":1},{"id":"0511d5220f41aee5","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"c09523b839ddf307","order":10,"width":1,"height":1},{"id":"17b17faa72262a13","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"c09523b839ddf307","order":13,"width":1,"height":1},{"id":"d62682c9820ed066","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"c09523b839ddf307","order":16,"width":1,"height":1},{"id":"cb3838559f2bcf21","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"c09523b839ddf307","order":18,"width":1,"height":1},{"id":"a3189444b41a4e2a","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"c09523b839ddf307","order":21,"width":1,"height":1},{"id":"909f85f9075b9cf4","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"c09523b839ddf307","order":24,"width":1,"height":1},{"id":"c8f23e5f3833f397","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"c09523b839ddf307","order":27,"width":1,"height":1},{"id":"e8c630a674e667ea","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"c09523b839ddf307","order":30,"width":1,"height":1},{"id":"338265b8b0b6877b","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"c09523b839ddf307","order":32,"width":1,"height":1},{"id":"3a6679a8ef9de9d8","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"c09523b839ddf307","order":34,"width":1,"height":1},{"id":"fd88eb40c01d2e42","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"c09523b839ddf307","order":36,"width":1,"height":1},{"id":"1ab0347e45f61653","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"947f00adb68bed21","order":4,"width":1,"height":1},{"id":"f24833e0bfcc21ed","type":"ui_spacer","z":"adc94590cadb05ad","name":"spacer","group":"947f00adb68bed21","order":7,"width":8,"height":1},{"id":"c4290b421aa6534e","type":"ui_spacer","z":"adc94590cadb05ad","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.
