This Guy... the car with a personality!
You should be aware that Battlestar Glactica came first, so in fact it would be a Cylon strobe. Both created by the same person. By your command.
1 Like
If party lights really needed for dashboard ...
[{"id":"d2a44a40f3c085a0","type":"ui-template","z":"8240715f881ef736","group":"6f47b8907c5da63a","page":"","ui":"","name":"15 red leds chasing ","order":2,"width":"1","height":"1","head":"","format":"<template>\n <Teleport v-if=\"mounted\" to=\"#app-bar-title\">\n <div v-for=\"n in 15\" :style=\"`--time:${n}`\">\n <div class=\"led red blink\" :class=\"modifier\"></div>\n </div>\n </Teleport> \n</template>\n\n<script>\n export default {\n data() { \n return {\n mounted:false,\n modifier:\"\" \n }\n },\n watch: {\n msg: function () {\n if(this.msg?.class){\n this.modifier = this.msg.class\n } \n }\n },\n mounted(){\n this.mounted = true\n }\n }\n</script>\n<style scoped>\n \n\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) *.7);\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 0.5s infinite;\n animation-delay: calc((var(--time) * 20ms) + 100ms );\n}\n@keyframes blink {\n 50% { \n filter: brightness(0.4);\n }\n}\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":410,"y":900,"wires":[[]]},{"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":"19eb6d108e9275e2","type":"ui-page","name":"Examples","ui":"29792df7d7b05e2e","path":"/examples","icon":"","layout":"notebook","theme":"a965ccfef139317a","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":3,"className":"","visible":"true","disabled":"false"},{"id":"29792df7d7b05e2e","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":[],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"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"}}]
1 Like
when i imported the example flow to exisitng , they were only just blinking, and then when I disabled the initial CSS node from previous example, then the chasing started....
I added a color cycle with inject/random/switch combination. (and a few more LEDs. 
)
Fun isn't it.
I maybe have to explain a bit of the background here.
The original architecture of the led has couple of non resolvable problems.
- The background color is always unpredictable. No matter how hard you try to fine-tuning it, there will be no solution to satisfy all possible color combinations.
The solution for it is to contain the led in defined frame which gives steady condition for led to stand out, no matter the led color. - Spread out glow effect works fine in dark environment. But never in light.
- Hex and RGB colors are not good for gradients nor for shadows. Modern color spaces give more realistic outcome. The oklch color space is handy for stuff where you need to change the hue but preserve the lightness and chroma.
Those are major things.
I shared it as an example how it can be done to get better results. Not that I have best ever design here or something like that.
3 Likes
my sincere apologies to @jbudd for hijacking this topic.
