Instrument
<o-instrument> is a needle gauge with ticks, a scale, color zones and a digital readout. Presets cover cars, aircraft and computers.
Ticks are .vectors spread over the range with fit-range, the scale is a ring of satellites, zones are arcs on the tick ring and the needle is a vector from the center. They all share one --o-from and --o-range, so they always agree. Changing value only turns the needle.
Presets
tachometer, speedometer, fuel, temp, boost, voltmeter, airspeed, altimeter, cpu, gpu and vu. A preset is a set of defaults: any attribute you write wins over it.
Attributes
| Attribute | Default | What it does |
|---|---|---|
preset | One of the presets above. | |
value | min | The reading, kept in the scale: the needle and the readout stop at its ends. |
min / max | 0 / 100 | Scale range. |
range / from | 270 / auto | Sweep and start angle. |
ticks | 7 | Major ticks, each with a scale label. |
minor | 5 | Minor ticks between two majors. |
zones | [] | Color bands in value units: [{ from, to, color }]. |
redline | Shorthand for a red zone from this value to max. | |
tick-labels | numbers | Your own scale labels, as a JSON array: '["E", "½", "F"]'. |
step | none | Snaps the reading. See min, max and step. |
unit / label | Unit and caption under the readout. With format="unit", unit is an Intl unit and the readout writes it. | |
digital | on | digital="false" hides the number. |
case | auto | round, square, rounded or bare. Sweeps of 180° or less default to bare: a track band, centered in the box, without a dial. |
accent / needle-color | preset | Needle color. needle-color wins. |
face / bezel / tick-color | Dial background, its rim and the minor ticks. | |
size | 240px | Width of the widget. |
glow | off | A glow on the needle and the zones. |
format, decimals, currency, locale | Number format of the readout, the scale and aria-valuetext, through Intl.NumberFormat. See Shared options. | |
theme | dark, light or glass. Also inherited from an ok-theme-* class on a container. See Shared options. |
Styling
The attributes above set these properties on the element. Each one falls back to a kit-wide name, so --ok-accent on a parent colors every instrument and clock inside it.
| Property | Falls back to | What it does |
|---|---|---|
--ok-inst-accent | --ok-accent | Needle and center cap. |
--ok-inst-face | --ok-face | Dial background. |
--ok-inst-bezel | --ok-bezel | Dial rim. |
--ok-inst-tick | --ok-tick | Minor ticks. |
--ok-inst-tick-M | Major ticks. | |
--ok-inst-label | --ok-text | Scale numbers and caption. |
--ok-inst-readout-color | The digital value. | |
--ok-inst-track | --ok-track | Track band of a bare instrument. |
--ok-inst-case-bg | --ok-case | Background of a square or rounded case. |
--ok-font-size | Base text size, 7.2cqmin by default. |
More examples
Your own scale
A themed panel
A moving needle
Accessibility
An instrument has role="meter" with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext, and a name made of its caption, value and range, like “CPU: 64%; range 0 to 100”. Set aria-label to replace it. The needle eases to a new value, except with reduced motion.