# 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.