Alarms and status

Status Tile `<smart-status-tile>`

StatusTile displays one process value with its label, unit, state and trend direction, for status walls and plant overview screens.

JavaScript TypeScript Angular React Vue Blazor

<smart-status-tile> · 14 properties, 1 methods, 2 events · source/modules/smart.statustile.js

Usage in Blazor

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

<StatusTile @ref="statusTile" Label="OEE"
    OnStateChange="OnStateChange" />

@code {
    StatusTile statusTile;

    void OnStateChange(Event ev)
    {
        StatusTileStateChangeEventDetail detail = ev["Detail"];
    }
}

Properties

Parameter	Type, default	Description
`Label` label	string	Sets or gets the name of the reading, shown above the value, for example 'OEE', 'Feed pressure' or 'Open alarms'.
`Value` value	object	Sets or gets the reading. The value is not limited to numbers: 'PASS', 'Running' or a batch identifier are valid readings, and a tile holding text is sized so that the text fits. A reading that failed - NaN or an infinity, as a number or as the text 'NaN' or 'Infinity', or an object when no formatFunction is set - is shown as -- and read out as no reading, never as the words NaN, Infinity or [object Object].
`Unit` unit	string	Sets or gets the engineering unit, shown next to the value and included in the accessible name.
`State` state	StatusTileState neutral	Sets or gets the state of the reading. The state is drawn as a marker along the leading edge rather than as a fill across the tile, so that a wall of tiles stays readable and colour is used only where it has a meaning. The static stateFor method derives the state from thresholds.
`Trend` trend	StatusTileTrend none	Sets or gets the direction of the reading. The direction is written as a word in addition to the arrow, because an arrow glyph is not read correctly by screen readers.
`TrendValue` trendValue	object	Sets or gets the amount by which the reading changed, shown next to the direction with the unit after a space, for example "down 0.06 bar". Optional; an amount that is NaN, an infinity or an object is left out and only the direction is shown.
`TrendPolarity` trendPolarity	StatusTileTrendPolarity neutral	Sets or gets which direction is good: a rising yield and a rising scrap rate have the same arrow and opposite meanings. Without this property the tile can show a direction but not judge it. Use neutral for a reading that is neither, such as an ambient temperature.
`Target` target	object	Sets or gets the target value of the reading, shown next to the trend. A target that is NaN, an infinity or an object is not shown.
`Footnote` footnote	string	Sets or gets a short line under the reading, for example the source, the time window or what pressing the tile does.
`PrecisionDigits` precisionDigits	int	Sets or gets the number of decimal places of a numeric reading. Values outside 0 to 20 are held to that range. Ignored when formatFunction is set and when the value is text.
`FormatFunction` formatFunction	object	Sets or gets a function that takes the raw value and returns the text to display. Smart.Industrial.siFormat can be used directly, so that a tile shows 4.7 kW instead of 4700.
`Sparkline` sparkline	IEnumerable<object>	Sets or retrieves recent history for a small chart under the reading, as an array of numbers. The series is scaled before it is drawn; the sparkline shows the shape of the history and the value of the tile shows the magnitude.
`Interactive` interactive	bool false	Determines whether the tile is a button that can be reached with Tab, activated with Enter or Space and is announced as a button. Off by default, so that a tile that does nothing is not a tab stop.
`AnnounceChanges` announceChanges	bool false	Determines whether a change of state is announced through the shared live region. Off by default, because a wall of tiles announcing every change would not be usable; enable it for the tiles that carry an alarm.

Methods

Method Description

Method	Description
`Task<string> StateFor(int value, object thresholds)` static: `customElements.get('smart-status-tile').stateFor(…)`; the wrapper's method of this name calls the element and fails	Maps a reading to a state against a set of thresholds, so a screen can classify a value without a tile. Available as a static method and on the element. The thresholds are given as an object with advisory, warning and critical members and an optional direction: 'above' (the default) when a higher reading is worse, or 'below' for readings such as capability indices and yields where a lower reading is worse. The reading must be a finite number or a decimal string: null, an empty or blank string, NaN, an infinity, true or a hex string such as '0x1F' returns 'unknown', as does a missing thresholds object. `value` number The reading to classify. `thresholds` any An object of the form { advisory, warning, critical, direction }. Any threshold that is absent is skipped.

Task<string> StateFor(int value, object thresholds)
static: customElements.get('smart-status-tile').stateFor(…); the wrapper's method of this name calls the element and fails

Maps a reading to a state against a set of thresholds, so a screen can classify a value without a tile. Available as a static method and on the element. The thresholds are given as an object with advisory, warning and critical members and an optional direction: 'above' (the default) when a higher reading is worse, or 'below' for readings such as capability indices and yields where a lower reading is worse. The reading must be a finite number or a decimal string: null, an empty or blank string, NaN, an infinity, true or a hex string such as '0x1F' returns 'unknown', as does a missing thresholds object.

value number The reading to classify.
thresholds any An object of the form { advisory, warning, critical, direction }. Any threshold that is absent is skipped.

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
`OnActivate` activate StatusTileActivateEventDetail	This event is triggered when an interactive tile is pressed with the pointer or with Enter or Space. It is not raised when interactive is off. `Label` string The tile's label. `Value` dynamic The reading. `State` string The tile's state.
`OnStateChange` stateChange StatusTileStateChangeEventDetail	This event is triggered when the state changes. The event detail contains the new state and the previous state. `State` string The new state. `OldState` string The state before.

Types

`enum StatusTileState`

StatusTileState.Neutral "neutral" StatusTileState.Ok "ok" StatusTileState.Advisory "advisory" StatusTileState.Warning "warning" StatusTileState.Critical "critical" StatusTileState.Unknown "unknown"

`enum StatusTileTrend`

StatusTileTrend.None "none" StatusTileTrend.Up "up" StatusTileTrend.Down "down" StatusTileTrend.Flat "flat"

`enum StatusTileTrendPolarity`

StatusTileTrendPolarity.Neutral "neutral" StatusTileTrendPolarity.HigherIsBetter "higherIsBetter" StatusTileTrendPolarity.LowerIsBetter "lowerIsBetter"

CSS variables

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

--smart-status-tile-value-size --smart-status-tile-label-size --smart-status-tile-meta-size --smart-status-tile-marker-width --smart-status-tile-padding --smart-status-tile-state-color