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

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-ui-led-0-4-6/39472>\
**Category:** Share Your Nodes\
**Created:** [21 January 2021 01:26 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-led-0-4-6/39472 "2021-01-21T01:26:26Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![yoiang](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yoiang/32/4831_2.png) [@yoiang](https://discourse.nodered.org/u/yoiang)\
**Post date:** [21 January 2021 01:26 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-led-0-4-6/39472/1 "2021-01-21T01:26:26Z")

</div>

Hey y'all! It's been a while since I've shared an update to [ui-led](https://flows.nodered.org/node/node-red-contrib-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](https://github.com/alexk111) for his great [Node-RED Typescript Starter](https://github.com/alexk111/node-red-node-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 🙂

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 🤘

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [21 January 2021 12:59 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-led-0-4-6/39472/2 "2021-01-21T12:59:19Z")

</div>

Very nice. Thanks! 🕶

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: 😅

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

After:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/9/89f60571352768906012280206ed5833bb511f15.png)

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [21 January 2021 18:46 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-led-0-4-6/39472/3 "2021-01-21T18:46:40Z")

</div>

I think I have found another small issue.

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/0/c0a6fdb23dc4e500525a93cad432d3b639bbe611.png)

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:

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

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/c/8c5c4dec9b0c854a169538e8dd973723200787ab.png)

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? 😅

---

<div class="post-metadata">

**Author:** ![yoiang](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yoiang/32/4831_2.png) [@yoiang](https://discourse.nodered.org/u/yoiang)\
**Post date:** [26 January 2021 20:13 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-led-0-4-6/39472/4 "2021-01-26T20:13:18Z")

</div>

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](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!! 😃

---

<div class="post-metadata">

**Author:** ![SonoraTechnical](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sonoratechnical/32/20033_2.png) [@SonoraTechnical](https://discourse.nodered.org/u/SonoraTechnical)\
**Post date:** [28 January 2021 16:22 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-led-0-4-6/39472/5 "2021-01-28T16:22:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [29 January 2021 12:37 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-led-0-4-6/39472/6 "2021-01-29T12:37:55Z")

</div>

> [@SonoraTechnical](#):
>
> If I set the size to Auto... the led is quite large.. and quite flat

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

---

<div class="post-metadata">

**Author:** ![SonoraTechnical](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sonoratechnical/32/20033_2.png) [@SonoraTechnical](https://discourse.nodered.org/u/SonoraTechnical)\
**Post date:** [12 February 2021 15:25 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-led-0-4-6/39472/7 "2021-02-12T15:25:37Z")

</div>

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.

 ![image_2021-02-12_082526](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/1/21af2738a8221fbf2259b1c2aa36af2c26117118.png)

---

<div class="post-metadata">

**Author:** ![yoiang](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yoiang/32/4831_2.png) [@yoiang](https://discourse.nodered.org/u/yoiang)\
**Post date:** [12 February 2021 16:39 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-led-0-4-6/39472/8 "2021-02-12T16:39:46Z")

</div>

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

---

<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:** [12 February 2021 16:46 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-led-0-4-6/39472/9 "2021-02-12T16:46:47Z")

</div>

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.

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

---

<div class="post-metadata">

**Author:** ![SonoraTechnical](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sonoratechnical/32/20033_2.png) [@SonoraTechnical](https://discourse.nodered.org/u/SonoraTechnical)\
**Post date:** [12 February 2021 17:13 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-led-0-4-6/39472/10 "2021-02-12T17:13:21Z")

</div>

![image_2021-02-12_101204](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/3/a3af52a1df12192e728056c107c78ce2afa82fda.png)

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.

---

<div class="post-metadata">

**Author:** ![SonoraTechnical](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sonoratechnical/32/20033_2.png) [@SonoraTechnical](https://discourse.nodered.org/u/SonoraTechnical)\
**Post date:** [19 February 2021 00:04 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-led-0-4-6/39472/11 "2021-02-19T00:04:59Z")

</div>

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 {  
right:0px;  
height: calc(100%-6px \*2);  
text-align: center;  
padding: 6px  
}

![InkedBetterLEDDisplay_LI](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/a/7a7b71177ade2bd64655bc3e1fa5c0d1edc57e71.jpeg)

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

![image_2021-02-18_170451](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/1/e1622581e4dc74a28fee28283ab7aa4bbcbe19f3.png)

---

<div class="post-metadata">

**Author:** ![Howie55](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/howie55/32/1075_2.png) [@Howie55](https://discourse.nodered.org/u/Howie55)\
**Post date:** [2 March 2021 00:43 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-led-0-4-6/39472/12 "2021-03-02T00:43:02Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/5/e55a88fb6bcf2f1e0aced09bcbbb1c7bc548362a.png)

 ![IMG_0185.PNG](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/b/cb7ee1f4b666dd6081652824ae45e0af65de296b.jpeg) ![IMG_0186.PNG](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/1/b1fd5d83c7dd6e6b722ffad2d20f9b3bd10c3e18.jpeg) ![IMG_0187.PNG](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/b/1ba0296eee1b67b863f993f385e49060b6694eca.jpeg)

---

<div class="post-metadata">

**Author:** ![yoiang](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yoiang/32/4831_2.png) [@yoiang](https://discourse.nodered.org/u/yoiang)\
**Post date:** [4 March 2021 14:52 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-led-0-4-6/39472/13 "2021-03-04T14:52:55Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![yoiang](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yoiang/32/4831_2.png) [@yoiang](https://discourse.nodered.org/u/yoiang)\
**Post date:** [7 March 2021 16:47 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-led-0-4-6/39472/14 "2021-03-07T16:47:32Z")

</div>

Thanks all for your patience, I just pushed 0.4.9!

In the effort of getting a fix for the squishing out sooner there is an unresolved issue it introduces where the glow at some sizes is cut off. I'll address that in a later version, this fix was more important 😉

Please let me know if this doesn't resolve the issue or introducing any other bugs!

---

<div class="post-metadata">

**Author:** ![Howie55](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/howie55/32/1075_2.png) [@Howie55](https://discourse.nodered.org/u/Howie55)\
**Post date:** [7 March 2021 23:49 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-led-0-4-6/39472/15 "2021-03-07T23:49:43Z")

</div>

Thank you so much for the prompt update. I can confirm my iOS devices (iPhone & iPad) are again displaying correctly.

Howard.

---

<div class="post-metadata">

**Author:** ![SonoraTechnical](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sonoratechnical/32/20033_2.png) [@SonoraTechnical](https://discourse.nodered.org/u/SonoraTechnical)\
**Post date:** [8 March 2021 23:37 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-led-0-4-6/39472/16 "2021-03-08T23:37:38Z")

</div>

This 0.4.9 version fixed the appearance on my dashboards that have the 24x24 grid size. Looks perfect!

 ![image_2021-03-08_163730](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/9/d954626df2e15ef90ceab0baab792b983032dea4.png)