[ANNOUNCE] node-red-contrib-ui-led 0.4.6

Hey y'all! It's been a while since I've shared an update to ui-led, now 0.4.6, with the forum but there have been some changes that have gone in that folks have asked for in the past and I thought I'd let folks know.

New features:

  • Enable or disable glow around LED
  • Square shaped LED
  • LED will size to fit locked control size or group's size on auto
  • color picker in Color for Value configuration
  • handy Preview in Edit panel to see what your choices will look like

Coming soon:

  • more shapes
  • more styles
  • more dynamic color options

Less for the end users, more for the devs out there recently the library also underwent a conversion slash rewrite into Typescript. I have to thank @alexk111 for his great Node-RED Typescript Starter as a bouncing off point after a few false starts in the past. We may have lost a few Javascript folks but believe me, it is much more of a pleasure to work on the library now. And I will separately publish the node-red-dashboard type declarations to @types as soon as I have a sec :slight_smile:

As always please feel free to share feedback and suggestions here or in the Github, it has helped steer development of the library a lot :metal:


Very nice. Thanks! :sunglasses:

Something that caught my eye. Is this new "flatter" look intended? Though this might be subjective, but the old LED looked a bit better and had a bit more "glow".

Hard to describe, but there's a noticeable difference: :sweat_smile:




I think I have found another small issue.

If you add an LED, it has its size set to "auto", it displays as expected:


Then do the following:

  • change size to a fixed one, say "1x1"
  • save the editor (done)
  • change size back to "auto", save again
  • deploy changes

This happens:


A look at the flow file revealed the culprit. I have those version controlled with Git, so it was easy to spot. :face_with_monocle:

Before changing anything, the size properties where stored as numbers (left).
After changing back to "auto" the second time, they where saved as strings, which seems to mess up the calculation of the LED size.

I don't know if the size properties of UI nodes are managed by common Dashboard code or have to be managed by the node's developer. Maybe Dave (@dceejay) has some insights, if this is a general Dashboard issue? :sweat_smile:

1 Like

Ah good catch! I'll have to look into that tonight, made a bug here https://github.com/Adorkable/node-red-contrib-ui-led/issues/68

Regarding the visuals, I should have in this release but plan to add some options for folks who want the rounder design versus a flatter one. The change went in for some performance and versatility reasons as well as simplifying readability of the LEDs but I meant to take the time to make both available, I'm glad you have an opinion about which you like best!! :smiley:

I like the option for the new flatter.. would rather have the performance and versatility for the work that I am doing.

One issue i noted... If I decide to set a size of 1x5.. so that I can have the label text to the left and the led to the right... and fit neatly on one line..... I barely see the LED at all... However, if I set it to 2x5 the led looks better (but small)... Unfortunately, I am taking up extra vertical space...

If I set the size to Auto... the led is quite large.. and quite flat.. .and does not allow for any glow effect at all. However, it does only occupy 1 vertical space... which is preferred.

Just some feedback...

1 Like

That is caused by the bug I described earlier. Normally, the LED should fit nicely with a height of 1, even in "auto" mode.

0.4.7 seemed to give satisfactory results if I set it to Auto and Turned off Glow Effect... However, with 0.4.8 we are left with very tiny LEDs again.... and they don't show up at all unless you use the GLow Effect... Of course if you take up several lines you can get something, but that is not practical to do.

Oh interesting @SonoraTechnical , I have not seen them appear this way, let me see if I can reproduce it on my end!

It may help if you add your dashboard layout settings to your post. Seems to me that you are using the 1x1 widget size with quite small values.


I am running my flow on a Raspberry Pi 4B w/ the official 800x480 LCD TouchScreen. That is why the settings are scaled that way. Otherwise, it is difficult to show much content.

If I go in and pass hard values to the code in debug mode I can get a better representation than before..

it's in the .led_container properties...

where I have 6px... it was 11px previously....
See the photo below for the results when I change it to 6px..

.led_container {
height: calc(100%-6px *2);
text-align: center;
padding: 6px


hotNIPI is correct... I run smaller grid sizes. Just wanted to show you the effects of minor changes. For now I'm just running the LED in a 5x2 format and it's big enough... (though my 6px change at 5x1 was even brighter and better)..

I've always had issues with UI-LED with shadows at 5x1... but for version .4.6 I was good with no shadows as it showed a solid circle.

Anyway, I was doing some experimenting and just thought I'd share it with you.

Here's what it looks like at 5x2


Thanks for the ui-led node I use it a lot for displaying, at a glance, my devices state but I have noticed that what works on the dashboard display on a PC or Android displays differently on an iOS device. The LED regardless of size displays as a vertical line rather than a circle. If the device (iPad or iPhone) is rotated they appear correct but upon a screen change revert to the vertical line. This has only occurred since the latest update. Hopefully the screenshots attach correctly...first time at this.

Screenshot 2021-03-02 103446

Sorry for the delay in pushing a fix, life stuff has gotten in the way.

I should have an attempted fix pushed this weekend, thanks for being patient everyone!