# Good bye ui-level, hello Gauge Linear

**URL:** https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144
**Category:** Share Your Nodes
**Tags:** dashboard-2
**Created:** [20 September 2024 15:22 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144 "2024-09-20T15:22:30Z")
**Posts on this page:** 20
**Page:** 1

<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: [20 September 2024 15:22 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/1 "2024-09-20T15:22:31Z")

</div>

I'd call node's current state - it works on my computer 😃  
Let me know if you have similar experiences ..

> **[@hotnipi/node-red-dashboard-2-ui-gauge-linear](https://flows.nodered.org/node/@hotnipi/node-red-dashboard-2-ui-gauge-linear)**
>
> A linear style gauge node for @flowfuse/node-red-dashboard

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [20 September 2024 16:34 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/2 "2024-09-20T16:34:05Z")

</div>

@hotNipi I'm rushing so maybe something I have/have not done, but...  
It isn't displaying the gauge in the group that I've selected for some reason.  
If I look at Chrome's developer console, I see the following -

 ![error](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/2/328359d28f5324fb69bc1d90e1d6090c60091278.jpeg)

---

<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: [20 September 2024 16:46 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/3 "2024-09-20T16:46:52Z")

</div>

Very true sadly. And I dont understand what is going on. Digging in deep.

---

<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: [20 September 2024 17:04 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/4 "2024-09-20T17:04:03Z")

</div>

Suddenly it reveals itself after adding - nothing, removing, restart node-red and add again. But couldn't see any clues what causes the issue.

---

<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: [20 September 2024 17:18 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/5 "2024-09-20T17:18:51Z")

</div>

I think the issue is noted but not fixed yet. [A node red restart is necessary after installing third party ui nodes · Issue #938 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/938)

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [20 September 2024 17:31 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/6 "2024-09-20T17:31:40Z")

</div>

Yes, a restart fixed it!  
Strange...

---

<div class="post-metadata">

### Author: ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)
#### Post date: [21 September 2024 04:48 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/7 "2024-09-21T04:48:11Z")

</div>

> [@hotNipi](#):
>
> [node-red-dashboard-2-ui-gauge-linear (node) - Node-RED](https://flows.nodered.org/node/@hotnipi/node-red-dashboard-2-ui-gauge-linear)

Lucky I filed for copyright on that name last week. Expecting my royalty cheque very soon now. 😝

---

<div class="post-metadata">

### Author: ![Kundepuu](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@Kundepuu](https://discourse.nodered.org/u/Kundepuu)
#### Post date: [21 September 2024 08:13 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/8 "2024-09-21T08:13:24Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/f/bfdb9288d4aaa600a5af8b40166f258342a57cac.png)  
Sorry color should be yellow

---

<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: [21 September 2024 12:32 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/9 "2024-09-21T12:32:20Z")

</div>

You are on charge to choose the colors to ensure the readability. Yellow on white is bad choice. Not that it is impossible to figure out some other behaviors but I don't see that as good and clear value in your proposal.

---

<div class="post-metadata">

### Author: ![Kundepuu](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@Kundepuu](https://discourse.nodered.org/u/Kundepuu)
#### Post date: [21 September 2024 13:02 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/10 "2024-09-21T13:02:49Z")

</div>

I meaning like this.  
Bottom one is much more clear to see value than upper one that also have previous colors  
Bottom have different color order for just showing it clearly

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/7/17d898636ad232281928b09b047d1e015e91aec1.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: [21 September 2024 13:07 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/11 "2024-09-21T13:07:27Z")

</div>

The full bar option does something like this. It changes all cells to the color of the current region and leaves dimmed above current value

---

<div class="post-metadata">

### Author: ![Kundepuu](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@Kundepuu](https://discourse.nodered.org/u/Kundepuu)
#### Post date: [21 September 2024 13:10 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/12 "2024-09-21T13:10:42Z")

</div>

Yes it do it single color, not with multiple colors...

---

<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: [21 September 2024 13:13 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/13 "2024-09-21T13:13:51Z")

</div>

With multiple colors I find it confusing thus I don't like the idea.

Your options are:  
Contribute and if done well, I include it as an option.  
Fork and make your own version to achieve your goals.

---

<div class="post-metadata">

### Author: ![Kundepuu](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@Kundepuu](https://discourse.nodered.org/u/Kundepuu)
#### Post date: [21 September 2024 13:17 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/14 "2024-09-21T13:17:40Z")

</div>

> [@hotNipi](#):
>
> Your options are:  
> Contribute and if done well, I include it as an option.  
> Fork and make your own version to achieve your goals.

I dont know what those mean so better that I forget this 🙂

---

<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: [21 September 2024 13:59 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/15 "2024-09-21T13:59:41Z")

</div>

A couple of observations, questions:

Sometimes one might wish to specify a border around each coloured rectangle but because you dim the unlit values using "opacity" the border fades out too. Setting the background-color and opacity using rgba would allow the border to show on all rectangles.

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

If I open the browser inspector or (rearrange the widgets?), the size of the text changes:

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

`°C` is a smaller font size than the value `52.00`. Is this deliberate?

Can the current value be positioned at the RHS of the illuminated bar rather than the RHS of the widget? Also intermediate values between `min` and `max`.

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

An option to round the value to the nearest full rectangle (while still showing it unaltered in the text) would be great.  
i.e. no semi-dimmed rectangle at the right.

---

<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: [21 September 2024 14:17 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/16 "2024-09-21T14:17:42Z")

</div>

To have border separated from cell it makes double amount of elements. Thus definitely not an option for regular usage.  
Rgba is more expensive than opacity.

> [@jbudd](#):
>
> `°C` is a smaller

This is subject of CSS override. Make it as you like.  
All font sizes are made to respect the dashboard layout even for different options it provides for row heights. The widget does not push rows height.

> [@jbudd](#):
>
> If I open the browser inspector or rearrange the widgets (?), the size of the text changes:

What browser does that?

> [@jbudd](#):
>
> Can the current value be positioned at the RHS of the illuminated bar rather than the RHS of the widget?

It will make layout shift on any input. Against of all good design rules.

> [@jbudd](#):
>
> An option to round the value to the nearest full rectangle (while still showing it unaltered in the text) would be great.  
> i.e. no semi-dimmed rectangle at the right.

Possible. Confusing also.

---

<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: [21 September 2024 14:34 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/17 "2024-09-21T14:34:14Z")

</div>

Thanks for your reply @hotNipi

> [@hotNipi](#):
>
> > [@jbudd](#):
> >
> > If I open the browser inspector or rearrange the widgets (?), the size of the text changes:
> 
> What browser does that?

I use Firefox.

> [@hotNipi](#):
>
> > [@jbudd](#):
> >
> > Can the current value be positioned at the RHS of the illuminated bar rather than the RHS of the widget?
> 
> It will make layout shift on any input. Against of all good design rules.

Good point.  
A better way to relate the current value text to a partly invisible bar is probably to put a border around the bar, which is available for anyone who wants it through CSS

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/0/80e71ffa48146f45b75c175d3936123bc64d55c6.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: [21 September 2024 14:38 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/18 "2024-09-21T14:38:31Z")

</div>

I'll check for firefox. Strange anyway.

Border aound is also achievabe with CSS override. Not considering to apply as option.  
You do dim as for minimum to make it behave as a bar which changes width. If that is your target, than you defenetely don't need that complex widget.

---

<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: [21 September 2024 14:39 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/19 "2024-09-21T14:39:21Z")

</div>

> [@hotNipi](#):
>
> achievabe with CSS override. Not considering to apply as option.

That's what I said!

---

<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: [27 September 2024 11:18 UTC](https://discourse.nodered.org/t/good-bye-ui-level-hello-gauge-linear/91144/20 "2024-09-27T11:18:04Z")

</div>

The configuration got slight update.

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

With version 0.0.6 if you use the color picker there's now list of currently used colors presented so if you just wanted to change te positions for colors, the colors are now easy to pick.

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