# UI Gauge is Available

**URL:** <https://discourse.nodered.org/t/ui-gauge-is-available/85318>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [8 February 2024 11:51 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318 "2024-02-08T11:51:07Z")\
**Posts on this page:** 20\
**Page:** 1

<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 February 2024 11:51 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/1 "2024-02-08T11:51:07Z")

</div>

Hi All, just wanted to share that I've just published Node-RED Dashboard 2.0's latest release (`v1.1.0`) with a new widget - UI Gauge.

 ![Screenshot 2024-02-08 at 11.51.40](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/7/0769925d0a9a11aa8d59673d856331900753e32a.png)

I know it was an incredibly popular one from Dashboard 1.0, and thanks to all for the patience in getting it out. You can see a short video recording of them in practice [here](https://github.com/FlowFuse/node-red-dashboard/pull/530#issuecomment-1932336771)

---

<div class="post-metadata">

**Author:** ![jwj001](https://avatars.discourse-cdn.com/v4/letter/j/8e8cbc/32.png) [@jwj001](https://discourse.nodered.org/u/jwj001)\
**Post date:** [8 February 2024 18:31 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/2 "2024-02-08T18:31:13Z")

</div>

Hi,i am new to Dashboard v2 how to i get it into my node-red?

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [8 February 2024 19:17 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/3 "2024-02-08T19:17:43Z")

</div>

[https://dashboard.flowfuse.com/](https://dashboard.flowfuse.com/) go for the **Getting started** button.

---

<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 February 2024 20:10 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/4 "2024-02-08T20:10:45Z")

</div>

You can click the menu option in the top-right of the Node-RED Editor, clixk "Manage Palette". If you've already installed a previous version, it will be listed there with an "Update to `v1.1.0` button.

Otherwise, you can click the "install" tab, and then search for `@flowfuse/node-red-dashboard` and "Install"

---

<div class="post-metadata">

**Author:** ![TheSaltydog](https://avatars.discourse-cdn.com/v4/letter/t/47e85d/32.png) [@TheSaltydog](https://discourse.nodered.org/u/TheSaltydog)\
**Post date:** [8 February 2024 12:35 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/5 "2024-02-08T12:35:28Z")

</div>

This is the new ui-gauge, with size 1x1:

 ![Screenshot 2024-02-08 alle 13.34.01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/c/7cc9a2ba7601a5ec2984ef2cc854955bdd114696.png)

The payload value is too big vs the gauge dimension, and there is too much gap between the label and the gauge.

The same with size 2x2. Now the payload value is correctly displayed, but the gap between the labal and the gauge is still too much.

 ![Screenshot 2024-02-08 alle 13.36.05](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/0/00ceb248f8fb1c290e636d3b97e89f970c72233f.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 February 2024 12:48 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/6 "2024-02-08T12:48:54Z")

</div>

Thanks @TheSaltydog - have raised [UI Gauge - Improve sizing/layout at smaller sizes (1x and 2x widths) · Issue #557 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/557)

---

<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:** [8 February 2024 19:41 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/7 "2024-02-08T19:41:09Z")

</div>

UI - Gauge  
Just noticed that the limit segments cannot be re-ordered by dragging the hamburgers.  
I assume that we should be able to do so?

![move](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/e/8e6f5caf77ac046f138f82620bc38773db2c566b.gif)

Issue raised - [UI Gauge - cannot re-order segments · Issue #558 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/558)

---

<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 February 2024 19:56 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/8 "2024-02-08T19:56:50Z")

</div>

Right you are Paul, thanks for raising

---

<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:** [8 February 2024 20:11 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/9 "2024-02-08T20:11:47Z")

</div>

Took a little time and tried to investigate the layouting issue of the gauge but no luck. Too much hidden behind d3 magic probably for me.  
But I didn't understand why the value field is not part of gauge but separate element thus requires special treatment in terms of layouting. Strange. 🤔

Edit:  
@Paul-Reed you are so good in splitting threads - this latest gauge talk should maybe go over to the [UI Gauge is Available - #4 by joepavitt](https://discourse.nodered.org/t/ui-gauge-is-available/85318/4) thread if possibe.

Edit2:  
Done! - Paul

---

<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:** [8 February 2024 21:02 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/10 "2024-02-08T21:02:06Z")

</div>

Fancy @Paul-Reed. I can't give heart to my own post to like your edit in my post. But I'll give it for you anyway ❤

---

<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:** [9 February 2024 08:53 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/11 "2024-02-09T08:53:47Z")

</div>

> [@hotNipi](#):
>
> But I didn't understand why the value field is not part of gauge but separate element thus requires special treatment in terms of layouting. Strange.

Because SVG is a _pain_ to work with for dynamic layouts given it's absolutely positioned. I try to minimise SVG as much as possible by using relatively positioned content where possible.

---

<div class="post-metadata">

**Author:** ![RandomSporadicProjs](https://avatars.discourse-cdn.com/v4/letter/r/e19adc/32.png) [@RandomSporadicProjs](https://discourse.nodered.org/u/RandomSporadicProjs)\
**Post date:** [9 February 2024 13:32 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/12 "2024-02-09T13:32:49Z")

</div>

Hi started playing with gauge as it was the main element stopping me beginning the move across to Dashboard 2 - thanks to all involved in making this happen.

Just to show an issue I've just noticed.

The gauge displays correctly, but when the left menu is expanded, the gauge has its right side cut off, and the pointer moves off to the left.

I guess this some sort of styling/positioning issue as discussed in this thread.

 ![Screenshot 2024-02-09 at 13-23-01 Page Name](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/f/8f472f066b42215cea670986e147afa39ae120d8.png)

 ![Screenshot 2024-02-09 at 13-23-12 Page Name](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/0/f064aba6e20b00fc842de9cb79a2575f8aceb34f.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:** [9 February 2024 13:34 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/13 "2024-02-09T13:34:18Z")

</div>

The issue is already reported

> <https://github.com/FlowFuse/node-red-dashboard/issues/560>
>
> \### Description
> 
> For window size if there is enough space the sidebar renders …into the layout (not above), if to toggle the sidebar, the cards change their size accordingly. Any widget (like ui\_gauge) using window resize event to update it's content are out of shape cos of course - the window size is not changed. 
> 
> So it maybe needs to dispatch the resize forcibly \`window.dispatchEvent(new Event('resize'));\` when sidebar animation completes. Don't know if there is more such internal layout changes which then may need same sort of treatment. 
>   
> 
> Best, 
> Endel
> 
> 
> 
> 
> \### Epic/Story
> 
> \_No response\_
> 
> \### Have you provided an initial effort estimate for this issue?
> 
> I can not provide an initial effort estimate

---

<div class="post-metadata">

**Author:** ![RandomSporadicProjs](https://avatars.discourse-cdn.com/v4/letter/r/e19adc/32.png) [@RandomSporadicProjs](https://discourse.nodered.org/u/RandomSporadicProjs)\
**Post date:** [9 February 2024 13:37 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/14 "2024-02-09T13:37:06Z")

</div>

So it has - things move quickly here 🙂

---

<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:** [10 February 2024 20:43 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/15 "2024-02-10T20:43:35Z")

</div>

Trying to replace segmental sub-label 'text' with a mdi icon, is it possible, or confined to be text only?

![gaugeoil](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/1/6198d3f362e6bfd728fb612e5b11029131b2a975.jpeg)

---

<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:** [10 February 2024 21:24 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/16 "2024-02-10T21:24:34Z")

</div>

4 posts were split to a new topic: [Using CSS to transform Dashboard 2 widgets](https://discourse.nodered.org/t/using-css-to-transform-dashboard-2-widgets/85407)

---

<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 February 2024 21:06 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/17 "2024-02-10T21:06:25Z")

</div>

Not currently, but would be a very easy feature to put in if you want to open an issue

---

<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:** [10 February 2024 21:32 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/18 "2024-02-10T21:32:43Z")

</div>

Git feature issue raised [Allow GAUGE segmental sub-labels to display mdi-icons · Issue #567 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/567)

---

<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 February 2024 22:02 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/19 "2024-02-10T22:02:24Z")

</div>

> [@joepavitt](#):
>
> easy feature

Technically easy for sure. The layout just will bite hard. Where to put it with half layout for example...

---

<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:** [11 February 2024 08:23 UTC](https://discourse.nodered.org/t/ui-gauge-is-available/85318/20 "2024-02-11T08:23:12Z")

</div>

The request was _in place of the units label_, so a starting point, if `mdi` is detected at the start of the `unit` property, I'll show an icon instead

[Next page](https://discourse.nodered.org/t/ui-gauge-is-available/85318.md?page=2)