← zurück

Approach A — «Instrumententafel» · hand-off sheet (BRIEF-v2 step 2)

Status 2026-10-10: wireframe-level mockup of the Motorspritze (MS 4) and Tanklöschfahrzeug (TLF 2) Details panels, mechanism family [I] Instrument from CONTROL-MAP.md. Surface only: every number is hard-coded from the screenshots (frames 06, 07, 09); the page contains no hydraulics.

0. Contracts that apply to every control (CONTROL-MAP §0, repeated so this sheet stands alone)

1. Original control → this approach's control

Row numbers are the CONTROL-MAP rows. "Mock" says what the static page actually does today.

Row Original (screenshot) This approach Range · step · precision Touch Keyboard State colours Mock
C1 Panel title «Löschwasser» + × Nameplate strip at the top of the frame, round close key at the right — tap × Enter/Space — key inert
C2 Tab strip Details · Werkzeuge · Netzwerk · Warnungen with red count circle Instrument spine: four 56 × 56 square keys (icon + condensed label) stacked on the panel's outer (right) edge; pressed key inset + teal; the Warnungen key prints the count as a plain numeral beside its icon and takes the orange outline/text (red when a critical warning exists); below 640 px the spine becomes a row of the same four keys under the nameplate count = live warning count tap Ctrl+1…4; ↑/↓ when the spine is focused orange / red by severity keys inert except pressed state; count 3 (frames 06/09), 2 (frame 07)
C2 banner — (new) One-line warning banner pinned at the top of Details whenever count > 0: triangle icon, numeral, «Warnungen», › key; tapping it opens the Warnungen view — tap Enter orange rule + tint count follows the state
C6 / A1 / B1 Blue «MS» / orange «TLF» tile, bold name, grey «Typ | Höhe», dotted rule Bubble: 80-pt round badge with the 3-D piece (pump on skid / red tanker, one camera angle, flat colour + soft shadow), the standard symbol stamped small at the bubble's foot («MS» blue square, «TLF» orange), state ring (green = Pumpe in Betrieb, grey = Aus); on the TLF a thin inner teal ring = Füllstand in % of Tankinhalt. Name 24 pt beside it, «Motorspritze · 559 m ü. M.» / «Tanklöschfahrzeug · 565 m ü. M.» beneath in condensed tabular figures altitude whole m — — ring: green / grey / orange / red ring follows the rocker; inner ring follows the % keys
C3 Small-caps grey uppercase section labels Legend plates: sentence-case label in a hairline-bordered plate at the left, rule continuing to the right edge; the section's controls sit in a faint group box. Texts verbatim: Pumpentyp · Maschinisten-Tafel · Wasserbezug der Pumpe · Tankinhalt · Pendelbetrieb (Wassertransport im Kreisverkehr) — — — — —
A2 / B2 Native <select> with right caret, text truncated Picker row «Pumpentyp» with the full value right-aligned (wraps, never truncated) and a right-pointing «›»; tap/Enter opens the list sheet: on desktop the row expands in place into the list (radio mark on the current row, name on line 1, «(flow, bar)» on line 2), on phone a bottom sheet with scrim; a row tap selects and closes list of ~6 classes (engine's list) tap row, tap option Enter opens · ↑/↓ moves · Enter/Space selects · Esc closes selected row teal 6 rows; only the two observed classes are ground truth, the other four are EN 1028 class designations as placeholders; choosing another row changes the row text only (no recompute)
A3 / B3 iOS pill toggle Rocker: two adjoining keys in one bevelled housing, «In Betrieb» (check glyph) · «Aus» (wording: owner); the pressed half is inset — teal when the on-side is pressed, neutral grey when the off-side is pressed, so the word and the position carry the state, not the colour on / off tap either half (≥ 56 × 46 pt) ←/→ flips, Space/Enter on the focused half teal on / grey off; bubble ring follows ring follows; numbers do not change
A4 / B4 (input) Horizontal range slider + «8.0 bar» text Arc gauge «Druck» −1…16 bar, 240° sweep opening downward, major ticks every 2 bar (labelled), medium every 1, minor every 0.5. Tick-tabs 6 · 8 · 10 · 12 are raised keys riding the rim (hit area r = 22 units ≈ 44–60 px); the teal needle = set value; drag the face (angle → value at 0.1), tap the face to jump; −0.1 / +0.1 keys at the gauge's lower shoulders beside the open arc; long-press accelerates. Set range 0–16 (the −1 is read-out range for the grey inlet needle only) 0–16 bar · 0.1 · one decimal drag, tap, tabs, ± keys ←/→ ±0.1 · Shift ±1.0 · Home/End 0/16 · PgUp/PgDn next/previous tab — fully interactive; «10 bar in two taps»: one tap on tab 10
A6 / B6 (read-out) Green tile «AUSGANGSDRUCK 8.0 bar» Centre numeral of the same «Druck» gauge = the engine's Ausgangsdruck read-out (max(set, inlet)); when read-out ≠ set a hollow teal ring sits on the rim at the actual outlet and the ledger prints the read-out; null (KEIN_ZULAUF) → centre «–», ring red bar · 0.1 — — — centre follows the needle; the hollow mark appears when the MS needle is dragged below the 7.5-bar inlet (display rule only)
A5 / B5 Green tile «EINGANGSDRUCK» Grey needle on the «Druck» gauge (7.5 on MS 4 → straight up; 0.0 on TLF 2; may be negative) + mini-ledger row «Eingangsdruck 7.5 bar» with a green lamp dot bar · 0.1 · may be negative — — lamp green / orange / red fixed
A9 / B9 Tile «ERFORDERLICHE EINSTELLUNG» («–» tofu / orange 8.8 / green 12.0) Orange marker (triangle on the rim) at the required value; when it lies beyond the set needle an orange wedge fills the rim gap set → required (TLF 8 bar: 8.0 → 8.8); when required ≤ set the marker turns green and sits on the needle (clamped display, as the original); «–» = no marker, ledger prints «–». Ledger row shows the value plus a delta chip «+0.8 bar» in orange so the attention state reads as a number, not only a colour bar · 0.1 — — orange > set · green ≤ set marker/wedge redrawn when the needle moves; the required value itself is the loaded state's (8.8 / 12.0)
A7 / B7 Green tile «IST-DURCHFLUSS» Needle of the read-out gauge «Durchfluss» (0–2'500 l/min for the MS class, 0–3'500 for FPN 10-2000), centre numeral 400 / 800 whole l/min — — lamp green fixed per state
A8 / B8 Tile «MAX. LEISTUNG» Max mark (heavy black tick) on the Durchfluss rim; face shading from the hub: solid teal sector 0 → Ist, light sector Ist → Max, hatched beyond Max (not available); the mark moves with the pressure (2'366 at 8 bar → 1'549 at 12 bar) whole l/min — — — moves between the two precomputed states
A10 / B10 Tile «LEISTUNGSRESERVE» Reserve sector = the light sector between needle and max mark; numeral in the mini-ledger as a sum line (rule above) «Leistungsreserve 1'200 / 1'566 / 749 l/min» whole l/min — — — per state
B11 Native select «aus eigenem Tank (Zulauf …» Rotary selector switch: round knob with pointer between two printed positions, «aus eigenem Tank (Zulauf …)» (observed) and «direkt vom Zulauf» (wording: owner — the original's second option was never shown); tap a position label (≥ 56 pt) or the knob, pointer rotates list of ≥ 2 sources tap label / knob ←/→, Space cycles selected label bold + teal dot pointer moves; numbers do not change
B12 Borderless number «2400», «l» floated right Odometer thumbwheel: four digit wheels «2 4 0 0» (46 × 66 px each, group ≈ 200 px) in one recessed window, neighbours faintly visible above/below; a fifth/sixth wheel appears when the value needs it; the group also drags as a coarse 100-l wheel whole l · ≥ Füllstand · unbounded above flick a wheel (snaps per digit), tap a digit for typed entry ↑/↓ one digit on the focused wheel, ←/→ change wheel, digit keys type and advance — wheels ↑/↓, typing and mouse-wheel work; typed-entry overlay and drag not built
B13 As B12 Odometer as B12 plus four tap-only tick-tab keys 25 % · 50 % · 75 % · 100 % (litres computed from Tankinhalt by the engine) whole l · 0 … Tankinhalt tap a % key as B12 pressed key teal keys set the wheels (600 / 1'200 / 1'800 / 2'400), the vessel fill and the bubble's inner ring; «Leer in» stays 06:00 (would need the engine)
B15 Grey card, flat teal progress bar, «2400 / 2400 l (100%)» Tank vessel (read-out only, no drag, no side scale): vessel outline with filler neck, 76 × 128, water rising from the bottom, «100 %» printed inside; beside it the two ledger lines «Füllstand 2'400 l» · «Tankinhalt 2'400 l» (the compound «x / y l» string is never printed) % whole — — water teal; text turns dark below ~55 % fill follows the % keys
B16 «Leer in 06:00» text at the bar's right Countdown dial: small clock face with 12 ticks, a teal remaining-time ring that empties as the simulation runs, «06:00» centre, «Leer in» caption beneath. State rule: net ≥ 0 → «–» with the ring fully shaded; pump off → «–»; empty → «00:00» mm:ss — — ring teal; red when < 1 min (threshold: owner) fixed at 06:00, ring full
B14 «400» + «l/min» right Small arc gauge «Befüllung max.», dial 0–3'500 l/min, minor ticks every 100, majors every 500, labels 0 and 3'500, tick-tabs 400 · 800 · 1'200 · 1'600 · 2'000 (preset list: owner), needle drag at 1 l/min, −1 / +1 keys at the lower shoulders, centre numeral tappable for typed entry: an inline digit field opens in the hub over the numeral (whole l/min, unbounded above); above 3'500 the needle rests at the dial's end and the numeral — the only value text on the instrument — prints the typed value (e.g. 3'600) with a dotted underline that marks «über Skalenende» whole l/min · ≥ 0 · unbounded above (drag, tap and tabs reach 0–3'500; typing and the ± keys reach any value) drag, tap, tabs, ± keys, tap numeral → type ←/→ ±1 · Shift ±10 · Home/End 0 / 3'500 · PgUp/PgDn tabs · Enter = typed entry — interactive at step 1; typed entry built (Enter or leaving the field commits, Esc cancels, digits only, floor 0); long-press acceleration not built; no recompute
B17 «▶ Start» · «Tempo: 1x» select · boxed clock inside the tank card removed from the tank card → C5 transport deck (one per module) — — — — —
C5 Three scattered simulation controls Transport deck pinned at the panel's foot: one round 56-pt key whose label switches «Start» / «Pause» (play / pause glyph), a detent knob for Tempo with the engine's positions printed around it (only «1×» observed, so only that position is labelled) and the value beside it, and the clock as a recessed digital read-out «11:18». Shown in both frames because each frame is the same side panel; there is exactly one deck per module Tempo from the engine's list; clock mm:ss tap Space (deck focused) = Start/Pause · ←/→ Tempo — Start/Pause toggles the label and glyph; clock and Tempo static
B18 Pill toggle (off) Rocker «Aktiv» · «Aus» (wording: owner) as A3 on / off tap ←/→ on = teal; off = neutral pressed flips the lamp row (B21)
B19 «15» + «min» Minute dial «Umlaufzeit», dial 0–120 min, detents (minor ticks) every 5, major ticks every 10, numerals every 20, −1 / +1 keys, needle cannot rest on 0 (floor 1), centre numeral tappable for typed entry as B14 (unbounded above: above 120 the needle rests at the dial's end, the numeral prints the typed value) whole min · ≥ 1 · unbounded above (drag and tap reach 1–120; typing and the ± keys reach any value) drag, tap, ± keys, tap numeral → type ←/→ ±1 · Shift ±10 · Home/End 1 / 120 · PgUp/PgDn 5/10/15/20/30/45/60/90/120 · Enter = typed entry — interactive at step 1; typed entry built (floor 1: typing 0 gives 1); long-press acceleration not built
B20 «800» + «l/min» Small arc gauge «Abladeleistung max.», built exactly as B14 (own dial, own −1 / +1 keys, own typed entry) as B14 as B14 as B14 — as B14: interactive at step 1, typed entry built, long-press acceleration not built
B21 Grey status card «PENDELBETRIEB AKTIV / inaktiv (stationär)» Indicator lamp row set into the Pendelbetrieb legend line: round lamp (grey off / green lit) followed by the state word «inaktiv (stationär)» (active text: owner) two states — — grey / green follows the rocker («aktiv» placeholder text when on)
A11 / B22 / C4 Pale-red «Entfernen» button bottom-left Guarded key, right-aligned at the foot: neutral grey key with trash glyph and the word; first tap arms it (turns red, label «Bestätigen», a 3-s countdown ring runs around the glyph), a second tap within 3 s removes, otherwise it disarms; blur disarms — two taps by design Delete arms · Enter confirms · Esc disarms red only when armed arms/disarms; «Entfernt (Vorschau)» flash instead of removing

Read-out layout (CONTROL-MAP §6.1, dial cluster)

Two instruments side by side (≥ 220 px each; stacked on phone), each with a three-row mini-ledger beneath: «Druck» → Eingangsdruck · Ausgangsdruck · Erforderliche Einstellung; «Durchfluss» → Ist-Durchfluss · Max. Leistung · Leistungsreserve (sum line). Values 21 px condensed, unit 13 px, dotted rules, green lamp dot = ok, orange = attention. This is MANIFEST §6's «required-vs-set as one gauge rather than two tiles»: input (needle), read-out (centre), inlet (grey needle) and required (marker + wedge) live on one dial.

2. Deviations from the CONTROL-MAP [I] column (with reasons)

  1. A2/B2 Pumpentyp — picker row + list sheet instead of the drum picker. The design seed for approach A names the picker row. Reason: a drum shows only three two-line rows at a time and needs a flick to reach the rest of a six-entry list; with gloves a flick overshoots. The list sheet shows all classes at once with 48-pt rows, one tap each. The [F] picker-row contract (§0) is followed: no bordered box, «›» not a caret, in-place expansion on desktop, bottom sheet on phone.
  2. A3/B3/B18 on/off — rocker button pair instead of the rotary two-position switch. Seed: «physical two-position rocker rendered as a button pair». Reason: a rotary switch reads its state by pointer angle only and its knob is a single small target; the rocker gives each state its own ≥ 56-pt half and prints the word.
  3. ±0.1 / ±10 / ±1 keys at the lower shoulders (beside the open arc) rather than the upper shoulders. Reason: the preset tick-tabs ride the upper rim and were covered by the keys on the small dials; the lower corners of the square instrument are empty.
  4. Umlaufzeit numerals every 20 min (ticks every 10, detents every 5) instead of numerals every 10. Reason: 13 numerals around a 250-px dial fall below the 14-pt label floor.
  5. Tempo knob positions unlabelled except «1×». Reason: the engine's Tempo list was never observed; nothing is invented.
  6. Transport deck shown in both frames. It is one control per module; it appears twice only because the page shows the same side panel in two states.
  7. Warning banner text carries only the count («3 Warnungen»), not a warning sentence — the list texts for the shown states are unverified (MANIFEST §4.8).
  8. ±1 keys on the l/min dials (the brief's step is whole l/min) instead of ±10. A ten-step jump is Shift+arrow on the keyboard and, in production, the long-press acceleration; the coarse moves are the tick-tabs and the drag (≈ 7 l/min per px on a 250-px dial), the fine ones the keys and typed entry. The dial's scale stays 0–3'500 (0–120 min); a typed value beyond it is held as a number, not as a needle angle (see B14).

3. State colours used

Token Light Dark Used for
--accent #0b6a76 #4dbac6 set needle, pressed key, pressed tab, tank ring, countdown ring, selector dot
--ok #277a42 #5cc47c bubble ring (Pumpe in Betrieb), ledger lamps, marker when required ≤ set, lit lamp
--warn #a35300 #f0a24c required marker + wedge, Erforderliche row, «+0.8 bar» chip, Warnungen key, banner
--crit #c2392d #ef6f64 armed Entfernen, null read-out ring, < 1 min countdown (threshold: owner)
--water #2a9bb0 #3aa8bc tank water
--needle-in #7b858c #a3adb3 inlet needle
--sym-ms / --sym-tlf #2d6fd4 / #ee7a19 #3b7de6 / #f08a2e standard symbol stamps

All colours are tokens on :root; component rules contain no literals.

Text contrast of the three state tokens (WCAG 2 ratio, computed from the token values; the browser measurement is in §6 round 3). Light: --warn on --warn-tint 4.58, on --face-2 4.79, on --face 5.11, on --key 5.16 · --accent on --accent-tint 4.94, on --key-pressed 4.91, on --face 5.81, on --key 5.87, --accent-ink on --accent 6.29 · --ok on --face-2 4.60, on --face 4.91, on --key 4.96. Every state-coloured text in the light theme therefore sits at ≥ 4.5 : 1, the smallest text included (11-px spine label, 13-px delta chip); the dark tokens were not changed (lowest pair 5.24). The light accent / ok / warn were darkened for this on 2026-10-10 (QA round 3); the hues are unchanged, so the colour meaning table above still reads the same.

4. Hard-coded on the page

5. Open points for the owner (carried from CONTROL-MAP §8)

Full Pumpentyp list · Wasserbezug options · Tempo list · preset lists for Befüllung / Abladeleistung / Tankinhalt · wording of «Aus», «Aktiv», «direkt vom Zulauf», «Bestätigen» · «Leer in» text when net ≥ 0 and when the pump is off · countdown and tank warning thresholds · whether the spine sits on the left or right edge in the docked panel (right chosen: thumb zone on a tablet docked at the screen's right) · whether a l/min or minute dial should re-scale when a typed value exceeds its dial (mock: the needle rests at the end, the numeral is authoritative).

6. Verified (built-in browser, 2026-10-10)

Round 1 (first build):

Round 2 (QA fixes: wheel width, step 1, unbounded dials, typed entry — same day, local HTTP server, Chrome pane; the 400-px checks ran in a 400 × 900 iframe inside a desktop viewport because the fragment carries no viewport meta — the artifact wrapper supplies it — so Chrome's phone emulation alone lays the bare fragment out at 980 px):

Round 3 (QA: light-theme contrast of the state colours — same day, page opened as file:// in the built-in browser pane, light and dark forced via data-theme):