Production floor

Stack Light `<smart-stack-light>`

StackLight displays the tower light of a machine as a column of coloured segments that can be off, on, flashing or flashing fast, with an optional horn.

JavaScript TypeScript Angular React Vue Blazor

<smart-stack-light> · 9 properties, 4 methods, 3 events · source/modules/smart.stacklight.js

Usage in Vue

Vue uses the custom element directly. A property is bound with :kebab-name; an array or an object needs the .prop modifier so that Vue sets the property rather than an attribute. Events are listened to with @eventName; methods are called on the element through a template ref.

import 'smart-industrial/source/modules/smart.stacklight.js';

<smart-stack-light ref="stackLight" :label="'Filler 3'"
    @muteRequest="onEvent"></smart-stack-light>

// methods are called on the element the ref holds
stackLight.value.segmentState('value');

// an array or an object is set as a property, not converted to an attribute: use .prop
<smart-stack-light :segments.prop="segments"></smart-stack-light>

Properties

Binding	Type, default	Description
`:label` label	string	Sets or gets the station or machine the light belongs to, the first words of its accessible name.
`:segments` segments	array	Sets or gets the segments from top to bottom as { id, color, label, state }. color is one of red, amber, green, blue and white, or any CSS colour; state is off, on, flash or fast. A segment given as a string is a colour whose id and label are that word. When empty, a red, amber and green tower is shown.
`:state` state	string	Sets or gets a state word known to the stateMap (running, ready, warning, starved, blocked, stopped, fault, call, maintenance, changeover or off), which lights the segments through the map. The word is matched as written, then trimmed and without regard to case, so Fault and FAULT light the red segment. When empty, the segments are driven directly by their own state. The default map lights the blue segment for call and maintenance and the white segment for changeover, which the default three-segment tower does not have; a state the tower cannot show, and a word the map does not know, are said under the tower and in its accessible name rather than shown as a dark tower, and warned about once in the console. Give segments a blue and a white segment to show them.
`:state-map` stateMap	object?	Sets or gets the map from a state word to the segments it lights, for example { running: { green: 'on' }, fault: { red: 'fast' } }. A segment not named in an entry is off. null uses the default production floor convention: running lights green, ready flashes green, warning lights amber, starved and blocked flash amber, stopped lights red, fault flashes red fast, call lights blue, maintenance flashes blue, changeover lights white and off lights nothing. A state word the map does not contain lights nothing.
`:horn` horn	StackLightHorn off	Sets or gets the horn state: off, on or muted. The horn is shown while it is on or muted. Pressing it while it is on raises the muteRequest event; the application responds by setting the horn to muted.
`:orientation` orientation	StackLightOrientation vertical	Sets or gets whether the tower stands or lies: vertical, red at the top, or horizontal, red on the left.
`:show-labels` showLabels	boolean false	Sets or gets whether a legend beside the tower names each segment and says whether it is off, on or flashing.
`:flash-rate` flashRate	number 800	Sets or gets the duration of one flash in milliseconds. A fast segment flashes at half this duration. The shortest rate used is 667 ms, so that the fast flash stays at or below three flashes a second (WCAG 2.3.1); a smaller value is raised to it, with one console warning. The component writes the value to the --smart-stack-flash-rate variable on itself at every redraw, so set this property rather than the variable.
`:announce-changes` announceChanges	boolean false	Sets or gets whether every change of the light's description is announced through the live region. Off by default, because an andon board contains many lights and a screen reader user reads the one they open.

Methods

Method	Description
`segmentState(id: string): string`	Returns the state of one segment, off, on, flash or fast, or null for an id the tower does not have. `id` string The segment's id.
`activeSegments(): any[]`	Returns the segments that are lit, top first, as drawn: { id, color, label, state }.
`describe(): string`	Returns the current state of the light as text, which is also the text given to assistive technology: the lit segments and their states, the horn and the state word.
`unshown(): object`	Returns what the state word asks for that the tower cannot show - { state, unknown: true } for a word the map does not know, { state, missing } for one whose lit segments the tower does not have - or null when the tower shows it.

Events

The data of an event is in event.detail. muteRequest is a request: the stack light raises it when the operator presses the horn while horn is on, and keeps horn at on until the application sets it to muted. stateChange reports a new state from the application, and segmentClick reports a click on a segment.

Event	Description and detail
`@stateChange`	This event is triggered when the state word changes. `state` string The new state word. `oldState` string The previous state word.
`@segmentClick`	This event is triggered when a segment is clicked. While anything listens for it, the segments are keyboard buttons - one tab stop, the arrow keys along the tower, Enter or Space to press - and the tower is a group; with no listener it is an image. It is not raised while the light is disabled. `id` string The segment's id. `state` string Its state: off, on, flash or fast.
`@muteRequest`	This event is triggered when the horn is pressed while it is sounding. The application silences the horn and sets the horn property to muted. It is raised once per sounding: a second press before the application answers with a new horn value, or within five seconds, asks nothing. It is not raised while the light is disabled. `label` string The light's label.

Types

`type StackLightHorn`

'off' | 'on' | 'muted'

`type StackLightOrientation`

'vertical' | 'horizontal'

CSS variables

The component declares 12 CSS variables; the CSS page shows how to set them.

--smart-stack-segment-width --smart-stack-segment-height --smart-stack-gap --smart-stack-flash-rate --smart-stack-red --smart-stack-amber --smart-stack-green --smart-stack-blue --smart-stack-white --smart-stack-off-opacity --smart-stack-body --smart-stack-color