Raspberry Pi 5 Port and Interface Explorer¶
Specification¶
The full specification below is extracted from Chapter 14: Raspberry Pi 5 Hardware: Storage, Camera, and Cooling.
Type: interactive-infographic
**sim-id:** pi5-port-explorer<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *identify* (Bloom L1: Remember) the function of each major port and interface on a Raspberry Pi 5 board.
Canvas: 700x460px, responsive — the board illustration scales as a fraction of `width` inside `windowResized()`, with a minimum readable size below which port labels move to a numbered legend instead of inline text.
Layout: a simplified top-down illustration of the Pi 5 board drawn with basic p5.js shapes (rectangles and rounded rectangles, no image file), with labeled regions around its edges: USB-C power connector, two USB 3.0 ports, Gigabit Ethernet port, two micro-HDMI ports (dual 4K display output), the Camera Serial Interface connector, and the PCIe connector on the underside (shown as a dashed-outline callout since it's not visible from the top). The 40-pin GPIO header runs along one long edge.
Interaction: hovering (desktop) or tapping (touch) any labeled region highlights it in gold `#D4AF37` and shows a one-sentence tooltip naming the interface and its function. Clicking a region "pins" its infobox open in a panel below the board so multiple regions can be compared side by side; clicking a pinned region again removes it from the panel. A `createButton()` labeled "Clear All" empties the panel.
Implementation: p5.js. Board regions stored as an array of objects `{name, description, boundingBox}` with rectangular hit-testing. Track pinned regions in an array and redraw the comparison panel from that array each frame so the layout stays correct after a resize.