Network Reliability Simulator¶
Specification¶
The full specification below is extracted from Chapter 10: Wireless Communication with the Pico W.
Type: chart
**sim-id:** network-reliability-simulator<br/>
**Library:** Chart.js<br/>
**Status:** Specified
Learning objective: Students will *analyze* (Bloom L4: Analyze) how increasing distance between a robot and its access point affects network latency and packet loss.
Canvas: 700x420px responsive line chart with two y-axes — left axis "Latency (ms)," right axis "Packet Loss (%)" — and x-axis "Distance from Access Point (meters), 0-30." Chart.js `responsive: true` and `maintainAspectRatio: false` so the chart resizes with its container.
Controls: a `createSlider()` (rendered as an HTML range input alongside the chart, range 0-30, default 5, labeled "Robot Distance (m)") that moves a vertical marker line across the chart to the current distance value; a `createSelect()` labeled "Environment" with options "Open room," "Walls between," and "Crowded Wi-Fi," each swapping in a different pre-computed latency/packet-loss curve to illustrate how obstacles and interference shrink effective wireless range.
Interaction: hovering (or tapping, on touch devices) any point on either curve shows a Chart.js tooltip with the exact latency and packet-loss values at that distance. Moving the distance slider updates a small readout below the chart: "At 12 m in a Crowded Wi-Fi environment: ~85 ms latency, ~4% packet loss." The three environment curves use visually distinct colors matching the book's palette (open room: circuit green `#2E7D32`; walls: copper gold `#D4AF37`; crowded Wi-Fi: raspberry `#C2185B`).
Implementation: Chart.js line chart with two Y scales (`yLatency` and `yLoss`) and three pre-defined datasets (arrays of 31 points, one per meter, generated from a simple increasing curve formula rather than live physics). The distance slider updates a Chart.js annotation or a manually drawn vertical line plugin. Register a `resize` listener that calls the chart's `resize()` method so the canvas stays responsive inside its container.