# Dashboard 2.0 Classic design multi needle gauge. Call for testing

**URL:** <https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [30 May 2024 14:24 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383 "2024-05-30T14:24:38Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [30 May 2024 14:24 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/1 "2024-05-30T14:24:38Z")

</div>

I have released a new [Dashboard 2 gauge node](https://flows.nodered.org/node/@colinl/node-red-dashboard-2-ui-gauge-classic), with a design based on that by @hotNipi. If anyone has the time and inclination to give it a go I would be most grateful.

It allows the use of multiple needles so gauges such as this can be constructed.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/3/f3603878fbf0578f01720aaea277e8b20018f16f.png)

It takes notice of the widget size specified, and allow the sweep angle of the scale to be configured. For a square widget size the default angle of 250° fits well, as in the example above. If a box with 2:1 aspect ratio (eg 2x1) is configured, with a sweep angle of 180° then this can be achieved.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/6/f606b1208fa165312db767e5e7fe10e0e695e79c.png)

There are several examples included (importable by selecting Examples in the import dialog) which show some options.

For my home automation I am using them to show room temperature, with three needles. Two needles show the current temperature and the setpoint, and the third shows the power (which has to be scaled from 0:1 to the range of gauge.)

It can be installed using Manage Palette and searching for @colinl/node-red-dashboard-2-ui-gauge-classic

---

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [30 May 2024 15:24 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/2 "2024-05-30T15:24:51Z")

</div>

Great job...

Just did some small testing, it is pretty nice, now I don't need to go and copy/paste the template nodes with gauges between dashboards...

A funny thing is happening with the space used by the widget.

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

The space used by the widget is a lot more than the defined one, in this case the configuration could be said to be `invalid`, there are some things to take in account when defining the space used by the widget, since is also dependes if we are using the page layout as `Fixed` or `Grid` but that is another issue related to dashboard 2.0.

This one is using Layout `Fixed`, the previous one was using layout `Grid`.

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

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [30 May 2024 15:42 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/3 "2024-05-30T15:42:13Z")

</div>

> [@arturv2000](#):
>
> The space used by the widget is a lot more than the defined one,

Do you mean the space below it? You have asked for 3x3, is that not what it is using?  
What did you expect it to look like?

---

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [30 May 2024 16:16 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/4 "2024-05-30T16:16:16Z")

</div>

This is something that I am also struggling when using templates and some other widgets, the space used doesn't seem to always relate to the Size defined.

On the side we have buttons, and each of them is using 1x space, the gauge is indeed using 3x3 but the empty space between the Gauge and the Button comes from the Gauge widget.

It almost seems that is the space for the `label` and `measurement` is being reserved, if I add text to them all the space is used (but using more than the 3x3 for all the widget)

Would expect the widget to use the size defined, if not enough to show all the information it can show the information "cropped".

For example, size as 3x2 (No label and Measurement)

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

Is using 3.5 in height if compared with the buttons.

Not a issue with this widget in particular, is more a `rant` regarding how this is handled generally in dashboard specially the height, the width seems to be handled OK (at least using layout `Fixed`).

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [30 May 2024 16:30 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/5 "2024-05-30T16:30:09Z")

</div>

What is the width of the group containing the gauge? Is it 6? If so then I think you will find the gauge is using the correct amount of space in all the cases you quote, and your buttons are not.

---

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [30 May 2024 17:48 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/6 "2024-05-30T17:48:46Z")

</div>

Yes, the group width is 6.

This is getting a little offtopic but, or I have a big misunderstanding about how the layout works (or is suppose to work).

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

Booth groups are defined with a width of 6, the size of the width seems to vary depending on the layout size and window size but for a certain window size is typically constant.

Regarding the height, the slider and buttons are all defined as W=6xH=1, the Gauge is defined as W=3xH=2, so I would expect the size used by the gauge (and this happens with other widgets like charts and tables and specially with almost anything using a template node) would also use 2 rows in height, that would be aligned with the third button (the first one is for the slider).

For what I can see the buttons are really using one unit of height and are constant.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/f/3fe742ed5a7ae7f600344570da2d378d75942a9b.png)

The group from the gauge  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/1/6152d616b47420b900dff54733ba64442c1ca777.png)

The gauge is indeed using only two units of height, but the height is different.

Was expecting to preserve the height unit, this behaviour is troublesome when wanting to align widgets side by side, or having a bigger (height units) side by side with widgets with lower height units, or having items aligned in different groups that are side by side on the page.

And this was using the `fixed` layout, with the `Grid` layout is even worse.

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

But like I said, this is completely offtopic regarding this topic.

Regarding the Gauge Widget, up to now seems to be working OK, will replace the gauges I have in a dashboard with the server status (CPU speed, CPU Temp, etc..) with this one to see how it behaves.

One thing regarding the widget, from what I can see it is not possible to define the sectors using messages. That could be a nice addition for a future release.

---

<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:** [30 May 2024 17:49 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/7 "2024-05-30T17:49:29Z")

</div>

It'l be nightmare to guess the layout and argue what is wrong. To avoid guessing, please do following:  
Add this in ui-template as css for all pages

```auto
.v-card-text > div > * {
    outline:2px solid red;
}

```

