Skip to the object
Tactile UI

Annunciator

An alarm panel: a grid of engraved windows, dark until a fault trips. A new fault flashes amber or red and sounds a horn; ACK holds it steady; when it clears it goes dark, or flashes slowly until RESET; TEST lights every lamp. The sequence plants have used for fifty years.

What it is for

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.

Installnpx shadcn add https://tactileui.dev/r/annunciator.jsonWith a Pass: how

Controls

Panel

Which windows: a service, a delivery pipeline, or a plant. In your own code, tiles is a list of { id, label, severity } and severity is advisory, warning or alarm.

Windows across. A panel that does not fill its last row gets blank spares, and on a narrow screen it goes down to three, then two.

A fault that clears does not vanish: its window flashes slowly until RESET, so that nobody misses that it came and went.

How fast a new fault flashes. Ringback flashes at two fifths of it. Never above 3 a second.

An alarm horn, a warning beep and an advisory chirp, synthesised; ACK silences them. Off by default, and silent until the page has been touched; the sound key in the bar turns it on.

The ACK, RESET and TEST keys under the panel. Off, it is a display for a status page: you drive it from your code.

Finish

Auto follows the page: the plate, wells and keys are drawn from the page’s finish (a printed plate on Paper, a black one on Phosphor); without the kit’s tokens, aluminium on a light page and graphite on a dark one. The acrylic is smoky dark in all.

Printed beside the keys, and what a screen reader calls the panel.

This stage only

A small scripted incident: a warning, then an alarm, an operator who acknowledges, the faults clearing. Any touch of the panel takes it over.

Everything you set here is what the Code and Prompt tabs give you.

Seats open in 11 days. Want one email that morning?

Datasheet

Mechanism
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
Stack
Vanilla ES modules, CSS
Needs
Nothing, no dependencies
States
13 documented
Version
0.1.0
Licence
With a Pass

States

  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.

Notes

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.

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.

Anatomy

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

Usage notes

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.

Options

OptionTypeDescription
tilesenumWhich windows: a service, a delivery pipeline, or a plant.
columnsnumberWindows across. A panel that does not fill its last row gets blank spares, and on a narrow screen it goes down to three, then two.
ringbackbooleanA fault that clears does not vanish: its window flashes slowly until RESET, so that nobody misses that it came and went.
flashRatenumberHow fast a new fault flashes. Ringback flashes at two fifths of it. Never above 3 a second.
soundbooleanAn alarm horn, a warning beep and an advisory chirp, synthesised; ACK silences them. Off by default, and silent until the page has been touched; the sound key in the bar turns it on.
keysbooleanThe ACK, RESET and TEST keys under the panel. Off, it is a display for a status page: you drive it from your code.
finishenumAuto follows the page: the plate, wells and keys are drawn from the page’s finish (a printed plate on Paper, a black one on Phosphor); without the kit’s tokens, aluminium on a light page and graphite on a dark one. The acrylic is smoky dark in all.
labeltextPrinted beside the keys, and what a screen reader calls the panel.

Methods

  • tiles
  • sounding
  • update
  • trip
  • clear
  • ack
  • reset
  • test
  • destroy

How it works

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.