Alarms and status

Multi-State Indicator <smart-multi-state-indicator>

MultiStateIndicator is a read-only lamp that shows one of several named states, such as running, stopped, manual, fault or unknown.

<smart-multi-state-indicator> · 6 properties, 1 methods, 0 events · source/modules/smart.multistateindicator.js

Usage in Blazor

The Razor component is <MultiStateIndicator> 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

<MultiStateIndicator @ref="multiStateIndicator" Shape="round" />

@code {
    MultiStateIndicator multiStateIndicator;

    // Task<object> StateFor()
    void Call() => multiStateIndicator.StateFor();
}

Properties

Parameter	Type, default	Description
Shape shape	MultiStateIndicatorShape round	Sets or retrieves the shape of the lamp.
ShowLabel showLabel	bool false	Sets or retrieves whether the label of the resolved state is rendered next to the lamp.
States states	IEnumerable<object>	Sets or retrieves the state definitions. Each entry is an object with: value - the value this state matches; label - the text shown when showLabel is enabled, also used as the accessible name; severity - one of ok, advisory, warning, critical, manual, maintenance, off, unknown, which selects a colour from the active theme (an off lamp is an empty ring with a border that keeps 3:1 contrast); color - an explicit CSS colour that overrides the severity; blink - whether the lamp blinks, as ISA-18.2 uses for a state awaiting acknowledgement.
UnknownLabel unknownLabel	string	Sets or retrieves the label used when the current value matches none of the declared states. It is empty by default, so the label comes from the unknown message ("Unknown" in English) and follows the locale, including after applyLocale. A value set here takes precedence over the message.
Value value	object	Sets or retrieves the current value. A value that arrives as text from an attribute or a JSON payload matches a state declared with a number when it is that number written in decimal ("3" matches 3; "0x1" does not), and a text value matches a text state ignoring case and surrounding spaces. Missing data matches no state: null, an empty or blank string, false, NaN, an array or an object show the unknown state (a hatched lamp, the unknown label, and the unmatched attribute) instead of the first declared state.
Quality quality	MultiStateIndicatorQuality good	Sets or retrieves the quality of the value, as the Tank family takes it: good, uncertain (the lamp is dimmed), bad (hatched and outlined) or stale (faded). The lamp keeps the state it resolved but does not look live, and the quality word is added to the label and the accessible name, for example 'Running (quality bad)'.

Methods

Method	Description
Task<object> StateFor()	Returns the state definition matching a value, or null when none matches. Called without arguments it resolves the component's current value. Matching is as described for value: missing data matches nothing. value any The value to resolve. Defaults to the current value.

Types

enum MultiStateIndicatorShape

MultiStateIndicatorShape.Round "round" MultiStateIndicatorShape.Square "square" MultiStateIndicatorShape.Bar "bar"

enum MultiStateIndicatorQuality

MultiStateIndicatorQuality.Good "good" MultiStateIndicatorQuality.Uncertain "uncertain" MultiStateIndicatorQuality.Bad "bad" MultiStateIndicatorQuality.Stale "stale"

CSS variables

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

--smart-multi-state-indicator-default-size --smart-multi-state-indicator-bar-width --smart-multi-state-indicator-blink-duration