# First september give-away (let's create one gauge)

**URL:** https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507
**Category:** Dashboard
**Tags:** node-red-dashboard
**Created:** [1 September 2021 17:38 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507 "2021-09-01T17:38:56Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![davidparker](https://avatars.discourse-cdn.com/v4/letter/d/9d8465/32.png) [@davidparker](https://discourse.nodered.org/u/davidparker)
#### Post date: [2 September 2021 20:49 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/21 "2021-09-02T20:49:33Z")

</div>

Mate, you are the man. Meanwhile, back in the BMS world, we have to deal with this awesome gauge from a global, "leading edge" software vendor. Actually, it is comical.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/e/1ed180a8a2e4d4ea6766874a36b0ccefa620b611.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: [2 September 2021 20:56 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/22 "2021-09-02T20:56:06Z")

</div>

Thanks. A lot of things has been changed since the photos were black and white on paper and bicycle had no gears 🙂

---

<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: [2 September 2021 21:07 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/23 "2021-09-02T21:07:20Z")

</div>

There are some rumors that this prototype may be turned onto ui-widget.  
Sharing the prototype most probably last time for people interested to learn from it and make something by hand.

[hotmipi-gauge-improved.json](https://discourse.nodered.org/uploads/short-url/jP7G6DaU8JbrEMMvKtVwy34hOal.json) (41.0 KB)

---

<div class="post-metadata">

### Author: ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)
#### Post date: [2 September 2021 21:59 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/24 "2021-09-02T21:59:59Z")

</div>

I seem to be having issues with multiple (style) templates availed in a tab (but different cards). All gauges get the details from one or other, whichever is added last.

I have tried..

Changing the style id on one style template... but can't find any corresponding id marker in the gauges.

Assigning the style template to node instead of head

And even integrating into a single template (style and gauge)

> [@hotNipi](#):
>
> There are some rumors that this prototype may be turned onto ui-widget.

Great to hear... you will make millions... oh right, open source 😛

---

<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: [2 September 2021 22:18 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/25 "2021-09-02T22:18:44Z")

</div>

Never mind the visuals, the dynamics of the pointer are awesome

---

<div class="post-metadata">

### Author: ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [3 September 2021 02:36 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/26 "2021-09-03T02:36:04Z")

</div>

Love that widget and learning heaps on CSS/HTML since playing with it for last few days.

I'm trying to establish a 2nd needle for "Target Value" and was able to do so with your 1st version but struggle to modify your new version.

You can see the 2nd needle (RED) for "Target Value"

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/9/790472e5c54df7982a24ddbac7ac815b46d4d3b2.jpeg)

Any suggestions on how I can realise the 2nd needle in the new template?

---

<div class="post-metadata">

### Author: ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)
#### Post date: [3 September 2021 02:41 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/27 "2021-09-03T02:41:57Z")

</div>

> [@xx\_Nexus\_xx](#):
>
> but struggle to modify your new version.

> [@xx\_Nexus\_xx](#):
>
> Any suggestions on how I can realise the 2nd needle in the new template?

What "new version/template"? As far as I can tell, all these are basically the same great template that @hotNipi designed, just with various modifications to add colours, tics, adjust fonts etc.

---

<div class="post-metadata">

### Author: ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [3 September 2021 02:55 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/28 "2021-09-03T02:55:56Z")

</div>

Sorry, yes I was referring to these various modifications @hotNipi (which I like and wanna utilize). The structure has slightly changed and I struggle with my limited CSS/HTML skill to get the 2nd needle working again ☹

---

<div class="post-metadata">

### Author: ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)
#### Post date: [3 September 2021 02:58 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/29 "2021-09-03T02:58:46Z")

</div>

Start by showing how you made the addition you have.

---

<div class="post-metadata">

### Author: ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [3 September 2021 03:18 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/30 "2021-09-03T03:18:28Z")

</div>

That was primarily done by replicating the "g-needle" into "g-needle2" in the "gauge-style" component

```auto
.g-needle2 {
    transform: rotate(calc(270deg * calc(var(--g-angle2, 0deg) / 99) - 45deg));
    transition: transform 1s;
    background: #000;
    position: absolute;
    left: 0;
    top: 49%;
    width: 100%;
    height: 2%;
    filter:drop-shadow(0px 1px 3px #00000080);
    background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 15%,var(--needle2-color) 15%,var(--needle2-color) 50%,rgba(0,0,0,0) 50%);
}

```

and than initiating the class "g-needle2"

```auto
                <div class="g-label">Temperature</div>
                <div class="g-needle"></div>

                <div class="g-needle2"></div>

                <div class="g-needle-ring"></div>
                <div id="{{'gauge_val_'+$id}}" class="g-val"></div>

```

and afterwards i modified the MSG handler to update

- g-needle when msg.topic == "Current"
- g-needle2 (Target value) when other msg.topic was sent

```auto
<script>
(function(scope) {
    let min = 15;
    let max = 45;
    scope.$watch('msg', function(msg) {
        if (msg) {
            if (msg.topic=="Current")
            {
            const v = Math.floor(((msg.payload - min) / (max - min)) * 100);
            document.getElementById('gauge_'+scope.$id).style.setProperty('--g-angle', v);
            } else
            {
            const v = Math.floor(((msg.payload - min) / (max - min)) * 100);
            document.getElementById('gauge_'+scope.$id).style.setProperty('--g-angle2', v);
            }
            document.getElementById('gauge_val_'+scope.$id).innerText = msg.payload+"°";  
        }   
  });
})(scope);
</script>

```

---

<div class="post-metadata">

### Author: ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)
#### Post date: [3 September 2021 04:02 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/31 "2021-09-03T04:02:29Z")

</div>

OK, so basically the same thing... just have to look for **all** needle references.

In the `Gauge Template`...

```auto
<div id="{{'gauge_'+$id}}" class="g-container" style="--gauge-value:0; --gauge-value-second:80;--container-size:4; --gn-distance:13; --ga-tick-count:10; --ga-subtick-count:100; --g-unit:'°C'">

```

Also, here the order listed determines which needle is on top.

```auto
<div class="g-needle-second"></div>
<div class="g-needle"></div>

```

And in the `Style Template`

```auto
--needle-color:#001100;
--needle-second-color:#ff0000;

```

```auto
.g-needle {
    transform: rotate(calc(270deg * calc(var(--gauge-value, 0deg) / 100) - 45deg));
    transition: transform 1s;
    background: #000;
    position: absolute;
    left: 0;
    top: 49%;
    width: 100%;
    height: 2%;
    filter:drop-shadow(0px 1px 3px #00000080);
    background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 15%,var(--needle-color) 15%,var(--needle-color) 50%,rgba(0,0,0,0) 50%);
}
.g-needle-second {
    transform: rotate(calc(270deg * calc(var(--gauge-value-second, 0deg) / 100) - 45deg));
    transition: transform 1s;
    background: #000;
    position: absolute;
    left: 0;
    top: 49%;
    width: 100%;
    height: 2%;
    filter:drop-shadow(0px 1px 3px #ff000080);  
    background: linear-gradient(90deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 15%,var(--needle-second-color) 15%,var(--needle-second-color) 50%,rgba(0,0,0,0) 50%);
}

```

I haven't made mine dynamically adjustable yet... just using the preset.

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/d/7d52176bcab38152bc2b3cc4860702839c2262fa.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: [3 September 2021 04:07 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/32 "2021-09-03T04:07:11Z")

</div>

> [@Gunner](#):
>
> `<div id="{{'gauge_'+$id}}" class="g-container" style="--gauge-value:0; --gauge-value-second:80;`

That is correct path to make it work.

Any dynamic thing, you'll later use or change by the css needs to be defined.

---

<div class="post-metadata">

### Author: ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [3 September 2021 04:12 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/33 "2021-09-03T04:12:36Z")

</div>

Thanks a lot ... I guess I have a try on that over the weekend

---

<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: [3 September 2021 04:21 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/34 "2021-09-03T04:21:32Z")

</div>

> [@Gunner](#):
>
> Changing the style id on one style template... but can't find any corresponding id marker in the gauges.

True that this thing is not fully ready to be easily customized, but that's the beauty of handcraft 🙂

See at my latest shared template ...

```auto
<style>
    #{{'gauge_'+$id}} .g-tick:nth-child(n+9){
        background: linear-gradient(90deg,

```

Every gauge can override or add css to be isolated. The main css should have only common or default rules.  
If you'll need to modify or override some rule, add scope id to its element definition.

` <div id="{{'gauge_val_'+$id}}" class="g-val"></div>`

So you can reach it like shown above.

---

<div class="post-metadata">

### Author: ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [3 September 2021 04:55 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/35 "2021-09-03T04:55:46Z")

</div>

Stupid me... I forgot to assign the color for 2nd needle ☹ ... otherwise it was working already

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/7/47637da9586deb625dac593b428217818c1267eb.jpeg)

thx a lot .. even it works dynamically for target 😉

---

<div class="post-metadata">

### Author: ![rko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rko/32/45807_2.png) [@rko](https://discourse.nodered.org/u/rko)
#### Post date: [3 September 2021 11:54 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/36 "2021-09-03T11:54:23Z")

</div>

We should start something like weekly challenges! 🤓

---

<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: [3 September 2021 11:55 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/37 "2021-09-03T11:55:55Z")

</div>

As long the winner is community 😉

---

<div class="post-metadata">

### Author: ![rko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rko/32/45807_2.png) [@rko](https://discourse.nodered.org/u/rko)
#### Post date: [3 September 2021 11:58 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/38 "2021-09-03T11:58:34Z")

</div>

The winner gets to choose the next challenge or sth like that!

**Edit** : Or, you're a winner if you join lol

---

<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 September 2021 12:29 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/39 "2021-09-03T12:29:58Z")

</div>

I have been struggling to make a pointy needle.  
Not hard to make it asymmetric with a single tweek to g-needle background:  
 ![Untitled 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/f/7f1a89c5599ac06c2c27ff5fa93c50ce64bcb4d6.jpeg)

```auto
background: linear-gradient(30deg,rgba(2,0,36,0) 0,rgba(0,0,0,0) 15%,var(--needle-color) 15%,var(--needle-color) 50%,rgba(0,0,0,0) 50%);

```

Symmetry is eluding me. I do know how to spell CSS but my approach is to find someone else's work and pursue it with forks and hope.  
This is the best so far and it doesn't stand up to close inspection:  
 ![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/c/2c7cedfa34e50b00eb0ec117e6732c0edd497899.jpeg)

```auto
.g-needle::before {
    content: '';
    width: 0;
    height: 0;
    border: 1px solid #232523;
        border-top-width: 1px;
        border-right-color: rgb(35, 37, 35);
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-color: rgb(35, 37, 35);
        border-left-width: 1px;
    border-top-width: 0.9em;
    border-right-color: rgb(35, 36, 37);
    border-right-width: 0.9em;
    border-bottom-width: 0.9em;
    border-left-color: rgb(35, 36, 37);
    border-left-width: 0.9em;
    border-width: 0 4px 19px 3px;
    border-left-color: #e9151500;
    border-right-color: #0000;
    position: relative;
    top: -116%;
    left: 11%;
    transform: rotate(270deg);
    display: block;
}

```

Can anyone suggest a _good_ way to tweek the pointer? With explanations would be perfect!  
Edit: I know some of those declarations are unnecessary/erroneous but when I try removing some the point tends to vanish.

---

<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: [3 September 2021 12:59 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/40 "2021-09-03T12:59:44Z")

</div>

There isn't any easy solution. Mostly small triangles made with borders but as the needle is thinner for smaller gauges - the border with should be calculated but unfortunately border with can't take percentages and you cant use `calc()` so common solution must be something else.

Have no time right now to go deeper.

[Previous page](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507.md?page=1)

[Next page](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507.md?page=3)