Skip to the page
Tactile UI

Kit parts

Needle gauge

A moving-coil panel meter: a printed scale under glass, a thin needle that swings past the mark and settles, a lamp for the bands and a small LCD for the exact reading.

On this page
  1. Anatomy
  2. Variants
  3. States
  4. Props and options
  5. Usage notes
  6. Accessibility
  7. Related parts

Seats open in 11 days. Want one email that morning?

Anatomy

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 pivot cap, the bezel’s bow-tie highlight and the glass’s glare are fixed layers above and below: nothing lit turns.

Variants

  • Round
  • Arc · wide face, pivot low
  • Low is bad · alarm under warn
  • No bands · no readout

States

  • In range
  • Warning band
  • Alarm band
  • Off the scale
  • No reading

Props and options

NameKindDescription
valueattribute · propertyThe reading. Setting it swings the needle; past either end it rests on the stop and says so.
min · maxattributeThe scale’s ends.
labelattributePrinted on the face beside the lamp, and the meter’s accessible name: “GPU 0”.
unit · unit-textattributePrinted large above the pivot and on the LCD; the spoken form for aria-valuetext.
warn · alarmattributeBands from the warning line (hatched) and the alarm line (solid) to the end. Alarm under warn means low is bad.
zonesattributeOverrides warn and alarm.
majorattributeThe step between figures. Auto picks 1 · 2 · 5, and prints every other figure when they would crowd.
decimalsattributeDecimals on the LCD and in the words.
faceattribute
readoutattributeLeave the LCD out: the needle and the words only.
data-zone · data-stateattributeWritten by the part: the band the value is in, and whether the needle is moving.
KeyboardkeyboardNothing in it takes focus: a meter is read, not operated. Its value is in the accessibility tree.

Usage notes

Take a reading: each needle swings past its mark and settles. A value past the scale rests on the stop. The glare and the needle’s shadow stay where the lamp puts them.

Accessibility

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

Knob

A rotary control for continuous or stepped values where space is square. Its knurl and pointer turn; its light does not.

Ladder

An LED ladder for levels and load: green, then amber, then red, the way a recording level has always been read.

LCD

A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.