Operator screens and process graphics

Faceplate `<smart-faceplate>`

Faceplate is a control loop faceplate that shows the process value, the setpoint and the controller output of a loop together with its mode.

JavaScript TypeScript Angular React Vue Blazor

<smart-faceplate> · 23 properties, 5 methods, 5 events · source/modules/smart.faceplate.js

Usage in Blazor

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

<Faceplate @ref="faceplate" Tag="FIC-101" Interactive="true"
    OnSetpointChange="OnSetpointChange" />

@code {
    Faceplate faceplate;

    void OnSetpointChange(Event ev)
    {
        FaceplateSetpointChangeEventDetail detail = ev["Detail"];
    }

    // void RequestSetpoint(double value)
    void Call() => faceplate.RequestSetpoint(42);
}

Properties

Parameter	Type, default	Description
`Tag` tag	string	Sets or gets the loop tag, shown first and used as the accessible name.
`Description` description	string	Sets or gets the description of the loop, shown next to the tag.
`Unit` unit	string	Sets or gets the engineering unit of the process value and the setpoint.
`ProcessValue` processValue	object	Sets or gets the process value reported by the plant. The faceplate never sets this value itself. A null or non-numeric value is drawn as absent rather than as zero.
`Setpoint` setpoint	object	Sets or gets the setpoint. Use requestSetpoint to request a change and set the property when the controller confirms the new value.
`Output` output	object	Sets or gets the controller output as a percentage of the output range.
`Min` min	double 0	Sets or gets the minimum of the process range.
`Max` max	double 100	Sets or gets the maximum of the process range.
`OutputMin` outputMin	double 0	Sets or gets the minimum of the output range.
`OutputMax` outputMax	double 100	Sets or gets the maximum of the output range.
`PrecisionDigits` precisionDigits	int 1	Sets or gets the number of decimal places shown in the readouts.
`Mode` mode	FaceplateMode auto	Sets or gets the controller mode. Use requestMode to request a change and set the property when the controller confirms the new mode. The output column can be operated in manual mode only.
`AvailableModes` availableModes	IEnumerable<object> ["auto","manual"]	Sets or gets the modes offered by the loop. A mode that is not in the list cannot be requested.
`AlarmLimits` alarmLimits	object	Sets or gets the four process alarm limits as an object with hiHi, hi, lo and loLo members. They are drawn as lines on the process value column, and the column takes the alarm colour when a limit is crossed. Assign a new object to update the component; object properties are compared by value.
`OutputLimits` outputLimits	object	Sets or gets the part of the output range the operator may drive into, as an object with low and high members. A request outside it is clamped before it is reported.
`Quality` quality	FaceplateQuality good	Sets or gets the quality of the reading. A quality other than good is shown as a badge and included in the spoken value, so a stale value is not presented as a current one. Bad and stale readings are also drawn as not live: the process column hatched and the PV readout grey, struck through when bad and italic when stale. Requests stay possible - with a bad process value the operator may still need to drive the output in manual.
`Interactive` interactive	bool false	Determines whether requests can be made. Off by default: a read-only faceplate does not take keyboard focus, so a screen with many faceplates does not collect tab stops that do nothing.
`SetpointStep` setpointStep	double 1	Sets or gets the amount by which an arrow key moves the setpoint. Page Up and Page Down move ten steps; Home and End move to the ends of the range.
`OutputStep` outputStep	double 1	Sets or gets the amount by which an arrow key moves the output.
`ShowTrend` showTrend	bool false	Determines whether a small embedded trend of the process value against the setpoint is shown. The trend is a strip chart.
`TrendLength` trendLength	int 120	Sets or gets the number of samples kept by the embedded trend.
`Compact` compact	bool false	Determines whether the trend, the description and the column captions are hidden, for a strip of loops along the bottom of an overview screen.
`PendingTimeout` pendingTimeout	int 5000	Sets or gets the time in milliseconds a request may remain pending before it is dropped and the writeTimeout event is raised. Set it long enough for a round trip to the control system and short enough that the operator is not left waiting for a request that will not be answered. A request keeps its deadline when the faceplate is moved to another parent.

Methods

Method	Description
`void RequestSetpoint(double value)`	Requests a new setpoint. Raises the setpointChange event and returns without changing the setpoint. The value is clamped to min and max before it is reported. Does nothing unless the faceplate is interactive and enabled. The mode rules apply: nothing is raised in cascade or out of service. Asking for the setpoint already in force raises nothing, and asking again for a value already pending raises nothing until it is answered or times out. `value` number The requested setpoint.
`void RequestOutput(int value)`	Requests a new controller output. Raises the outputChange event and returns. The value is clamped to outputLimits, then to outputMin and outputMax, before it is reported. Does nothing unless the faceplate is interactive and enabled. The mode rules apply: the output is requested only in manual. Asking for the output already in force, or again for a value already pending, raises nothing. `value` number The requested output.
`void RequestMode(string mode)`	Requests a change of mode. Raises the modeChange event and returns. A mode that is not in availableModes is ignored. Does nothing unless the faceplate is interactive and enabled. Asking for the mode already in force, or again for a mode already pending, raises nothing. `mode` string The requested mode.
`Task<string> AlarmState()`	Returns the alarm limit the current process value has crossed: hiHi, hi, lo, loLo or normal.
`Task<string> LimitStateOf(int value, object limits)` static: `customElements.get('smart-faceplate').limitStateOf(…)`; the wrapper's method of this name calls the element and fails	Also available as a static method of the class. Returns the alarm limit a reading has crossed, given a limits object. It has no side effects, so a banner or a tile wall can classify a reading without creating a faceplate. The most severe limit is returned: a reading above hi-hi is also above hi, and hi-hi is reported. `value` number The reading. `limits` any An object with hiHi, hi, lo and loLo members. Any absent limit 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
`OnSetpointChange` setpointChange FaceplateSetpointChangeEventDetail	This event is triggered when a new setpoint is requested. The faceplate does not change the setpoint; set the setpoint property when the control system confirms the value. `Value` double The requested setpoint, clamped to min and max. `Tag` string The loop tag.
`OnOutputChange` outputChange FaceplateOutputChangeEventDetail	This event is triggered when a new controller output is requested. `Value` double The requested output, clamped to outputMin and outputMax. `Tag` string The loop tag.
`OnModeChange` modeChange FaceplateModeChangeEventDetail	This event is triggered when a change of mode is requested. `Value` string The requested mode. `Tag` string The loop tag.
`OnAlarmStateChange` alarmStateChange FaceplateAlarmStateChangeEventDetail	This event is triggered when the process value crosses into or out of an alarm limit. `State` string The alarm limit the process value now sits beyond: hiHi, hi, lo, loLo, or normal. `OldState` string The state before.
`OnWriteTimeout` writeTimeout FaceplateWriteTimeoutEventDetail	This event is triggered when a request has been pending for pendingTimeout without the application writing the value back. The request is dropped and is no longer shown as pending. `Property` string Which request went unanswered: setpoint, output or mode. `Value` dynamic The value that was requested.

Types

`enum FaceplateMode`

FaceplateMode.Auto "auto" FaceplateMode.Manual "manual" FaceplateMode.Cascade "cascade" FaceplateMode.OutOfService "outOfService"

`enum FaceplateQuality`

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

CSS variables

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

--smart-faceplate-track-width --smart-faceplate-track-height --smart-faceplate-value-size --smart-faceplate-fill --smart-faceplate-width