diff --git a/docs/design/camera-dashboard-preview.html b/docs/design/camera-dashboard-preview.html new file mode 100644 index 0000000..776a198 --- /dev/null +++ b/docs/design/camera-dashboard-preview.html @@ -0,0 +1,133 @@ + + + + + + RemoteRig Dashboard Preview + + + + + + +
+
+
+

◉ RemoteRig

+
+
+ + + System Online + + +
+
+ + +
+ + +
+
+

🎥 Front Door

+ ONLINE +
+
+
+
Battery82%
+
+
+
+
+
+
Storage45%
+
+
+
+
+
+ + REC: 00:42:10 +
+
+ +
+ + +
+
+

🎥 Backyard

+ ONLINE +
+
+
+
Battery41%
+
+
+
+
+
+
Storage88%
+
+
+
+
+
+ + PAUSED +
+
+ +
+ + +
+
+

🎥 Garage

+ OFFLINE +
+
+
+
Battery12%
+
+
+
+
+
+
Storage95%
+
+
+
+
+
+ + OFFLINE +
+
+ +
+ +
+ + + + diff --git a/docs/design/camera-dashboard-wireframes.md b/docs/design/camera-dashboard-wireframes.md new file mode 100644 index 0000000..b877022 --- /dev/null +++ b/docs/design/camera-dashboard-wireframes.md @@ -0,0 +1,129 @@ +# RemoteRig — Camera Monitoring Dashboard Design Specifications + +## 1. Color Coding Thresholds +The system uses a semantic 3-tier color system to indicate device health. + +| Metric | Green (Healthy) | Yellow (Warning) | Red (Critical) | +| :--- | :--- | :--- | :--- | +| **Battery %** | > 50% | 20% - 50% | < 20% | +| **Storage Used** | < 70% | 70% - 90% | > 90% | +| **Connection** | Heartbeat < 30s | Heartbeat 30s - 5m | Heartbeat > 5m / Offline | +| **Recording** | Recording Active | Standby/Paused | Stopped/Error | + +--- + +## 2. Wireframes + +### Screen A: Main Dashboard +**Layout:** Responsive Grid (3 col on 1920x1080, 2 col on 1024x600) + +``` +┌──────────────────────────────────────────────────────────────────────────────┐ +│ ◉ RemoteRig Dashboard [🟢 System OK] [⏹ STOP ALL] │ +├──────────────────────────────────────────────────────────────────────────────┤ +│ │ +│ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ │ +│ │ 🎥 Front Door │ │ 🎥 Backyard │ │ 🎥 Garage │ │ +│ │ ------------------- │ │ ------------------- │ │ ------------------- │ │ +│ │ 🔋 82% [Green] │ │ 🔋 41% [Yellow] │ │ 🔋 12% [Red] │ │ +│ │ 💾 45% [Green] │ │ 💾 88% [Yellow] │ │ 💾 95% [Red] │ │ +│ │ 🔴 REC: 00:42:10 │ │ 🟡 PAUSED │ │ ⚫ OFFLINE │ │ +│ │ │ │ │ │ │ +│ │ [ VIEW DETAILS ▸ ] │ │ [ VIEW DETAILS ▸ ] │ │ [ VIEW DETAILS ▸ ] │ │ +│ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ │ +│ │ +│ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ │ +│ │ 🎥 Driveway │ │ 🎥 Workshop │ │ 🎥 3D Printer │ │ +│ │ ------------------- │ │ ------------------- │ │ ------------------- │ │ +│ │ 🔋 98% [Green] │ │ 🔋 30% [Yellow] │ │ 🔋 65% [Green] │ │ +│ │ 💾 12% [Green] │ │ 💾 20% [Green] │ │ 💾 15% [Green] │ │ +│ │ 🔴 REC: 01:12:05 │ │ 🔴 REC: 00:05:22 │ │ 🟡 STANDBY │ │ +│ │ │ │ │ │ │ +│ │ [ VIEW DETAILS ▸ ] │ │ [ VIEW DETAILS ▸ ] │ │ [ VIEW DETAILS ▸ ] │ │ +│ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ │ +│ │ +└──────────────────────────────────────────────────────────────────────────────┘ +``` + +### Screen B: Camera Detail +**Layout:** Two-column split (Visual/Stats vs. History/Events) + +``` +┌──────────────────────────────────────────────────────────────────────────────┐ +│ ← Back to Dashboard | 🎥 Front Door Detail [⏹ STOP] │ +├──────────────────────────────────────────────────────────────────────────────┤ +│ │ +│ ┌────────────────────────────┐ ┌────────────────────────────────────────┐ │ +│ │ │ │ 📅 RECORDING HISTORY (Last 7 Days) │ │ +│ │ LIVE VIDEO FEED │ │ │ │ +│ │ (4:3 Aspect) │ │ M [███] T [███] W [█ ] T [███] F [█ ] │ │ +│ │ │ │ S [███] S [███] (Total: 12.4h) │ │ +│ │ │ │ │ │ +│ │ │ ├────────────────────────────────────────┤ │ +│ │ │ │ 📋 RECENT EVENTS │ │ +│ │ │ │ - 12:01: Recording Started │ │ +│ │ │ │ - 11:45: Motion Detected (Zone A) │ │ +│ │ │ │ - 11:00: Battery Warning (40%) │ │ +│ │ │ │ - 10:12: Camera Rebooted │ │ +│ │ │ │ [ VIEW ALL EVENTS ] │ │ +│ └────────────────────────────┘ └────────────────────────────────────────┘ │ +│ │ +│ ┌────────────────────────────┐ │ +│ │ ⚙️ CAMERA STATUS │ │ +│ │ -------------------------- │ │ +│ │ Battery: 82% [Green] │ │ +│ │ Storage: 45% [Green] │ │ +│ │ Status: RECORDING │ │ +│ │ IP: 10.60.1.12 │ │ +│ │ MAC: AA:BB:CC:DD:EE:FF │ │ +│ │ │ │ +│ │ [ EDIT CAMERA SETTINGS ] │ │ +│ └────────────────────────────┘ │ +│ │ +└──────────────────────────────────────────────────────────────────────────────┘ +``` + +### Screen C: Settings / Registration +**Layout:** Centered Form with Sidebar List + +``` +┌──────────────────────────────────────────────────────────────────────────────┐ +│ ← Back to Dashboard | ⚙️ Camera Registration/Edit │ +├──────────────────────────────────────────────────────────────────────────────┤ +│ │ +│ ┌───────────────────────────────────────────────┐ ┌───────────────────┐ │ +│ │ 📝 CAMERA DETAILS │ │ 📋 REGISTERED CAMS │ │ +│ │ --------------------------------------------- │ │ ----------------- │ │ +│ │ │ │ 🎥 Front Door │ │ +│ │ Friendly Name: │ │ 🎥 Backyard │ │ +│ │ [ Front Door ] │ │ 🎥 Garage │ │ +│ │ │ │ 🎥 Driveway │ │ +│ │ MAC Address: │ │ 🎥 Workshop │ │ +│ │ [ AA:BB:CC:DD:EE:FF ] │ │ 🎥 3D Printer │ │ +│ │ │ │ │ +│ │ Notes: │ │ [ + ADD NEW CAM ] │ │ +│ │ [ Covers the main entryway and porch area. ] │ └───────────────────┘ │ +│ │ [ ] │ │ +│ │ [ ] │ │ +│ │ │ │ +│ │ [ TEST CONNECTION ] [ 💾 SAVE CHANGES ] │ │ +│ └─────────────────────────────────────────────────┘ │ +│ │ +└──────────────────────────────────────────────────────────────────────────────┘ +``` + +--- + +## 3. Responsive Design Notes + +### Viewport: 1920x1080 (Desktop) +- **Grid:** 3 columns for camera cards. +- **Navigation:** Top bar fixed, spacing is generous (24px margins). +- **Details:** Full split-screen layout for camera details. + +### Viewport: 1024x600 (Kiosk) +- **Grid:** 2 columns for camera cards. +- **Top Bar:** Compact height (48px), "STOP ALL" button remains prominent in top-right. +- **Details:** Vertical stack for Camera Detail (Feed $\rightarrow$ Stats $\rightarrow$ Events). +- **Settings:** Sidebar moves to the bottom of the form. +- **Sizing:** UI elements scaled up (touch-friendly targets min 44x44px).