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

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [3 September 2021 18:25 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/41 "2021-09-03T18:25:50Z")

</div>

Sorry, I am coming late to this party, but this is absolutely freakin fantastic! Amazing what is possible in HTML and CSS.

---

<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 18:33 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/42 "2021-09-03T18:33:07Z")

</div>

Oh you are far from being late 😃 There is plenty of bits and bytes left around, enjoy 😃

---

<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 19:02 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/43 "2021-09-03T19:02:07Z")

</div>

This is probably best what I can figure out with easy tricks.

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

```auto
.g-needle:before {
    left: 5%;
    top: calc(var(--container-size) * 1%);
    content: "◄";
    position: absolute;
    line-height: 0;
    font-size: calc(var(--container-size) * 35%);
    color: var(--needle-color);
}

```

By making sharp pointer it is reasonable also to remove the rounding from angle calculations when message arrives. (was for testing purposes anyway)

```auto
const v = Math.floor((val - min) / (max - min)) * 100);
// should be
const v = (val - min) / (max - min)) * 100;

```

---

<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 21:45 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/44 "2021-09-03T21:45:06Z")

</div>

I don't know if I can read the stats well but based on my experiences it shows interest above the average.

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

Thus I'm going more serious about turning it to the ui node.  
Thinking about the creation process of my previous nodes I see many sides screaming for improvement. Mostly the contribution starts with the creator needs and after the release there will be many many versions with improvements in many areas. When it comes to add features - many times it comes with needs to rewrite cos the initial idea was far from what it should be.

I see easy way to get rid of luck of ideas. It will be to involve more brains. More visions, more potential use cases.

So why not to open the node's creation process before to write any line of code. If there will be more brains to move the thing in right direction before it runs into mud, I see much higher quality of outcome.

Of course - any regular type of contribution is welcome - writing the code or documents, do the beta testing ...

So I'm asking simple question - how do you feel about to be part of creating that gauge? (still nameless - so first task already waiting)

---

<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 22:13 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/45 "2021-09-03T22:13:51Z")

</div>

> [@hotNipi](#):
>
> ```auto
> const v = Math.floor((val - min) / (max - min)) * 100);
> // should be
> const v = (val - min) / (max - min)) * 100;
> 
> ```

Slight typo - spurious ) after (max-min)

I think I see why you used a largeish triangle, a smaller one shows slight misalignment which I can't fix for all gauge sizes.

Happy to help but my skill level isn't up to the coding. I can opine on appearance though.

Some wild suggestions for widget settings, I have no idea if these could be made variable:  
Adjustable border-radius 0 to 50%  
Fasteners: rivets/slot head/square drive screws/none  
Background image (texture): Choice of a couple of SVG images/none  
Be able to show 360 degrees and hour/minute/second hands.  
Should pointer(s) be an SVG image?  
Various colour options.  
A "backlight" layer that can be turned on to draw attention to a particular gauge.

Here's square drive screws (only really visible on 6x6 gauge):  
 ![Untitled 4](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/f/4f23d7d11ca9f522f3b53528dabf8b0a425f6b1e.jpeg)

```auto
.g-rivet::before {
    content: '';
    position: absolute;
    left: 43%;
    top: 50%;
    width: calc(var(--container-size) * 8%);
    height: calc(var(--container-size) * 8%);
    box-shadow: inset 0px 1px 2px #222;
    transform: translate(-50%, -50%);
    border-radius: 0;
}

```

But really it's an amazing piece of design work already. Thanks hotNipi.

---

<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 22:22 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/46 "2021-09-03T22:22:07Z")

</div>

Happy cake day @jbudd  
_Marking the post with some ideas collected_

---

<div class="post-metadata">

**Author:** ![SonoraTechnical](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sonoratechnical/32/20033_2.png) [@SonoraTechnical](https://discourse.nodered.org/u/SonoraTechnical)\
**Post date:** [3 September 2021 22:30 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/47 "2021-09-03T22:30:17Z")

</div>

You all are talented folks!

---

<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 22:30 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/48 "2021-09-03T22:30:29Z")

</div>

> [@jbudd](#):
>
> Here's square drive screws (only really visible on 6x6 gauge):

That's the problem I already met. They don't scale down too well.

---

<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 22:48 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/49 "2021-09-03T22:48:45Z")

</div>

