Web Dashboard & Calibration
The Web Dashboard delivers a responsive, cyber-dark control interface styled with glassmorphic cards, glowing accents, and live metric updates. It requires zero mobile applications or browser extensions and works across smartphones, tablets, and desktop browsers.
1. Main Dashboard (/main)
The home screen provides a focused, zero-distraction view for actuating the switch or jumping directly to device tools.
SwitchBot
TIP
If the device is on its first boot and uncalibrated, the primary action button automatically becomes: 🎯 Calibrate Servo (/calibrate).
2. Device Info (/info)
The info screen displays live hardware metrics, dynamic board detection (ESP32-S3-N16R8), memory utilization, and connectivity details.
💻 Device Info
Live
Hardware & Storage
Network & Connectivity
Tailscale
3. Interactive SVG Calibration (/calibrate)
Fine-tuning servo positions is performed through dual rotary dials with real-time feedback, direct numeric touch typing, and safety timeout guards.
🎯 Servo Calibration
Configuration Metrics
Live Manual Control
Release to return to Rest Angle
Calibration Actions
Key Safety Protections:
- Live Rest Preview: Dragging the Rest dial debounces live
POST /api/calibrate/move?angle=...updates so you can visually confirm clearance before saving. - Bottom-Gap Barrier: The rotary gesture engine enforces a 40° bottom deadzone, preventing accidental 0° ↔ 180° flip wraps.
- 20-Second Auto-Release Guard: Pressing the Hold button commands the servo to the press depth. If held longer than 20,000ms (or if the browser tab disconnects), the firmware safety watchdog automatically springs the servo back to rest to protect the motor from burnout.
4. Logs & Debug (/debug)
The debug screen gives real-time visibility into past reboots, servo actuation history, and Wi-Fi failover metrics.
🔧 Logs & Debug
General
Boot Stats
Servo
Servo Trigger History
Tailscale Connection History
Previous Boot History
OTA Updates
← Back to Dashboard
5. Background Visibility Optimization
To preserve battery life on both client devices and the ESP32:
- Live polling against
/api/livelistens to the HTML5 Page Visibility API (document.hidden). - When the user locks their smartphone or switches browser tabs, polling instantly halts.
- Polling resumes automatically the millisecond the tab returns to the foreground.
6. Progressive Web App (PWA) & Add to Home Screen
The dashboard is a fully optimized Progressive Web App:
- iOS Safari: Tap the Share button $\rightarrow$ select "Add to Home Screen". The app opens in an edge-to-edge standalone window with full support for safe-area notch and home indicator cutouts.
- Android Chrome: Tap the three dots menu $\rightarrow$ tap "Install App" (or click the automatic install prompt).
- Desktop (Chrome / Edge): Click the install icon in the URL bar to run SwitchBot in its own native app window.
- Live Network Actuation: Enforces live network requests with
Cache-Control: no-cache, no-store, must-revalidateacross all endpoints so actuations and live telemetry always reflect real-time physical device state.