CubeCraft-Creations/remote-rig
11
0
Fork 0
generated from CubeCraft-Creations/Tracehound
Code Issues 9 Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

CUB-178: camera monitoring dashboard wireframes and design specs #16

Merged
overseer merged 2 commits from agent/sketch/CUB-178-camera-dashboard-mockups into dev 2026-05-28 07:23:34 -04:00
Conversation 1 Commits 2 Files Changed 2
+262
2 changed files with 262 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/design/camera-dashboard-preview.html
+133
View File
@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RemoteRig Dashboard Preview</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--bg-dark: #0f172a;
--card-dark: #1e293b;
--status-green: #22c55e;
--status-yellow: #eab308;
--status-red: #ef4444;
}
body { background-color: var(--bg-dark); color: white; font-family: 'Inter', sans-serif; }
.status-card { background-color: var(--card-dark); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.status-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); }
.border-green { border-left: 4px solid var(--status-green); }
.border-yellow { border-left: 4px solid var(--status-yellow); }
.border-red { border-left: 4px solid var(--status-red); }
</style>
</head>
<body class="p-6">
<!-- Top Bar -->
<header class="flex justify-between items-center mb-8 p-4 bg-slate-800 rounded-lg shadow-lg">
<div class="flex items-center gap-3">
<div class="w-3 h-3 bg-blue-500 rounded-full animate-pulse"></div>
<h1 class="text-xl font-bold">◉ RemoteRig</h1>
</div>
<div class="flex items-center gap-4">
<span class="text-sm text-slate-400 flex items-center gap-2">
<span class="w-2 h-2 bg-green-500 rounded-full"></span>
System Online
</span>
<button class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-bold rounded transition-colors uppercase text-xs tracking-wider">
⏹ Stop All
</button>
</div>
</header>
<!-- Dashboard Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card: Healthy -->
<div class="status-card border-green p-5 rounded-xl shadow-md">
<div class="flex justify-between items-start mb-4">
<h3 class="font-bold text-lg">🎥 Front Door</h3>
<span class="text-green-500 text-xs font-bold">ONLINE</span>
</div>
<div class="space-y-3 mb-6">
<div>
<div class="flex justify-between text-xs mb-1"><span>Battery</span><span class="text-green-400">82%</span></div>
<div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden">
<div class="bg-green-500 h-full" style="width: 82%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-xs mb-1"><span>Storage</span><span class="text-green-400">45%</span></div>
<div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden">
<div class="bg-green-500 h-full" style="width: 45%"></div>
</div>
</div>
<div class="flex items-center gap-2 text-sm font-mono text-red-500">
<span class="w-2 h-2 bg-red-500 rounded-full animate-ping"></span>
REC: 00:42:10
</div>
</div>
<button class="w-full py-2 bg-slate-700 hover:bg-slate-600 rounded text-sm font-medium transition-colors">View Details ▸</button>
</div>
<!-- Card: Warning -->
<div class="status-card border-yellow p-5 rounded-xl shadow-md">
<div class="flex justify-between items-start mb-4">
<h3 class="font-bold text-lg">🎥 Backyard</h3>
<span class="text-yellow-500 text-xs font-bold">ONLINE</span>
</div>
<div class="space-y-3 mb-6">
<div>
<div class="flex justify-between text-xs mb-1"><span>Battery</span><span class="text-yellow-400">41%</span></div>
<div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden">
<div class="bg-yellow-500 h-full" style="width: 41%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-xs mb-1"><span>Storage</span><span class="text-yellow-400">88%</span></div>
<div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden">
<div class="bg-yellow-500 h-full" style="width: 88%"></div>
</div>
</div>
<div class="flex items-center gap-2 text-sm font-mono text-yellow-500">
<span class="w-2 h-2 bg-yellow-500 rounded-full"></span>
PAUSED
</div>
</div>
<button class="w-full py-2 bg-slate-700 hover:bg-slate-600 rounded text-sm font-medium transition-colors">View Details ▸</button>
</div>
<!-- Card: Critical -->
<div class="status-card border-red p-5 rounded-xl shadow-md">
<div class="flex justify-between items-start mb-4">
<h3 class="font-bold text-lg">🎥 Garage</h3>
<span class="text-red-500 text-xs font-bold">OFFLINE</span>
</div>
<div class="space-y-3 mb-6">
<div>
<div class="flex justify-between text-xs mb-1"><span>Battery</span><span class="text-red-400">12%</span></div>
<div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden">
<div class="bg-red-500 h-full" style="width: 12%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-xs mb-1"><span>Storage</span><span class="text-red-400">95%</span></div>
<div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden">
<div class="bg-red-500 h-full" style="width: 95%"></div>
</div>
</div>
<div class="flex items-center gap-2 text-sm font-mono text-red-500">
<span class="w-2 h-2 bg-red-500 rounded-full"></span>
OFFLINE
</div>
</div>
<button class="w-full py-2 bg-slate-700 hover:bg-slate-600 rounded text-sm font-medium transition-colors">View Details ▸</button>
</div>
</div>
<footer class="mt-12 p-4 bg-slate-800 rounded-lg text-center text-sm text-slate-400 shadow-inner">
📊 6 cams | 4 recording | 1 paused | 1 offline | Storage: 60% used
</footer>
</body>
</html>
docs/design/camera-dashboard-wireframes.md
+129
View File
@@ -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).