# 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:** 1\
**Showing post:** 45

<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.

---

_[View the full topic](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507)._
