Visualiser

/viz replays a run's results.json as an animated arena — 2D canvas or 3D (three.js) — with synced NTU/moisture charts. This is the showcase layer for Day 2 case-competition prep and live demos; the rulebook-approved judged output is still live_plot.py (see Operating Guide).


Loading a Run

Method How
Drag-and-drop Drag a saved results.json onto the dropzone (or click it to open a file picker)
  • A dropped file is parsed and rendered entirely in the browser — run data is never sent anywhere. The last-viewed run is cached in sessionStorage so a refresh does not lose it.
  • Download JSON re-exports the loaded run, so a file that arrived by any route can be saved back out.
  • The last-viewed run is cached in the browser (sessionStorage); reopening /viz restores it.
  • A malformed or non-matching JSON file shows an inline error ("Malformed JSON payload" / schema mismatch) instead of a blank screen. Expected shape: the JSON Schemarun_id, total_duration_s, sectors_completed, path[], samples[].

Views

2D / 3D toggle — top-right of the arena viewport.

  • 2D (canvas): top-down square arena, quadrant fills by terrain, dashed robot trail, sample markers, a legend, and a 500mm scale bar.
  • 3D (three.js, orbit-controllable): the same arena as raised timber-wall geometry, sector floor materials, a robot mesh that drives the recorded path with damped heading, and pop-in sample markers with a "sampling pulse" ring during each dwell window.

Zone (water slot / soil disc) positions are not part of the frozen JSON schema — only the bundled demo run ships a zone layout. Uploaded competition runs render the path and sample markers without drawn zone shapes.


Playback Controls

Control Behaviour
▶ Run Starts playback; if already at the end, restarts from the beginning
■ Halt Pauses at the current position
Speed (5× / 20× / 60×) Multiplies playback rate against real run time
Progress slider Scrub anywhere in the run (0–100%); dragging pauses playback and jumps directly to that timestamp

Elapsed time is shown in seconds next to the slider.


NTU / Moisture Classification

Turbidity band colouring used throughout the arena view and charts:

NTU Class Colour
< 40 Clean #4FC3F7 (blue)
40–100 Moderate #F5A623 (orange)
≥ 100 Turbid #FF4A5A (red)

Soil samples are drawn in a fixed tan (#D9A03F) — moisture % doesn't get a colour band, since "healthy" range is terrain-dependent.


Detailed Payload Logs

Open Detailed Payload Logs opens a modal table of every sample in the run, sorted by timestamp: sample ID, type (WATER/SOIL), t_s, raw value, and sector. Use this for the exact numbers a chart glosses over — e.g. reading off precise NTU/% before writing the Day 2 argument (see Competition Guide).


Typical Workflow

  1. During/after a run: GET 192.168.4.1/data from the robot (see Operating Guide §9) → save the JSON.
  2. Drag it into /viz — it is parsed client-side and displays immediately. Nothing leaves the browser; the parsed run is cached in sessionStorage under the key eb-run.
  3. Toggle 2D/3D, scrub the timeline, open the payload log to pull exact readings for the Day 2 case-competition argument.
  4. The sessionStorage cache survives a refresh but not a new browser session — ⬇ Download JSON re-exports the loaded run, so keep the results.json file as the durable copy.