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.

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

Usage in React

The React wrapper is the StackLight component: every property is a prop, every event a prop named on<Event> that receives the CustomEvent, and the methods are called on the element through a ref.

import { StackLight } from 'smart-industrial/react/stacklight';

const ref = useRef<StackLight>(null);

<StackLight ref={ref} label={'Filler 3'}
    onMuteRequest={(event: CustomEvent) => console.log(event.detail)} />

// methods are called on the wrapper the ref holds, which calls the element
ref.current?.segmentState('value');

Properties

Prop	Type, default	Description
label	string	Sets or gets the station or machine the light belongs to, the first words of its accessible name.
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	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.
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	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	StackLightOrientation vertical	Sets or gets whether the tower stands or lies: vertical, red at the top, or horizontal, red on the left.
showLabels	boolean false	Sets or gets whether a legend beside the tower names each segment and says whether it is off, on or flashing.
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.
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
onStateChange stateChange	This event is triggered when the state word changes. state string The new state word. oldState string The previous state word.
onSegmentClick 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.
onMuteRequest 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