wrps-demo-kit/04-scada/hmi/component-kit.md

The WRPS component kit

The house style for this project's displays. AOG is the reference for how a component is parameterised — it is not used directly, and only the components this project needs exist.

Applies to this display and every future display in the project. A new requirement adds a component here; it never adds a second style.

Tokens

Named like AOG's AOG_C* so they map onto CI Server global parameters. A restyle is an edit to this table and nothing else.

Token	Value	Use
WRPS_CBG	#EDF0F4	display ground
WRPS_CSF	#FFFFFF	panel / surface
WRPS_CSF2	#F5F8FB	recessed surface, inside a value box
WRPS_CBD	#C3CCD8	border — heavier than a desktop design, for distance
WRPS_CBD2	#DFE5EC	hairline, internal dividers
WRPS_CT1	#0E1621	primary ink
WRPS_CT2	#465468	labels, secondary ink
WRPS_CAC	#0B7DA8	interaction only — selected, focus, faceplate rule
WRPS_CAC2	#12A5D9	accent bright — focus ring
WRPS_CRUN / bg	#0F8A45 / #E4F6EA	running / on
WRPS_CWRN / bg	#A85B00 / #FFEFD2	attention
WRPS_CALM / border	#D32029 / #96131A	alarm — always a filled block
WRPS_CPRC	#2B3F52	pipe and vessel outline
WRPS_CWTR	#9FCFE6	liquid fill

Colour policy. The plant is drawn in ink on white. Cyan means you can act on this; green, amber and red mean the plant is telling you something. Nothing else is coloured, so an abnormal state is the only colour on the screen.

Abnormal is a filled block, never coloured text. At distance, red text on white reads as slightly darker grey; a filled red block with white text does not. One fault propagates to every place it is relevant — banner, symbol, instrument bubble, value box, faceplate badge — so it cannot be missed from any part of the screen.

Type. Labels Segoe UI, values and tag names Consolas. Both ship with Windows, so nothing depends on a font that might not be installed — but Segoe is the modern face and Tahoma is what dates a screen. Consolas is monospaced, so digits keep their column as values update at 100 ms, and using it for tag names gives the display its technical read.

Sized for a TV. Nothing on the display is smaller than ~1.35% of screen height (about 15 px at 1080p); the wet well level is the largest thing at 4.6%, because it is the number a room actually watches. Ink is near-black on white and borders are heavier than a desktop design would use — contrast is what survives a bright room and a projector.

Why it does not look like AOG. What dates AOG is the bevelled 3D artwork and mid-grey ground, not the grey itself. This kit is flat, square-cornered, hairline bordered, white on cool neutral.

Components

Every one takes the AOG-shaped parameter set where it applies: item, setPointItem, tagName, format, showAlarmIndicator, selectable, displayToActivate.

Component	Purpose	Key parameters	States
WRPS_Display	The 16:9 shell: ground, title bar, body, simulation band	—	—
WRPS_Title	Display header — name, drawing ref, station states right	title, subtitle	—
WRPS_Panel	Every framed region. Panels never nest	header	—
WRPS_Value	Every analog value	item, tagName, format, units, size, displayToActivate	normal · large · warn · alarm
WRPS_State	Every discrete status	item, onText, offText, inverse, severity	off · on · warn · alarm
WRPS_Button	Every command and mode selection	label, item, writeValue, pressed, variant	normal · pressed · destructive
WRPS_Pump	Pump symbol, circle with impeller cross	item, tagName, displayToActivate	stopped · running · tripped
WRPS_Valve	Swing check and manual isolation, from the P&ID legend	kind	static
WRPS_Instrument	ISA bubble, function letters over loop number	letters, loop, item	static · with value
WRPS_Vessel	Wet well: outline, liquid fill, setpoint ladder at true heights	levelItem, setpointItems, range	—
WRPS_Faceplate	Popup display frame — cyan rule, kit components inside	title, subtitle, item	—
WRPS_AlarmBanner	Present only when something is abnormal; pushes the display down	alarmList, count	hidden · active · acknowledged

WRPS_SimBand is not another component: it is WRPS_Button and WRPS_Value inside a fenced region with a cyan rule and a standing label, so the simulation controls can never be mistaken for plant control.

Rules

1. No hand-drawn values or buttons. If it shows a number it is WRPS_Value; if it is clickable it is WRPS_Button. This is what stops displays drifting.
2. Faceplates are separate displays opened via displayToActivate, matching how AOG works — not overlay groups on the parent display.
3. Setpoint edits go through a numeric entry popup, not an inline field.
4. State is never colour alone. WRPS_State carries a square marker and its own text, so it survives a projector or a colour-blind operator.
5. Simulation controls stay in the band. They never appear beside plant controls.
6. An abnormal condition propagates everywhere it is relevant — banner, plant symbol, instrument bubble, value box, faceplate badge. One fault, five places.
7. Blink is reserved for unacknowledged alarms, and only on the tag name, not whole regions. CI Server supports this natively (blinkEnabled, blinkDelay, 700 ms in the reference screens).
8. Green is only for genuinely-running equipment. If normal operation is colourful, red has competition and stops being an alarm.

Geometry

16:9. Laid out on the editor's 4 px snap grid; 1920 × 1080 unless told otherwise.