Display Driver Family Explorer¶
Specification¶
The full specification below is extracted from Chapter 9: Real-Time Clocks and Display Drivers for Clocks and Watches.
Type: interactive-infographic
**sim-id:** display-driver-family-explorer<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *classify* (Bloom L2: Understand) each display driver family by its communication protocol, typical resolution, and best-fit clock or watch use case.
Canvas: 700x460px, responsive -- recompute a `cardWidth` from `windowWidth` in `windowResized()` collapsing a 5-wide card row to a 2-column grid below 640px and a single stacked column below 400px.
Layout: five rounded-rectangle cards -- Seven-Segment (TM1637), Shift Register (74HC595), LCD Character (LCD1602), TFT (ILI9341), Round (GC9A01) -- each showing the family name, driver chip name, and a small icon drawn with p5.js primitives representing its physical shape (segmented digit glyph, small chip-and-pins glyph, grid-of-text glyph, rectangle-with-gradient-fill glyph, circle-with-gradient-fill glyph respectively).
Interaction: clicking a card flips it to reveal three quick facts pulled directly from the surrounding chapter prose: communication protocol (two-wire / SPI / I2C), typical resolution or digit count, and one best-fit use case (e.g., GC9A01: "SPI, full color, circular -- best for analog watch faces"). Hovering a card (desktop) or single-tapping (touch) highlights its border before a second interaction flips it. A `createButton()` labeled "Compare All" flips every card simultaneously for quick side-by-side review.
Implementation: p5.js. Card data stored as an array of five objects `{name, chip, protocol, resolution, useCase, isFlipped}`. Draw with `rect()` and rounded corners; flip rendered as an instantaneous text swap rather than a 3D animation for simplicity and classroom-device performance. Hit-testing via rectangle bounds-checking in `mousePressed()`; recompute grid layout in `windowResized()`.