Instrument readouts and controls
Selector Switch <smart-selector-switch>
SelectorSwitch is a switch with a set of named positions, such as a Hand-Off-Auto selector, a duty/standby selector or a local/remote switch.
<smart-selector-switch> · 11 properties, 2 methods, 4 events · source/modules/smart.selectorswitch.js
Usage in Angular
The Angular wrapper is SelectorSwitchComponent from SelectorSwitchModule: every property is an input, every event an output named on<Event>, and the methods are called on the component reference from @ViewChild. A method that returns a value returns a Promise of it, resolved once the component has rendered; its ...Sync() twin returns the value at once, or null before the component has rendered. Unknown bindings are rejected at compile time.
import { SelectorSwitchModule, SelectorSwitchComponent } from 'smart-industrial/angular/selectorswitch';
<smart-selector-switch #selectorSwitch [value]="'auto'"
(onPositionRequest)="onPositionRequest($event)"></smart-selector-switch>
@ViewChild('selectorSwitch', { read: SelectorSwitchComponent }) selectorSwitch!: SelectorSwitchComponent;
// methods are called on the component reference; this one returns a Promise
const result = await this.selectorSwitch.request('value');
Properties
| Input | Type, default | Description |
|---|---|---|
[positions] | array | Sets or retrieves the positions, as [{ id, label, description }]. Empty shows Hand. Off. Auto, localized. |
[value] | string | Sets or retrieves the id of the current position, as reported by the plant. Setting it clears a pending request, whether or not it is the requested position, and raises the change event. |
[appearance] | SelectorSwitchAppearance | Sets or retrieves how the positions are drawn: a joined row of segments; a knob with a pointer over the segments; or, above the segments, the switch a panel would carry: a toggle lever that leans to its position, a rocker whose pressed face is lit, or a slide whose knob sits at its position. The segments stay the part that is pressed and read. While a request is pending the pointer, lever, lamp or knob shows it halfway or in the pending colour. |
[confirm] | boolean | Determines whether a position has to be pressed twice to request it. The first press arms the position and shows it as armed; a press on a different position arms that one instead. The second press has to be a separate decision: the second click of a double-click, a press within 300 ms of the first and the repeat of a held key do not send the request. The second press has to be a second decision: the second click of a double-click or a double tap, a press within 300 ms of the first and a held key do not confirm. |
[confirmTimeout] | number | Sets or retrieves how long an armed position waits for its second press, in milliseconds. |
[pendingTimeout] | number | Sets or retrieves how long a request stays shown as pending before it is dropped as unanswered, in milliseconds. When it runs out the switch raises requestTimeout and says under the switch that the plant did not confirm the position. |
[interlocked] | boolean | Determines whether the switch is interlocked. An interlocked switch stays readable, shows interlockReason, drops any pending request, and raises blocked instead of positionRequest. |
[interlockReason] | string | Sets or retrieves why the switch will not act, shown under it while interlocked and read out when pressed. |
[readonly] | boolean | Sets or retrieves whether the switch is read-only. A read-only switch shows the position in force, stays focusable and readable, and takes no request. |
[label] | string | Sets or retrieves the name of the device the switch controls, shown above the positions and used in the accessible name. |
[density] | SelectorSwitchDensity | Sets or retrieves the target size. touch makes each position 52px high for a gloved hand. |
Methods
| Method | Description |
|---|---|
request(id: any): Promise<any> | Requests a position, as a press does. With confirm enabled, the first call arms the position and a second call within confirmTimeout sends the request. The value does not change until the application reports the new position. One request per intent: the position in force and the position already requested and not yet answered are not requested again, and false is returned. Nothing is requested while the switch is disabled, read-only or interlocked.id string The id of the position. |
pending(): Promise<any> | Returns the id of the requested position not yet confirmed by the plant, or null. |
Events
The data of an event is in event.detail. positionRequest is a request: the selector switch shows the position as pending and keeps value until the application sets it, and clears the pending mark without an event after pendingTimeout. With confirm true a second press within confirmTimeout sends the request, change reports a new value from the application, and blocked reports a press refused while interlocked is true.
| Output | Description and detail |
|---|---|
(onPositionRequest) | This event is triggered when a position is requested. The application writes it to the plant and reports the answer through value.position string The id of the position requested.from string The id of the position in force. |
(onRequestTimeout) | This event is triggered when a requested position was not confirmed by the plant within pendingTimeout. The request is dropped and the switch says so.position string The id of the position that was requested.value string The id of the position the plant still reports. |
(onChange) | This event is triggered when value changes, when the plant reports a position.value string The id of the position now in force.previousValue string The id of the position before. |
(onBlocked) | This event is triggered when an interlocked switch is pressed. Nothing is requested.position string The id of the position that was pressed.reason string The interlockReason. |
Types
type SelectorSwitchAppearance
'segmented' | 'rotary' | 'toggle' | 'rocker' | 'slide'
type SelectorSwitchDensity
'normal' | 'touch'
CSS variables
The component declares 7 CSS variables; the CSS page shows how to set them.
--smart-selector-size --smart-selector-background --smart-selector-border --smart-selector-selected --smart-selector-selected-text --smart-selector-pending --smart-selector-hint