Headless Pi 5 Setup Workflow¶
Specification¶
The full specification below is extracted from Chapter 15: Software Setup and the Developer Environment on the Raspberry Pi 5.
Type: workflow
**sim-id:** headless-pi5-setup-workflow<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *sequence* (Bloom L3: Apply) the steps required to set up and connect to a Raspberry Pi 5 without a directly attached monitor.
Canvas: 700x420px, responsive — recompute step-box spacing as a fraction of `width` inside `windowResized()`, switching from a horizontal row to a vertical stack below 560px wide.
Layout: four connected step boxes in sequence: "1. Flash OS Image" (with Wi-Fi and SSH pre-configured) → "2. First Boot" (no monitor attached) → "3. Connect via SSH" → "4. Transfer Files via scp." Each box uses a distinct accent color from the book palette (indigo `#3F51B5`, raspberry `#C2185B`, circuit green `#2E7D32`, copper gold `#D4AF37`) and a small icon drawn with basic p5.js shapes.
Controls: a `createButton()` labeled "Walk Through Steps" that advances a highlighted marker from box 1 to box 4 one click at a time, and a `createButton()` labeled "Reset" that returns the marker to before box 1.
Interaction: clicking any step box directly (independent of the walkthrough button) opens an infobox beneath the diagram showing the exact terminal command associated with that step (for steps 3 and 4, the `ssh` and `scp` commands from the surrounding chapter text) and one sentence explaining what could go wrong at that step (for example, step 3's infobox notes "Fails here if Wi-Fi credentials were mistyped during imaging"). Only one infobox is open at a time.
Implementation: p5.js. Step data stored as an array of four objects `{title, color, command, commonFailure}`. Hit-testing via rectangular bounding boxes. Track the walkthrough marker's current index in a variable and redraw its position each frame based on that index, interpolating smoothly between box centers using `lerp()`.