Instrument readouts and controls
<smart-momentary-button>MomentaryButton is an operator button with three action modes.
In momentary mode the button acts while it is pressed and stops when it is released. In hold mode the action starts only after the button has been held for holdDuration, shown by a progress ring. In confirm mode the action requires a second press within confirmTimeout. An interlocked button stays readable, shows the reason and raises the blocked event when pressed. The state property shows the device feedback as a lamp and is set by the application.
<smart-momentary-button>smart-industrial/source/modules/smart.momentarybutton.jsMomentaryButtonModule from smart-industrial/angular/momentarybuttonMomentaryButton from smart-industrial/react/momentarybutton<MomentaryButton> 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.momentarybutton.js"></script> <smart-momentary-button id="start" label="Start" mode="hold" hold-duration="1000" kind="start"></smart-momentary-button>
const momentaryButton = document.getElementById('start');
// raised when a momentary button is pressed
momentaryButton.addEventListener('press', (event) => {
const { at } = event.detail;
// ...
});
// the same values as properties
momentaryButton.holdDuration = 1000;
momentaryButton.label = 'Start';
momentaryButton.mode = 'hold';
momentaryButton.kind = 'start';
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 9 with their types and defaults.
| Name | Type, default | Description |
|---|---|---|
label | string | Sets or retrieves the word on the button. It carries the meaning the kind colour cannot. |
mode | string | Sets or retrieves the action mode. momentary raises press and release as they happen; hold raises activate after holdDuration and reports an early release; confirm arms on the first press and raises activate on a second press within confirmTimeout. A confirm press counts when it is let go of on the button; a press that slides off, is cancelled or is ended by an interlock neither arms nor activates. |
holdDuration | number | Sets or retrieves how long a hold-mode button must be held before it acts, in milliseconds. |
kind | string | Sets or retrieves the button style following the colour conventions of push button panels: a green ring for a start button, a red ring for a stop button, and a round mushroom head for an emergency stop. The colour is applied to the ring, not the whole face, so the label stays readable. |
state | string | Sets or retrieves the device feedback reported by the plant, as a word such as running, stopped, open, closed or fault, shown as a lit lamp. An empty value shows no lamp. The property is set by the application from the feedback tag, not by the button. The button is announced as pressed (aria-pressed) only while the state is an on word - anything but stopped, closed, off, fault, tripped or unknown. |
interlocked | boolean | Determines whether the button is interlocked. An interlocked button stays readable and focusable, shows interlockReason, ends any press in progress without acting, disarms an armed button, and raises blocked instead of acting. |
interlockReason | string | Sets or retrieves why the button will not act, shown under it while interlocked and read out when pressed. |
density | string | Sets or retrieves the target size. touch makes the button 60px high for a gloved hand. |
confirmTimeout | number | Sets or retrieves how long a confirm-mode button stays armed after the first press, in milliseconds. The timeout disarms it without acting. |
The events carry their data in event.detail. press, release and activate are commands: the momentary button raises them and changes no property, and its lamp follows state when the application sets it. arm and disarm report the button arming and disarming itself in confirm mode, and blocked reports a press refused while interlocked is true.
| Event | Description and detail |
|---|---|
press | This event is triggered when a momentary button is pressed.at number The time of the press, in milliseconds since the epoch. |
release | This event is triggered when a momentary button is released, or a hold button is let go before holdDuration.duration number How long it was held, in milliseconds.early boolean true when a hold was let go too early to act. |
activate | This event is triggered when a hold button has been held for holdDuration, or a confirm button is pressed the second time.mode string 'hold' or 'confirm'.duration number The hold duration met, for a hold. |
arm | This event is triggered when a confirm button is pressed the first time.timeout number How long it stays armed, in milliseconds. |
disarm | This event is triggered when an armed confirm button times out or is disarmed without acting. |
blocked | This event is triggered when an interlocked button is pressed. Nothing acts.reason string The interlockReason. |
| Method | Description |
|---|---|
press() | Begins a press, as a pointer or the keyboard would. The method is public so that an application can drive the button from its own input, for example a physical key on a pendant. It does nothing while the button is pressed, disabled or interlocked; an interlocked button raises the blocked event. A button that is not on a page cannot be pressed. |
release() | Ends a press. A release always follows a press, so a momentary action is always stopped. A press also ends at once, as a cancelled press, when the button is removed or moved to another parent, disabled, hidden, when the focus or the pointer leaves it, or when the window loses the focus or the page is hidden. A cancelled press releases a momentary button and ends a hold early, but is not a step of a confirm. A second finger on a held button neither presses nor releases it, and a held key that repeats does not press again. |
isPressed() | Returns whether the button is currently pressed. |
isArmed() | Returns whether a confirm-mode button is armed and waiting for its second press. |
disarm() | Disarms a button in confirm mode without activating it. |
The same element with its wrapper. Each page has the installation steps and the full demo in that framework.
import { MomentaryButtonModule } from 'smart-industrial/angular/momentarybutton';
// Angular 14 and later; an NgModule application lists MomentaryButtonModule in its imports
@Component({
standalone: true,
imports: [MomentaryButtonModule],
template: `<smart-momentary-button label="Start"
(onPress)="onPress($event)">
</smart-momentary-button>`
})
import { MomentaryButton } from 'smart-industrial/react/momentarybutton';
<MomentaryButton label="Start"
onPress={(event: CustomEvent) => onPress(event.detail)} />
import 'smart-industrial/source/modules/smart.momentarybutton.js';
<smart-momentary-button label="Start"
@press="onPress"></smart-momentary-button>
@using Smart.Blazor.Industrial
@rendermode InteractiveServer
<MomentaryButton Label="Start"
OnPress="OnPress" />
The MomentaryButton is a button. Its accessible name contains the label, the action mode and the state reported by the plant, for example "Start, hold for 1 s, stopped", so a screen reader user knows before pressing that the key has to be held, and hears the device state without relying on colour. An interlock is included in the name and, when the button is pressed anyway, announced as an assertive message with the reason. A completed hold and a confirmed press are announced through the label, because the button does not change in a way a screen reader could report.
| Key | Action |
|---|---|
| Tab | Moves onto the button, and off it. An interlocked button is still a stop. |
| Space / Enter (down) | Presses the button, as a finger would. A momentary button raises press; a hold button starts its ring; a confirm button waits for the key to come up. Key repeat does not press again. |
| Space / Enter (up) | Releases the button. A momentary button raises release; a hold button raises release with early if the hold was not met; a confirm button arms, or acts if it was armed. |
| Focus leaving | Releases the button, the way a pointer leaving does. A jog held by a key that has lost focus is not still jogging. |
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 8 CSS variables of its own, among them --smart-momentary-size, --smart-momentary-background, --smart-momentary-border, --smart-momentary-accent. The CSS page lists them; the themes guide covers the tokens every component shares.
Bar Graph Bit Field Jog Panel Knob Numeric Keypad Panel Meter Selector Switch Seven Segment Thermometer Touch Keyboard