Dashboard 2.0 Classic design multi needle gauge. Call for testing

Dashboard
1

I have released a new Dashboard 2 gauge node, 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

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

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

9 Likes
2

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
image1700×1239 152 KB

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
image840×435 18.2 KB

1 Like
3

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?

4

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
image741×339 13.3 KB

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

5

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.

6

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
image1102×465 17.4 KB

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

The group from the gauge
image

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
image1875×531 67.7 KB

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.

7

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

.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
image671×625 26.1 KB

4 Likes
8

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

9

In Grid layout

image
image1878×564 33.8 KB

In Fixed Layout

image
image1128×478 20.7 KB

10

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.

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

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

11

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.

12

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?

13

It is not related to the Gauge at all.

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

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

Makes all rows to have same height.

1 Like
14

Actually I left it black on purpose. Gauges often used to have a black cover over the hub, if I remember correctly.
image

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.

15

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

1 Like
16

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

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

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

17

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

18

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

19

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

20

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

Thanks all for the feedback.