# @flowfuse/node-red-dashboard-2-ui-led "glows" when "off"

**URL:** <https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [7 October 2024 17:58 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221 "2024-10-07T17:58:44Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [7 October 2024 17:58 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221/1 "2024-10-07T17:58:44Z")

</div>

You can define many colours for an LED.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/1/6118db7495ad5f6ba7862e52e68ffbfffc184a86.png)

And if "Show glow effect around LED" is ticked and you feed one of these values to the LED, it does indeed glow (Here I have increased the glow radius for round LEDs)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/2/f25c9add8b8b13221fe8b35bc4666d8e3725ec09.png)

But if you feed it with a value for which there is no colour defined, it "glows" grey:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/3/63c818cd96c9d797731e83ca1580e8a43d830af4.png)

Surely if the LED is pretending to be off, there should be no glow ie no div `.nrdb-ui-led-bulb--glow`?

This is how the LEDs look with no box-shadow for `div.nrdb-ui-led-bulb--glow`  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5cdbf6a7f7c4f6ab3013b3e22712d264ec4b0024.png)

This dead LED effect is not easily achievable with custom CSS because:

- The LED colour is passed as a variable `--ui-led-color: gray` . I don't know how to style conditionally for a particular variable value. It may be possible?
- The ui-led widget config does not have a "class" field, else we could set class="OFF"

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/f/ef8f5950bdaf431bb8bcf74bb0e2e00ef8f98bce.png)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [8 October 2024 08:20 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221/2 "2024-10-08T08:20:02Z")

</div>

Yes, you're right @jbudd, although I'm unable to reproduce in my own local setup. What browser are you using?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [8 October 2024 09:58 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221/3 "2024-10-08T09:58:04Z")

</div>

It's not the browser, but I use Firefox.

An LED which has never received a message has

```auto
<span>class="nrdb-ui-led-bulb nrdb-ui-led-bulb--circle"</span>

```

If colours are specified for true and false (the default) and you send true followed by 0 (hoping to turn it off) it has

