What is the BEST way to flash a Dashboard LED?

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":"d36145aea2c0d16a","type":"ui_button","z":"aaa27ee4852b402b","name":"","group":"360b409060b23c5b","order":2,"width":3,"height":1,"passthru":false,"label":"Flash green 3","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"green on blink c3","payloadType":"str","topic":"setClass","topicType":"str","x":200,"y":100,"wires":[["808ff37d8b2460e3"]]},{"id":"838edfe2e54088bc","type":"ui_button","z":"aaa27ee4852b402b","name":"","group":"360b409060b23c5b","order":3,"width":3,"height":1,"passthru":false,"label":"Long Flash 5","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"orange on blink c5 slow","payloadType":"str","topic":"setClass","topicType":"str","x":210,"y":140,"wires":[["808ff37d8b2460e3"]]},{"id":"01d97a3db02a8127","type":"ui_button","z":"aaa27ee4852b402b","name":"","group":"360b409060b23c5b","order":4,"width":3,"height":1,"passthru":false,"label":"Short Flash 5","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"blue on blink c5 fast","payloadType":"str","topic":"setClass","topicType":"str","x":210,"y":180,"wires":[["808ff37d8b2460e3"]]},{"id":"808ff37d8b2460e3","type":"ui_template","z":"aaa27ee4852b402b","group":"360b409060b23c5b","name":"my LED","order":5,"width":0,"height":0,"format":"<p>it is here -> <i class=\"led\"></i> </p>\n<script>\n    (function(scope) {\n        function sleep(ms) {\n            return new Promise(resolve => setTimeout(resolve, ms));\n        }\n        scope.$watch('msg', function(msg) {\n            if (msg && msg.topic == \"setClass\") {\n                $(\"i.led\")[0].className = 'led'\n                sleep(25).then(() => $(\"i.led\").addClass(msg.payload))\n            } else  if (msg && msg.topic == \"addClass\") {\n                $(\"i.led\").addClass(msg.payload);\n            } else  if (msg && msg.topic == \"removeClass\") {\n                $(\"i.led\").removeClass(msg.payload);\n                $(\"i.led\").addClass('led');\n            } else  if (msg && msg.topic == \"toggleClass\") {\n                $(\"i.led\").toggleClass(msg.payload);\n                $(\"i.led\").addClass('led');\n            }\n        });\n    })(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":420,"y":120,"wires":[[]]},{"id":"53b4c63491c105f5","type":"ui_template","z":"aaa27ee4852b402b","group":"c3180d6ecfee774b","name":"head CSS","order":3,"width":0,"height":0,"format":"<style>\ni.led {\n  font-size: 1em;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.75);\n  margin: 0;\n  position: relative;\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  background: #808080;\n  border-radius: 50%;\n  vertical-align: text-bottom;\n  box-shadow: inset 0.25em 0.25em 0.25em rgba(255, 255, 255, 0.30), inset -0.25em -0.25em 0.25em 0.5em rgba(0, 0, 0, 0.30), inset 1em 0.5em 0.5em rgba(0, 0, 0, 0.5);\n}\ni.led:before {\n  content: '';\n  border-radius: 50%;\n  display: block;\n  width: 0.25em;\n  height: 0.25em;\n  background: #fff;\n  opacity: 0.2;\n  margin-top: 0.2em;\n  margin-left: 0.2em;\n  mix-blend-mode: overlay;\n}\ni.led.led-xs {\n  font-size: 50%;\n}\ni.led.led-sm {\n  font-size: 80%;\n}\ni.led.red {\n  background:#ff4500;color:#ff4500;;\n}\ni.led.green {\n  background:#adff2f;\n  color:#adff2f;\n}\ni.led.blue {\n  background:#0046ff;\n  color:#0046ff;\n}\ni.led.yellow {\n  background:#ffff00;\n  color:#ffff00;\n}\ni.led.orange {\n  background:#ffa500;\n  color:#ffa500;\n}\ni.led.white {\n  background:#fafaff;\n  color:#fafaff;\n}\ni.led.on {\n  box-shadow: 0 0 0.25em 0.1em, 0 0 1em 0.5em;\n  border: 2px solid rgba(0, 0, 0, 0.05);\n}\ni.led.on.blink.fast {\n  animation: blink 0.25s forwards infinite;\n}\ni.led.on.blink {\n  animation: blink 0.5s forwards infinite;\n}\ni.led.on.blink.slow {\n  animation: blink 1s forwards infinite;\n}\n\ni.led.on.blink.c1{\n  animation-iteration-count:1;\n}\ni.led.on.blink.c2{\n  animation-iteration-count:2;\n}\ni.led.on.blink.c3{\n  animation-iteration-count:3;\n}\ni.led.on.blink.c5{\n  animation-iteration-count:5;\n}\ni.led.on.blink.c10{\n  animation-iteration-count:10;\n}\n\ni.led.on.blink.t3s{\n  animation-iteration-count:6;\n}\ni.led.on.blink.t3s.fast{\n  animation-iteration-count:12;\n}\ni.led.on.blink.t3s.slow{\n  animation-iteration-count:3;\n}\ni.led.on.blink.t5s{\n  animation-iteration-count:10;\n}\ni.led.on.blink.t5s.fast{\n  animation-iteration-count:20;\n}\ni.led.on.blink.t5s.slow{\n  animation-iteration-count:5;\n}\ni.led.on.blink.t10s{\n  animation-iteration-count:20;\n}\ni.led.on.blink.t10s.fast{\n  animation-iteration-count:40;\n}\ni.led.on.blink.t10s.slow{\n  animation-iteration-count:10;\n}\n\n\n@keyframes blink {\n  0% {\n    border: 1px solid rgba(0, 0, 0, 0.75);\n    box-shadow: inset 0.25em 0.25em 0.25em rgba(255, 255, 255, 0.25), inset -0.25em -0.25em 0.25em 0.5em rgba(0, 0, 0, 0.25), inset 1em 0.5em 0.5em rgba(0, 0, 0, 0.5);\n  }\n  50% {\n    border: 2px solid rgba(0, 0, 0, 0.05);\n    box-shadow: 0 0 0.25em 0.1em, 0 0 1em 0.5em;\n  }\n    100% {\n    border: 1px solid rgba(0, 0, 0, 0.75);\n    box-shadow: inset 0.25em 0.25em 0.25em rgba(255, 255, 255, 0.25), inset -0.25em -0.25em 0.25em 0.5em rgba(0, 0, 0, 0.25), inset 1em 0.5em 0.5em rgba(0, 0, 0, 0.5);\n  } \n}\n\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":430,"y":80,"wires":[[]]},{"id":"3e367f3c4d3f757e","type":"ui_button","z":"aaa27ee4852b402b","name":"","group":"360b409060b23c5b","order":6,"width":3,"height":1,"passthru":false,"label":"Red LED (off)","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"red","payloadType":"str","topic":"setClass","topicType":"str","x":200,"y":280,"wires":[["0be84b36fa2cfcd3"]]},{"id":"499f749728283daa","type":"ui_button","z":"aaa27ee4852b402b","name":"","group":"360b409060b23c5b","order":10,"width":3,"height":1,"passthru":false,"label":"Toggle On/Off","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"on","payloadType":"str","topic":"toggleClass","topicType":"str","x":200,"y":440,"wires":[["0be84b36fa2cfcd3"]]},{"id":"6ed0e706fef321be","type":"ui_button","z":"aaa27ee4852b402b","name":"","group":"360b409060b23c5b","order":11,"width":3,"height":1,"passthru":false,"label":"toggle flash","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"blink","payloadType":"str","topic":"toggleClass","topicType":"str","x":190,"y":480,"wires":[["0be84b36fa2cfcd3"]]},{"id":"c0aa87141a6ee725","type":"ui_button","z":"aaa27ee4852b402b","name":"","group":"360b409060b23c5b","order":9,"width":3,"height":1,"passthru":false,"label":"Blue LED (off)","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"blue","payloadType":"str","topic":"setClass","topicType":"str","x":200,"y":400,"wires":[["0be84b36fa2cfcd3"]]},{"id":"92237579ce5a8d30","type":"ui_button","z":"aaa27ee4852b402b","name":"","group":"360b409060b23c5b","order":13,"width":3,"height":1,"passthru":false,"label":"toggle slow","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"slow","payloadType":"str","topic":"toggleClass","topicType":"str","x":190,"y":520,"wires":[["0be84b36fa2cfcd3"]]},{"id":"0b39b675d3e84aa1","type":"ui_button","z":"aaa27ee4852b402b","name":"","group":"360b409060b23c5b","order":12,"width":3,"height":1,"passthru":false,"label":"toggle fast","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"fast","payloadType":"str","topic":"toggleClass","topicType":"str","x":190,"y":560,"wires":[["0be84b36fa2cfcd3"]]},{"id":"a247f12b4c81cc8d","type":"ui_button","z":"aaa27ee4852b402b","name":"","group":"360b409060b23c5b","order":7,"width":3,"height":1,"passthru":false,"label":"Orange LED (off)","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"orange","payloadType":"str","topic":"setClass","topicType":"str","x":210,"y":320,"wires":[["0be84b36fa2cfcd3"]]},{"id":"0aba4e7f8b3a60be","type":"ui_button","z":"aaa27ee4852b402b","name":"","group":"360b409060b23c5b","order":8,"width":3,"height":1,"passthru":false,"label":"Yellow LED (off)","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"yellow","payloadType":"str","topic":"setClass","topicType":"str","x":200,"y":360,"wires":[["0be84b36fa2cfcd3"]]},{"id":"0be84b36fa2cfcd3","type":"link out","z":"aaa27ee4852b402b","name":"link out 17","mode":"link","links":["632eb74eeda4b1a4"],"x":405,"y":380,"wires":[]},{"id":"632eb74eeda4b1a4","type":"link in","z":"aaa27ee4852b402b","name":"link in 10","links":["0be84b36fa2cfcd3"],"x":385,"y":180,"wires":[["808ff37d8b2460e3"]]},{"id":"360b409060b23c5b","type":"ui_group","name":"Demo","tab":"0c531246b2a3f00e","order":1,"disp":true,"width":"12","collapse":false,"className":""},{"id":"c3180d6ecfee774b","type":"ui_group","name":"inventory","tab":"a088985c1d3b62a3","order":1,"disp":true,"width":"12","collapse":false,"className":""},{"id":"0c531246b2a3f00e","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false},{"id":"a088985c1d3b62a3","type":"ui_tab","name":"Supermarket","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
7 Likes