And then take screenshot of problematic area.

It draws red lines so we can clearly see how much space is taken by any widget.

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

---

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [30 May 2024 19:20 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/8 "2024-05-30T19:20:18Z")

</div>

One other note.

If possible would be nice to add an option for the color of center point of the needle to be same color as the needle, specially if there are only one needle.

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

---

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [30 May 2024 19:25 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/9 "2024-05-30T19:25:03Z")

</div>

In `Grid` layout

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

In `Fixed` Layout

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/6/96f0bd74f3a0ea3fdadb34d2af82a5546c2e37e8.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:** [30 May 2024 19:39 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/10 "2024-05-30T19:39:03Z")

</div>

> [@arturv2000](#):
>
> color of center point of the needle to be same color as the needle

The circle has class "hub" defined but no style declarations for it. So it defaults currently to black.

So you can easily make your overrides by defining some color for it.

```auto
.cl-gauge .hub{
    fill:red;
}

```

I dont think it should be configurable option. But some logic can be applied for sure ... @Colin

---

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [30 May 2024 19:44 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/11 "2024-05-30T19:44:31Z")

</div>

Thanks, that did the trick.

Yes, not necessarily an option, but if there is only a single needle to use the same color as the needle.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [30 May 2024 19:44 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/12 "2024-05-30T19:44:47Z")

</div>

Are the buttons just standard ui-buttons? No templates or subflows? Have you got any CSS overrides?

What size is the gauge?

Are you sure the ones beside the gauge are 2x1?

---

<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:** [30 May 2024 20:09 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/13 "2024-05-30T20:09:25Z")

</div>

> [@arturv2000](#):
>
> Was expecting to preserve the height unit

It is not related to the Gauge at all.

This can be achieved but may bring in some other issues ...

```auto
.nrdb-layout-group--grid{
    grid-template-rows: repeat(1, 0fr) !important;
}

```

Makes all rows to have same height.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [30 May 2024 20:11 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/14 "2024-05-30T20:11:42Z")

</div>

> [@arturv2000](#):
>
> Yes, not necessarily an option, but if there is only a single needle to use the same color as the needle.

Actually I left it black on purpose. Gauges often used to have a black cover over the hub, if I remember correctly.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/e/8e35a5a5da61bb42db47ecdba08058fdf4d77642.png)

Admittedly that has a black background, but that can also be tweaked, I assume.

For the hub I think it is good enough that it can easily be tweaked if anyone doesn't like it.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [30 May 2024 20:36 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/15 "2024-05-30T20:36:25Z")

</div>

> [@hotNipi](#):
>
> Makes all rows to have same height.

I had not noticed rows being different heights, but this should probably be discussed on a different thread.

---

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [30 May 2024 21:21 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/16 "2024-05-30T21:21:00Z")

</div>

> [@Colin](#):
>
> I had not noticed rows being different heights, but this should probably be discussed on a different thread.

Yes, you are right, that is the reason I did said this was getting way off topic.

> [@Colin](#):
>
> For the hub I think it is good enough that it can easily be tweaked if anyone doesn't like it.

Ok, fair enough, since there is a possible simple workaround via CSS.

> [@arturv2000](#):
>
> One thing regarding the widget, from what I can see it is not possible to define the sectors using messages. That could be a nice addition for a future release.

Ok, I know I am quoting myself, but this comment probably was lost in the "noise".

Dynamically changing the sectors via message would be a nice feature, one of the my own current use cases for this is a test "page" where the user set the pressure target and allowed threshold for validation and I am changing the sectors dynamically based on that (Green OK, Red NOK).

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [31 May 2024 09:51 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/17 "2024-05-31T09:51:27Z")

</div>

> [@arturv2000](#):
>
> > [@arturv2000](#):
> >
> > One thing regarding the widget, from what I can see it is not possible to define the sectors using messages. That could be a nice addition for a future release.
> 
> Ok, I know I am quoting myself, but this comment probably was lost in the "noise".

Yes, you are right, it did get lost. The next release of the dashboard will, I think, have support for a standardised method for modifying config via message properties, so I am waiting to see how that works before adding such things to the gauge. I have opened a [Feature Request for this](https://github.com/colinl/node-red-dashboard-2-ui-gauge-classic/issues/1) so that it does not get forgotten. Once the next release of the dashboard is out and I understand how it works then I will implement something.

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [31 May 2024 15:43 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/18 "2024-05-31T15:43:21Z")

</div>

Haven't installed yet and doing that may answer this however. If you have say 3 needles how do you know which is who?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [31 May 2024 15:49 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/19 "2024-05-31T15:49:26Z")

</div>

> [@gerry](#):
>
> If you have say 3 needles how do you know which is who?

You can specify different colours and lengths, and use the topic value on incoming data to indicate which needle to control.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 June 2024 12:20 UTC](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383/20 "2024-06-01T12:20:55Z")

</div>

I have tweaked the documentation and the examples a bit, and released this at version 1.0.0

Thanks all for the feedback.

[Next page](https://discourse.nodered.org/t/dashboard-2-0-classic-design-multi-needle-gauge-call-for-testing/88383.md?page=2)