Instrument readouts and controls

Momentary Button <smart-momentary-button>

MomentaryButton is an operator button with three action modes.

<smart-momentary-button> · 9 properties, 5 methods, 6 events · source/modules/smart.momentarybutton.js

Usage in React

The React wrapper is the MomentaryButton 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 { MomentaryButton } from 'smart-industrial/react/momentarybutton';

const ref = useRef<MomentaryButton>(null);

<MomentaryButton ref={ref} label={'Start'}
    onPress={(event: CustomEvent) => console.log(event.detail)} />

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

Properties

Prop	Type, default	Description
label	string	Sets or retrieves the word on the button. It carries the meaning the kind colour cannot.
mode	MomentaryButtonMode momentary	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 1000	Sets or retrieves how long a hold-mode button must be held before it acts, in milliseconds.
confirmTimeout	number 5000	Sets or retrieves how long a confirm-mode button stays armed after the first press, in milliseconds. The timeout disarms it without acting.
kind	MomentaryButtonKind normal	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 false	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	MomentaryButtonDensity normal	Sets or retrieves the target size. touch makes the button 60px high for a gloved hand.

Methods

Method	Description
press(): void	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(): void	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(): boolean	Returns whether the button is currently pressed.
isArmed(): boolean	Returns whether a confirm-mode button is armed and waiting for its second press.
disarm(): void	Disarms a button in confirm mode without activating it.

Events

The data of an event is 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
onPress press	This event is triggered when a momentary button is pressed. at number The time of the press, in milliseconds since the epoch.
onRelease 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.
onActivate 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.
onArm arm	This event is triggered when a confirm button is pressed the first time. timeout number How long it stays armed, in milliseconds.
onDisarm disarm	This event is triggered when an armed confirm button times out or is disarmed without acting.
onBlocked blocked	This event is triggered when an interlocked button is pressed. Nothing acts. reason string The interlockReason.

Types

type MomentaryButtonMode

'momentary' | 'hold' | 'confirm'

type MomentaryButtonKind

'normal' | 'start' | 'stop' | 'emergency'

type MomentaryButtonDensity

'normal' | 'touch'

CSS variables

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

--smart-momentary-size --smart-momentary-background --smart-momentary-border --smart-momentary-accent --smart-momentary-start --smart-momentary-stop --smart-momentary-lamp --smart-momentary-warning-text