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 finis…

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.

Just in case your interest revives <template> <Teleport v-if="mounted" to="#app-bar-title">  <div class="led" :class="msg.class" :style="msg.style"></div> </Teleport> </template> <scrip…

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

[image] BartButenaers: add that functionality to the 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 in…

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

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.

If you want to incorporate blinking, you could borrow/adapt the classes from this demo: [image] What is the BEST way to flash a Dashboard LED? General Here is CSS flashing and all core nodes (except for node-red-dashboard of course) [image] [chrome_jH95dPIDb1] [{"id":"…

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</…

Diwali Round the corner. perfect setup !!

[image] 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 there is only an 'on' class. I have never had the time …

Node-RED

Node-RED Forum

Interactive template LED designer

Share Your Projects

Steve-Mcl 24 October 2024 13:11 13

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

Topic		Replies	Views
Led icon changed Dashboard	27	12740	22 August 2021
Dual Display LED Indicator Dashboard	20	1104	18 June 2022
@flowfuse/node-red-dashboard-2-ui-led "glows" when "off" Dashboard dashboard-2	15	275	10 October 2024
Dashboard template led array problems Dashboard	36	2366	24 August 2021
What is the BEST way to flash a Dashboard LED? General node-red-dashboard	13	966	19 September 2022

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Interactive template LED designer

Related topics