> [@jbudd](#):
>
> Happy to help but my skill level isn't up to the coding.

This is subject of change I hope 😛

---

<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:** [4 September 2021 09:18 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/50 "2021-09-04T09:18:43Z")

</div>

Well, I would like to participate (OK, I guess I have already) but I am still quite confused on how scope, msg. types and topics are all layered out... I am fairly amazed I have lasted this long 😛

On that note... I made a switchable backlight (funny how we like emulating light on a display that already produces such by it's very nature)... _ **and I know I did it totally wrong** _... As in there is a slight visual glitch during which the backplate switches between _undefined_ and what I am asking for it to do.

I honestly tried all the "proper" methods (_see further below_) that I Googled on dynamically changing the contents of a `<div>` but I just couldn't seem to get it to work.

And so I improvised 😇

`<div class={{msg.backlight}}>` with a one-shot inject to start it off correctly...

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/3/13ee23eadcc9d4fb318127b2f5deb9ba2da21c5c.jpeg) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/4/f42b1594e2adb0f22cad8171c98aa74413509360.jpeg)

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

```auto
[{"id":"6378be4c0f510f14","type":"ui_template","z":"3cd636ebd5398d6e","group":"d1ae1ccfedfa70c5","name":"Fansnazzy Gauge","order":2,"width":6,"height":6,"format":"<style>\n #{{'gauge_'+$id}} .g-tick:nth-child(n+6) {\n background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2%, rgb(31 148 0 / 80%) 2%, rgb(31 148 0 / 80%)\n 10%, rgba(0, 0, 0, 0) 10%);\n height: 1.3px;\n margin-bottom: -1.3px;\n }\n #{{'gauge_'+$id}} .g-tick:nth-child(n+9) {\n background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2%, rgb(255 0 0 / 60%) 2%, rgb(255 0 0 / 60%) 10%, rgba(0, 0, 0, 0) 10%);\n height: 1.3px;\n margin-bottom: -1.3px;\n }\n #{{'gauge_'+$id}} .g-subtick:nth-child(n+46) {\n background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2%, rgb(31 148 0 / 80%) 2%, rgb(31 148 0 / 80%), 6%, rgba(0, 0, 0, 0) 6%);\n height: 1.3px;\n margin-bottom: -1.3px;\n }\n #{{'gauge_'+$id}} .g-subtick:nth-child(n+73) {\n background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2%, rgb(255 0 0 / 40%) 2%, rgb(255 0 0 / 40%) 6%, rgba(0, 0, 0, 0) 6%);\n height: 1.3px;\n margin-bottom: -1.3px;\n }\n #{{'gauge_'+$id}} .g-num:nth-child(n+6) {\n color: #028606d1;\n }\n #{{'gauge_'+$id}} .g-num:nth-child(n+9) {\n color: #dc080899;\n }\n</style>\n\n<div id=\"{{'gauge_'+$id}}\" class=\"g-container\" style=\"--gauge-value:0; --container-size:6; --gn-distance:14; --ga-tick-count:10; --ga-subtick-count:100\">\n <div id=\"bgr\" class=\"g-body\">\n <div class=\"g-ring\">\n <div class=\"g-rivets\">\n <div class=g-rivet></div>\n <div class=g-rivet></div>\n <div class=g-rivet></div>\n <div class=g-rivet></div>\n </div>\n\n <div class={{msg.backlight}}>\n <div class=\"g-ticks\">\n <div class=\"g-tick\" style=\"--ga-tick:1;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:2;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:3;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:4;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:5;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:6;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:7;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:8;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:9;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:10;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:11;\"></div>\n </div>\n <div class=\"g-ticks\">\n <div class=\"g-subtick\" style=\"--ga-tick:2;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:3;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:4;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:5;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:6;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:7;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:8;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:9;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:10;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:12;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:13;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:14;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:15;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:16;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:17;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:18;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:19;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:20;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:22;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:23;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:24;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:25;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:26;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:27;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:28;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:29;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:30;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:32;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:33;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:34;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:35;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:36;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:37;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:38;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:39;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:40;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:42;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:43;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:44;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:45;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:46;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:47;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:48;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:49;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:50;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:52;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:53;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:54;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:55;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:56;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:57;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:58;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:59;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:60;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:62;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:63;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:64;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:65;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:66;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:67;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:68;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:69;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:70;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:72;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:73;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:74;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:75;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:76;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:77;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:78;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:79;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:80;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:82;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:83;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:84;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:85;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:86;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:87;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:88;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:89;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:90;\"></div>\n \n <div class=\"g-subtick\" style=\"--ga-tick:92;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:93;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:94;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:95;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:96;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:97;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:98;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:99;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:100;\"></div>\n </div>\n <div class=\"g-nums\">\n <div class=\"g-num\" style=\"--ga-tick:1;\" >-40</div>\n <div class=\"g-num\" style=\"--ga-tick:2;\">-30</div>\n <div class=\"g-num\" style=\"--ga-tick:3;\">-20</div>\n <div class=\"g-num\" style=\"--ga-tick:4;\">-10</div>\n <div class=\"g-num\" style=\"--ga-tick:5;\">0</div>\n <div class=\"g-num\" style=\"--ga-tick:6;\">10</div>\n <div class=\"g-num\" style=\"--ga-tick:7;\">20</div>\n <div class=\"g-num\" style=\"--ga-tick:8;\">30</div>\n <div class=\"g-num\" style=\"--ga-tick:9;\">40</div>\n <div class=\"g-num\" style=\"--ga-tick:10;\">50</div>\n <div class=\"g-num\" style=\"--ga-tick:11;\">60</div>\n </div>\n <div class=\"g-label\">Temperature</div>\n <div class=\"g-needle-second\"></div>\n <div class=\"g-needle\"></div>\n <div class=\"g-needle-ring\"></div>\n <div id=\"{{'gauge_val_'+$id}}\" class=\"g-val\"></div>\n <div id=\"{{'gauge_val_second'+$id}}\" class=\"g-val-second\"></div>\n </div>\n </div>\n </div>\n</div>\n<script>\n(function(scope) {\n let min = -40;\n let max = 60;\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n\n const v = Math.floor(((msg.payload - min) / (max - min)) * 100);\n document.getElementById('gauge_'+scope.$id).style.setProperty('--gauge-value', v);\n document.getElementById('gauge_val_'+scope.$id).innerText = msg.payload +\"°C\";\n \n if (msg.marker == true) {\n const v = Math.floor(((msg.payload - min) / (max - min)) * 100);\n document.getElementById('gauge_'+scope.$id).style.setProperty('--gauge-value-second', v);\n }\n }\n \n });\n})(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":730,"y":360,"wires":[[]]},{"id":"a180143b31d48a12","type":"ui_template","z":"3cd636ebd5398d6e","group":"d1ae1ccfedfa70c5","name":"gauge-style","order":1,"width":6,"height":1,"format":"<style id=\"hotNipi-gauge\">\n:root{\n --needle-color:#001100;\n --needle-second-color:#ff0000;\n --red-ticks:9;\n}\n.md-button {\n border-radius:0.8em;\n color: var(--text-color);\n}\n.g-container {\n padding-top: 3px;\n padding-bottom: 3px;\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n user-select:none;\n}\n \n.g-body {\n width: 98%;\n height: 98%;\n border-radius: 15%;\n position: relative;\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: center;\n box-shadow: 0px 5px 8px #00000045;\n background: linear-gradient(0deg, rgba(78,78,78,1) 0%, rgba(215,215,215,1) 99%, rgba(236,236,236,1) 100%);\n}\n\n.g-body::before { \n content: \"\";\n background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgogIDxyZWN0IHdpZHRoPSc1JyBoZWlnaHQ9JzUnIGZpbGw9J3doaXRlJy8+CiAgPHBhdGggZD0nTTAgNUw1IDBaTTYgNEw0IDZaTS0xIDFMMSAtMVonIHN0cm9rZT0nIzg4OCcgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPg==\"); \n background-repeat: repeat;\n position: absolute;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n opacity: 0.1;\n border-radius:15%;\n}\n\n.g-ring {\n width: 94%;\n height: 94%;\n border-radius: 50%;\n position: relative;\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: center;\n background: linear-gradient(180deg, rgba(78,78,78,1) 0%, rgba(215,215,215,1) 99%, rgba(236,236,236,1) 100%);\n}\n.g-plate {\n overflow: hidden;\n width: 93%;\n height: 93%;\n border-radius: 50%;\n position: relative;\n box-shadow: inset 0 0 15px #000000a3;\n background: radial-gradient(circle, #dd8400 3%, rgb(196 205 209) 1%, rgb(177 183 186) 40%, rgb(191 193 194) 100%);\n}\n\n.g-plate-backlight {\n overflow: hidden;\n width: 93%;\n height: 93%;\n border-radius: 50%;\n position: relative;\n box-shadow: inset 0 0 10px yellow;\n background: radial-gradient(circle, #ed9400 3%, rgb(255, 255, 255) 1%, rgb(255, 255, 158) 40%, rgb(148, 154, 160) 100%);\n\n}\n\n.g-sector-high {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 50%;\n left: 50%;\n background: #ff00004f;\n transform-origin: 0 0;\n transform: rotate(328deg) skew(12deg, 23deg);\n}\n.g-ticks {\n position: absolute;\n top:0;\n left:0;\n width: 100%;\n height: 100%;\n filter: drop-shadow(2px 4px 6px black);\n}\n.g-tick {\n transform: rotate(calc(calc(270deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(270deg / var(--ga-tick-count)) + 45deg)));\n background: #000;\n position: relative;\n left: 0;\n top: 50%;\n width: 100%;\n height: 1px;\n margin-bottom: -1px;\n background: linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2%,rgb(0 0 0 / 60%) 2%,rgb(0 0 0 / 60%) 10%,rgba(0,0,0,0) 10%);\n}\n.g-subtick {\n transform: rotate(calc(calc(270deg / var(--ga-subtick-count)) * var(--ga-tick) - calc(calc(270deg / var(--ga-subtick-count)) + 45deg)));\n background: #000;\n position: relative;\n left: 0;\n top: 50%;\n width: 100%;\n height: 1px;\n margin-bottom: -1px;\n background: linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2%,rgb(0 0 0 / 40%) 2%,rgb(0 0 0 / 40%) 6%,rgba(0,0,0,0) 6%);\n}\n\n.g-num {\n position: absolute;\n top: 50%;\n left: 50%;\n text-align: center;\n transform: translate(-50%, -50%) rotate(calc(calc(270deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(270deg /\n var(--ga-tick-count)) + 45deg))) translate(calc(-1px * var(--container-size) * var(--gn-distance))) rotate(calc(calc(270deg / var(--ga-tick-count)) * var(--ga-tick) *-1 -\n calc(calc(270deg / var(--ga-tick-count))*-1 - 45deg)));\n}\n\n.g-nums {\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n color: #000000a1;\n font-size: calc(var(--container-size) * 20%);\n font-weight: 500;\n filter: drop-shadow(2px 4px 10px black);\n}\n.g-needle {\n transform: rotate(calc(270deg * calc(var(--gauge-value, 0deg) / 100) - 45deg));\n transition: transform 1s;\n background: #000;\n position: absolute;\n left: 0;\n top: 49%;\n width: 100%;\n height: 2%;\n filter:drop-shadow(0px 1px 3px #00000080);\n 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%);\n}\n.g-needle-second {\n transform: rotate(calc(270deg * calc(var(--gauge-value-second, 0deg) / 100) - 45deg));\n transition: transform .5s;\n background: #000;\n position: absolute;\n left: 0;\n top: 49%;\n width: 100%;\n height: 1%;\n filter:drop-shadow(0px 1px 3px #ff000080);\n 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%);\n}\n.g-needle-ring {\n position: absolute;\n width: calc(var(--container-size) * 1.5%);\n height: calc(var(--container-size) * 1.5%);\n top: 50%;\n left: 50%;\n background: var(--needle-color);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 1px 4px #0000009c;\n}\n.g-val{\n position: absolute;\n text-align: center;\n left: 50%;\n bottom: 8%;\n width: 80px;\n transform: translateX(-50%);\n font-family: monospace;\n font-size: calc(var(--container-size) * 40%);\n color: #000000a1;\n filter: drop-shadow(2px 3px 2px #00000050);\n}\n.g-val-second{\n position: absolute;\n text-align: center;\n left: 50%;\n bottom: 8%;\n width: 80px;\n transform: translateX(-50%);\n font-family: monospace;\n font-size: calc(var(--container-size) * 40%);\n color: #ff0000a1;\n filter: drop-shadow(2px 3px 2px #ff000050);\n}\n.g-label{\n position: absolute;\n text-align: center;\n left: 50%;\n top: 58%;\n width: 100%;\n transform: translateX(-50%);\n font-family: monospace;\n font-size: calc(var(--container-size) * 18%);\n color: #000000a1;\n filter: drop-shadow(2px 3px 2px #00000080);\n}\n.g-label::after{\n content: var(--g-unit);\n font-size: clamp(1em,calc(var(--container-size) * 40%),1.5em);\n position: absolute;\n left: 0;\n top: 100%;\n width: 100%;\n height: 100%;\n}\n.g-rivets{\n position: absolute;\n left:0;\n top:0;\n width: 100%;\n height: 100%;\n}\n\n.g-rivet {\n position: absolute;\n width: calc(var(--container-size) * 2px);\n height: calc(var(--container-size) * 2px);\n border-radius: 50px;\n background: linear-gradient(135deg, #adadad 0%,#d3d3d3 51%,#d1d1d1 68%,#8c8c8c 100%);\n box-shadow: 0px 2px 4px #000, -1px -1px 5px rgba(0,0,0,0.2);\n border: 1px solid rgba(255,255,255,0.1);\n}\n.g-rivet:nth-child(1){\n top:calc(var(--container-size) * 1.5px);\n left:calc(var(--container-size) * 1.5px);\n}\n.g-rivet:nth-child(2){\n top:calc(var(--container-size) * 1.5px);\n right:calc(var(--container-size) * 1.5px);\n}\n.g-rivet:nth-child(3){\n bottom:calc(var(--container-size) * 1.5px);\n left:calc(var(--container-size) * 1.5px);\n}\n.g-rivet:nth-child(4){\n bottom:calc(var(--container-size) * 1.5px);\n right:calc(var(--container-size) * 1.5px);\n}\n\n.g-rivet::before {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n width: calc(var(--container-size) * 10%);\n height: calc(var(--container-size) * 10%);\n box-shadow: inset 0px 1px 2px #222;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n border-bottom: 1px solid rgba(255,255,255,0.3);\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":710,"y":320,"wires":[[]]},{"id":"c1e287a023673ce9","type":"ui_slider","z":"3cd636ebd5398d6e","name":"","label":"","tooltip":"","group":"d1ae1ccfedfa70c5","order":4,"width":4,"height":1,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":"-40","max":"60","step":1,"x":690,"y":440,"wires":[["6378be4c0f510f14","5b945c51ed48adf3"]]},{"id":"d0543c1cb1cc7656","type":"change","z":"3cd636ebd5398d6e","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"marker","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":510,"y":440,"wires":[["c1e287a023673ce9"]]},{"id":"e74c2999cd495d22","type":"ui_button","z":"3cd636ebd5398d6e","name":"Marker Button","group":"d1ae1ccfedfa70c5","order":3,"width":1,"height":1,"passthru":true,"label":"","tooltip":"","color":"red","bgcolor":"grey","icon":"fa-check","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":300,"y":440,"wires":[["d0543c1cb1cc7656"]]},{"id":"5b945c51ed48adf3","type":"ui_switch","z":"3cd636ebd5398d6e","name":"Backlight Switch","label":"","tooltip":"","group":"d1ae1ccfedfa70c5","order":5,"width":1,"height":1,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-toggle-on fa-2x","oncolor":"yellow","offvalue":"false","offvalueType":"bool","officon":"fa-toggle-off fa-2x","offcolor":"lightyellow","animate":false,"x":300,"y":480,"wires":[["53af5a6d9334cd29"]]},{"id":"53af5a6d9334cd29","type":"function","z":"3cd636ebd5398d6e","name":"","func":"let setting;\nif (msg.payload == true) {\n setting = \"g-plate-backlight\";\n } else {\n setting = \"g-plate\";\n }\nmsg = {payload: setting};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":480,"wires":[["349594103704d87c"]]},{"id":"d7a1ccc17a933644","type":"inject","z":"3cd636ebd5398d6e","name":"","props":[{"p":"payload"},{"p":"backlight","v":"g-plate","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":510,"y":380,"wires":[["c1e287a023673ce9","e74c2999cd495d22"]]},{"id":"349594103704d87c","type":"change","z":"3cd636ebd5398d6e","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"backlight","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":510,"y":520,"wires":[["c1e287a023673ce9"]]},{"id":"d1ae1ccfedfa70c5","type":"ui_group","name":"Group 1","tab":"20bb081.66afff8","order":1,"disp":false,"width":"6","collapse":false},{"id":"20bb081.66afff8","type":"ui_tab","name":"New Gauge","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

But ohhh those visual glitches whenever the value changes ☹  
I will keep working at the proper way... I am sure I was just missing something silly... for hours and hours and hours... 😖

```auto
<div id="backlight_state" class="<foo>"></div>

