From 7ff405128830c176f9103615c8d20108c97b3a12 Mon Sep 17 00:00:00 2001 From: Jens Ahrensfeld Date: Thu, 25 Jun 2026 00:43:32 +0200 Subject: [PATCH] Add Vue.js + uPlot UI migration to web/TODO.md Notes Mainsail (Vue 3 + TypeScript + Vuetify, uPlot for live charts) as the reference point for a future rewrite of app.js's hand-rolled DOM wiring and the still-missing Automatic/Plot tab charts. Co-Authored-By: Claude Sonnet 4.6 Claude-Session: https://claude.ai/code/session_0189FkmyJkY77HqsNomr1DwV --- web/TODO.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/web/TODO.md b/web/TODO.md index 4466156..809245f 100644 --- a/web/TODO.md +++ b/web/TODO.md @@ -63,7 +63,23 @@ and checked against the Qt source side by side. an oversight - listed here too so this file alone is a complete picture of the gap. `SudForecastPlot`/`RealtimePlot` (`client/brewpi_gui.py:121-258`) are the reference for what each needs - to show. + to show. See the **uPlot** mention below - that's the leading candidate + for both. + +- [ ] **UI migration to Vue.js, charts via uPlot.** `app.js` is vanilla + JS with hand-rolled `document.getElementById`/`textContent` wiring for + every piece of state (see its own intro comment) - workable for v1's + scope, but every new feature (Pause, the Confirm ``, ...) is + more manual DOM plumbing, and there's no charting at all yet (previous + item). Mainsail (the Klipper web UI - a comparable "control a piece of + hardware over a persistent WebSocket" app) is the reference point for + both: **Vue 3 + TypeScript + Vuetify** for reactive state-to-DOM + binding instead of this file's manual updates, and **uPlot** for live + charts specifically - it's canvas-based and fast enough for + high-frequency ticks (this server pushes `Elapsed`/`Ist` on every tick), + unlike heavier libraries like Chart.js. A bigger lift than anything + else in this file - revisit once the rest of this backlog (or at least + the charting item) makes it worth the rewrite, not before. - [ ] **No authentication.** Also already called out in README.md - matches the WebSocket server's own complete lack of it, not a new gap, but