Camera Management
Confidence
| Channel | ZONE | IP address | Port | Security | Status | Protocol | Link |
|---|
DASHBOARD
Welcome to your dashboard
Live Surveillance Status
Total: 24 Cameras Online: 22 Offline: 2
Selected: CAM-01
1
Wireframe: ภาพรวมหน้า Dashboard
โครงนี้วางลำดับความสำคัญจากบนลงล่าง: สถานะระบบ, มุมมองกล้องสด, แผงเหตุการณ์,
เครื่องมือย้อนหลัง และสุขภาพอุปกรณ์
Top Bar: ชื่อหน้า, filter พื้นที่, date/time, ปุ่มสลับ layout
Quick Stats: Online, Alerts, Recording, AI Events
Live Grid Area
Camera 1
Camera 2
Camera 3
Camera 4
Camera 5
Camera 6
Right Utility Panel
Incident Alerts
Device Health
Operator Activity
Focus Monitor / Expanded Camera View
Playback Timeline + Search Filters
Wireframe: การไหลของงาน
1. ตรวจ alert
2. คลิกกล้องที่เกี่ยวข้อง
3. ขยาย focus view
4. เปิด timeline เพื่อย้อนดู
แนวคิดนี้ช่วยลดการสลับหน้าจอหลายครั้ง ผู้ใช้เห็นเหตุการณ์, ภาพสด และ playback ใน
context เดียวกัน
Wireframe: ลำดับความสำคัญของข้อมูล
Priority 1: Alert Critical / Offline
Priority 2: Live Feed + Focus View
Priority 3: Playback / Search
ใช้สีแดงและส้มเฉพาะจุดที่ต้องตอบสนอง เพื่อไม่ให้จอหลักมี visual noise มากเกินไป
1. ภาพรวมและเป้าหมาย
หน้าจอนี้ออกแบบสำหรับเจ้าหน้าที่เฝ้าระวังที่ต้องตรวจหลายกล้องพร้อมกันและตัดสินใจเร็วเมื่อเกิดเหตุการณ์ผิดปกติ เป้าหมายคือทำให้เห็นภาพรวมของระบบได้ภายในไม่กี่วินาที และสามารถ drill down เข้าสู่กล้องหรือเหตุการณ์ที่ต้องติดตามต่อได้ทันที
2. Information Architecture
- ชั้นบนสุดเป็น summary metrics เพื่อบอกสุขภาพระบบแบบสแกนเร็ว
- คอลัมน์หลักด้านซ้ายเป็น live grid และ focus monitor เพราะเป็นงานที่ผู้ใช้มองตลอดเวลา
- คอลัมน์ขวาเป็น utility panel สำหรับ alerts, device health และ activity log ซึ่งใช้ประกอบการตัดสินใจ
- ส่วน playback วางติดกับ focus monitor เพื่อเชื่อม workflow จากภาพสดไปสู่การย้อนดูได้ต่อเนื่อง
3. Components
- Top Bar: ชื่อหน้า, filter พื้นที่, role badge, ปุ่มเพิ่มมุมมองหรือ preset
- Metric Cards: กล้องออนไลน์, จำนวนเหตุการณ์, current layout, โซนเสี่ยง
- Camera Grid: การ์ดกล้องพร้อมสถานะ live/offline, AI tags, timestamp และ location
- Focus Monitor: พื้นที่ดูภาพใหญ่ พร้อม quick actions เช่น PTZ, snapshot และ record clip
- Playback Panel: timeline สีตามประเภทเหตุการณ์, ตัวกรองเวลา และ marker การตรวจสอบแล้ว
- Alert Panel: รายการเหตุการณ์สำคัญเรียงตาม severity และเวลา
- Device Health: ภาพรวม NVR, switch, network และ AI node
4. Interactions
- คลิก camera card เพื่อ active focus monitor และอัปเดต playback panel ตามกล้องนั้น
- คลิก alert item เพื่อ highlight กล้องและเลื่อนไปยัง timestamp ที่เกี่ยวข้อง
- hover บนช่วง timeline เพื่อดูรายละเอียด event tooltip เช่น type, duration, confidence
- สลับ layout ได้ระหว่าง 2x2, 3x3, 4x4 และ focus mode โดยไม่ออกจากหน้าหลัก
5. States & Alerts
- สีเขียว = ปกติ/online, สีส้ม = warning/needs review, สีแดง = critical/offline
- offline state ต้องแสดง last seen, สาเหตุเบื้องต้น และ CTA สำหรับส่งต่อทีมเทคนิค
- alert critical ต้อง sticky ไว้ด้านบนจนกว่าจะรับทราบหรือ assign แล้ว
- camera card ที่ selected ต้องมี visual emphasis ชัดเจนกว่าการ์ดอื่น
6. UX Principles
- Dark UI ลดแสงรบกวนในห้องควบคุมและดันภาพจากกล้องให้เด่นขึ้น
- เลย์เอาต์ต้อง support rapid scanning: ใช้หัวข้อสั้น, badge ชัด, สีจำกัดแต่สื่อความหมายแรง
- งานสำคัญต้องทำได้ใน 1-2 คลิก เช่น ขยายจอ, ย้อนดูเหตุการณ์, mark as reviewed
- รองรับการขยายหลายจอในอนาคต เช่น จอแสดง live grid แยกจากจอ incident handling