Needle gauge

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<tui-gauge label="GPU 0" unit="°C" unit-text="degrees Celsius"
    min="20" max="100" warn="80" alarm="90" value="64"></tui-gauge>

<!-- Grid frequency: an arc face, bands on both sides of 50 Hz -->
<tui-gauge face="arc" label="Grid · L1" unit="Hz" unit-text="hertz"
    min="49.8" max="50.2" value="49.97"
    zones="49.8..49.85 alarm, 49.85..49.9 warn, 50.1..50.15 warn, 50.15..50.2 alarm"></tui-gauge>

import '/kit/kit.mjs';   // defines <tui-gauge>

const gpu = document.querySelector('tui-gauge[label="GPU 0"]');
const source = new EventSource('/telemetry/gpu0');
source.onmessage = (e) => { gpu.value = JSON.parse(e.data).celsius; };   // swings to it

gpu.value;    // the reading: 71.5
gpu.needle;   // where the needle is right now, while it swings

Needs kit.css and kit.mjs. How to install the kit.

• The element is a role="meter" named by its label, with aria-valuemin, aria-valuemax, aria-valuenow and an aria-valuetext that carries the unit and the band: “84 degrees Celsius, in the warning band, 80 to 90”.
• It takes no focus and needs none: there is nothing to operate. The face, the needle and the LCD are its picture and are hidden from assistive technology.
• Bands are printed in ink (hatched for warning, solid for alarm) and the lamp by the name lights amber or red: position, print and light, never colour alone.
• Reduced motion: the needle jumps to the reading; the LCD, the lamp and the words are exactly the same.

Plain DOM and SVG, no canvas. The face is printed once as SVG from the scale (ticks, figures, the unit, hatched and solid bands) and reprinted only when the scale changes. The needle and its counterweight are one small SVG turned by a CSS rotate() about the pivot; its shadow is the same silhouette, blurred, translated down and right after the turn, so it falls away from the lamp at every angle. The pivot cap, the bezel’s bow-tie highlight and the glass’s glare are fixed layers above and below: nothing lit turns. The needle is θ̈ = ω₀²(target − θ) − 2ζω₀θ̇ at 1.35 Hz and ζ 0.62 (it passes the mark by about 8% and settles in about a second) with soft stops just past both ends. The loop sub-steps at 1/240 s, clamps a frame to 1/30 s, sleeps when the needle settles, and pauses off screen and in a hidden tab.