# 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:** 6

<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:** [13 March 2024 16:28 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/101 "2024-03-13T16:28:59Z")

</div>

Possibly, but my scant knowledge of CSS means it will take some time to work out what it will do for me. Luckily there is no urgent requirement so I can let it wash over me for a while.  
Thanks, I suppose 🙂

---

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

</div>

What exactly behind idea of changing the viewport?

---

<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:** [13 March 2024 16:40 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/103 "2024-03-13T16:40:35Z")

</div>

Actually, it is soaking in already I think. By defining the gauge bit of the widget as a transform box then for the rotation it doesn't matter where in the total widget the gauge is.  
The reason one might want to change the viewport is that at the moment it is square, but if one wanted just a 180 degree gauge then the widget could be wider that it is high. At the moment the box is 100x100 so percentages are the same as units, so it isn't an issue.

---

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

</div>

For that situation I think CSS variable should be applied to the outermost element and with that variable the container can behave as needed. And the attributed for the SVG can be changed.

On the phone currently so can't create example or something.

---

<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:** [13 March 2024 17:52 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/105 "2024-03-13T17:52:35Z")

</div>

But if layout management goes too crazy it is very reasonable to have different widgets. As there will be no chance to leave out not used CSS or JavaScript, every instance carry all the data (except for core widgets I'd guess) so that part should be considered also.

---

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

</div>

For stuff like needle rotation in the gauge, where there may be multiple instances of the same template, the CSS really has to be inline in the html I think. Although it is implemented using CSS it isn't really styling, it manages the current state of the gauge.

---

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

</div>

Trying to pass in 'unit' & 'max' dynamically into artless gauge, using `msg.unitinput` & `msg.maxinput`, so that I can change units, such as Wh to kWh, which would be useful to make the full range of readings easily readable.  
I thought the following would be a start, but obviously not!!

```auto
    watch: {
        msg: function(){    
            if(this.msg.payload !== undefined){  
                const v = this.validate(this.msg.payload)                
                if(v === null){
                    return
                }         
                this.value = v
                if(this.type != "artless"){
                    this.lit()
                }
                else{
                    this.changeLine()
                } 
            },
            if(this.msg.unitinput !== undefined){ <------
                   console.log("msg.unitinput exists") <------
                   } <------
          }
    },

```

---

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

</div>

> [@Paul-Reed](#):
>
> ```auto
> if(v === null){
> return
> }       
> 
> ```

Is there an invalid msg.payload possibly? The dreaded early return, which is best avoided.

---

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

</div>

> [@Colin](#):
>
> Is there an invalid msg.payload possibly?

No, the payload is a numerical value and correct.

---

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

</div>

I presume you are getting nothing from the log. That shows in the browser console of course, I guess you know that.  
Add some more logs. At the start of the watch msg put  
~~`console.log({msg: msg})`~~

Edit, sorry,  
`console.log({msg: this.msg})`

---

<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:** [13 March 2024 22:26 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/111 "2024-03-13T22:26:44Z")

</div>

> [@Colin](#):
>
> console.log({msg: this.msg})

Your addition shows that the payload is as expected, but whenever I add my code I get a syntax error;  
 ![syntax](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/d/8d269054da605afff550e51ae5b45da457fa995d.jpeg)

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [14 March 2024 00:24 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/112 "2024-03-14T00:24:41Z")

</div>

[quote="Paul-Reed, post:107, topic:85955"]

```auto
                } 
            **},**
            if(this.msg.unitinput !== undefined){ <------
                   console.log("msg.unitinput exists") <------
                   } <------
          }

```

Try loosing the comma

---

<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:** [14 March 2024 04:43 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/113 "2024-03-14T04:43:54Z")

</div>

Inline CSS has one disadvantage. The end user can't override it with ease. So must be used wisely. As we can't see into users heads and can't know anything about their design targets, the creator just needs to be openminded for everything.

---

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

</div>

> [@hotNipi](#):
>
> Inline CSS has one disadvantage. The end user can't override it with ease.

Certainly. In the case of the needle rotation CSS the position of the centre of the needle is defined in the code and should be defined only once. Therefore any css that is involved in making that happen, such as transform-origin, should be inline in order that it can use the same definition of the required position.

---

<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:** [14 March 2024 08:47 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/115 "2024-03-14T08:47:37Z")

</div>

> [@Buckskin](#):
>
> Try loosing the comma

Ah Ok, thanks Jeff.  
I think that the comma crept in through habit of working with objects !

![watts](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/e/1e4d563f32e0e67d9abcfc8e0a2c1777fb726266.jpeg)

---

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

</div>

Hi,  
this is my new dashboard2 ....

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

and I have this little aesthetic problem.

I show this dashboard in a tablet and the lower part under the gauge hum terreno, uv, ecc. is too high and it's out of the screen.

Where can I modify the gauge code to reduce this 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:** [22 March 2024 09:35 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/117 "2024-03-22T09:35:34Z")

</div>

> [@Giamma](#):
>
> Can I modify the gauge code to reduce this height?

If you look at my examples in post 96, one of them is raised up so that the gauge overlays the label, so you could look at how I have done that.

---

<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:** [22 March 2024 16:20 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/118 "2024-03-22T16:20:44Z")

</div>

Ok, thank you ...

---

<div class="post-metadata">

**Author:** ![thebaldgeek](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thebaldgeek/32/93523_2.png) [@thebaldgeek](https://discourse.nodered.org/u/thebaldgeek)\
**Post date:** [16 April 2024 21:24 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/119 "2024-04-16T21:24:43Z")

</div>

I seem to have missed the instructions after reading this thread twice?  
When I put the first post code and CSS into a template node, this is what I get...

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

The 'testing stuff' is my group name.

EDIT: Found the issue. The first post CSS section does not include `<style>` at the start and `</style>` at the end of the CSS.

Then scroll down to about 1/2 though to the middle of the code and you will find this section:

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

You can adjust the type of gauge here.  
Do a full deploy (dashboard 2.0 does not handle modified deploys very well at the moment).  
With a simple number msg.payload, you can get the gauges to show up.

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

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

---

<div class="post-metadata">

**Author:** ![thebaldgeek](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thebaldgeek/32/93523_2.png) [@thebaldgeek](https://discourse.nodered.org/u/thebaldgeek)\
**Post date:** [17 April 2024 14:35 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/120 "2024-04-17T14:35:18Z")

</div>

Is there a way to give them a little more 'breathing' room between each gauge?

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

They tend to run together.

Also the scale text is not responsive, but I think that's a common issue with Dash v2.0 at the moment.  
Here is how they look on my Pixel 8 Pro.

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

Thanks for the work putting these together @hotNipi and for sharing them.  
They are filling in a lot of gaps in the new dash. (I miss sparklines, have spent a few hours trying to get them going in v2).

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

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