Annunciator

The screen that answers what is wrong right now: a status page, an incident board, a deploy or monitoring dashboard, an IoT fleet, a build matrix. Each window is a list item that says its state in words; a new fault is announced (assertively if it is an alarm); ACK, RESET and TEST are real buttons, and the whole panel works by keyboard. It follows the ISA-18.1 sequence, so it is credible to the people who live in it, and it sleeps until something flashes.

Copy the annunciator folder from its package next to your page, link its stylesheet and construct it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="annunciator/annunciator.css">
<div id="annunciator" style="width: min(100%, 780px)"></div>

<script type="module">
  import Annunciator from './annunciator/annunciator.mjs';

  const annunciator = new Annunciator(document.getElementById('annunciator'), {
    tiles: [{"id":"db-lag","label":"DB LAG","severity":"warning"},{"id":"5xx-rate","label":"5XX RATE","severity":"alarm"},{"id":"disk-90","label":"DISK 90%","severity":"warning"},{"id":"cert-expiry","label":"CERT EXPIRY","severity":"advisory"},{"id":"queue-depth","label":"QUEUE DEPTH","severity":"warning"},{"id":"api-p99","label":"API P99","severity":"warning"},{"id":"oom-kills","label":"OOM KILLS","severity":"alarm"},{"id":"cache-miss","label":"CACHE MISS","severity":"advisory"},{"id":"replica-lag","label":"REPLICA LAG","severity":"warning"},{"id":"backups","label":"BACKUPS","severity":"advisory"},{"id":"dns","label":"DNS","severity":"alarm"},{"id":"deploy-hold","label":"DEPLOY HOLD","severity":"advisory"}],
    columns: 4,
    ringback: false,
  });

  // annunciator.update({ … });   change any option in place
  // annunciator.destroy();        and take it away again
</script>

new Annunciator(element, options)

Builds it inside the element with these options.

tiles

Ids and their state, as the panel holds them.

sounding

Is the horn sounding?

update(opts = {})

Change options in place.

trip(id, severity)

A fault.

clear(id)

The fault clears: the window goes dark, or, with ringback, flashes slowly until reset.

ack()

Acknowledge every new fault: they hold steady, the horn stops.

reset()

Reset every window whose fault has cleared.

test(on)

Lamp test: every lamp lit, in its own colour.

destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: trip, clear, ack, reset, test.

1. NormalEvery window dark: light grey legends engraved in smoky acrylic. Nothing runs.
2. New faultThe window flashes about twice a second in its lamp's colour (cool white for an advisory, amber for a warning, red for an alarm), with a little light escaping onto the plate round it; ACK's own lamp flashes with it. If sound is on, a horn, a beep or a chirp.
3. AcknowledgedACK: the window holds steady and the horn stops.
4. ClearsThe window goes dark.
5. RingbackOptional: a cleared fault flashes slowly until RESET, so that nobody misses that it came and went.
6. Lamp testTEST, held, lights every lamp in its own colour and lasts at least 0.7 s; the states underneath come back.
7. EscalationA fault that trips again worse than before, while lit, flashes again; one no worse is ignored.
8. SparesA panel that does not fill its last row gets blank windows; on a narrow screen it goes to three columns, then two.
9. AluminiumA bead-blasted plate, machined keys in a recessed tray.
10. GraphiteA soft-touch black plate; the light bleeding round a lit window shows most here.
11. Display onlyWith the keys off it is a status display that your code drives.
12. Off screen or hiddenThe flash clock stops and the horn falls silent.
13. Reduced motionNothing flashes: a new fault is lit steady and ringed, an acknowledged one is lit steady, ringback is held at half.

Made of: Isa alarm sequence, Shared flash clock, Sleeping timer, Backlit acrylic legend, Lamp bleed halo, Concentric corner stack, Live region announcements, Webaudio horn, Room fixed sheen.

Original. The alarm sequence is DOM-free (sequence.mjs); the panel is DOM and CSS so the legends are crisp text a reader has. A lamp is two opacities (the lit legend and a wash of the lamp's colour) plus a halo under the window, so it swells and fades like an LED behind acrylic. One shared wave, lit first, drives every flashing lamp; a trip restarts it. The timer runs only while something flashes or a horn is due.