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

<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 18:14 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/41 "2024-03-07T18:14:31Z")

</div>

Tomorrow can take a look.

---

<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 19:42 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/42 "2024-03-07T19:42:02Z")

</div>

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

Thanks Steve, that makes sense, but having crashed node-RED a further 3 times I'm not having much success 🤨  
A further step would be also needed to ensure that the gauge line displays correctly like in my images above because the range is set 0 - 3000 (negative values would need to be multiplied by -1). But... the `ag-value` should of course always display the correct value.

Without these changes, I would need to set the range to -3000W to +3000W, which then spans 6000W, to accommodate both positive & negative values, which would not be easy to visualize on a phone screen.

---

<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 19:44 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/43 "2024-03-07T19:44:26Z")

</div>

So it is intentional that negative value still shows the bar. Cos naturally it shouldn't.

---

<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 19:47 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/44 "2024-03-07T19:47:38Z")

</div>

> [@hotNipi](#):
>
> intentional that negative value still shows the bar

Correct, I would be aware if it was a negative or positive value because of it's colour, and also because the value would be preceded by a -

---

<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 19:49 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/45 "2024-03-07T19:49:16Z")

</div>

Interesting and valuable usage. Let's call it somehow. ZeroCrossing

---

<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 20:20 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/46 "2024-03-07T20:20:23Z")

</div>

Collecting more info. The dead zero is in those conditions positive or negative?

---

<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 20:33 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/47 "2024-03-07T20:33:26Z")

</div>

If you mean to use it with dashboard 1 then yes, it is possible. It takes to adjust code of course. Do you expect me to do so or you will try first and if you struggle then asking sharply pointed questions to get things going and finally achieve the goal that way?

---

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

</div>

