First september give-away (let's create one gauge)

Does not reproduce for me, Can you show ??


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 (74.2 KB)

2 Likes

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

Same in Firefox and Chrome..

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

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

1 Like

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.

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.

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

hontnipi-gauge-advanced-improved.json (67.6 KB)

4 Likes

Looking good, as ever. :smiley:

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

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.

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:

.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

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

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

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

And issue found

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

1 Like

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)

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.

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

Why my logic is build up that way? Just as it is common for all use cases. The build up starts for me with thin rectangle in space. That rectangle can be made even vertically or horizontally thin. I have gone with horizontal way. So it starts even from 3 or 9 position. And my choice was 9. It is same for all gauges, not just the clock and so the calculation rules are logically same and it will be easier to maintain the code that way. Nothing more. You can freely change it. Most important is that you understand what it does.

1 Like

How about the gauge showing temperature and humidity in one?
In this design frame - how should the double scale - double needle gauge look like?

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Just a reminder:

Hotnipi also gifted a web component version of his excellent gauge to the community as well. It currently lives in my GitHub. GitHub - TotallyInformation/gauge-hotnipi: A nice looking gauge W3C component gifted by hotnipi for use with Node-RED, uibuilder and other uses.

In that form, it can be used with uibuilder or even with http-in/-out nodes. Or even (horrors) without Node-RED at all - though where's the fun in that!

1 Like