Did a bit prototyping to see if it will work for dashboard or not. For me the answer is - barely, but as work is already done, Ill just give it away who ever may like it. It's a gauge - zero libraries, pure HTML and CSS. It can be modified as you like however - it takes at least intermediate knowl…

[image] Sean-McG: needle on the left is not properly centred Does not reproduce for me, Can you show ?? [image] [image] [image] 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 …

[image] 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".

[image] 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 ev…

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 [image] hontnipi-gauge-advanced-improved.json (67.6 KB)

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 [Untitled 1]

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]

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] .g-tick.clock { transform: rotate(calc(calc(360deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(360deg / var(--ga-tick…

Node-RED

Node-RED Forum

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

Dashboard

Topic		Replies	Views
Another gauge.js library Dashboard	24	3849	13 September 2021
An oldshcool gauge Dashboard node-red-dashboard , ui-widgets	5	716	16 January 2023
Gauge's for Dashboard 2.0 made with ui_template Dashboard dashboard-2	160	6326	7 October 2025
Dashboard 2.0 Classic design multi needle gauge. Call for testing Dashboard dashboard-2	74	1845	26 July 2024
Gauge.js library & Node-Red Dashboard	17	2689	15 September 2021

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

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

Related topics