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.

Stylesheet

The component is styled by source/styles/default/smart.statemachine.css, which is included in smart.industrial-elements.css. It uses the theme's CSS variables and the Industrial tokens (--smart-industrial-*) described in the Themes and Styling guide, so it follows the theme applied to the page.

CSS variables

The component declares 7 CSS variables of its own, on the component itself. Set them in a rule that selects the component, loaded after the component's stylesheet: smart-state-machine, or a class or an id on it. A value set on a container does not reach the component, because the component's own declaration replaces the inherited one.

smart-state-machine {
    --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: ...;
}

/* one instance */
#stateMachine {
    --smart-state-machine-box-fill: ...;
}

Themes

Two ISA-101 themes ship with the package: smart.industrial.css and smart.industrial-dark.css. Load one after the base theme and set theme="industrial" or theme="industrial-dark" on the body element. The demo page switches between the three.

<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" />
<link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.industrial.css" />

<body theme="industrial">