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

<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:** [2 October 2021 13:18 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/122 "2021-10-02T13:18:09Z")

</div>

Life is too short to design for Internet Explorer.

It works with Firefox, MS Edge and Chrome (on Windows 10).  
Not sure if it will work with browsers available for XP.  
I don't have access to old or new Apples or iPads.

---

<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:** [2 October 2021 18:49 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/123 "2021-10-02T18:49:50Z")

</div>

> [@jbudd](#):
>
> Life is too short to design for Internet Explorer.

Live is too short for anything but Linux! 😜

---

<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 October 2021 13:41 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/124 "2021-10-04T13:41:12Z")

</div>

> [@Sean-McG](#):
>
> The quarter gauge is a nice addition, I guess the obvious options would be to mirror it on both axis, then a group of 4 could make a circle

I did a bit cleanup in CSS and mirrored one so it may be clearer now what it takes to.  
Still not perfect solution I'd guess but closer.

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

[hotnipi-gauge-quarter-top-left-right.json](https://discourse.nodered.org/uploads/short-url/xcervr7kka9tzE6EKRuytaMq5lc.json) (35.4 KB)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [4 October 2021 16:10 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/125 "2021-10-04T16:10:33Z")

</div>

Very nice 😀

Small feedback, I noticed that the needle on the left is not properly centred at the bottom so it reads 1 degree more than the gauge on the right.

Also I guess you reused element names ? As I cannot have clock temp example on same flow as these.

I did look to see if I could find anything but I'm afraid its well above my capabilities.

Keep up the good work, it keeps me inspired.

---

<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 October 2021 16:32 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/126 "2021-10-04T16:32:42Z")

</div>

> [@Sean-McG](#):
>
> needle on the left is not properly centred

Does not reproduce for me, Can you show ??

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/2/0226abfbcd214997e7ed4cba70fa4e5e2009f858.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/9/2949fe2d99aa59b42ee94eecc7664e7af5b6c4d3.jpeg)

> [@Sean-McG](#):
>
> cannot have clock temp example on same flow as these

Here they are all in one card. Can't see any problems.  
(a bit changed the quarter's small window placement rules to get alignment and sizes correct for different sizes)

[regular-quarter-and-clock.json](https://discourse.nodered.org/uploads/short-url/qbuqTwCstU1UdvLPMwTQzgLc8eI.json) (74.2 KB)

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

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [4 October 2021 17:05 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/127 "2021-10-04T17:05:01Z")

</div>

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

Not sure, looks different for me. Maybe grid sizes etc ?

Same in Firefox and Chrome..

---

<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 October 2021 17:13 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/128 "2021-10-04T17:13:48Z")

</div>

The two needles are clearly aligned with each other - rounding error on the tick rotation maybe?

---

<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 October 2021 17:20 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/129 "2021-10-04T17:20:36Z")

</div>

Ok. It goes into category "still not perfect solution".

---

<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 October 2021 17:25 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/130 "2021-10-04T17:25:39Z")

</div>

> [@hotNipi](#):
>
> Clip-path is good by for IE, and that is what we all want to

I assumed you meant clip-path is not supported by Internet Explorer?  
But at least for me, neither the Node-Red editor nor Dashboard work at all on Interent Explorer, just a blank page.  
Unless it's different for everyone else, it seems IE incompatibility is no reason not to use clip-path.

---

<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 October 2021 17:31 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/131 "2021-10-04T17:31:51Z")

</div>

Well There is many more things which does not work for IE but your question was about the clip path and that I knew without looking can-i-use. There is a lot more what is not supported, like CSS variables and custom properties and so on.  
It is for modern browsers for sure.

---

<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:** [5 October 2021 07:46 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/132 "2021-10-05T07:46:17Z")

</div>

Some improvements for the quarter version element placement (should be much more accurate)  
And little bonus - the zones

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/9/2975b2534843196afee8976632df4c192b35900d.jpeg)

[hontnipi-gauge-advanced-improved.json](https://discourse.nodered.org/uploads/short-url/ZwAINR9lpE8aUdxwtuzAiMXhA.json) (67.6 KB)

---

<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:** [5 October 2021 20:26 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/133 "2021-10-05T20:26:10Z")

</div>

Looking good, as ever. 😃

One thing though, when I import your flow, my clock has no hour ticks. (same with the last version you posted too). Well, they are present but all stacked up at 9:00

 ![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/0/20ae1afa7cc8995f74c3c23a2e03c964c447dd12.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:** [5 October 2021 20:29 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/134 "2021-10-05T20:29:20Z")

</div>

You may be have somewhere and active `ui_template` with another version of CSS?

Try to debug the major tick in the clock with browser developer tool. See if class is correctly added and the rule is not affected by something.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/4/f42bb1c71546353f94ea358a4ab753b84232377c.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:** [5 October 2021 20:58 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/135 "2021-10-05T20:58:34Z")

</div>

This is the only version of the gauges on this computer, because I've previously been surprised by CSS from another tab.

The rotation CSS for hour ticks:

 ![Untitled 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/f/bf602ab0d37992c9fbe7af9f990d74fd42ab4f4e.jpeg)

```auto
.g-tick.clock {
   transform: rotate(calc(calc(360deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(360deg / var(--ga-tick-count)) +270deg)));
}

```

If I change it to

```auto
.g-tick.clock {
   transform: rotate(calc(90deg + var(--ga-tick) * 360deg/var(--ga-tick-count)));
}

```

then the ticks do show. (I think tick 1 shows up at the 12:00 position which is probably not right)

---

<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:** [5 October 2021 21:02 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/136 "2021-10-05T21:02:17Z")

</div>

Tick 1 is at 9 o'clock if original (latest should be same) CSS is used

---

<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:** [5 October 2021 21:27 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/137 "2021-10-05T21:27:06Z")

</div>

You are on Firefox. And true. Some kind of issue with FF. The computed transform is none. Strange.

---

<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:** [5 October 2021 21:31 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/138 "2021-10-05T21:31:50Z")

</div>

And issue found

```auto
.g-tick.clock {
    transform: rotate(calc(calc(360deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(360deg / var(--ga-tick-count)) + 270deg)));
}

```

The last +270 was without the space. FF does not like.

---

<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:** [5 October 2021 21:32 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/139 "2021-10-05T21:32:21Z")

</div>

Yes Firefox 92 on WIndows 10.

Does transform: rotate(calc(-30deg + var(--ga-tick) \* 360deg/var(--ga-tick-count))); work in your browser?  
(-30deg so the first tick is at 9:00, or 0deg for 1st at 10:00)

---

<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:** [5 October 2021 21:41 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/140 "2021-10-05T21:41:15Z")

</div>

It does not matter where the tick is. (as long it is somewhere we are used to have the hour tick of the clock) There is no more dependencies but the logic where you define the side by numbers.

---

<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:** [5 October 2021 21:45 UTC](https://discourse.nodered.org/t/first-september-give-away-lets-create-one-gauge/50507/141 "2021-10-05T21:45:03Z")

</div>

Yes that's why I started with 90.  
I was thinking of colouring 12, 3, 6 & 9 red, so it would make sense for them to be --ga-tick:3 etc.  
I guess that makes the start of the formula 60deg. I'd better try it...

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

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