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

Dashboard
1

You can define many colours for an LED.
image

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

But if you feed it with a value for which there is no colour defined, it "glows" grey:
image

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

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
image1152Ă—171 17.4 KB

1 Like
2

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

3

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

An LED which has never received a message has

<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

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

image

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.

4

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?

5

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.

2 Likes
6

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.

7

Which link are you referring to?

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

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

8

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.

9

Thank you Joe.

The link on https://flows.nodered.org/node/@flowfuse/node-red-dashboard-2-ui-led

Also on https://www.npmjs.com/package/@flowfuse/node-red-dashboard-2-ui-led

10

the package link must be wrong

image

EDIT
Never mind, @BartButenaers already raised it here: Incorrect repo url · Issue #9 · FlowFuse/node-red-dashboard-2-ui-led · GitHub

Thanks Bart.

11

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.

12

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

13

But it affects all of them

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

14

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

image
image746Ă—141 24.5 KB

15

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

[{"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.

16

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

Completely agree. :grinning:

1 Like