Object Detection Dashboard

A real-time web dashboard for monitoring object detection and movement tracking from camera feeds.

Features

• Real-time movement detection status
• Live object counting
• Visual alerts when movement is detected
• Active track monitoring
• Web-based dashboard (no installation needed for viewing)
• Responsive design (works on mobile devices)

Files

• roi_crop_track_dashboard.py - Main tracking program with integrated dashboard
• dashboard_server.py - HTTP server for dashboard API
• dashboard.html - Web dashboard interface

Installation

No additional packages needed beyond the existing requirements:

pip install opencv-python numpy

Usage

Method 1: Integrated (Recommended)

Run the tracking program with built-in dashboard:

python roi_crop_track_dashboard.py

Method 2: Separate Server

Run dashboard server separately:

python dashboard_server.py

Then run your tracking program and it will update the dashboard.

Accessing the Dashboard

1. Start the program
2. Open your web browser
3. Navigate to: http://localhost:8080
4. The dashboard will update automatically every second

Access from Other Devices

To view the dashboard from other devices on your network:

1. Find your computer's IP address:

   # On macOS/Linux
   ifconfig | grep "inet "
   
   # On Windows
   ipconfig

2. On another device, navigate to:

   http://YOUR_IP_ADDRESS:8080
   

   For example: http://192.168.1.100:8080

Dashboard Display

Movement Detected

• Purple gradient background with pulsing animation
• Red dot icon
• "Movement Detected" text
• Shows number of active objects

No Movement

• Light gray background
• Green checkmark icon
• "No Movement Detected" text
• "System monitoring..." status

Statistics Displayed

• Total Count: Cumulative number of objects counted
• Active Tracks: Number of currently tracked objects
• Last Updated: Timestamp of last update
• Connection Status: Green dot = connected, Red dot = disconnected

How It Works

1. Tracking Program detects objects and movement
2. Status Updates sent to shared status object
3. Dashboard Server serves status via HTTP API
4. Web Dashboard polls the API every second
5. Real-time Display shows current status

API Endpoint

The dashboard provides a JSON API at:

http://localhost:8080/api/status

Example response:

{
  "movement_detected": true,
  "count": 5,
  "active_tracks": 2,
  "last_update": 1698765432.123,
  "status_message": "Movement Detected",
  "timestamp": "2024-04-23 14:30:45"
}

Customization

Change Port

Edit roi_crop_track_dashboard.py:

run_server_thread(port=9000)  # Change to your preferred port

Modify Dashboard Appearance

Edit dashboard.html to customize:

• Colors and gradients
• Font sizes
• Layout
• Update interval (default: 1 second)

Add Sound Alerts

Uncomment the playAlert() function in dashboard.html to enable audio notifications when movement is detected.

Troubleshooting

Dashboard shows "Connection Error"

Cause: Dashboard server not running or wrong port

Solution:

1. Ensure tracking program is running
2. Check console for "Dashboard server started" message
3. Verify port 8080 is not in use by another application

Dashboard shows old data

Cause: Browser cache

Solution:

1. Hard refresh the page (Ctrl+F5 or Cmd+Shift+R)
2. Clear browser cache
3. Try in incognito/private mode

"Address already in use" error

Cause: Port 8080 is already in use

Solution:

1. Stop other programs using port 8080
2. Or change the port in the code

Can't access from other devices

Cause: Firewall blocking connections

Solution:

1. Allow port 8080 in your firewall
2. On macOS: System Preferences → Security & Privacy → Firewall → Firewall Options
3. Add Python to allowed applications

Example Workflow

Terminal 1:
$ python roi_crop_track_dashboard.py
Starting dashboard server...
Dashboard available at: http://localhost:8080
System camera opened: 1280x720

[Select ROI on camera feed]

✅ Reference ROI saved
✅ Using selected ROI crop as reference
Starting tracking...

Count: 1 | Active Tracks: 1 | Movement: True
Count: 2 | Active Tracks: 2 | Movement: True

Browser:
http://localhost:8080
[Shows real-time dashboard with movement status]

Multiple Camera Support

To monitor multiple cameras, run separate instances on different ports:

# Camera 1
python roi_crop_track_dashboard.py  # Port 8080

# Camera 2 (modify code to use port 8081)
python roi_crop_track_dashboard.py  # Port 8081

Access dashboards at:

• Camera 1: http://localhost:8080
• Camera 2: http://localhost:8081

License

This dashboard integrates with the existing object detection system.