Microcontroller vs. Single Board Computer¶
Specification¶
The full specification below is extracted from Chapter 2: Choosing the Right Raspberry Pi Product.
Type: interactive-infographic
**sim-id:** microcontroller-vs-sbc-comparison<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *differentiate* (Bloom L4: Analyze) microcontrollers from single board computers based on operating system support, cost, power draw, and typical use case.
Canvas: 700x420px, responsive — two panel widths recomputed as fractions of `windowWidth` inside `windowResized()`, stacking vertically below 500px instead of side by side.
Layout: two large panels side by side, left panel labeled "Microcontroller" (indigo `#3F51B5` background) showing a Pico-style icon, right panel labeled "Single Board Computer" (circuit green `#2E7D32` background) showing a Pi 5-style icon. Each panel lists five short attribute rows: "Runs an operating system?", "Typical price", "Typical power draw", "Boots in", and "Best for".
Interaction: clicking any attribute row (e.g., "Runs an operating system?") highlights that row in both panels simultaneously and opens a small infobox beneath the diagram explaining the contrast in one or two sentences, written from the definitions given in the surrounding chapter prose. A "Show All" toggle button (`createButton()`) expands every infobox at once for review; clicking it again collapses them. Only relevant when a row hasn't already been expanded individually.
Implementation: p5.js. Store the five attribute rows as an array of objects `{label, mcuValue, sbcValue, explanation}`, rendered as two parallel columns of text with `textAlign(LEFT, CENTER)`. Hit-test each row via a bounding rectangle spanning both panels at that row's y-position, so a single click reveals both sides' data plus the shared infobox.