Skip to the page
Tactile UI

Kit parts

Ring meter

The kit’s donut chart as an instrument: a ring of lamps behind dark glass in a spun bezel, lit clockwise from twelve like a studio clock’s seconds, with the value in lit digits in the middle.

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. The glass is the kit’s display black with a glare fixed upper left; the bezel is the knob’s spun metal with an engraved zero mark at twelve. The digits are Geist Mono in the VFD’s light and sized in container units, so a ring of any size keeps its proportions.

Variants

  • A share · with an inner ring
  • Countdown · what is left
  • Time left · one amber colour
  • no inner ring

States

  • Empty
  • Under way
  • Past warning
  • Past alarm
  • Full
  • No reading

Props and options

NameKindDescription
valueattribute · propertyThe reading. Setting it steps the lamps round: a whole turn in about half a second.
min · maxattributeThe scale: the full ring.
labelattributePrinted in the glass under the digits, and the meter’s accessible name.
unit · unit-textattributeBeside the digits; the spoken form for aria-valuetext.
warn · alarmattributeWhere every lit lamp turns amber, then red. Alarm under warn means low is bad (a budget left).
lampattributeThe colour below the lines, or the one colour: amber for a run that is still working.
segmentsattribute
inner · inner-labelattribute · propertyA second share on small dots inside, lit in display light, with its own line of words.
modeattributeThe ring is what is left: lamps go out from twelve, clockwise, as the value runs down.
formatattributeThe value is seconds, shown as 4.
decimalsattributeDecimals in the digits and the words.
data-zone · data-lamp · data-stateattributeThe line the value is past, the lamps’ colour, and whether the lamps are stepping.
KeyboardkeyboardNothing in it takes focus: a meter is read, not operated. Its value is in the accessibility tree.

Usage notes

Read usage: the lamps step round to the new share. The run’s countdown goes out from twelve, a lamp every ten seconds. Every state is below.

Accessibility

  • The lamps, the dots and the digits are its picture and are hidden from assistive technology. It takes no focus.
  • Colour is never alone: the digits give the figure, the arc gives the share, and the words name the line.
  • Reduced motion: the lamps jump to the reading. Nothing blinks.

Lamp

The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.

VFD

A vacuum-fluorescent display: cyan-white light on near-black glass, with a glow and a ghost. Frequencies, levels, status screens.

Progress

Progress through a task: ink filling a groove, never a coloured bar.