A modern web UI skin for the Decent Espresso DE1, built on top of Streamline-Bridge (reaprime). This is a full rewrite of the original TCL-based Streamline skin into a browser-native web application — no framework, no bundler, just HTML/CSS/JS served as static files.
| Layer | Technology |
|---|---|
| Language | Vanilla JavaScript (ES6 modules) |
| Styling | Tailwind CSS + daisyUI (CDN) |
| Charting | Plotly.js |
| Local storage | IndexedDB |
| Communication | WebSocket + REST (via reaprime) |
| Fonts | Inter, NotoSansMono |
- Live pressure, flow, and group temperature charting via Plotly.js
- Target vs. actual overlay lines (dashed = target)
- Phase step markers and annotations
- Scale weight display during extraction
- Dose in/out, grind size, brew temperature
- Steam temperature, duration, and flow
- Hot water volume, temperature, duration, and flow
- Pre-shot flush duration and flow
- Mobile-friendly numpad modal with value history from previous shots
- Browse, search, and select from all available profiles
- 5 quick-access favorite profile slots in the header
- Upload, rename, hide, and delete profiles
- Profile metadata display (author, notes, parameters)
- Full in-browser profile editor accessible via EDIT button in the profile selector
- Inline step card editing — 4 steps visible at a time, horizontally scrollable
- Per-step controls: name, temperature (−/+), pump type (Flow/Pressure), rate, transition (fast/smooth), exit condition, and message
- Settings tab: target weight, volume, tank temperature, volume count start, beverage type
- Review tab: plain-English step summaries, profile settings overview, and Plotly graph preview (pressure, flow, temperature scaled to shared y-axis with step boundary markers)
- Auto-suffixes duplicate profile names on save (e.g. "My Profile (2)")
- Saves user-edited copies to the Rea KV store (
/api/v1/store/streamline/{uuid}) — original default profiles are never modified - KV-saved profiles are loaded and merged into the profile list on every selector load
- RESET button in the selector right panel: deletes a KV copy and restores selection to the original parent profile, with confirmation dialog
- Paginated shot history backed by IndexedDB
- Tap any past shot to replay its data on the chart
- Per-shot metrics: pre-infusion, extraction, and total phase summaries
- Start/stop espresso, steam mode, hot water dispensing
- Machine sleep button
- Real-time water tank level display
- DE1 and scale device scan/connect/disconnect
- Auto-reconnection with exponential backoff on WebSocket drop
- Non-GHC machine controls — when connected to a machine without a Group Head Controller, a dedicated right-side column appears with Coffee, Water, Steam, Flush, and Stop buttons; active state visually disables action buttons and highlights Stop in red
- Bluetooth — scan and connect DE1 and scale; scale auto-connect
- Calibration — fan threshold, advanced heater phase flow (DE1 settings)
- Skin — presence-based auto-sleep with configurable schedule; wake-lock toggle
- Display — brightness control and auto-brightness toggle; screen saver toggle
- Language — multi-language support via CSV-based i18n; runtime language switching
- Extensions — Decent Visualizer integration (toggle + credentials)
- REA Settings — weight/volume flow multipliers; gateway mode selection
- User Manual — links to Decent Espresso support, quickstart, and skin dev docs
- Light/dark theme (persisted in
localStorage) - Responsive scaling for landscape tablets and mobile
- Rotation prompt for portrait devices
- Long-press support on +/− buttons for rapid value adjustment
- Quick Adjustments: Flow Multiplier, Steam, Water, Limit save buttons
- Calibration: Reset defaults, Refill Kit calibrate, Voltage / Stop-at-Weight / Steam save, Slow Start dropdown (not supported by firmware API)
- Calibration: Fan threshold save
- Maintenance: Transport Mode dropdown (not supported by firmware API)
- Maintenance: Descaling Start
- Skin: Theme toggle, Skin Apply button
- Miscellaneous: Screen Saver, Units, Font Size, Resolution dropdowns
- Miscellaneous: Smart Charging — full settings page with mode selector, night mode schedule, and live charging status
- Updates: Firmware Check, App Update Check buttons
- Bluetooth: Machine auto-connect toggle (scale auto-connect already works)
- Advanced in-browser profile editor (create and edit profiles, not just upload/delete)
Prerequisites: reaprime (Streamline-Bridge) must be running and accessible on localhost:8080.
# Clone the repo
git clone <repo-url>
cd streamline_js
# Serve from the repo root — no build step required
python3 -m http.serverOpen http://localhost:8000 in your browser.
Custom hostname: If reaprime runs on a different host, set it before loading the app:
localStorage.setItem('reaHostname', '192.168.1.x:8080')src/
├── modules/
│ ├── api.js # All REST + WebSocket I/O; MachineState enum
│ ├── app.js # Bootstrap, global state, WebSocket wiring
│ ├── ui.js # DOM update functions
│ ├── chart.js # Plotly real-time shot graph
│ ├── profileManager.js # Profile CRUD
│ ├── profile_selector.js # Profile browser UI
│ ├── profile_editor.js # In-browser profile editor (steps, settings, review)
│ ├── history.js # Shot history (IndexedDB + API)
│ ├── shotData.js # Shot metric display
│ ├── waterTank.js # Water level WebSocket
│ ├── router.js # SPA sub-page loader
│ ├── numpad-modal.js # Mobile numeric input
│ ├── scaling.js # Responsive scaling / orientation
│ ├── i18n.js # CSV-based translations
│ └── idb.js # IndexedDB wrapper
├── settings/ # Settings page HTML + JS
├── profiles/ # Bundled example profiles (JSON)
├── css/ # main.css, dark-mode.css, numpad-modal.css
└── ui/ # Fonts, icons, images
See CLAUDE.md for coding conventions, API reference (reaprime_api.md), and the design system (DESIGN_SYSTEM.md).
Key rules:
- Tailwind + daisyUI only — no custom CSS unless unavoidable
- Use
Plotly.update(), notPlotly.react(), for chart updates - Profile changes must go through the workflow API wrapper in
api.js - IndexedDB writes must be atomic