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

<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:** [5 September 2021 18:00 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/61 "2021-09-05T18:00:38Z")

</div>

With that in mind, is there any way to automatically determine the `ui-card-size`?

---

<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:** [5 September 2021 18:22 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/62 "2021-09-05T18:22:41Z")

</div>

I think that what hotNipi means is that the overall balance is determined by the `--container-size`, hence as you noted it must be the same as the `ui-card-size`, but other sizes must be determined individually i.e if you want to change the font size of any the text (or tick size) it has to be done in the relevant class. As you noted, by altering the percentage (or adding a fixed value).

The only handy addition would be being able to have the `--container-size` adjusted automatically to align with the `ui-card-size`

On my system if I go below a `ui-card-size` less than 2 (apart from being too small to read without some significant magnification) the numbers overwrite the ticks, the cause of which I think is the fixed font sizes in `g-label::after`

---

<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:** [6 September 2021 04:05 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/63 "2021-09-06T04:05:05Z")

</div>

I think 2x2 will be too small for such kind of design anyway. Readability goes down below zero.  
Card size can be read (as any element property), but then it takes to wait scope initialization and make fist initialization and draw after that. Makes code unreasonably complicated but giving not too much ...  
But the card size is known property for regular ui widgets so that is not obstacle.

---

<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:** [6 September 2021 11:12 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/64 "2021-09-06T11:12:26Z")

</div>

wow this is awesome @hotNipi cudos!  
thought must have carbon, cant claim any credit for the carbon look, it was from this stack overflow post by Harry [https://stackoverflow.com/questions/34556024/how-to-do-a-true-carbon-fiber-css-background](https://stackoverflow.com/questions/34556024/how-to-do-a-true-carbon-fiber-css-background)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/f/ef14ed4465b62080481b0050f7781d3a3f07cd35.png)  
This will make some pretty cool Guis.

```auto
    background color:rgb(32,32,32);
    background-image:linear-gradient(45deg, rgba(0,0,0,1) 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));
    background-size: 10px 10px, 10px 10px, 10px 5px;
    background-position: 0px 0px, 5px 5px, 0px 0px;

```

keep up the good work.  
Thanks all

---

<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:** [6 September 2021 11:39 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/65 "2021-09-06T11:39:26Z")

</div>

The "Realism" in design brings up couple of questions.  
In real world such gauges are fabricated to measure some kind of environmental property. So they carry only the information which is common of that kind of measurement. (and manufacturer logo or something like that)

With the dashboard design, things are a bit different. To show some measurement - the source of that measurement should be tied to the value or should be at least easily identified.

Widgets for dashboard often provide such fields and it helps in many steps. Design is art-proven, may help with space conservation and so on.

So here's the question - ...  
_(I left the question open deliberately to not cut out any option to think as far out of box as you like)_

---

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

</div>

> [@vikingsraven](#):
>
> This will make some pretty cool Guis.

Nice... Goes well with my dark-theme

To anyone else... I wanted to experiment a little further, but with the more minimal gauge ring... but having difficulty understanding the "official" names for things.

A = ui-card-panel  
B = ?  
C = ?

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

</div>

> [@Gunner](#):
>
> A = ui-card-panel  
> B = ?  
> C = ?

OK **B** seems to be `md-content md-card`

I wish there was a clear manual with these designatipns... or if there is one, the location would be nice. I really don't like the lack of search option in the documents. Yes I can use Google's `site:` but not a quick.

Not going to bother looking for **C** right now, as there is such a thing as too much carbon fiber 😛 Meanwhile, I am liking this...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1a6d9336505326892b938155ca8a4acfe99679b9.jpeg) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/a/aad043ace6fa343b47fc990188d2b0175e11a0be.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:** [7 September 2021 00:27 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/68 "2021-09-07T00:27:02Z")

</div>

> [@hotNipi](#):
>
> Widgets for dashboard often provide such fields and it helps in many steps

> [@hotNipi](#):
>
> So here's the question - ...

I think a `node-contrib` with toggle settings for the more common/popular presets would be nice, but somehow the whole idea of your initial creation is much better for us "tweek freeks" who must make it "fit" their aesthetic needs.... For that, perhaps a `node-contrib` with toggles _and_ a special "custom" section that accepts "HTTP/CSS" override code that is specifically aimed at only that `node`.

---

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

</div>

Each of the elements on [that bit of] your dashboard resides within an md-card with a class depending on it's type.  
So you have 5 md-cards

```auto
div .nr-dashboard-cardpanel
   div id<Group name from the editor>
      md-card class nr-dashboard-template (Gauge)
      md-card class nr-dashboard-button (x2)
      md-card class nr-dashboard-slider 
      md-card class nr-dashboard-switch
   /div
/div

```

There is a proposal to add a custom class field to the editor for dashboard items, which would make it easier to customise, allowing for example nr-dashboard-button round-button or nr-dashboard-button square-button. I'm not sure if it has been considered yet.

It would be good to have a wiki document with examples of tweeking dashboard appearance through CSS. I'm never clear if my changes are well implemented or not, and what side effects they might casue - on other tabs for instance.  
There are quite a few examples in the forum.

---

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

</div>

> [@jbudd](#):
>
> There is a proposal to add a custom class field to the editor for dashboard items, which would make it easier to customise, allowing for example nr-dashboard-button round-button or nr-dashboard-button square-button. I'm not sure if it has been considered yet.

Coming in Dashboard V3 - Dave has merged it 🙂

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 September 2021 17:04 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/71 "2021-09-07T17:04:09Z")

</div>

available to try as node-red/node-red-dashboard@next

---

<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 September 2021 17:11 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/72 "2021-09-07T17:11:17Z")

</div>

Is there any change list to explore? I know the angular goes up to 1.8 but any other "good to know " things?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 September 2021 17:36 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/73 "2021-09-07T17:36:51Z")

</div>

> <https://github.com/node-red/node-red-dashboard/blob/v3/CHANGELOG.md>

Feedback of course most welcome.

---

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

</div>

I have had a play with dashboard v3, adjusting colours, fonts and backgrounds of individual gauges.  
Of course there's no real advantage in using a custom class rather than node id with just one instance of each.

I think I can trust you not to use the middle one in real life?  
Hopefully it provides a useful introduction to restyling the widget.

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.

 ![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/9/993ec3f263cb6e3e5a99e74b5b980c6992cd0256.jpeg)  
[dashboard3gauges.json](https://discourse.nodered.org/uploads/short-url/awGRbf2VaArfMTBeFDziHd2McX.json) (42.1 KB)

---

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

</div>

> [@jbudd](#):
>
> Of course there's no real advantage in using the class rather than node id with just one instance of each

You are, of course, correct. As I'm certain you know - the beauty is when you want consistent styling across multiple widgets. Or the ability to (on the fly via a msg) change the class - then this becomes very useful.

---

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

</div>

Meanwhile some random steps on realism route... just for fun

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/5/050465e299b8231fbfa56f6d41964e6b0ebd1a0b.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:** [7 September 2021 21:34 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/77 "2021-09-07T21:34:56Z")

</div>

Home tanned and stitched by hand of course 😃

---

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

</div>

Ouch, the time ...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/0/c080140e92d5865098523f228a535c1282fe193c.jpeg)

Bed time..

---

<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 08:58 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/79 "2021-09-08T08:58:40Z")

</div>

I really like the clock, nice work.

---

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

</div>

> [@Gunner](#):
>
> as there is such a thing as too much carbon fiber 😛

Really ? are you sure about that?

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

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