Instruments
The vendored OpenBridge dials, gauges and tanks, rendered from fixed values.
On this page
The navigation instruments are a React port of the OpenBridge design system,
vendored under design/bosunkit/instruments/ and pinned to one upstream release. Geometry, tick marks and colours
are the port's; a page renders an instrument with fixed props and changes nothing about it.
Navigation
The dials share one radial geometry and one face diameter, so a compass, a heading and a radial gauge line up when they sit side by side. The compass carries the rate-of-turn ring, the wind arrow with its from-direction and the current arrow, and the depth instrument draws the keel, the draft and the water beneath it.
Attitude and machinery
Roll and pitch are single-axis inclinometers, each drawn at the angle it reads. The engine instrument shows the thrust delivered against its setpoint, which is the pair a watchkeeper compares rather than the number alone.
Gauges and tanks
The gauges carry a value, a setpoint and the advice zones between them, and the tank cell draws its fluid from the same ISO 14726 medium palette the gauges use, so a fuel tank and a fuel gauge agree on what fuel looks like.
Instrument pages
Each page scrolls through the instrument's examples and ends with a table of its props.
Radial dials:
- Compass: heading, course over ground, wind, current and rate of turn on one card.
- Heading: the heading and course over ground on a single card.
- Wind: the direction the wind comes from and its speed.
- Rudder: the rudder angle on a half circle.
- Rate of turn: the turn in degrees per minute.
- Speed gauge: the speed on a 225 degree arc.
- Position deviation: the drift from a commanded position.
- Watch: the circular face the radial instruments draw on.
Attitude and motion:
- Pitch: the trim of the vessel.
- Roll: the heel of the vessel.
- Single-axis inclinometer: the renderer pitch and roll share.
- Heave: the vertical motion of the vessel.
- Speed arrows: the speed and direction of travel as chevrons.
- Depth actual: surface depth and the vessel draft band.
- Main engine: the thrust against its setpoint.
Gauges:
- Gauge radial: a radial gauge for any value.
- Gauge radial indicator: the 48 pixel radial cue.
- Instrument radial: the radial gauge building block.
- Gauge vertical: a vertical gauge with a setpoint and advice zones.
- Gauge horizontal: a horizontal gauge with a setpoint and advice zones.
- Gauge trend: a gauge with the recent history of the value.
- Gauge bar indicator: the 48 pixel level cue.
- Gauge trend indicator: the 48 pixel trend cue.
- Bar vertical: a vertical bar with an external scale.
- Bar horizontal: a horizontal bar with an external scale.
- Automation tank: a tank cell with its fluid and level.
Readouts, alerts and display:
- Readout: a value with its label and unit.
- Readout list: rows of readouts with their columns aligned.
- Readout list item: one row of a readout list.
- Readout block: one value, setpoint or advice block of a readout.
- Textbox: text in a box of fixed height, with optional fixed-width digits.
- Alert icon: the icon for an alert's type and state.
- Alert frame: a frame in the alert color around content.
- Brilliance menu: the dimmer, with palette and brightness selection.
The integration contract
An instrument is a presentation of supplied values, not a sensor connection or a control service. Before using one in a screen or report, establish these responsibilities:
| Concern | Caller responsibility |
|---|---|
| Quantity and reference | Identify STW or SOG, true or magnetic heading, depth datum and attitude sign |
| Unit and precision | Convert values and ranges together; apply the shared quantity formatting policy |
| Availability | Distinguish missing, stale, invalid, loading and intentionally off data |
| Limits | Supply the vessel or equipment's operating range and explain clipped readings |
| Setpoint | Separate a draft, an accepted command and observed feedback |
| History | State the time window, sampling basis and any missing coverage |
| Accessibility | Provide a label, numeric reading and textual state alongside graphical cues |
An omitted prop often selects a demonstration-friendly default; it does not necessarily declare lost telemetry. Check the individual no-reading or off-state example and expose source quality in the parent panel. A gauge's advice band is not an alert detector. An enhanced instrument palette is emphasis, not an alert priority.
Size for the task
Choose the face size and its containing frame together. Reserve room for ticks, sources and adjacent readouts; shrinking the complete SVG can make all its labels too small even when it fits the box. Use the compact indicators only beside a named value. Compare instrument faces, not just their outer element dimensions.
For a report, identify the source period and distinguish illustrative data from observations. Keep the static caption meaningful without animation or hover. A recorded setpoint or alert state must not look like a working control connected to a vessel.
Related
- Reading — a measured value with source age and integrity context.
- Data integrity — the states a value can be in, and what the crew does.
- Alarms and severity — the priority system the alert icons and frames draw.