Meter · Starbase

Playground

A row of pixel blocks lit up to value. The whole bar changes colour at the warn and danger thresholds, and blocks light up in a quick cascade. When danger is below warn, low values are the bad ones, as with fuel or batteries.

Examples

Driven by a signal

<div data-signals:_shields="58" style="display: grid; gap: 16px; inline-size: min(100%, 22rem)">
  <sb-meter label="Shields" unit="%" data-attr:value="$_shields" data-preserve-attr="value"></sb-meter>
  <sb-slider label="Power to shields" unit="%" data-bind:_shields__prop.value></sb-slider>
</div>

Thresholds

<div style="display: grid; gap: 16px; inline-size: min(100%, 22rem)">
  <sb-meter label="Cargo" value="40" unit="t" max="60" warn="45" danger="55"></sb-meter>
  <sb-meter label="Fuel" value="12" unit="%" warn="30" danger="15" segments="20"></sb-meter>
  <sb-meter label="Heat" value="92" unit="%" segments="8"></sb-meter>
</div>

Live from the server

<div data-signals="{_tm: {fuel: 100}}" data-init="@get('/demo/telemetry')" style="inline-size: min(100%, 22rem)">
  <sb-meter label="Fuel" unit="%" warn="30" danger="15" segments="20" data-attr:value="Math.round($_tm.fuel)" data-preserve-attr="value"></sb-meter>
</div>

Accessibility

The bar is a role="meter" with min, max, value and a readable value text. The colour change is backed by the number, so tone never carries the meaning alone.

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-meter label="Shields" value="75" unit="%" style="--sb-meter-width: 13rem"></sb-meter>

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

API reference

Props

Attribute	Type	Default	Description
`value`	number	`0`	Current value.
`min`	number	`0`	Minimum.
`max`	number	`100`	Maximum.
`segments`	number	`12`	Number of blocks.
`warn`	number	`70`	Warning threshold. Below danger means low values are bad (like fuel).
`danger`	number	`90`	Danger threshold.
`label`	string	`""`	Caption.
`unit`	string	`""`	Unit after the value.
`show-value`	boolean	`true`	Show the value.
`decimals`	number	`0`	Decimals shown.