Example A · F1B trip precedence
- F1B belongs to Feed B, whose normal domain color is green.
- The breaker is rendered open/tripped.
- Alarm severity therefore overrides green.
- The arm, X and label render red in both columns.
Technical manual · deterministic visual prototype
RZ Cockpit Re-skin Mockup
The engineering and visual basis for the Before/After prototype in rz-cockpit-mockup.html: authored fixture values, semantic color mapping, seeded SVG trace, count-up settle and the limits that prevent it being mistaken for an operational cockpit.
01 Purpose & engineering basis
The artifact isolates one design question: can an industrial-instrument register improve hierarchy and scanability while retaining electrical and cooling semantic colors? All displayed values are fixtures chosen to keep the comparison stable; they are not calculated from a facility model.
Boundary: visual fidelity is not telemetry validity. PUE, IT MW, GPU count, CDU count, breaker state and trace amplitude have no shared calculation model in this prototype.
02 Fixture register & source binding
| Fixture | Displayed value | Purpose | Source |
|---|---|---|---|
| PUE | 1.30 | Two-decimal derived-KPI typography. | Authored markup / count target. |
| IT | 14.26 MW | Two-decimal power typography. | Authored markup / count target. |
| GPUs | 7,776 | Thousands separator and integer settle. | Authored markup / count target. |
| CDU | 36/48 running | State ratio fixture. | Authored markup. |
| SLD | A/B closed, F1B trip | Domain color versus alarm override. | sld()/breaker(). |
| CDU return | 46 seeded points | Static versus phosphor trace surface. | seed(46,22,66,11). |
03 Calculation and animation methodology
xₙ₊₁ = (9301 × xₙ + 49297) mod 233280yₙ = 22 + 44 × xₙ / 233280Seed 11 and 46 samples produce a repeatable visual trace. Units are intentionally not asserted because the algorithm is not a thermal model.
e = 1 − (1 − min(elapsed / duration, 1))³strokeOffset = pathLength × (1 − e)KPI display = target × e; hardSettle = targetTrace duration is 1,400 ms; KPI duration 900 ms; a 1,200 ms hard settle makes the final content deterministic.
04 Semantic color and visual method
| Semantic | Color | Rule | What may change |
|---|---|---|---|
| Feed A | Blue #3b82f6 | Electrical domain identity. | Surface, glow and line weight only. |
| Feed B | Green #22c55e | Electrical domain identity. | Surface, glow and line weight only. |
| Trip/alarm | Red #ef4444 | Status overrides source-domain color. | Never reassigned to decoration. |
| Cooling | Cyan #2BE8FF | Thermal/cooling trace. | Glow may be restrained. |
| After surface | Charcoal/green-muted | Instrumentation character. | Contrast and density after testing. |
Color is explanatory but insufficient alone. A production adoption must retain labels such as Feed A, Feed B and TRIP plus accessible state text.
05 Worked examples
Example B · deterministic trace
- Start with seed 11.
- Apply the linear congruential recurrence 46 times.
- Map each result to 22–66 display units.
- Map samples to a 420 × 90 SVG path.
- Reload: path data remains identical.
Example C · hard-settle
- PUE begins at 0.00.
- Cubic ease approaches 1.30 during 900 ms.
- A timeout calls
settle()at 1,200 ms. - Final accessible text is exactly 1.30.
Example D · responsive layout
- Desktop grid has two equal columns.
- Viewport crosses below 900 px.
.cmpbecomes one column.- SVG viewBox preserves aspect ratio.
06 Review workflow & verification
- Read the visible scope sentence before evaluating aesthetics.
- Compare identical concepts, not animation novelty.
- Verify semantic colors and red trip precedence.
- Wait for hard-settle and capture the After result.
- Reload and compare trace path/checksum.
- Inspect desktop and 375 px layouts.
- Test reduced-motion expectation before any production adoption.
- Record accepted tokens and rejected patterns in the design standard.
Do not infer: this prototype does not prove datahallAI integration, alarm correctness, formula parity, keyboard completeness or deploy readiness.
07 Standards & references
- rz-cockpit-mockup.html — current source authority for fixture values, SVG geometry, seeded trace and animation.
- RZ design standard / documentation design.md — IBM Plex Sans + JetBrains Mono, thin-line discipline, industrial instrumentation and approved signal colors.
- WCAG 2.2 — contrast, keyboard, focus and non-color meaning requirements for any production reuse.
- prefers-reduced-motion — platform signal that must suppress non-essential motion in a production implementation.
- Telemetry Docs Standard — public PRD/manual structure, provenance and source-preservation gates.
08 Glossary, known defects & limitations
| Term | Meaning | Limit |
|---|---|---|
| Fixture | An authored value held constant for visual comparison. | Not measured or engine-derived telemetry. |
| Semantic color | Color with a stable operational meaning. | Must also have text/shape/state. |
| Hard settle | Final assignment after animation. | Does not itself implement reduced motion. |
| Seeded trace | Repeatable pseudo-random SVG series. | No time unit, sensor or thermal equation. |
| Instrument register | Compact mono, thin-line industrial surface. | A visual language, not a control system. |
Known limitations: the prototype omits the standard navbar/theme/cookie shell and reduced-motion handling. Its Before and After columns intentionally repeat one CDU fixture each so the comparison uses the same four-value register; this is not a duplicate tile within either column. Implementation gaps are documented rather than silently fixed because the telemetry-doc task freezes cockpit edits to exactly two additive links.