Machine state, sequences and sessions

State Machine <smart-state-machine>

StateMachine displays the state model of a machine as a diagram with the current state highlighted, the time in the state, the unit mode and the commands that are available from the current state.

<smart-state-machine> · 17 properties, 8 methods, 4 events · source/modules/smart.statemachine.js

Usage in TypeScript

The package ships its definitions: StateMachine is the element type and StateMachineProperties the properties, both exported from smart-industrial/source/typescript/smart.industrial. document.querySelector('smart-state-machine') is typed as StateMachine.

import { StateMachine, StateMachineProperties } from 'smart-industrial/source/typescript/smart.industrial';

const stateMachine = document.querySelector('smart-state-machine') as StateMachine;

stateMachine.model = 'isa88';
stateMachine.addEventListener('commandRequest', (event: CustomEvent) => console.log(event.detail));
stateMachine.transitionsFrom('value');

Properties

Property	Type, default	Description
model	StateMachineModel packml	Sets or retrieves the state model. packml and isa88 include the states, commands and automatic transitions of their standards; custom uses the states and transitions properties.
states	array	Sets or retrieves the states of a custom model as [{ id, label, kind, x, y }]. kind is wait for a state the machine stays in and acting for a state it passes through; x and y are grid positions on the diagram.
transitions	array	Sets or retrieves the transitions of a custom model as [{ from, to, command, many }]. A transition without a command is automatic and is taken when the acting state completes. many marks a command that is valid from many states; it is listed under its target state instead of being drawn as an arrow from each state. The command list of the model is derived from the transitions.
state	string	Sets or retrieves the current state's id, as the controller reports it. A change is stamped, recorded in the history and raised as stateChange.
enteredAt	number	Sets or retrieves the time the current state was entered, as a timestamp. When the application sets enteredAt and state together, in either order in the same task, that time is kept for the new state and the previous state's duration is measured to it; a state change that comes without a time is stamped with the time of the change. When the state comes first, its stateChange event carries the time of the change and the history takes the controller's time when enteredAt follows. A controller that reports the time should supply it, so that the time in state is correct after a page reload.
mode	string	Sets or retrieves the unit mode. Production, Maintenance, Manual, shown beside the state. PackML keeps mode and state orthogonal, and so does this.
modes	array	Sets or retrieves the unit modes offered as buttons. Pressing one raises the modeRequest event; the mode does not change until the application reports it.
view	StateMachineView diagram	Sets or retrieves the view. diagram draws the whole model; compact hides the diagram and keeps the header with the state, its time and the mode, the mode buttons, the command bar and the history, for a faceplate or a machine list.
showCommands	boolean true	Determines whether the command bar is shown. Every command of the model is listed and only the commands that are valid from the current state are enabled.
showHistory	boolean true	Determines whether the transitions taken are listed, newest first, with the time each state lasted.
historyLength	number 8	Sets or retrieves how many transitions the history keeps.
interactive	boolean true	Determines whether commands and modes can be requested from the component.
busy	boolean false	Sets or retrieves whether a command is out and the controller has not answered. The component sets it when it raises commandRequest and clears it when the state changes or pendingTimeout runs out; the application may set it too - true while it writes, false when a write failed. While busy, the command sent and every other command except Stop and Abort are refused, so a second press of Start is not a second write. Stop and Abort stay available.
pendingTimeout	number 10000	Sets or retrieves how long a command waits for the controller's answer, in milliseconds, before it is dropped as unanswered with commandTimeout.
confirmCommands	array	Sets or retrieves the commands that take two presses, for example ['Stop', 'Abort']. The first press arms the button and a second within five seconds sends it; the second click of a double-click, a press within 300 ms of the first and a held key do not count. Empty by default.
label	string	Sets or retrieves the machine's name, shown in the header and in the accessible name.
announceChanges	boolean true	Determines whether a reported change of state is read through the live region, assertively for Aborting and Aborted.

Methods

Method	Description
transitionsFrom(state?: string): array	Returns the transitions legal from a state, as [{ from, to, command }]. state string A state id. Defaults to the current state.
target(command: string, state?: string): string	Returns the state a command leads to from a state, or null when the command is not legal there. command string The command. state string A state id. Defaults to the current state.
canCommand(command: string): boolean	Returns whether a command is legal from the current state. command string The command.
commands(): array	Returns the commands legal from the current state, in the model's order.
nextAutomatic(state?: string): string	Returns the state an acting state completes into, or null for a wait state. state string A state id. Defaults to the current state.
history(): array	Returns the transitions taken, newest first, as [{ from, to, at, duration }].
timeInState(): number	Returns the time spent in the current state, in milliseconds.
pending(): string	Returns the command sent and not yet answered by the controller, or null.

Events

The data of an event is in event.detail. commandRequest and modeRequest are requests: the state machine raises them only while interactive is true and keeps state and mode until the application sets them. stateChange reports a new state from the application with the time spent in the previous state.

Event	Description and detail
commandRequest	This event is triggered when a valid command is pressed. The state does not change; the application sends the command to the controller and reports the state it reaches. Until the controller answers (a change of state) or pendingTimeout runs out, the component is busy and refuses the same command and every other one except Stop and Abort. command string The command. from string The current state. to string The state the model says the command leads to.
commandTimeout	This event is triggered when the controller did not answer a command - the state did not change - within pendingTimeout. The command is dropped, busy is cleared and the component says so. command string The command that was not answered. state string The state the controller still reports.
modeRequest	This event is triggered when a unit mode button is pressed. The mode does not change until the application reports it. mode string The mode asked for. from string The mode in force.
stateChange	This event is triggered when the state property changes, when the application reports a new state. from string The state left. to string The state entered. at number When, as a timestamp. duration number How long the state left lasted, in milliseconds.

Types

type StateMachineModel

'packml' | 'isa88' | 'custom'

type StateMachineView

'diagram' | 'compact'

CSS variables

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

--smart-state-machine-box-fill --smart-state-machine-box-stroke --smart-state-machine-arrow --smart-state-machine-current --smart-state-machine-current-text --smart-state-machine-abnormal --smart-state-machine-held