Gauge · Starbase

Playground

A half-dial drawn in pixels. The needle eases toward value on a slightly bouncy spring, and the arc behind it is coloured by zone: ok, warn or danger. When danger is below warn, low values are the bad ones, as with fuel.

Examples

Driven by a slider

<div data-signals:_thrust="64" style="display: flex; gap: 32px; align-items: center; flex-wrap: wrap">
  <sb-gauge label="Thrust" unit="%" data-attr:value="$_thrust" data-preserve-attr="value"></sb-gauge>
  <sb-slider label="Throttle" unit="%" style="inline-size: 14rem" data-bind:_thrust__prop.value></sb-slider>
</div>

Low is bad

<sb-gauge label="Fuel" unit="%" value="18" warn="35" danger="15"></sb-gauge>
<sb-gauge label="Hull temp" unit="°" value="940" min="0" max="1200" warn="800" danger="1000"></sb-gauge>

Live from the server

This site's demo endpoint streams telemetry as signal patches. The gauge follows $_tm.vel without any client code.

<div data-signals="{_tm: {vel: 0, temp: 18}}" data-init="@get('/demo/telemetry')" style="display: flex; gap: 32px; flex-wrap: wrap">
  <sb-gauge label="Velocity" unit=" km/s" max="8" warn="9" danger="10" decimals="2" data-attr:value="$_tm.vel" data-preserve-attr="value"></sb-gauge>
  <sb-gauge label="Hull" unit="°C" max="1200" warn="800" danger="1000" data-attr:value="$_tm.temp" data-preserve-attr="value"></sb-gauge>
</div>

Accessibility

The readout is a role="meter" with min, max and current value. The dial canvas is decorative. Under prefers-reduced-motion the needle jumps straight to the value.

Installation

Add Datastar with Rocket and the Starbase autoloader once per page, then use the tag. The autoloader imports each component the first time its tag appears, including tags added later by a Datastar morph.

<!-- Once per page: Datastar with Rocket, and the Starbase autoloader.
     It loads every <sb-…> component the first time its tag appears. -->
<script type="importmap">
  { "imports": { "datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.4/bundles/datastar-rocket.js" } }
</script>
<script type="module" src="https://rocket.libretto.ch/c/autoloader.js"></script>
<!-- Optional, no flash of undefined elements: class="sb-cloak" on <html>, and -->
<style>.sb-cloak :not(:defined) { visibility: hidden }</style>

<sb-gauge value="72" label="Thrust" unit="%" style="--sb-gauge-size: 9.5rem"></sb-gauge>

<!-- Or skip the autoloader and load just this component: -->
<!-- <script type="module" src="https://rocket.libretto.ch/c/gauge/gauge.js"></script> -->

API reference

Props

Attribute	Type	Default	Description
`value`	number	`0`	Current value; the needle eases toward it.
`min`	number	`0`	Minimum.
`max`	number	`100`	Maximum.
`warn`	number	`70`	Warning threshold. Below danger means low values are bad (like fuel).
`danger`	number	`90`	Danger threshold.
`label`	string	`""`	Caption below the value.
`unit`	string	`""`	Unit after the value, e.g. "%" or " km/s".
`decimals`	number	`0`	Decimals shown in the readout.