13 - RouteTrack Pi — Mobile Dashboard Overhaul + BIG LIVE MODE (Stop Point) Date: December 25, 2025 Category: UI/UX / Mobile Optimization / Dashboard Backlink: Update #12 – RouteTrack Pi — Mobile UX Upgrade (Shift Controls + Status) Goal of This Update This update was focused on making the RouteTrack dashboard actually usable on mobile (Firefox on Pixel 10 Pro XL), without sacrificing any of the power/features that were added during earlier iterations. The main objective was: Mobile-first layout Shift controls always easy to tap A single, one-press BIG LIVE MODE for “driving glance” usage Keep the map contained inside its UI box Preserve all existing RouteTrack dashboard functionality (shift summary, daily summary, stops, filtering, speed-colored route, live polling, etc.) This is a good stopping point for the project until real-world usage exposes what should be improved next. What Was Added / Improved Mobile UX + Layout Improvements Rebuilt the layout to be mobile-first (not desktop-first). The top UI was redesigned into a compact stacked header with: Date picker + Load Shift controls block Collapsible controls drawer BIG LIVE MODE (One-Press “Driving View”) Added a dedicated BIG LIVE MODE button that: Hides all nonessential UI Expands the map to full screen Keeps LIVE MPH visible at all times Ensures Live Mode is ON (auto-enables if needed) Provides an always-available Exit button Live MPH + Live Status HUD A floating HUD on the map displays: LIVE MPH Live status (ON / OFF / NO FIX / ERR) The HUD is set to pointer-events: none so it won’t block map gestures on mobile. Controls Drawer (Mobile Only) A Controls ▾ drawer was added to reduce clutter on mobile. This keeps the map usable without constantly fighting UI height. Preserved Features (No Regressions) This update explicitly kept all previously implemented functionality : Speed-colored route rendering (blue/amber/red) Daily Summary (with filtered stop totals + raw DB totals) Stops list and map markers Hide individual stops (saved in browser localStorage) Filter stops above X minutes + Clear Hidden Stops Live mode polling from /api/live/latest Shift start/end controls Shift status + shift summary refresh loop Files Modified Dashboard HTML Template File: /opt/routetrack/web/templates/index.html Purpose: Main mobile-first UI + map + controls + live mode + summaries Service Restart (Apply Changes) After updating the template: sudo systemctl restart routetrack-dashboard.service Optional: If the browser still shows the old UI on mobile, fully close the tab and reopen (mobile Firefox can be aggressive with caching). Current Project Status This update marks a clean pause point for the RouteTrack Pi project. The dashboard is now: Useable on mobile Stable enough to run day-to-day Ready for real-world testing (actual driving + shift usage) Future improvements will be based on real usage (accuracy, stop detection, distance consistency, etc.). Full Script: index.html (Final Version for Update #13) Location:  /opt/routetrack/web/templates/index.html RouteTrack Dashboard
RouteTrack Local Dashboard Date
Shift: …
■ < 5 mph ■ 5–25 mph ■ > 25 mph
Live: off
Stop Filter min
LIVE MPH —
LIVE OFF

Shift Summary

Loading shift summary…
Shift Summary is computed from GPS points between Start Shift and End Shift. If a shift is active, this updates live.

Daily Summary

Tip: Daily Summary is based on your daily processor run. Shift Summary is the “real-world” view for work sessions.

Stops

You can hide individual stops (saved in your browser on this device). Hidden/filtered stops won’t count in the UI totals.

Quick Checks

• If distance looks wrong for the date, re-run the processor for that date.
• For “real” totals (crossing midnight), rely on Shift Summary.
• Live MPH is from latest logged point in gps_points.