instrument-indicators

Instrument Indicators

Seventeen compact glyphs that convey one value at a glance, sized for strips, lists and tiles rather than for a full instrument panel.

The family boundary is not a code construct — it comes from the Storybook Indicators/ group, which is the curated product taxonomy. Note propulsion-tunnel-thruster belongs here despite its name; the taxonomy's judgement wins over the naming.

They redraw; they do not wrap

This is the single most important fact, and the one that most invites a wrong assumption. An indicator is not a shrunken instance of its full-size counterpart:

• None extends a shared base class — all extend LitElement directly.
• None composes obc-instrument-field.
• None renders the full instrument. obc-rot-indicator imports RateOfTurnController from ../rate-of-turn/ — the domain logic — and then draws its own SVG. It does not render <obc-rate-of-turn>.

So the shared contract is a convention, not an inheritance hierarchy. Changing a full instrument does not change its indicator, and vice versa. Ten pairs share a base name (compass, gauge-radial, gauge-trend, heading, heave, main-engine, pitch, roll, rudder, wind), and keeping them visually consistent is a manual obligation.

When a value-to-angle or value-to-state mapping already exists as a controller on the full instrument, import the controller rather than reimplementing the maths. That is the one thing that should be shared.

The canvas convention

Most indicators draw on a 48 × 48 canvas via a local VIEW_SIZE constant. Two deviate deliberately — pitch-indicator and roll-indicator declare VIEW_SIZE = 36 for their inner scale, with the outer frame still at 48.

Hosts size themselves from the design token, not from px:

:host {
  width: var(--global-size-spacing-touch-target-min);
  height: var(--global-size-spacing-touch-target-min);
}