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

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [5 October 2024 01:49 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/141 "2024-10-05T01:49:18Z")

</div>

I wonder why no one has still asked for a vertical one !  
It is a beautiful guage, is almost identical to the one we have at factory that we use to measure CO2 GV in beverages procesing line although, that is vertical.

---

<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:** [5 October 2024 05:08 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/142 "2024-10-05T05:08:41Z")

</div>

Photo maybe possible? It may give some ideas for better design...

Vertical is a bit tricky. Many compromise decisions needed to make to balance out responsiveness and readability.

---

<div class="post-metadata">

**Author:** ![EI9HEB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ei9heb/32/53406_2.png) [@EI9HEB](https://discourse.nodered.org/u/EI9HEB)\
**Post date:** [23 October 2024 17:57 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/143 "2024-10-23T17:57:15Z")

</div>

Could you make a curved one?  
like on the TS-990 Frequency dial?

 ![kenwood-ts-990s](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/7/07d7b201b9c9e3de216be7d01c08fe7e4ac9c612.jpeg)

---

<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:** [23 October 2024 18:24 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/144 "2024-10-23T18:24:21Z")

</div>

Most probably I can yes.  
Tried to put it in my schedule. With heavy shaking it fits nicely into summer 2027

---

<div class="post-metadata">

**Author:** ![JeromeVISUALS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jeromevisuals/32/40103_2.png) [@JeromeVISUALS](https://discourse.nodered.org/u/JeromeVISUALS)\
**Post date:** [29 March 2025 09:47 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/145 "2025-03-29T09:47:32Z")

</div>

EDIT : Forget it, seems to work like a charm !

Hi,

thanks for sharing, that one looks great !

Quick question, I did not test it yet, can it accommodate negative input values ? Example if I want a range from -60 to +10 ....

Thanks !

---

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [18 August 2025 05:01 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/146 "2025-08-18T05:01:44Z")

</div>

@Giamma … did you ever publish the code for the version of the compass in this post (including color of wind speed)?

---

<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:** [18 August 2025 06:55 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/147 "2025-08-18T06:55:37Z")

</div>

All of the gauges here were created by the inimitable Mr @hotNipi - including the compass (see [post #2](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/2))

---

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [18 August 2025 14:16 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/148 "2025-08-18T14:16:16Z")

</div>

@Steve-Mcl … thanks for correct my misunderstanding & my complements to @hotNipi for a great compass design

@hotNipi … I’m an extreme novice when it comes to CSS. By chance do you have the html/code to post which created the compass in post #64?

---

<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:** [18 August 2025 14:19 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/149 "2025-08-18T14:19:14Z")

</div>

@k5map in case you didnt notice:

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

> [@Steve-Mcl](#):
>
> (see [post #2](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/2))

---

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [18 August 2025 17:38 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/150 "2025-08-18T17:38:02Z")

</div>

I found the code in post #2 but when I use it, it does not look like the compass in post #64. The center parts are different (text, color wind speed, etc)

---

<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:** [18 August 2025 21:02 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/151 "2025-08-18T21:02:41Z")

</div>

The original CSS has been modified to suit the user in #64. Check classes `.txt` & `.txt .small`

---

<div class="post-metadata">

**Author:** ![k5map](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k5map/32/47681_2.png) [@k5map](https://discourse.nodered.org/u/k5map)\
**Post date:** [18 August 2025 21:14 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/152 "2025-08-18T21:14:21Z")

</div>

Ok that makes sense… when I first started down this path to find a compass, wasn’t expecting to ramp up my CSS knowledge (which was near zero) 🙂

---

<div class="post-metadata">

**Author:** ![vikingsraven](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikingsraven/32/49243_2.png) [@vikingsraven](https://discourse.nodered.org/u/vikingsraven)\
**Post date:** [3 October 2025 12:40 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/153 "2025-10-03T12:40:13Z")

</div>

Hi all, sorry to sound dense but how do you get these to work? I've just started using Dashboard 2, and I've been out of the node red scene for a bit. do i just use one template. As before thanks @hotNipi for doing this, i was going to use the older one that were done before but thought id upgrade. if someone cold post a basic flow please so i can look and learn. Thanks in advance!

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [3 October 2025 12:44 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/154 "2025-10-03T12:44:31Z")

</div>

Which gauge[s] do you wish to create? Maybe show us a screenshot of your dashboard 1.

---

<div class="post-metadata">

**Author:** ![vikingsraven](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikingsraven/32/49243_2.png) [@vikingsraven](https://discourse.nodered.org/u/vikingsraven)\
**Post date:** [3 October 2025 12:47 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/155 "2025-10-03T12:47:57Z")

</div>

Not got the old one available, the first one on this page would be helpful

---

<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:** [3 October 2025 13:29 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/156 "2025-10-03T13:29:26Z")

</div>

> [@vikingsraven](#):
>
> the first one on this page would be helpful

It isn't clear which one you mean, can you post a screenshot of the one you want?

---

<div class="post-metadata">

**Author:** ![vikingsraven](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikingsraven/32/49243_2.png) [@vikingsraven](https://discourse.nodered.org/u/vikingsraven)\
**Post date:** [3 October 2025 14:43 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/157 "2025-10-03T14:43:57Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/2/f2e0d62dabd996a2068546a822c4ebf60502faae.png)  
this one , or to be honest any that can get me started please

---

<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:** [3 October 2025 15:35 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/158 "2025-10-03T15:35:48Z")

</div>

Did you take the code and put it in a template node?

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

There more different gauges in posts #2 and #5 - perhaps more (scroll down from the top).

---

<div class="post-metadata">

**Author:** ![vikingsraven](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikingsraven/32/49243_2.png) [@vikingsraven](https://discourse.nodered.org/u/vikingsraven)\
**Post date:** [3 October 2025 16:26 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/159 "2025-10-03T16:26:25Z")

</div>

ok now ive got it, my dashboard wasnt displaying anything. Reset it and they came up first one needed to be set up for the type. Thanks , new it was me!

---

<div class="post-metadata">

**Author:** ![eriku](https://avatars.discourse-cdn.com/v4/letter/e/b3f665/32.png) [@eriku](https://discourse.nodered.org/u/eriku)\
**Post date:** [7 October 2025 19:00 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/160 "2025-10-07T19:00:57Z")

</div>

I have a dashboard that is functioning, and I'd like to experiment with these gauges. I could use a little guidance to get one (any) up and running and have a couple questions:

1. I assume the template code gets pasted into the template window of a template node (I do understand setting the type and UI). Do I replace the default template text entirely?

2. What do I do with the CSS code?

A couple steps for a newbie would be great, or point me where to look. Google hasn't turned up what I am looking for to make this work.

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

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