# DB2 - Gauge widget with DB2 1.2.0

**URL:** <https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [22 February 2024 18:51 UTC](https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781 "2024-02-22T18:51:01Z")\
**Posts on this page:** 17\
**Page:** 1

<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:** [22 February 2024 18:51 UTC](https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781/1 "2024-02-22T18:51:01Z")

</div>

v1.2.0  
Just updated and tried the changes to the Gauge widget.  
Could the MD icon be larger? there appears to be lots of white space below the value, and currently the icon (& text) is disproportionately small compared to the payload value

![icon](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/4/6480508363977bb4d5c81c76758b08df3b983569.jpeg)

Also, the gap between the label & the gauge appears excessive, as previously suggested

> [@UI Gauge is Available](https://discourse.nodered.org/t/ui-gauge-is-available/85318/5):
>
> The payload value is too big vs the gauge dimension, and there is too much gap between the label and the gauge.

I realize that everyone will have their own opinion on 'sizes', and although they could be changed using CSS overide, it would be good to start from a happy medium.

---

<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:** [22 February 2024 19:07 UTC](https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781/2 "2024-02-22T19:07:52Z")

</div>

Yeah, agree. Not much to celebrate with gauge widget with this update. By looking into it I still can't understand how it should work. For me it's in the sate of "back to drawing board" .. But this is me... I don't know everything ..

---

<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:** [22 February 2024 19:12 UTC](https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781/3 "2024-02-22T19:12:00Z")

</div>

Understand the frustrations on the width/gap problems, it is recorded: [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)

It will get sorted, but its on a very long list of things for me to address, and I now only get 2 days a week (at best) on Dashboard development at the moment

---

<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:** [22 February 2024 19:14 UTC](https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781/4 "2024-02-22T19:14:15Z")

</div>

Most of my time for 1.2.0 has been the Reverse Proxy work and httpNodeRoot work, everything in 1.2.0 detailed here:

> **[Release v1.2.0 · FlowFuse/node-red-dashboard](https://github.com/FlowFuse/node-red-dashboard/releases/tag/v1.2.0)**
>
> What's Changed
> Fixes & Improvements
> 
> UI Gauge: Add icon prop to UI gauge used as label supplement by @Pezmc in #572
> Set mdi- prefix for all custom icons to be optional by @Pezmc in #574
> Handle miss...

---

<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:** [22 February 2024 19:16 UTC](https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781/5 "2024-02-22T19:16:47Z")

</div>

If I get enough time to take deep dive into it, I'll do it. I have some doubts, nothing for sure. Definitely no dates to promise and don't count on me in that matter.

---

<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:** [22 February 2024 19:21 UTC](https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781/6 "2024-02-22T19:21:49Z")

</div>

The gap problem is coming from me having fixed 150/300px heights for the respective gauge types, this needs to be "smarter".

It should be a _maximum_ of 150/300, but size in accordance with width of the group/widget and the gauge type.

The d3 will center 3/4 gauges, and move 1/2 gauges to the bottom of their respective svg's.

The gauge is auto sized based on the available space, so will always look at both width and height, and size accordingly.

I know how to fix it, just havent had the time to sort with other Dashboard priorities + FF product work + Recruitment work we are doing atm

---

<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:** [22 February 2024 19:26 UTC](https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781/7 "2024-02-22T19:26:29Z")

</div>

> [@joepavitt](#):
>
> The gap problem

I wouldn't call it that way, it is not gap problem but whole layout should be considered to behave in all possible layout configurations and that's a bit bigger thing. That's why I cant give "ten minute solution". It takes to dive in deep.

---

<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:** [22 February 2024 19:54 UTC](https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781/8 "2024-02-22T19:54:59Z")

</div>

I see an additional config input box has been added to change the sub-labels - now 'units' & 'icons'.  
I thought the original plan was;

> check if props.unit has mdi- at start, if so, show an icon in place of the text.

so that there was only one input box, for either text or a MD icon, which sounded a cleaner approach, and makes things easier for new users.  
Especially, if the icon/text size is increased, there would probably not be enough room for both an icon & text anyway.

---

<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:** [23 February 2024 09:58 UTC](https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781/9 "2024-02-23T09:58:27Z")

</div>

Any further thoughts on my last post @joepavitt

---

<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:** [23 February 2024 10:03 UTC](https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781/10 "2024-02-23T10:03:40Z")

</div>

Thanks for following this up. I got the e-mail to say you'd replied on Github, then I opened the issue and your comment wasn't there? Hadn't seen it come in here!

It wasn't me that implemented it, but I was happy with the direction taken as it does offer more flexibility - i.e. both icon _and_ text.

I agree though that improvements are required on the general icon/payload value sizings. My loose thinkings here are:

- icon only: larger font size
- icon and text: as is now
- text only: as is now

Sanity check - I'm not going insane, I definitely received it as a GH notification, not Discourse:

 ![Screenshot 2024-02-23 at 10.04.27](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/d/ad6c4a154299252d153ed400effa4e3200f778b8.png)

---

<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:** [23 February 2024 10:33 UTC](https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781/11 "2024-02-23T10:33:16Z")

</div>

I had not seen the change of thought until your latest version was published, and I commented on the git issue.  
However, I then noted that the issue had already been closed earlier, and wasn't therefore sure if you would get an alert, so I deleted it, and posted in the forum thread instead.

I just feel that having 2 input config boxes to update 1 field is not a good approach, and which is not seen elsewhere in node-Red, whilst your original suggestion seemed logical, a good all-round solution, and fulfilling the issue that I had raised.

---

<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:** [23 February 2024 10:53 UTC](https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781/12 "2024-02-23T10:53:59Z")

</div>

> [@Paul-Reed](#):
>
> and which is not seen elsewhere in node-Red

not sure what you mean by this? Why isn't this pattern similar to elsewhere? No different to the icon/label approach for `ui-button`?

---

<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:** [23 February 2024 11:30 UTC](https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781/13 "2024-02-23T11:30:22Z")

</div>

A post was split to a new topic: [Add compass mode to DB2 gauge widget](https://discourse.nodered.org/t/add-compass-mode-to-db2-gauge-widget/85806)

---

<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:** [23 February 2024 11:17 UTC](https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781/14 "2024-02-23T11:17:25Z")

</div>

> [@joepavitt](#):
>
> No different to the icon/label approach for `ui-button`?

The `ui-button` label is only updated via 1 box in the config - `Label`, and there isn't a second box.

![button](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/8/68326383f622f02ed68fa3dce19289d83f2e0b50.jpeg)

Whilst the gauge now has 2 boxes... both of which write to the same sub-label.

![gauge](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/f/8f580f2e122c5ebd4afc359c0e7d929b644356f1.jpeg)

---

<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:** [23 February 2024 11:29 UTC](https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781/15 "2024-02-23T11:29:58Z")

</div>

That's only because I haven't yet been able to port over the `icon` property for `ui-button`. In Dashboard 1.0, they were two separate fields:

> <https://github.com/node-red/node-red-dashboard/blob/65f726030014180ac3686394f9766759009a964a/nodes/ui_button.html#L71-L78>

---

<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:** [23 February 2024 12:08 UTC](https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781/16 "2024-02-23T12:08:23Z")

</div>

I haven't used db1 for years, so don't know about that.  
I'll leave it to you to decide !

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [24 March 2024 12:09 UTC](https://discourse.nodered.org/t/db2-gauge-widget-with-db2-1-2-0/85781/17 "2024-03-24T12:09:20Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.