# Gauge's for Dashboard 2.0 made with ui\_template

**URL:** <https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [27 February 2024 13:43 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955 "2024-02-27T13:43:09Z")\
**Posts on this page:** 20\
**Page:** 2

<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:** [6 March 2024 20:54 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/21 "2024-03-06T20:54:36Z")

</div>

> [@Colin](#):
>
> could one use just
> 
> ```auto
> v ?? return
> 
> ```

No. Unexpected Token.

In fact, in retrospect, I would rather turn the logic round and code that section as

```auto
                    const v = this.validate(this.msg.payload)                   
                    if(v !== null){
                        this.value = v
                        this.getElement('o-needle',true).style.rotate = this.rotation(this.value)    
                    }

```

---

<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:** [6 March 2024 21:11 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/22 "2024-03-06T21:11:04Z")

</div>

Nice to have companions with interest to dig in deep. 😃  
Who the hell in the world even tries to familiarize himself about the `stroke-dasharray` madness 😛 ..

There are some things to work on yet - "magic numbers" like `const arcLength = 203.356` or `const maxAngle = 122.64 * 1.2` will bite hard if you'll need to change the ark shape even a bit. Not that I didn't use them. I did and mostly it is a bit of laziness and bit of ambition to showup no matter that the thing is not perfect.  
But overall "magic numbers" should be avoided as much as possible.

No matter, I like it. I like it a lot.

---

<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:** [6 March 2024 21:56 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/23 "2024-03-06T21:56:43Z")

</div>

You are quite right about the hard coded numbers. I wanted to get it going first. I do plan to put some more maths in to calculate those too. Perhaps making the basic layout configurable too, rather than hard coding it.

---

<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:** [7 March 2024 10:14 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/24 "2024-03-07T10:14:58Z")

</div>

One thing i added to these gauges (and also to the artless gauges) was to add a property to define how many decimal places the values should have when shown. This variable is then passed to ".toFixed(this.valueDecimalPlaces)" to format the value shown.

The dashboard I am attempting to make, the people using it require to see more "decimal places" for some values (no specific reason, just because yes... 🙃).

In the version posted by colin, also added a "majorDecimalPlaces" for situations where the full range is small, in my case for example something between 0 and 2Bar.

Thanks, and nice work.

---

<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:** [7 March 2024 10:54 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/25 "2024-03-07T10:54:42Z")

</div>

Not that it doesn't make sense to have things easy to configure, just the default should follow good practices.  
Just mentioning couple in that sense..  
When designing a gauge (value reading area of the measuring device), the top of design requirements contains readability. The top list of "readability killers" contains overcroudness.

2 vs 2.0 makes quite of difference.

---

<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:** [7 March 2024 11:30 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/26 "2024-03-07T11:30:32Z")

</div>

I agree the default should follow good practices.

Fortunately, in my case, the dashboard i made using Node-Red are only for "internal" consumption and not for "final/outside client" use, and since my main area of focus is embedded device programming (mainly C) and hardware design, have some trouble thinking in good GUI paradigm and specially working with html and css.

These dashboards are for the customer support people have access to an "advanced mode" when checking equipment status since the current software "cannot" have that mode and only show basic information.

Regarding the Gauge, one of the ones with "decimal places" look like this:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/7/7796f47ea3e43bc0380633910b2af3268f4a4b96.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:** [7 March 2024 11:33 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/27 "2024-03-07T11:33:17Z")

</div>

What happened with the last tick value?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/0/00d552b2bb53edb25f9d035da9643a062151e0d6.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:** [7 March 2024 11:41 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/28 "2024-03-07T11:41:51Z")

</div>

Not sure.

Trying to check that.

The maximum should be 1.4, and it is not showing, i think is something related to "precision of floats / comparisons between floats" in the function "generateNumbers", at least in "page inspect" there is no label in SVG for that position.

Trying to find how i can make debug statements to check what is being calculated.

---

<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:** [7 March 2024 11:43 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/29 "2024-03-07T11:43:46Z")

</div>

> [@arturv2000](#):
>
> majorDecimalPlaces

Show the code where you use the "majorDecimalPlaces" to format

---

<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:** [7 March 2024 11:51 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/30 "2024-03-07T11:51:03Z")

</div>

Ok, found the issue...

The code looks like this (is not pretty, but it works for now)

```auto
generateNumbers:function(min,max,majorDivision){               
        const minDegrees = 237.36
        const maxDegrees = 482.64
        const degRange = maxDegrees-minDegrees
        const degPerDiv = degRange * majorDivision/(max-min)
        console.log(`degRange: ${degRange}`);
        console.log(`degPerDiv: ${degPerDiv}`);
        let nums = []
        for (let degrees=minDegrees; degrees<=maxDegrees; degrees+=degPerDiv) {
            const n = ((degrees-minDegrees)/degRange * (max-min) + min).toFixed(this.majorDecimalPlaces);
            nums.push({r: degrees, n: n});
            console.log(`n: ${n}, Degrees: ${degrees}`);
            degrees = Math.round(degrees);
        }
        return nums 
    },

```

The issue is the comparasion in the for "loop" regarding how floats number work.

Not pretty, probably going to scale by 100 the values to use only "int" values, and then re-scale before passing to the "nums" array.

Before adding the "Math.round" the console output was:

```auto
degRange: 245.27999999999997
VM6221:7 degPerDiv: 35.04
VM6221:15 n: 0.0, Degrees: 237.36
VM6221:15 n: 0.2, Degrees: 272.40000000000003
VM6221:15 n: 0.4, Degrees: 307.44000000000005
VM6221:15 n: 0.6, Degrees: 342.4800000000001
VM6221:15 n: 0.8, Degrees: 377.5200000000001
VM6221:15 n: 1.0, Degrees: 412.5600000000001
VM6221:15 n: 1.2, Degrees: 447.60000000000014

```

And "447.60000000000014 + 35.04" is greater than "482.64" and as such the last point could not appear.

---

<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:** [7 March 2024 12:06 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/31 "2024-03-07T12:06:12Z")

</div>

As I haven't tested this approach of generating numbers I cant tell how bulletproof it can be made. Current version is a bit weak .

As it's not my idea, I cant see or think behind the design target fully. Having less ticks is only the outcome. (Having more is possible but not reasonable cos they most probably don't fit)

So if to go with this kind of approach, it takes to improve the math behind it.

---

<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:** [7 March 2024 12:19 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/32 "2024-03-07T12:19:20Z")

</div>

I have changed the function, it looks better, at least for my use case is working

```auto
            generateNumbers:function(min,max,majorDivision){               
                const minDegrees = Math.floor(237.36 * 100); //Scale to try and only using 'int' numbers...
                const maxDegrees = Math.floor(482.64 * 100); //Scale to try and only using 'int' numbers...
                const degRange = maxDegrees-minDegrees
                const degPerDiv = Math.floor(degRange * majorDivision/(max-min));
                let nums = []
                for (let degrees=minDegrees; degrees<=maxDegrees; degrees+=degPerDiv) {
                    const n = ((degrees-minDegrees)/degRange * (max-min) + min).toFixed(this.majorDecimalPlaces);
                    nums.push({r: (degrees / 100), n: n}); //Re-scale to have value in correct format
                }
                return nums 
            },

```

I know that in javascript the 'int' type, does not really exist, internally is a floating-point value, but we can use some tricks to go around...

---

<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:** [7 March 2024 12:27 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/33 "2024-03-07T12:27:03Z")

</div>

As long it is for numbers (tick labels) only, the rounding produces slight misalignment, which I don't think will be noticeable.  
Still, for common usage - it doesn't contain any validation that max value is included.

---

<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:** [7 March 2024 13:55 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/34 "2024-03-07T13:55:02Z")

</div>

> [@arturv2000](#):
>
> `for (let degrees=minDegrees; degrees<=maxDegrees; degrees+=degPerDiv) {`

I haven't had a chance to test it, but I think replacing that with

```auto
const topLimit = maxDegrees + degPerDiv/100
for (let degrees=minDegrees; degrees<=topLimit; degrees+=degPerDiv) {

```

would do the job.

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [7 March 2024 14:23 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/35 "2024-03-07T14:23:55Z")

</div>

Is possible convert this compass for dashboard?

---

<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:** [7 March 2024 15:41 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/36 "2024-03-07T15:41:20Z")

</div>

Which compass?

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [7 March 2024 16:18 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/37 "2024-03-07T16:18:37Z")

</div>

I mean this ....

![compass](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/c/ec9fcff09f60a68b00a0c01acb4d58b6eda5c210.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:** [7 March 2024 16:32 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/38 "2024-03-07T16:32:58Z")

</div>

It is already for the 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:** [7 March 2024 17:43 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/39 "2024-03-07T17:43:28Z")

</div>

@hotNipi I'm using your artless gauge to display inflow/outflow of power on a phone, and wanted to dynamically change the colour of the gauge depending upon `this.value`.  
So if the value is `>0` the gauge should be red (signifying that I'm consuming power), else the gauge should be `#0fb60f` (green, signifying that solar energy is exceeding consumption).

![1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/d/ad29f5d34aa3e25618cafbbcaa80b808687f94c6.jpeg)  
 ![2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/a/7ad52dc09fb9c33c2e2c66b2c0392f88ba63e631.jpeg)

I've tried modifying your code several times today (and several times crashed node-RED!!), do you have any suggestions please?  
I don't need any other colours, just red if `>0` or else green.  
Note that the gauge range is set at 0 - 3000, so both 1000 & -1000 would extend to the same point on the axis, but differentiated due to both the colour and it's value being different.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 March 2024 17:53 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/40 "2024-03-07T17:53:55Z")

</div>

classes, like any other property can be [dynamically bound.](https://vuejs.org/guide/essentials/class-and-style)

e.g.

```auto
<div :class="[{ red: (value > 0 ) }, 'ag-track-foreground']">

```

What this does is apply class `.red` conditionally (e.g. `value > 0`) and unconditionally adds class `ag-track-foreground`

[Previous page](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955.md?page=1)

[Next page](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955.md?page=3)