diff options
| author | Your Name <you@example.com> | 2026-05-18 19:25:32 +0530 |
|---|---|---|
| committer | Your Name <you@example.com> | 2026-05-18 19:25:32 +0530 |
| commit | e1da6ffc0221abf4d0fb3a8c3e6be0b90d69397a (patch) | |
| tree | 3a0055b5af2bb09492c8c38fdf2712922ecc7123 /DISPLAY_UI_PLAN.md | |
| parent | f0f8cca10196b265c3b453f71322239d2ecaf4ae (diff) | |
Implement full TollGate display UI
- BOOT screen: centered title + WiFi status line
- READY screen: QR cycling (WiFi/Portal), price, mint domain,
wallet balance (color-coded), client count
- PAYMENT screen: green banner 'ACCESS GRANTED', paid amount, time
- ERROR screen: red banner 'NO UPSTREAM', guidance, AP reassurance
- Enhanced display_update() API with mint_url, price, wifi_status
- Extract domain helper for clean mint URL display
- Render interval: 2s (reduced SPI load)
- Color palette: cyan, yellow, orange, green, red, dim gray
- WiFi events update display status and trigger ERROR state
- Board C now on /dev/ttyACM3
Diffstat (limited to 'DISPLAY_UI_PLAN.md')
| -rw-r--r-- | DISPLAY_UI_PLAN.md | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/DISPLAY_UI_PLAN.md b/DISPLAY_UI_PLAN.md new file mode 100644 index 0000000..3050b8a --- /dev/null +++ b/DISPLAY_UI_PLAN.md | |||
| @@ -0,0 +1,136 @@ | |||
| 1 | # TollGate Display UI Design | ||
| 2 | |||
| 3 | ## Display Hardware | ||
| 4 | - **Panel:** 3.5" IPS, 320x480 portrait (AXS15231B QSPI) | ||
| 5 | - **Font:** 8x8 bitmap, scalable (1x=8px, 2x=16px, 3x=24px) | ||
| 6 | - **Capabilities:** Text rendering, QR codes, filled rectangles | ||
| 7 | - **No touch input** — display is output-only signage | ||
| 8 | |||
| 9 | ## Color Palette | ||
| 10 | |||
| 11 | | Color | RGB565 | Usage | | ||
| 12 | |-------|--------|-------| | ||
| 13 | | Black | `0x0000` | Background | | ||
| 14 | | White | `0xFFFF` | Primary text | | ||
| 15 | | Cyan | `0x07FF` | Titles, labels | | ||
| 16 | | Yellow | `0xFFE0` | Price, warnings | | ||
| 17 | | Green | `0x07E0` | Success, wallet OK | | ||
| 18 | | Orange | `0xFD20` | Accent (Bitcoin orange) | | ||
| 19 | | Red | `0xF800` | Errors, alerts | | ||
| 20 | | Dim gray | `0x8410` | Secondary info | | ||
| 21 | | Dark bg | `0x2104` | Card backgrounds | | ||
| 22 | |||
| 23 | ## Screen States | ||
| 24 | |||
| 25 | ### 1. BOOT | ||
| 26 | Shown during startup until WiFi connects and services start. | ||
| 27 | |||
| 28 | ``` | ||
| 29 | ┌──────────────────────────┐ 0 | ||
| 30 | │ │ | ||
| 31 | │ TollGate │ y=180, cyan, scale 2 | ||
| 32 | │ connecting... │ y=205, yellow, scale 1 | ||
| 33 | │ │ | ||
| 34 | │ WiFi: trying... │ y=260, dim, scale 1 | ||
| 35 | │ │ | ||
| 36 | └──────────────────────────┘ 479 | ||
| 37 | ``` | ||
| 38 | |||
| 39 | WiFi status line shows: "trying...", "connected!", "failed (retry)" | ||
| 40 | |||
| 41 | ### 2. READY — QR Cycling (primary screen) | ||
| 42 | Cycles every 5 seconds between WiFi QR and Portal QR. | ||
| 43 | |||
| 44 | **View A — WiFi QR:** | ||
| 45 | ``` | ||
| 46 | ┌──────────────────────────┐ 0 | ||
| 47 | │ ┌──────┐ │ | ||
| 48 | │ │ QR │ │ QR: WIFI:S:<ssid>;T:nopass;; | ||
| 49 | │ │ │ │ Centered in top 2/3 of screen | ||
| 50 | │ └──────┘ │ | ||
| 51 | │ │ ~y=320 | ||
| 52 | │ Scan to connect │ cyan, scale 1 | ||
| 53 | │ SSID: TollGate-XXXX │ white, scale 1 | ||
| 54 | │ 21 sats/min │ orange, scale 1 | ||
| 55 | │ Wallet: 420 sats │ green, scale 1 | ||
| 56 | └──────────────────────────┘ 479 | ||
| 57 | ``` | ||
| 58 | |||
| 59 | **View B — Portal QR:** | ||
| 60 | ``` | ||
| 61 | ┌──────────────────────────┐ 0 | ||
| 62 | │ ┌──────┐ │ | ||
| 63 | │ │ QR │ │ QR: http://10.x.x.x/ | ||
| 64 | │ │ │ │ | ||
| 65 | │ └──────┘ │ | ||
| 66 | │ │ ~y=320 | ||
| 67 | │ Portal URL │ cyan, scale 1 | ||
| 68 | │ testnut.cashu.space │ orange, scale 1 (mint domain) | ||
| 69 | │ 21 sats/min │ yellow, scale 1 | ||
| 70 | │ Clients: 3 │ green, scale 1 | ||
| 71 | └──────────────────────────┘ 479 | ||
| 72 | ``` | ||
| 73 | |||
| 74 | ### 3. PAYMENT_RECEIVED | ||
| 75 | Shows for 3 seconds after payment, then returns to READY. | ||
| 76 | |||
| 77 | ``` | ||
| 78 | ┌──────────────────────────┐ 0 | ||
| 79 | │ │ | ||
| 80 | │ ████████████████████ │ green filled bar, y=190..230 | ||
| 81 | │ ACCESS GRANTED │ white on green, scale 2 | ||
| 82 | │ ████████████████████ │ | ||
| 83 | │ │ | ||
| 84 | │ Paid: 21 sats │ white, scale 1 | ||
| 85 | │ Time: 1 min │ white, scale 1 | ||
| 86 | │ │ | ||
| 87 | │ Wallet: 441 sats │ green, scale 1 | ||
| 88 | └──────────────────────────┘ 479 | ||
| 89 | ``` | ||
| 90 | |||
| 91 | ### 4. ERROR | ||
| 92 | Shown when upstream WiFi is disconnected. | ||
| 93 | |||
| 94 | ``` | ||
| 95 | ┌──────────────────────────┐ 0 | ||
| 96 | │ ████████████████████ │ red filled bar, y=190..230 | ||
| 97 | │ NO UPSTREAM │ white on red, scale 2 | ||
| 98 | │ ████████████████████ │ | ||
| 99 | │ │ | ||
| 100 | │ Internet unavailable │ white, scale 1 | ||
| 101 | │ Check WiFi config │ yellow, scale 1 | ||
| 102 | │ │ | ||
| 103 | │ AP still active │ green, scale 1 | ||
| 104 | │ SSID: TollGate-XXXX │ dim, scale 1 | ||
| 105 | └──────────────────────────┘ 479 | ||
| 106 | ``` | ||
| 107 | |||
| 108 | ## Data Flow | ||
| 109 | |||
| 110 | ### display_update() receives: | ||
| 111 | ```c | ||
| 112 | void display_update(const char *ap_ssid, int active_clients, | ||
| 113 | uint64_t wallet_balance, const char *portal_url); | ||
| 114 | ``` | ||
| 115 | |||
| 116 | ### Enhanced to also receive: | ||
| 117 | ```c | ||
| 118 | void display_update(const char *ap_ssid, int active_clients, | ||
| 119 | uint64_t wallet_balance, const char *portal_url, | ||
| 120 | const char *mint_url, int price_per_step, | ||
| 121 | const char *wifi_status); | ||
| 122 | ``` | ||
| 123 | |||
| 124 | ### display_set_state() triggers: | ||
| 125 | - `DISPLAY_BOOT` → at startup | ||
| 126 | - `DISPLAY_READY` → when services start (WiFi connected) | ||
| 127 | - `DISPLAY_PAYMENT_RECEIVED` → on successful payment (auto-returns to READY) | ||
| 128 | - `DISPLAY_ERROR` → when upstream WiFi disconnects | ||
| 129 | |||
| 130 | ## Implementation Notes | ||
| 131 | |||
| 132 | - Render every 2 seconds (reduces SPI bus load vs 1 second) | ||
| 133 | - QR codes: auto-size based on string length, centered in top portion | ||
| 134 | - Mint URL: show only domain part (truncate at first `/`) | ||
| 135 | - Wallet balance: color-coded (green > 100, yellow > 0, red = 0) | ||
| 136 | - Client count: "Clients: N" or empty string if 0 | ||