99 lines
3.7 KiB
Markdown
99 lines
3.7 KiB
Markdown
# 06 — SVG layout dimensions for the ePaper Web Component
|
||
|
||
Each panel needs:
|
||
|
||
- **active area** (W × H in canvas pixels — 1 px = 1 device pixel for accurate emulation; we don't scale up)
|
||
- **bezel** around the active area (mm → px @ 96 dpi)
|
||
- **FPC connector strip** along one short edge (where the wires attach)
|
||
- **pin tips** in `pinInfo` so wires snap correctly (per CLAUDE.md §6a)
|
||
|
||
The panel's physical size, not its resolution, drives the bezel
|
||
dimensions. We render at 1:1 device-pixel scale for the active area so
|
||
text/QR codes look right.
|
||
|
||
## Phase 1 panels (B/W mono)
|
||
|
||
| metadata id | Active area (px) | Panel total (px, body+FPC) | Notes |
|
||
|---|---|---|---|
|
||
| `epaper-1in54-bw` | 200 × 200 | 240 × 280 | square panel, 4 mm bezel + 28 mm FPC tail |
|
||
| `epaper-2in13-bw` | 250 × 122 | 290 × 170 | landscape FPC on bottom |
|
||
| `epaper-2in9-bw` | 296 × 128 | 340 × 180 | similar to 2.13 |
|
||
| `epaper-4in2-bw` | 400 × 300 | 440 × 360 | bigger bezel |
|
||
| `epaper-7in5-bw` | 800 × 480 | 860 × 540 | will visually dominate the canvas — fine |
|
||
|
||
## Phase 2 panels (colour)
|
||
|
||
| metadata id | Active area | Panel total | Palette |
|
||
|---|---|---|---|
|
||
| `epaper-2in13-bwr` | 250 × 122 | 290 × 170 | white / black / **red** |
|
||
| `epaper-5in65-7c` | 600 × 448 | 660 × 520 | ACeP 7-colour |
|
||
| `epaper-13in3-spectra6`| 1200 × 1600 | 1260 × 1700 | Spectra 6: black/white/yellow/red/green/blue (massive — cap visual zoom at 0.4×) |
|
||
|
||
## Pin layout (right-edge FPC ribbon — same on every panel)
|
||
|
||
Every panel uses the same 8-pin standard FPC pinout. The Web Component
|
||
exposes them on the FPC tail so they all line up vertically:
|
||
|
||
```
|
||
+---------------------+
|
||
| |
|
||
| Active |
|
||
| area |
|
||
| (W × H) |
|
||
| |
|
||
+----+--+--+--+--+--+--+--+--+
|
||
| | | | | | | | |
|
||
GND VCC SCK SDI CS DC RST BUSY
|
||
```
|
||
|
||
In `pinInfo`:
|
||
|
||
```ts
|
||
get pinInfo() {
|
||
// FPC tail starts at x = (panelW - 8*pinSpacing)/2, y = panelH
|
||
const baseX = (this.config.totalW - 8 * 14) / 2;
|
||
const y = this.config.totalH;
|
||
return [
|
||
{ name: 'GND', x: baseX + 0, y, signals: ['GND'] },
|
||
{ name: 'VCC', x: baseX + 14, y, signals: ['VCC'] },
|
||
{ name: 'SCK', x: baseX + 28, y, signals: ['SCK','SCL'] }, // SPI clock
|
||
{ name: 'SDI', x: baseX + 42, y, signals: ['MOSI','DIN'] },
|
||
{ name: 'CS', x: baseX + 56, y },
|
||
{ name: 'DC', x: baseX + 70, y },
|
||
{ name: 'RST', x: baseX + 84, y },
|
||
{ name: 'BUSY', x: baseX + 98, y },
|
||
];
|
||
}
|
||
```
|
||
|
||
Pin names match what GxEPD2's constructor expects (`CS`, `DC`, `RST`,
|
||
`BUSY`) and what Adafruit_EPD prints in its examples — no renaming
|
||
gymnastics.
|
||
|
||
## SVG body
|
||
|
||
For Phase 1 we render a simple rounded rectangle:
|
||
|
||
- Body: `rx=4, fill=#f0f0e8` (off-white, like real e-paper)
|
||
- Bezel: 8 px inset stroke `#d0c8b8`
|
||
- FPC strip: rectangle `#d0a060` (orange flex PCB colour), 14 mm long
|
||
- "Active area" sub-`<g>` whose children are `<image>` elements bound to
|
||
the canvas; we draw via `ctx.putImageData()` exactly like ILI9341.
|
||
|
||
For Phase 2 colour panels the body colour stays the same; only the canvas
|
||
content differs.
|
||
|
||
## Relationship to `BoardOnCanvas` / `BOARD_SIZE`
|
||
|
||
ePaper panels are **components**, not boards, so they go through
|
||
`ComponentRegistry.ts`, not `BoardOnCanvas.tsx`. No `BOARD_SIZE` entry
|
||
needed; the Web Component just declares its own width/height.
|
||
|
||
## Open questions for design review
|
||
|
||
- Do we want a "monochrome with red border" pseudo-state to indicate the
|
||
user wired the panel reversed? (Probably no — too cute.)
|
||
- Should the SVG show the current refresh in progress (subtle white-flash
|
||
animation while BUSY is high)? Realistic and useful as a debugging
|
||
signal. **Yes — Phase 1.**
|