if (something==this) {
document.getElementById("backlight_state").innerHTML = "foo1";
} else {
document.getElementById("backlight_state").innerHTML = "foo2";
}
// ??? whyunoworkyoubleeping... ???

```

Oh, ya... I also added in the marker button (done properly I think?) that when pressed, sends the marker needle to the current needle position (_I preferred having it in-behind, with the slight red glow indicating it's presence_)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/a/8a9ef804ea9b072b552e40663f90dbab243ff200.jpeg) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/2/3236cadd8efdb1cddced943c56e7628f7e58b845.jpeg)

---

<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:** [4 September 2021 10:23 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/51 "2021-09-04T10:23:30Z")

</div>

Nice work guys, it looks really good.  
However, I don't think that the square industrial bezel would look right in my dashboard which uses other UI features, so would probably need to try and modify the bezel to be a more contemporary slim round bezel instead.

---

<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:** [4 September 2021 13:04 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/52 "2021-09-04T13:04:59Z")

</div>

I'm sure you've already done this, but a couple of changes:

 ![Untitled 5](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/6/26bb30a3f46c1ce7d0ae385dd296d83328dd0a4b.jpeg)

```auto
[{"id":"8bfacc2fe6bf03d4","type":"ui_template","z":"8d3aebaae0ecfcee","group":"3ca910b5.3d50a","name":"override","order":1,"width":0,"height":0,"format":"<style id=\"HotNipi-gaugeTweeks\">\n.g-body {\n border-radius: 50%;\n}\n\n.g-body::before { \n border-radius:50%;\n}\n.g-rivets {\n display:none;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":460,"y":220,"wires":[[]]},{"id":"3ca910b5.3d50a","type":"ui_group","name":"4","tab":"20bb081.66afff8","order":3,"disp":false,"width":"4","collapse":false},{"id":"20bb081.66afff8","type":"ui_tab","name":"Ohh","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<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:** [4 September 2021 19:09 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/53 "2021-09-04T19:09:46Z")

</div>

See 🙃 Already I hav no need to do much. Things going in right direction. Love it. 🍻

---

<div class="post-metadata">

**Author:** ![LosinIt](https://avatars.discourse-cdn.com/v4/letter/l/439d5e/32.png) [@LosinIt](https://discourse.nodered.org/u/LosinIt)\
**Post date:** [4 September 2021 19:48 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/54 "2021-09-04T19:48:43Z")

</div>

Different strokes...

I have avoided the NR Dashboard because I don't like the appearance of the components. If ALL the components looked like this gauge I'd be all over it!

---

<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:** [4 September 2021 19:53 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/55 "2021-09-04T19:53:33Z")

</div>

@jbudd - That's better (for me!) thanks.  
Are your scale numbers placed differently to hotnipi's?

![dial](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/0/70ab56d80824e7a4f7778e18c5b899906fb2ea00.jpeg)

---

<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:** [4 September 2021 20:13 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/56 "2021-09-04T20:13:39Z")

</div>

> [@Paul-Reed](#):
>
> scale numbers placed differently

That can be adjusted in this line

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/2/72b58546e7f403e5f176121a96dc956504b319a2.png)  
But is not scaled automatically when changing card size. AKA adjust to card size according to taste.

---

<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:** [4 September 2021 20:29 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/57 "2021-09-04T20:29:52Z")

</div>

Don't adjust with that. That should be always same as the widget configured size is. There is more dependencies and the outcome may be wrong. Find proper class for element and adjust the font size calculation rule.. Im on phone so cant be more specific right now. Was even in g-num or g-nums ...

---

<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:** [4 September 2021 20:32 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/58 "2021-09-04T20:32:31Z")

</div>

No changes to the numbers. I took hotNipi's code that was on my computer and just added the CSS I posted. Might not have been the most recent version though.

---

<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:** [4 September 2021 20:40 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/59 "2021-09-04T20:40:29Z")

</div>

> [@hotNipi](#):
>
> That should be always same as the widget configured size is

I guess that was my point... some of my gauges are in a small card (container?), others in a larger one, some combined, and that seemed the only way to make the numbers line up... as the calculations seem to feed from that `container-size:`

`font-size: calc(var(--container-size) * 20%);`

But I guess fine tuning is better with the percentages?

---

<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:** [4 September 2021 20:44 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/60 "2021-09-04T20:44:02Z")

</div>

Placement-- the distantce to ticks can be adjjuste wit gn-distance. It is kind of arbitrary number but change the value and see the result

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

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