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.
<smart-faceplate> · 23 properties, 5 methods, 5 events · source/modules/smart.faceplate.js
Usage in TypeScript
The package ships its definitions: Faceplate is the element type and FaceplateProperties the properties, both exported from smart-industrial/source/typescript/smart.industrial. document.querySelector('smart-faceplate') is typed as Faceplate.
import { Faceplate, FaceplateProperties } from 'smart-industrial/source/typescript/smart.industrial';
const faceplate = document.querySelector('smart-faceplate') as Faceplate;
faceplate.tag = 'FIC-101';
faceplate.interactive = true;
faceplate.addEventListener('setpointChange', (event: CustomEvent) => console.log(event.detail));
faceplate.requestSetpoint(42);
Properties
| Property | Type, default | Description |
|---|---|---|
tag | string | Sets or gets the loop tag, shown first and used as the accessible name. |
description | string | Sets or gets the description of the loop, shown next to the tag. |
unit | string | Sets or gets the engineering unit of the process value and the setpoint. |
processValue | number | null | 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 | number | null | Sets or gets the setpoint. Use requestSetpoint to request a change and set the property when the controller confirms the new value. |
output | number | null | Sets or gets the controller output as a percentage of the output range. |
min | number | Sets or gets the minimum of the process range. |
max | number | Sets or gets the maximum of the process range. |
outputMin | number | Sets or gets the minimum of the output range. |
outputMax | number | Sets or gets the maximum of the output range. |
precisionDigits | number | Sets or gets the number of decimal places shown in the readouts. |
mode | FaceplateMode | 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 | array | Sets or gets the modes offered by the loop. A mode that is not in the list cannot be requested. |
alarmLimits | object | null | 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 | object | null | 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 | FaceplateQuality | 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 | boolean | 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 | number | 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 | number | Sets or gets the amount by which an arrow key moves the output. |
showTrend | boolean | Determines whether a small embedded trend of the process value against the setpoint is shown. The trend is a strip chart. |
trendLength | number | Sets or gets the number of samples kept by the embedded trend. |
compact | boolean | 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 | number | 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 |
|---|---|
requestSetpoint(value: number): void | 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. |
requestOutput(value: number): void | 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. |
requestMode(mode: string): void | 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. |
alarmState(): string | Returns the alarm limit the current process value has crossed: hiHi, hi, lo, loLo or normal. |
static limitStateOf(value: number, limits: any): string | 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
The data of an event is in event.detail. setpointChange, outputChange and modeChange are requests: the faceplate raises them only when interactive is true, shows the requested value as pending and keeps the confirmed value until the application sets setpoint, output or mode. A request still pending after pendingTimeout raises writeTimeout, and alarmStateChange reports the process value moving into or out of an alarm band.
| Event | Description and detail |
|---|---|
setpointChange | 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 number The requested setpoint, clamped to min and max.tag string The loop tag. |
outputChange | This event is triggered when a new controller output is requested.value number The requested output, clamped to outputMin and outputMax.tag string The loop tag. |
modeChange | This event is triggered when a change of mode is requested.value string The requested mode.tag string The loop tag. |
alarmStateChange | 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. |
writeTimeout | 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 any The value that was requested. |
Types
type FaceplateMode
'auto' | 'manual' | 'cascade' | 'outOfService'
type FaceplateQuality
'good' | 'uncertain' | 'bad' | '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