HTTP Client-Server Request/Response Explorer¶
Specification¶
The full specification below is extracted from Chapter 10: Wireless Communication with the Pico W.
Type: interactive-infographic
**sim-id:** http-client-server-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 *analyze* (Bloom L4: Analyze) the structure of an HTTP request and its matching HTTP response as they travel between a client and a Pico W web server.
Canvas: 700x420px, responsive — two labeled boxes ("Client: browser or phone" and "Pico W: web server") positioned at left and right on wide screens, stacked top and bottom below 520px wide, recalculated inside `windowResized()`.
Layout: an animated message bubble travels from the Client box to the Server box labeled with the HTTP request's method and REST endpoint (e.g., "GET /sensor/distance"), pauses briefly at the Server box, then a second bubble travels back labeled with the HTTP response's status code and a short JSON snippet (e.g., "200 OK — {\"distance_cm\": 12.5}").
Controls: a `createSelect()` dropdown labeled "Choose Endpoint" with three preset options (`/sensor/distance`, `/led/on`, `/status`), each producing a different request/response pair; a `createButton()` labeled "Send Request" that triggers the animation for the selected endpoint; a `createSlider()` labeled "Animation Speed."
Interaction: clicking the request bubble mid-flight pauses the animation and opens an infobox explaining the HTTP request's method and target endpoint in plain language; clicking the response bubble does the same for the status code and JSON payload. Clicking the Client or Server box itself shows a one-sentence reminder of what a web server or REST endpoint is, matching the chapter's definitions.
Implementation: p5.js, message bubble position interpolated linearly between the two box centers over a duration controlled by the speed slider, using `lerp()` on progress from 0 to 1. Store the three endpoint presets as an array of `{endpoint, method, statusCode, json}` objects. Hit-test bubble clicks using distance-to-bubble-center comparisons against a fixed bubble radius.