Alarms and status
<smart-annunciator>Annunciator displays a wall of tiles, one per monitored condition, following the ISA-18.1 alarm sequence: normal, alarm (unacknowledged, blinking fast), acknowledged (steady) and ringback (cleared but not reset, blinking slowly).
Pressing a tile raises an event to acknowledge the alarm or reset the ringback; the application returns the updated tile list.
<smart-annunciator>smart-industrial/source/modules/smart.annunciator.jsAnnunciatorModule from smart-industrial/angular/annunciatorAnnunciator from smart-industrial/react/annunciator<Annunciator> in Smart.Blazor.Industrial
Install the package, load the two stylesheets and the component's module, and put the element on the page. The element below is the first one of the demo. Put the script after the module, in a <script type="module">, so that it runs once the component is defined.
npm install smart-industrial
<link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.default.css" /> <link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.industrial-elements.css" /> <script type="module" src="node_modules/smart-industrial/source/modules/smart.annunciator.js"></script> <smart-annunciator id="panel" columns="4"></smart-annunciator>
const annunciator = document.getElementById('panel');
annunciator.tiles = [
{ id: 'PT-2101', label: 'Header press high', detail: 'PT-2101', state: 'alarm' },
{ id: 'LT-2204', label: 'Drum level low', detail: 'LT-2204', state: 'ack' },
{ id: 'TT-2302', label: 'Bearing temp high', detail: 'TT-2302', state: 'normal' },
{ id: 'FT-2405', label: 'Seal flow low', detail: 'FT-2405', state: 'ringback' }
];
// raised when an operator presses a tile that is in the alarm state, or through
// acknowledgeAll
annunciator.addEventListener('acknowledge', (event) => {
const { tile } = event.detail;
// write the acknowledgement to the plant, then report the new state back:
annunciator.tiles = annunciator.tiles.map((t) => t.id === tile.id ? { ...t, state: 'ack' } : t);
});
// the same values as properties
annunciator.columns = 4;
The getting started guide covers the bundle, the ISA-101 themes and the license key; the connectivity guide covers feeding the properties from plant tags.
The properties the demo sets, then the next ones; the API page lists all 3 with their types and defaults.
| Name | Type, default | Description |
|---|---|---|
columns | number | Sets or retrieves how many tiles are laid out per row. |
tiles | array | Sets or retrieves the monitored conditions. Each entry is an object with: id - the identifier of the tile, returned in the events; label - the tile legend; detail - an optional second line, typically the tag; state - one of normal, alarm, ack or ringback, in any case. A tile without a state is normal; any other word is shown as an unknown state (dashed and hatched, read out as 'Unknown state') rather than as a normal tile, cannot be acknowledged, and makes the panel's state attribute 'unknown' unless a tile is in alarm. Assign a new array to update the component, or call redraw after modifying the array in place; an array that is deep-equal to the current one does not trigger a redraw. The keyboard stays on the same tile across an update. |
tileHeight | number | Sets or retrieves the minimum height of a tile in pixels. |
The events carry their data in event.detail. acknowledge and reset are requests: a press on a tile in alarm asks for acknowledgement, a press on a tile in ringback asks for a reset, and the annunciator keeps tiles as they are until the application updates them. tileClick reports every press.
| Event | Description and detail |
|---|---|
acknowledge | This event is triggered when an operator presses a tile that is in the alarm state, or through acknowledgeAll. One press raises one event: the repeats of a held Enter or Space are ignored, and the same tile pressed again within 600 ms (a double click) is not acknowledged twice.tile any The tile being acknowledged. |
reset | This event is triggered when an operator presses a tile that is in the ringback state, the condition has cleared and the operator is resetting it. As with acknowledge, one press raises one event.tile any The tile being reset. |
tileClick | This event is triggered when a tile is pressed, in any state. It follows the acknowledge or reset event when one of those applies.tile any The tile that was pressed. |
| Method | Description |
|---|---|
acknowledgeAll() | Raises the acknowledge event once for every tile in the alarm state. Nothing is raised while the panel is disabled. The component does not change the tiles. |
stateCounts() | Returns how many tiles are in each state, as { normal, alarm, ack, ringback, unknown }. A state word the panel does not know is counted as unknown. |
stateOf(tile) | Returns the state of a tile as the panel reads it: normal, alarm, ack or ringback in any case, normal when the tile has no state, and unknown for any other word. |
The same element with its wrapper. Each page has the installation steps and the full demo in that framework.
import { AnnunciatorModule } from 'smart-industrial/angular/annunciator';
// Angular 14 and later; an NgModule application lists AnnunciatorModule in its imports
@Component({
standalone: true,
imports: [AnnunciatorModule],
template: `<smart-annunciator columns="4"
(onAcknowledge)="onAcknowledge($event)">
</smart-annunciator>`
})
import { Annunciator } from 'smart-industrial/react/annunciator';
<Annunciator columns={4}
onAcknowledge={(event: CustomEvent) => onAcknowledge(event.detail)} />
import 'smart-industrial/source/modules/smart.annunciator.js';
<smart-annunciator columns="4"
@acknowledge="onAcknowledge"></smart-annunciator>
@using Smart.Blazor.Industrial
@rendermode InteractiveServer
<Annunciator Columns="4"
OnAcknowledge="OnAcknowledge" />
The Annunciator is an ISA-18.1 alarm tile wall. Each tile is a button, and the wall is a composite widget: a panel of forty tiles is one tab stop with two-dimensional arrow key navigation, not forty separate tab stops.
| Key | Action |
|---|---|
| Tab | Moves into the wall, landing on the tile that holds the tab stop, and out again. The wall is one stop however many tiles it has. |
| Arrow Left/Right | Moves one tile along the row. Reversed when rightToLeft is set. |
| Arrow Up/Down | Moves one tile up or down the column, a whole row at a time, following the columns property, which is re-read on each keypress so a responsive wall stays navigable. |
| Home / End | Moves to the first / last tile on the wall. |
| Page Up / Page Down | Moves ten tiles back / forward, stopping at the ends. |
| Enter or Space | Presses the focused tile. A tile in alarm raises acknowledge; a tile in ringback raises reset; every tile raises tileClick. The panel does not change the tile state itself, the application does that once its control system has confirmed the action. |
The accessibility page has every attribute, key and announcement; the WCAG 2.2 conformance report covers the whole library.
The component follows the theme on the page: the default theme, or the ISA-101 light and dark themes that ship with the package. It declares 5 CSS variables of its own, among them --smart-annunciator-columns, --smart-annunciator-tile-height, --smart-annunciator-gap, --smart-annunciator-alarm-blink. The CSS page lists them; the themes guide covers the tokens every component shares.
Alarm Banner Alarm Grid Multi-State Indicator Status Tile