Keyboard Matrix and Scan Code Explorer¶
Specification¶
The full specification below is extracted from Chapter 13: Programming the Pi 500+'s Per-Key RGB Keyboard Lighting.
Type: interactive-diagram
**sim-id:** keyboard-matrix-scan-code-explorer<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *explain* (Bloom L2: Understand) how a keyboard matrix's row/column grid and a resulting scan code identify a specific pressed key.
Canvas: 700x420px, responsive — recompute key-grid cell size as a fraction of `width` inside `windowResized()` so the simplified keyboard grid scales without changing its row/column proportions.
Layout: a simplified 6-row keyboard grid (matching the real Pi 500+'s six rows referenced elsewhere in this book) drawn as evenly spaced rounded-rectangle keys, each labeled with a letter/symbol as on a real keyboard. A thin highlighted row-line and column-line sweep across the grid on a timer, visually representing the firmware's scanning process.
Controls: a `createButton()` labeled "Press a Random Key" that simulates a press at a random grid position; a `createSlider()` labeled "Scan Speed" (1-10) controlling how fast the row/column sweep animates.
Interaction: clicking any key directly (in addition to the random-press button) highlights that key, freezes the row/column sweep at its intersection, and opens an infobox showing that key's `[row, column]` matrix position and a generated scan code number, alongside a one-sentence reminder that the scan code identifies the physical position, not the printed letter. Clicking elsewhere clears the highlight and resumes scanning.
Implementation: p5.js. Store keys as a 2D array with row/column indices and printed labels. Compute a scan code as `row * numColumns + column` for demonstration purposes. Animate the sweep using `frameCount` modulo a period derived from the speed slider. Rectangle-based hit-testing in `mousePressed()`.