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

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

</div>

> [@vikingsraven](#):
>
> Really ?

😃 If your senses can handle more, then there is a "whole page" (minus the browser bars) option. You can comment out the sections you want. Set this override `template` to **head** for the whole dashboard, or to a **widget** to limit it to the tab.

```auto
[{"id":"607cb00158428334","type":"ui_template","z":"3cd636ebd5398d6e","group":"d1ae1ccfedfa70c5","name":"Carbon override","order":3,"width":0,"height":0,"format":"<style id=\"HotNipi-gaugeTweeks\">\n\nbody.nr-dashboard-theme {\n /* Carbon-Fiber look */\n background-color: rgb(32, 32, 32);\n background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));\n background-size: 10px 10px, 10px 10px, 10px 5px;\n background-position: 0px 0px, 5px 5px, 0px 0px;\n}\nbody.nr-dashboard-theme md-toolbar {\n /* Carbon-Fiber look */\n background-color: rgb(32, 32, 32);\n background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));\n background-size: 10px 10px, 10px 10px, 10px 5px;\n background-position: 0px 0px, 5px 5px, 0px 0px;\n}\nbody.nr-dashboard-theme md-sidenav {\n /* Carbon-Fiber look */\n background-color: rgb(32, 32, 32);\n background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));\n background-size: 10px 10px, 10px 10px, 10px 5px;\n background-position: 0px 0px, 5px 5px, 0px 0px;\n}\n\n.nr-dashboard-theme md-content {\n /* Carbon-Fiber look */\n background-color: rgb(32, 32, 32);\n background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));\n background-size: 10px 10px, 10px 10px, 10px 5px;\n background-position: 0px 0px, 5px 5px, 0px 0px;\n}\n\n.nr-dashboard-theme md-card {\n /* Carbon-Fiber look */\n background-color: rgb(32, 32, 32);\n background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));\n background-size: 10px 10px, 10px 10px, 10px 5px;\n background-position: 0px 0px, 5px 5px, 0px 0px;\n}\n\n.nr-dashboard-theme ui-card-panel {\n /* Carbon-Fiber look */ \n background-color: rgb(32, 32, 32);\n background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));\n background-size: 10px 10px, 10px 10px, 10px 5px;\n background-position: 0px 0px, 5px 5px, 0px 0px;\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":720,"y":40,"wires":[[]]},{"id":"d1ae1ccfedfa70c5","type":"ui_group","name":"Gauge 1","tab":"20bb081.66afff8","order":1,"disp":false,"width":"8","collapse":false},{"id":"20bb081.66afff8","type":"ui_tab","name":"New Gauge","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/7/a763c615320c6288331db2bcc1868b869ba46f81.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:** [8 September 2021 21:08 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/82 "2021-09-08T21:08:50Z")

</div>

> [@jbudd](#):
>
> These are 3 copies of hotNipi's 6x6 gauge unaltered except for giving the 2nd and 3rd widget a custom class "gauge2" or "gauge3", then the CSS overrides for those classes.

Strangely, I do not see _any_ results from the overrides on my end.

Imported into new flow, nothing changed on my end (I don't think dark mode should matter _ **EDIT** - nope, nether did disabling my rounded corner template_), but just the normal gauges?

Node-Red v2.0.5

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/0/e0e27a64e51f93dfc22d4b4cabfbc6d92c622a00.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:** [8 September 2021 21:21 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/83 "2021-09-08T21:21:49Z")

</div>

You should do a bit research about the CSS selectors.  
[https://www.w3schools.com/cssref/css\_selectors.asp](https://www.w3schools.com/cssref/css_selectors.asp)

```auto
md-card.nr-dashboard-template.gauge2

```

Tries to select `md-card` element which has classes `nr-dashboard-template` and `gauge2`. For sure such thing does not exist.

---

<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:** [8 September 2021 21:25 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/84 "2021-09-08T21:25:14Z")

</div>

My experiment was using node-red-dashboard v3, in which the widgets get an extra class from the editor.  
Are you using v2.30?

With v2.30 you get `md-card class="nr-dashboard-template visible"`  
v3 gives you (e.g.) `md-card class="nr-dashboard-template rainbow visible"`

My CSS styling is applied to, for example, md-card.nr-dashboard-template.rainbow .g-plate

You can also feed msg.className into the gauge template, which allows dynamic style changes such as cycling through a variety of appearances.  
But - if you do so, the gauge value becomes NaN. There may be a fix for this; as a work-around I'm using a flow variable set from the slider and attached to the msg with msg.className.

Sorry, many edits.  
I've seen and admired the dynamic backlight switch example but not studied how it works on v2.30.

---

<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:** [8 September 2021 21:33 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/85 "2021-09-08T21:33:54Z")

</div>

> [@jbudd](#):
>
> My experiment was using node-red-dashboard v3, in which the widgets get an extra class from the editor.  
> Are you using v2.30?

> [@Gunner](#):
>
> Node-Red v2.0.5 (EDIT - with whatever dashboard that includes)

Ahh, got it. I am waiting on further upgrades until after things settle down.

**EDIT** - OK, I forgot that the dashboard was a installable node-contrib 😛 I apparently am running 2.30.0 and no further apparent updates available.

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

---

<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:** [8 September 2021 21:38 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/86 "2021-09-08T21:38:31Z")

</div>

to get dashboard v3: npm i node-red-dashboard@next

I've only installed it on a Pi Zero testbed.

---

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

</div>

Right... I do recall ...now... reading something about a beta... my fault 😊

---

<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:** [8 September 2021 21:48 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/88 "2021-09-08T21:48:30Z")

</div>

> [@jbudd](#):
>
> I've seen and admired the dynamic backlight switch example but not studied how it works.

I am sure it is not quite correctly implemented... I basically needed to create a continuous feedback loop (but only noticeable if I toss in a debug... doesn't seem to actually affect performance at all?)... else every time I switch backgrounds the needles/values reset.

I simply do not have the understanding about proper scope?? or whatever is needed to retain values.

Or perhaps I am sending the payloads incorrectly?? Again, I am really struggling to understand how all that `msg.` stuff works. Reading without clear examples (preferably with diagrams in crayon 🤣 ) only gets my brain (with seemingly dyslexic tendency) so far.

---

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

</div>

If you need to send different commands to the gauge so it can do different things for you, you'll need to tell to the gauge at least something about how to handle this incoming message.

Lets change the label only if `msg.topic` says so:

```auto
scope.$watch('msg', function(msg) {
    if (msg) {
        // Do something when msg arrives
        if(msg.topic && msg.topic == 'value'){// dealing with value (change the needle rotation) only if topic says so
            const v = Math.floor(((msg.payload - min) / (max - min)) * 100);
            document.getElementById('gauge_'+scope.$id).style.setProperty('--gauge-value', v);
            document.getElementById('gauge_val_'+scope.$id).innerText = v;
        }
        if(msg.topic && msg.topic == 'label'){// change label without changing any other thing
            document.getElementById('gauge_label_'+scope.$id).innerText = msg.payload;
        }
    }

```

The code inside `ui_template` runs at the front-end side. If you won it to remember something (state) you'll need to implement such remembering mechanism.  
Multiple options for that at the front-end side. For example [Window.localStorage - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) .

But the other way is to hold all such information at the server side and detect when front-end side needs that information and send it then. Safe way is to detect when dashboard connects or changes the tabs. Using `ui_control` node to catch those events and then read latest state from flow or global context and send it to the gauge.  
Of course the gauge must understand that the message is some kind and deal with it properly, like shown above.

---

<div class="post-metadata">

**Author:** ![magicman](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@magicman](https://discourse.nodered.org/u/magicman)\
**Post date:** [9 September 2021 10:48 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/91 "2021-09-09T10:48:14Z")

</div>

Hi, @hotNipi love the gauges but i use uibuilder not the dashboard . My question is how hard would it be to use the gauges on uibuilder?

---

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

</div>

Same as easy or hard as for dashboard. It is pure html/css so not much tricks here. May be the mayor difference will be the dashboard given container and the css rules applied to it so it takes to respect the situation thus many css rules are written depend on that. So one to one copy will not work but probably not to hard to figure out what it takes.

If to turn it into some front-end library component like Vue, then don't count on me. I have no experiences on those.

---

<div class="post-metadata">

**Author:** ![magicman](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@magicman](https://discourse.nodered.org/u/magicman)\
**Post date:** [9 September 2021 13:43 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/93 "2021-09-09T13:43:36Z")

</div>

thanks for replying @hotNipi i will give it a try 😉

---

<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:** [10 September 2021 07:53 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/94 "2021-09-10T07:53:01Z")

</div>

> [@hotNipi](#):
>
> `if(msg.topic && msg.topic == 'value')`

Just to clarify... I see that you have included `msg.topic` twice in the above.  
Is the first to test if `msg.topic` actually exists, and then if so, the second checks if it equals 'value'?

---

<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:** [10 September 2021 08:21 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/95 "2021-09-10T08:21:42Z")

</div>

Exactly. As the topic is not required parameter of `msg` object, it is reasonable to write custom code just a bit fail safe.  
You don't have to do it, if you know your flows and msg's structure. But if you ever share your code ...

---

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

</div>

I do miss the time to do any fancy stuff for now, but at least I can give the time keeper.

[hotnipi-gauges-with-clock.json](https://discourse.nodered.org/uploads/short-url/zlDujJZCdm2GfJ4srLZcRXcoblA.json) (29.3 KB)

Also the structure of the HTML is slightly changed to give an option to show the label of the element on top of the gauge. (requires some CSS changes also)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/6/06066327c1c8c99904b9133cba92396e70826777.jpeg)

Thank you @nygma2004 for creating [awesome explanatory video](https://youtu.be/qr1BzXzLWe4) of this creature 🙂

---

<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:** [15 September 2021 21:08 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/97 "2021-09-15T21:08:55Z")

</div>

I like how the needle calculations are done by the second... makes a nice analog movement of the minute and hour needles... And yes I DID stare closely 🧐 at the minute one, watching the gradual changes 😇

I may have to swap out my electro-mechanical clicky clocks with tablets now 😆

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [16 September 2021 06:36 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/98 "2021-09-16T06:36:37Z")

</div>

I've been following this thread since the beginning... you guys are absolutely crazy!

I love it. 🤓 😆

---

<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:** [17 September 2021 14:27 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/99 "2021-09-17T14:27:28Z")

</div>

A little bit of play with realism again and it seems like possible to achieve something...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/6/5692b0c1a7d38306d1da557146dcc7bf684f28a8.jpeg)

---

<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:** [21 September 2021 08:56 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/100 "2021-09-21T08:56:57Z")

</div>

Now thats just showing off, as you should!  
awesome!

---

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

</div>

To break the silence and give a bit boost for ideas 😉

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

[hotnipi-gauge-advanced.json](https://discourse.nodered.org/uploads/short-url/kjsc76x3YVhNNgasnfbZusjxQYI.json) (32.1 KB)

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

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