2026-05-23 12:10:18 -04:00
|
|
|
# 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 │ │
|
2026-06-05 07:47:57 -04:00
|
|
|
│ │ IP: 192.168.8.12 │ │
|
2026-05-23 12:10:18 -04:00
|
|
|
│ │ 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).
|
