Wi-Fi Connection Process Explorer¶
Specification¶
The full specification below is extracted from Chapter 10: Wireless Communication with the Pico W.
Type: interactive-diagram
**sim-id:** wifi-connection-process-explorer<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/learning-micropython/tree/main/docs/sims/iot-data-flow<br/>
**Status:** Specified
Learning objective: Students will *explain* (Bloom L2: Understand) the sequence of steps a Pico W follows to join a Wi-Fi network and obtain an IP address.
Canvas: 700x460px default, responsive — recompute step-box positions as fractions of `width` inside `windowResized()` so the row of steps reflows to a stacked column below 480px wide.
Layout: a horizontal row (vertical stack on narrow screens) of five connected step boxes with arrows between them: "1. Scan for networks," "2. Send SSID + Wi-Fi credentials," "3. Router accepts device," "4. DHCP assigns IP address," "5. Connected — ready to send data." Boxes 1-2 are tinted raspberry `#C2185B` (the "joining" phase), boxes 3-5 are tinted circuit green `#2E7D32` (the "identity" phase), visually grouping SSID/credentials separately from DHCP/IP address.
Controls: a `createButton()` labeled "Step Forward" that advances a highlighted marker one box at a time, and a `createButton()` labeled "Reset" that returns the marker to box 1. A `createSlider()` labeled "Auto-Play Speed" (range 0 = off to 5 = fast) auto-advances the marker when non-zero.
Interaction: clicking any step box (in addition to using the buttons) jumps the marker directly to that box and opens an infobox below the diagram with a one-sentence definition of the term involved, matching the definitions given in the surrounding chapter text (e.g., clicking box 4 shows the DHCP definition). Only one infobox is open at a time.
Implementation: p5.js. Store the five steps as an array of objects `{label, phase, definition}`. Track `currentStep` as state; redraw all boxes each frame with the active one outlined in a brighter stroke. Use rectangle bounds-checking in `mousePressed()` for hit-testing. Parent the canvas to the enclosing `<div>` per project convention.