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 JavaScript
The component is a custom element: its properties are set on the element, its events are DOM CustomEvents with the data in event.detail, and its methods are called on the element. The properties can also be written as attributes in kebab case (precision-digits="1").
const momentaryButton = document.querySelector('smart-momentary-button');
momentaryButton.label = 'Start';
momentaryButton.addEventListener('press', (event) => console.log(event.detail));
momentaryButton.press();
Properties
| Property | Type, default | Description |
|---|---|---|
label | string | Sets or retrieves the word on the button. It carries the meaning the kind colour cannot. |
mode | 'momentary' | 'hold' | 'confirm' | 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.momentary hold confirm |
holdDuration | number | Sets or retrieves how long a hold-mode button must be held before it acts, in milliseconds. |
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. |
kind | 'normal' | 'start' | 'stop' | 'emergency' | 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.normal start stop emergency |
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 | 'normal' | 'touch' | Sets or retrieves the target size. touch makes the button 60px high for a gloved hand.normal touch |
Methods
| 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. |
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 |
|---|---|
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. |
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