docs: update PLAN.md Phase 23 completion and README project status

Phase 23 section updated with full list of changes from all polish passes:
Overview stats card, speed chart rework, mobile dashcam table fixes,
trip history mobile layout, notification badge fix, footer text.
README project status updated to reflect Phases 1-23 complete.

Co-authored-by: Copilot <[email protected]>
This commit is contained in:
Mathieu Moran
2026-08-09 23:56:47 -04:00
co-authored by Copilot
parent e2f7fa88df
commit 35ec705fe2
2 changed files with 41 additions and 36 deletions
+23 -13
View File
@@ -1162,7 +1162,8 @@ client simultaneously:
uplink; Phase 22 does not prematurely implement that server schema/API. uplink; Phase 22 does not prematurely implement that server schema/API.
### Phase 23: Finish web UI redesign — ✅ DONE ### Phase 23: Finish web UI redesign — ✅ DONE
**Completed 2026-08-10 (commit 981b24b).** Full responsive redesign of the Pi web UI. **Completed 2026-08-10 (final commit c685ef2).** Full responsive redesign of the Pi web UI,
including two UX polish passes and multiple bug-fix rounds.
**What was done:** **What was done:**
- Replaced the SB Admin 2-style fixed left sidebar with a purpose-built layout: - Replaced the SB Admin 2-style fixed left sidebar with a purpose-built layout:
@@ -1170,19 +1171,28 @@ client simultaneously:
icon-only mode (`4 rem`). State persisted via `localStorage`. Logo is a functional home link. icon-only mode (`4 rem`). State persisted via `localStorage`. Logo is a functional home link.
- **Mobile (<768 px):** no sidebar. Full-width content with a sticky **bottom tab bar** (5 items: - **Mobile (<768 px):** no sidebar. Full-width content with a sticky **bottom tab bar** (5 items:
Dashboard, Dashcam, History, DTC, Settings). Logo shown in the topbar. Dashboard, Dashcam, History, DTC, Settings). Logo shown in the topbar.
- Removed every placeholder element: "Placeholder button", stub dropdown menus ("Action" / - Removed every placeholder element, inline style hacks, and stub dropdowns.
"Another action"), inline `style` colour hacks, and meaningless card-header dropdowns. - Dashboard shows **6 OBD stat cards** wired to live socket events; RPM shows `—` (not `- rpm`)
- Dashboard now shows **6 OBD stat cards**: OBD status, speed, RPM, coolant temp, throttle, when disconnected.
fuel level — all wired to live socket events (`obd_coolant_temp`, `obd_fuel_level`, - GPS map and coordinates merged into one card (lat/lon in card footer).
`obd_throttle` added to `yaris.js`). - **Speed history chart** (Chart.js): gradient fill, 60-point rolling window, session max/avg/count,
- GPS info section replaced with clean lat/lon display. NOW+MAX badges in header, auto-expands on desktop, collapsed by default on mobile.
- DTC page fully wired to a new **`/api/dtc`** route (returns `{mil, codes}` from - **Overview stats card** (new `/api/stats` endpoint): trips, total km, drive time, all-time max
`app_obd.get_fresh_mil()` / `get_fresh_dtc_codes()`). MIL indicator pill + DTC table speed, videos on Pi, active DTC count (green/red) — displayed in a 3-column bottom row alongside
populated from the API on load and on manual refresh. GPS and speed history.
- DTC page fully wired to `/api/dtc` (MIL indicator + table, live refresh).
- `yaris.css` completely rewritten: CSS custom properties, sidebar, bottom nav, OBD cards, - `yaris.css` completely rewritten: CSS custom properties, sidebar, bottom nav, OBD cards,
`border-start-*` utilities. `border-start-*` utilities, mobile padding fix (removed Bootstrap `py-4 !important` conflict).
- `theme.js` rewritten: localStorage-backed collapse toggle; no Bootstrap Collapse dependency. - `theme.js` rewritten: localStorage-backed collapse toggle.
- All 63 tests still pass. Verified on Pi at both 390×844 (mobile) and 1280×800 (desktop). - **Dashcam mobile**: thumbnail/size/date/upload columns hidden on mobile; action buttons icon-only
(`<i>` only, no text); `data_table` macro supports optional column `class`; action buttons wrapped
in `<div class="data-list-actions">` inside `<td>` (fixes desktop row layout).
- **Trip history mobile**: date shortened to `"9 Aug 18:00"` on <768 px; imperial units wrapped in
`d-none d-sm-inline` spans; Replay button icon-only (`▶`).
- **Notification badge**: repositioned with `top/right` CSS offset (was clipped by `translate-middle`).
- Footer updated to `© vroom vroom yaris de course 2023`.
- Synthetic test trip in DB: 50 points, Old Port → Plateau Montreal, 3 km, 8 min, 43.5 km/h max.
- All 63 tests pass. Verified on Pi at 390×844 (mobile) and 1280×800 (desktop).
### Phase 24: Remote trip + dashcam portal with shared web UI — 🚧 PLANNED ### Phase 24: Remote trip + dashcam portal with shared web UI — 🚧 PLANNED
**Added 2026-08-09; intentionally scheduled after Phase 23.** Phase 23 first establishes the final **Added 2026-08-09; intentionally scheduled after Phase 23.** Phase 23 first establishes the final
+18 -23
View File
@@ -24,9 +24,11 @@ i have a dream
</tr> </tr>
</table> </table>
## Screenshot ## Screenshots
![UI](pics/ui.png) Dashboard — mobile (390 px) and desktop (1280 px):
![Mobile dashboard](pics/ui.png)
## Features ## Features
@@ -101,12 +103,12 @@ For the remote server (receives trip logs + dashcam uploads), see [server/README
## Project status ## Project status
This project was revived after a couple of years on the shelf. Phases 1-13 and 15-20 are complete: Phases 1–13, 15–23 are complete. The full responsive web UI redesign (Phase 23) is done:
real GNSS, hardened OBD support, offline maps/UI, automatic WiFi hotspot switching, local logging, desktop sidebar with collapse, mobile bottom tab bar, 6 live OBD stat cards, Overview stats
dashcam import, resumable remote upload, trip history/replay, deployment, and the shared UI card (trips, distance, drive time, top speed, video count, active DTC), merged GPS+coords card,
foundation are implemented. reworked speed history chart (gradient, rolling window, session stats, auto-expand on desktop),
The pipeline has been exercised on the real Pi and dashcam, including a complete 28GB import and collapsible dashcam sections with mobile-friendly icon-only action buttons, compact trip history
remote upload. Actual OBD PID availability still needs the first in-car test. with short mobile date format and icon-only Replay button, and live-wired DTC page.
Phase 14 is partially complete: the Pi's hardware watchdog is deployed and reboot-verified. Phase 14 is partially complete: the Pi's hardware watchdog is deployed and reboot-verified.
Read-only-root storage hardening is deferred until persistent storage is moved off the SD root Read-only-root storage hardening is deferred until persistent storage is moved off the SD root
@@ -114,18 +116,9 @@ partition, and clean shutdown still needs delayed-power or ignition-sense hardwa
The browser-based phone relay was removed after real-world testing confirmed that mobile browsers The browser-based phone relay was removed after real-world testing confirmed that mobile browsers
cannot reliably use the Pi's WiFi and cellular data simultaneously. A native Android companion is cannot reliably use the Pi's WiFi and cellular data simultaneously. A native Android companion is
planned later instead. The next roadmap work is settings, followed by a final UI polish pass. planned later instead.
After the redesign, the same interface will become a secure remote trip portal backed by the
self-hosted server, including trip replay and browsing/playing/downloading archived dashcam videos,
with clear Local Pi/Remote Server labeling and hardware-only Pi sections omitted remotely. Full
phase history, verification notes, and current scope live in
[PLAN.md](./PLAN.md).
A temporary, removable real-vehicle compatibility test in the 2013 Yaris precedes the final The local Web UI includes a Settings page for safe runtime configuration: dashcam uploads,
low-priority Android phase; bench and synthetic verification alone are not treated as
ready-to-install sign-off. Permanent installation is owner-handled and is not a roadmap phase.
The local Web UI also includes a Settings page for safe runtime configuration: dashcam uploads,
uploaded-video retention, cellular APN fallback, optional ntfy delivery, and alert thresholds. uploaded-video retention, cellular APN fallback, optional ntfy delivery, and alert thresholds.
Notification secrets are write-only in the browser API, and network credentials that could lock Notification secrets are write-only in the browser API, and network credentials that could lock
the Pi out remain SSH/file-managed. When cellular is configured, small ntfy notifications use the the Pi out remain SSH/file-managed. When cellular is configured, small ntfy notifications use the
@@ -134,7 +127,9 @@ still needs real-SIM/carrier verification.
The Pi can also join a configured phone hotspot for outbound internet when no SIM is available, The Pi can also join a configured phone hotspot for outbound internet when no SIM is available,
including trip synchronization and WiFi dashcam uploads, with automatic recovery to home WiFi or including trip synchronization and WiFi dashcam uploads, with automatic recovery to home WiFi or
the Pi-hosted local hotspot. Phone credentials are write-only in the Web UI and stored in a the Pi-hosted local hotspot.
root-only NetworkManager profile. Real Pixel testing proved cold boot, reconnect/fallback, server
tracking, and chunked video upload; a 1400-byte phone-profile MTU was required for reliable A temporary, removable real-vehicle compatibility test in the 2013 Yaris (Phase 25) precedes the
tethered TLS uploads. final low-priority Android phase (Phase 26). Permanent installation is owner-handled and is not a
roadmap phase. Full phase history, verification notes, and current scope live in
[PLAN.md](./PLAN.md).