# 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).