```auto
<span>class="nrdb-ui-led-bulb nrdb-ui-led-bulb-on nrdb-ui-led-bulb--circle nrdb-ui-led-bulb--glow"</span>

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/1/b1f7ca944e0ebb014e5166a6ec64373bdd888d85.png)

The datatype of the payload is immaterial.  
If you send a value that has a colour assigned, then one that does not, it retains class `nrdb-ui-led-bulb--glow`

Apologies if my original post did not make this clear enough.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [10 October 2024 00:42 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221/4 "2024-10-10T00:42:20Z")

</div>

> [@joepavitt](#):
>
> I'm unable to reproduce in my own local setup.

What browser do you use?

You are probably unaware that the GitHub link for this node gives a 404 error.  
On 9th August @BartButenaers created an issue for it on what seems to be the right repository, which has not so far been commented on.

Should we regard this node as abandonware and seek other solutions?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [10 October 2024 05:12 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221/5 "2024-10-10T05:12:46Z")

</div>

> [@jbudd](#):
>
> Should we regard this node as abandonware and seek other solutions?

I don't see any see reason to abandon that node. It is a nice node. I use it also myself. And yes it has some issues...

Don't see what _"other solutions"_ people should expect: developing a custom ui-template node, creating a custom ui-led node,...

Goung to repeat myself again: we have the source code, we have a quite technical audience (seen the nature of Node-RED), ... We only lack people that want to contribute to the dashboard.

When I see people developing an entire ui-template node to solve a problem of an existing ui-node, then my brain has quite a lot of problems to understand why they don't use their knowledge and time to fix the node. Completely incomprehensible...

So my advice here to the _ **entire community** _ again: don't expect Joe and his team to solve all the open issues. If you want to have a nice feature-rich dashboard, you will need to get off your lazy ass and start contributing. And I am also targetting here companies that earn money by selling Node-RED. An absolute minimum of open-source courtecy would be welcome!

I should copy this post, because it looks like I am going to need it more often unfortunately.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [10 October 2024 05:34 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221/6 "2024-10-10T05:34:52Z")

</div>

> [@BartButenaers](#):
>
> When I see people developing an entire ui-template node to solve a problem of an existing ui-node

Feeling guilty. But sometimes fresh look and different approach opens new ways to make things better. For sure it is one of the slowest path on that kind of evolution but steady and proven.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [10 October 2024 06:18 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221/7 "2024-10-10T06:18:01Z")

</div>

> [@jbudd](#):
>
> You are probably unaware that the GitHub link for this node gives a 404 error.

Which link are you referring to?

> [@jbudd](#):
>
> Should we regard this node as abandonware and seek other solutions?

No, its an open source node. Anyone is able to make contributions and improvements, not just me.

> [@jbudd](#):
>
> created an issue for it on what seems to be the right repository, which has not so far been commented on.

I had not seen this comment. I'm managing dozens of repositories and projects, sometimes things slip through my radar.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [10 October 2024 06:30 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221/8 "2024-10-10T06:30:01Z")

</div>

I don't work Thursdays, but have just replied to all issues on the LED project, and a PR. GitHub hadn't notified me of any of it, so I had no idea it was there.

Thanks for raising it with me.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [10 October 2024 07:06 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221/9 "2024-10-10T07:06:29Z")

</div>

Thank you Joe.

> [@joepavitt](#):
>
> Which link are you referring to?

The link on [https://flows.nodered.org/node/@flowfuse/node-red-dashboard-2-ui-led](https://github.com/flowforge/node-red-dashboard-3rd-party)

Also on [https://www.npmjs.com/package/@flowfuse/node-red-dashboard-2-ui-led](https://github.com/flowforge/node-red-dashboard-3rd-party)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 October 2024 07:14 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221/10 "2024-10-10T07:14:00Z")

</div>

> [@joepavitt](#):
>
> > [@jbudd](#):
> >
> > You are probably unaware that the GitHub link for this node gives a 404 error.
> 
> Which link are you referring to?

the package link must be wrong

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/7/974e72c4b8ed5e4048e59d4e84d0a4970479e6e7.png)

EDIT  
Never mind, @BartButenaers already raised it here: [Incorrect repo url · Issue #9 · FlowFuse/node-red-dashboard-2-ui-led · GitHub](https://github.com/FlowFuse/node-red-dashboard-2-ui-led/issues/9)

Thanks Bart.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [10 October 2024 07:18 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221/11 "2024-10-10T07:18:04Z")

</div>

I think the easiest will be to add configuration option "never glow" for individual rows. It opens also possibility to have same color but maybe darkened and without the glow then. Mimics the thing in real world.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [10 October 2024 07:23 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221/12 "2024-10-10T07:23:53Z")

</div>

> [@hotNipi](#):
>
> configuration option "never glow"

The node config does have the option not to apply the glow effect.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [10 October 2024 07:24 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221/13 "2024-10-10T07:24:13Z")

</div>

But it affects all of them

Or why not to move the glow configuration to the individual state level. Same outcome.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [10 October 2024 07:35 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221/14 "2024-10-10T07:35:33Z")

</div>

> [@hotNipi](#):
>
> But it affects all of them

Not on my setup - are we looking at the same node?  
The right hand LED has the glow turned off

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/f/5f6a734b6cb3d444fc575ab4d320c126c152a57d.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [10 October 2024 07:41 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221/15 "2024-10-10T07:41:38Z")

</div>

But consider this setup. For off state I'd like the glow would be off.

```auto
[{"id":"fefe931336beed8e","type":"ui-led","z":"6bf3e03fb58d61b1","name":"","group":"57df0811668d5c96","order":5,"width":0,"height":0,"label":"","labelPlacement":"left","labelAlignment":"center","states":[{"value":"off","valueType":"str","color":"#0c5514"},{"value":"on","valueType":"str","color":"#00ff00"},{"value":"auto","valueType":"str","color":"#4c7dcd"}],"allowColorForValueInMessage":false,"shape":"circle","showBorder":false,"showGlow":true,"x":470,"y":1400,"wires":[]},{"id":"a1f3535d2b373c9b","type":"ui-button","z":"6bf3e03fb58d61b1","group":"57df0811668d5c96","name":"","label":"on","order":4,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"on","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":250,"y":1380,"wires":[["fefe931336beed8e"]]},{"id":"753540fe1c075bf8","type":"ui-button","z":"6bf3e03fb58d61b1","group":"57df0811668d5c96","name":"","label":"off","order":2,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"off","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":250,"y":1420,"wires":[["fefe931336beed8e"]]},{"id":"2a12da90eeb5ba8b","type":"ui-button","z":"6bf3e03fb58d61b1","group":"57df0811668d5c96","name":"","label":"auto","order":3,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"auto","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":250,"y":1460,"wires":[["fefe931336beed8e"]]},{"id":"57df0811668d5c96","type":"ui-group","name":"Group 1","page":"ce26d025b6983eb8","width":"6","height":"1","order":1,"showTitle":true,"className":"G1","visible":"true","disabled":"false"},{"id":"ce26d025b6983eb8","type":"ui-page","name":"Test","ui":"538ceff32af2078f","path":"/test","icon":"home","layout":"grid","theme":"0621b6f7a05375c3","breakpoints":[{"name":"Default","px":"0","cols":"6"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":2,"className":"","visible":"true","disabled":"false"},{"id":"538ceff32af2078f","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"0621b6f7a05375c3","type":"ui-theme","name":"Light","colors":{"surface":"#ebebeb","primary":"#0983b3","bgPage":"#f5f5f5","groupBg":"#e3e3e3","groupOutline":"#005475"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

Often we don't pay attentions on small details like accessibility.  
But there's a little trick which doesn't take too much but may gain a lot if you care.

With the page (or what ever web content you are working on) go to the dev tools, find the `<body>` tag and apply temporarily a CSS rule `filter: grayscale(1);`  
And then try to see it's working for you.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [10 October 2024 08:01 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221/16 "2024-10-10T08:01:02Z")

</div>

Ah yes, it affects all of the states of an LED, not all of the LEDs on screen.

> [@hotNipi](#):
>
> For off state I'd like the glow would be off.

Completely agree. 😀

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [9 November 2024 08:01 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-2-ui-led-glows-when-off/92221/17 "2024-11-09T08:01:10Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.