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 Blazor
The Razor component is <SelectorSwitch> in Smart.Blazor.Industrial: every property is a parameter in PascalCase, every event an EventCallback<Event> named On<Event> whose ev["Detail"] is the typed detail class, and the methods are called on the @ref. String choices are enums. In a Blazor Web App (.NET 8 and later) the page needs an interactive render mode, for example @rendermode InteractiveServer; a statically rendered component stays empty.
@using Smart.Blazor.Industrial
@* .NET 8 and later: an interactive render mode, on the page or for the whole app *@
@rendermode InteractiveServer
<SelectorSwitch @ref="selectorSwitch" Value="auto"
OnPositionRequest="OnPositionRequest" />
@code {
SelectorSwitch selectorSwitch;
void OnPositionRequest(Event ev)
{
SelectorSwitchPositionRequestEventDetail detail = ev["Detail"];
}
// Task<bool> Request(string id)
void Call() => selectorSwitch.Request("value");
}
Properties
| Parameter | Type, default | Description |
|---|---|---|
Positions | IEnumerable<object> | 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 | bool | 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 | int | Sets or retrieves how long an armed position waits for its second press, in milliseconds. |
PendingTimeout | int | 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 | bool | 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 | bool | 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 |
|---|---|
Task<bool> Request(string id) | 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. |
Task<string> Pending() | Returns the id of the requested position not yet confirmed by the plant, or null. |
Events
Every event is an EventCallback<Event>; Event is a dictionary and ev["Detail"] converts to the detail class named under the event.
| Event | 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
enum SelectorSwitchAppearance
SelectorSwitchAppearance.Segmented SelectorSwitchAppearance.Rotary SelectorSwitchAppearance.Toggle SelectorSwitchAppearance.Rocker SelectorSwitchAppearance.Slide
enum SelectorSwitchDensity
SelectorSwitchDensity.Normal SelectorSwitchDensity.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