> [@hotNipi](#):
>
> The dead zero is in those conditions positive or negative?

I suppose zero should be green (negative), because it means I'm not using any power.

---

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

</div>

Yes, I mean to use it with dashboard 1.....  
I will try first, thank you ....

---

<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:** [8 March 2024 07:53 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/50 "2024-03-08T07:53:35Z")

</div>

Changed (simplified/optimized) code for compass. Take a new copy from original post...

---

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

</div>

ZeroCross done.

---

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

</div>

It doesn't currently change colour when the values are =\<0, is that something I need to add myself, something like @Steve-Mcl's class example above.

---

<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:** [8 March 2024 09:17 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/53 "2024-03-08T09:17:56Z")

</div>

It should work out of box.  
All you need is to turn zeroCross (boolean) to true, define 2 colors and min should be 0

---

<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:** [8 March 2024 09:24 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/54 "2024-03-08T09:24:05Z")

</div>

And I'd quess you'll need to change the code for all instances cos using old and new together may not work properly.

---

<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:** [8 March 2024 09:26 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/55 "2024-03-08T09:26:35Z")

</div>

Ah OK, now I have defined just 2 colours it works great!

![test](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/a/8ab3735b25a4c04cd0aa45c11dffd6cdedcd556e.gif)

Thank you 😃

EDIT it looks much better when it's not as wide (8x1) as the screenshot, 4x1 on a phone looks great.

---

<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:** [8 March 2024 09:30 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/56 "2024-03-08T09:30:36Z")

</div>

Maybe the better solution would be that it takes colors from beginning and from end of colors array so you can have still long list of colors defined which is mostly same for other gauges and you don't need to change that list just for zeroCross. But that's only if that IF is really the case so..

And I'm thinking - the user who likes artless most probably don't use others thus it is maybe reasonable to separate that out from this bundle.

---

<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:** [8 March 2024 09:38 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/57 "2024-03-08T09:38:21Z")

</div>

> [@Paul-Reed](#):
>
> it looks much better when it's not as wide (8x1)

The layout falls apart (not completely but ..) in case of the label text is long. So you know...

---

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

</div>

> [@hotNipi](#):
>
> Maybe the better solution would be that it takes colors from beginning and from end of colors array

Yes, good idea

> [@hotNipi](#):
>
> And I'm thinking - the user who likes artless most probably don't use others thus it is maybe reasonable to separate that out from this bundle

I'm only using artless, but no strong opinions either way.

---

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

</div>

Here's the artless only. Just as to not pollute the dashboard with code you don't actually use.

Includes :

> [@Paul-Reed](#):
>
> Yes, good idea

> **TEMPLATE**
>
> ```auto
> <template>
> <div ref="hng" :class="icon ? 'ag-wrapper-2' : 'ag-wrapper-1'" :style="`--line-color:${colors[0]};`">
> <div v-if="icon" class="ag-icon">
> <v-icon aria-hidden="false">{{icon}}</v-icon>
> </div>
> <div class="ag-content">
> <div class="ag-text">
> <span class="ag-label">{{label}}</span>
> <span class="ag-value">{{formattedValue}}<span class="ag-unit">{{unit}}</span></span>
> </div>
> <div class="ag-track" ref="agLine">
> <div class="ag-track-background"></div>
> <div class="ag-track-foreground" :style="{'width': linesize +'%'}"></div>
> </div>
> <div class="ag-limits">
> <span class="ag-min">{{min}}</span>
> <span class="ag-max">{{max}}</span>
> </div>
> </div>
> </div>
> </template>
> 
> <script>
> export default {
> data(){
> return {
> //Define me here
>                                              
> label:"Artless single", // The label
> icon:"mdi-account", // (type: artless) (optional) the icon
> zeroCross:false,// (type: artless) line changes color depending on value being positive or negative (at least 2 colors must be defined)
> min:0, // Smallest expected value
> max:100, // Highest expected value
> unit:"cm³",// The unit of the measurement           
> animate:true, // Animating led's is not most performant thing in the world.                          
>             
> // Define colors           
> colors:[
> "#0fb60f",
> "#0fb60f",
> "#0fb60f",
> "#0fb60f",
> "#0fb60f",
> "orange",
> "orange",                    
> "red"
> ],            
>             
> //no need to change those
> value:0,          
> inited:false
> }
> },
> 
>    
> methods: {        
> getElement: function(name,base){        
> if(base){
> return this.$refs[name]
> }
> return this.$refs[name][0]
> },
> validate(data){
> let ret
> if(typeof data !== "number"){
> ret = parseFloat(data)
> if(isNaN(ret)){
> console.log("BAD DATA! gauge type:",this.type, "id:",this.id,"data:",data)
> return null
> }   
> }
> else{
> ret = data
> }            
> return ret
> },
> changeLine:function(){
> const line = this.getElement("agLine",true);
> if(!line){
> console.log("no line found")
> return            
> }
>            
> let c = Math.floor(this.colors.length * this.percentage / 100)
> if(c >= this.colors.length){
> c = this.colors.length - 1
> }
> if(c < 0){
> c = 0
> }
> if(this.zeroCross){
> c = this.value > 0 ? (this.colors.length - 1) : 0
> }
> line.style.setProperty('--line-color',this.colors[c])
> 
> }
> },
>        
> watch: {
> msg: function(){    
> if(this.msg.payload !== undefined){  
> const v = this.validate(this.msg.payload)                
> if(v === null){
> return
> }         
> this.value = v
> this.changeLine()              
> }
> }
> },
> computed: {
> formattedValue: function () {
> return this.value.toFixed(2)
> },
> percentage: function(){
> return Math.floor(((this.value - this.min) / (this.max - this.min)) * 100);
> },
> linesize:function(){
> if(this.zeroCross){
> return Math.floor(((Math.abs(this.value) - this.min) / (this.max - this.min)) * 100);           
> }
> else{
> return Math.max(0,this.percentage)
> }
> }
> },
> mounted(){
> const line = this.getElement("agLine",true);
> line.style.setProperty('--line-color',this.colors[0])
> if(this.animate == true){
> if(!line){
> console.log("artless init() no line found")
> return
> }
> line.style.transition = "width 0.5s";
> }
>        
> this.inited = true;
> }
> }
> </script>
> 
> ```

> **CSS**
>
> ```auto
> .ag-wrapper-2 {
> display: grid;
> grid-template-columns: 3em 1fr;
> gap:1em;
> }
> .ag-wrapper-1 {
> display: grid;
> grid-template-columns: 1fr;   
> }
> .ag-icon{
> font-size: 2em;
> display: flex;
> flex-direction: column;
> justify-content: center;        
> }
> .ag-content{
> display: grid;
> grid-template-rows: 1fr 7px 0.75em;
> gap: 2px;
> }
> .ag-text{
> font-size: 1.25em;
> line-height: 1em;
> align-self: end;
> display: flex;
> flex-wrap: wrap;
> justify-content: space-between;
> user-select: none;
> }
> .ag-value{       
> font-weight:bold;
> }
> .ag-unit{
> font-size:.75em;
> font-weight:normal;
> padding-inline-start: 0.15em;
> }
> .ag-limits{
> display: flex;
> justify-content: space-between;
> font-size: .75em;
> line-height: .75em;
> align-content: center;
> flex-wrap: wrap;
> user-select: none;
> }
> 
> .ag-track{
> position:relative;
> display:flex;
> align-items: center;
> width: 100%;
> border-radius: 6px;
> }
> 
> .ag-track-background{
> position:absolute;
> background: var(--line-color,rgb(var(--v-theme-primary)));
> opacity: 0.45;
> width: 100%;
> height: 50%;
> border-radius:inherit;
> }
> .ag-track-foreground{
> position:absolute;
> background-color: var(--line-color,rgb(var(--v-theme-primary)));
> width: 50%;
> height: 100%;
> max-width: 100%;
> border-radius:inherit;
> transition:inherit;
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![vapourlyric](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@vapourlyric](https://discourse.nodered.org/u/vapourlyric)\
**Post date:** [8 March 2024 12:22 UTC](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/60 "2024-03-08T12:22:17Z")

</div>

Awesome work. I don't have much knowledge about HTML/CSS. How would I dynamically change the icon and its colour within a Node-RED flow?

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

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