aggregate entry and exit data to kpi card and bar chart

app/services/processing_service.py

@@ -1,7 +1,3 @@
-"""
-Background processing service for video analysis.
-Handles video processing in a separate thread and emits real-time updates via SocketIO.
-"""
 import threading
 from datetime import datetime
 from app import socketio
@@ -12,6 +8,7 @@ from app.config import Config
 from app.utils.math_utils import calculate_line_signed_distance
 
 # Global state to track processing jobs
+# Changed to support multiple jobs per session: { session_id: { camera_role: job } }
 processing_jobs = {}
 
 class ProcessingJob:
@@ -36,7 +33,8 @@ class ProcessingJob:
             'status': self.status,
             'progress': self.progress,
             'error': self.error,
-            'location': self.location
+            'location': self.location,
+            'camera_role': self.camera_role  # Added camera_role
         }
 
 
@@ -48,7 +46,13 @@ def start_processing(session_id: str, video_path: str, line_points: list,
     Returns immediately after starting the thread.
     """
     job = ProcessingJob(session_id, video_path, line_points, location, video_start_time, camera_role)
-    processing_jobs[session_id] = job
+    
+    # Initialize session dict if it doesn't exist
+    if session_id not in processing_jobs:
+        processing_jobs[session_id] = {}
+        
+    # Store job by camera role
+    processing_jobs[session_id][camera_role] = job
     
     # Start processing in background thread
     job.thread = threading.Thread(
@@ -62,10 +66,10 @@ def start_processing(session_id: str, video_path: str, line_points: list,
 
 
 def get_job_status(session_id: str) -> dict:
-    """Get the status of a processing job"""
-    job = processing_jobs.get(session_id)
-    if job:
-        return job.to_dict()
+    """Get the status of processing jobs for a session"""
+    if session_id in processing_jobs:
+        # Return dict of jobs: {'ENTRY': {...}, 'EXIT': {...}}
+        return {role: job.to_dict() for role, job in processing_jobs[session_id].items()}
     return None
 
 
@@ -121,8 +125,6 @@ def _process_with_realtime_updates(video_processor: VideoProcessor, job: Process
     from PIL import Image
     import supervision as sv
     from app.config import Config
-    from app.models import VehicleEvent
-    import math
     
     cap = cv2.VideoCapture(job.video_path)
     fps = cap.get(cv2.CAP_PROP_FPS) or 30.0
@@ -130,7 +132,8 @@ def _process_with_realtime_updates(video_processor: VideoProcessor, job: Process
     
     # Setup output video
     fourcc = cv2.VideoWriter_fourcc(*"mp4v")
-    output_filename = f"{job.session_id}_processed.mp4"
+    # Make filename unique per camera
+    output_filename = f"{job.session_id}_{job.camera_role}_processed.mp4"
     output_path = os.path.join(Config.OUTPUT_FOLDER, output_filename)
     writer = cv2.VideoWriter(output_path, fourcc, fps, 
                            (Config.FRAME_WIDTH, Config.FRAME_HEIGHT))
@@ -287,6 +290,7 @@ def _process_frame_detections(detections, line_points, track_class, track_last_d
                 
                 cls_name = video_processor.class_names[track_class[tracker_id]]
                 
+                # Determine direction based on camera role
                 if job.camera_role == 'EXIT':
                     direction = 'OUT'
                 else:
@@ -321,7 +325,8 @@ def _emit_progress_update(job: ProcessingJob):
     """Emit progress update"""
     socketio.emit('processing_progress', {
         'session_id': job.session_id,
-        'progress': job.progress
+        'progress': job.progress,
+        'camera_role': job.camera_role
     }, room=job.session_id, namespace='/')
 
 
@@ -329,7 +334,8 @@ def _emit_vehicle_event(job: ProcessingJob, event):
     """Emit a new vehicle detection event"""
     socketio.emit('vehicle_event', {
         'session_id': job.session_id,
-        'event': event.to_dict()
+        'event': event.to_dict(),
+        'camera_role': job.camera_role
     }, room=job.session_id, namespace='/')
 
 
@@ -337,7 +343,8 @@ def _emit_statistics_update(job: ProcessingJob, stats: dict):
     """Emit updated statistics"""
     socketio.emit('statistics_update', {
         'session_id': job.session_id,
-        'statistics': stats
+        'statistics': stats,
+        'camera_role': job.camera_role
     }, room=job.session_id, namespace='/')
 
 
@@ -345,7 +352,8 @@ def _emit_processing_complete(job: ProcessingJob, final_stats: dict):
     """Emit processing completion event"""
     socketio.emit('processing_complete', {
         'session_id': job.session_id,
-        'statistics': final_stats
+        'statistics': final_stats,
+        'camera_role': job.camera_role
     }, room=job.session_id, namespace='/')
 
 
@@ -353,5 +361,6 @@ def _emit_error(job: ProcessingJob, error_message: str):
     """Emit processing error event"""
     socketio.emit('processing_error', {
         'session_id': job.session_id,
-        'error': error_message
-    }, room=job.session_id, namespace='/')
+        'error': error_message,
+        'camera_role': job.camera_role
+    }, room=job.session_id, namespace='/')

app/static/js/dashboard.js

@@ -8,10 +8,24 @@ class DashboardManager {
         this.charts = {};
         this.eventCount = 0;
         this.maxLogEvents = 50;
-        
+        this.cameraStats = {
+            'ENTRY': this.createEmptyStats(),
+            'EXIT': this.createEmptyStats()
+        };
         this.init();
     }
-    
+
+    createEmptyStats() {
+        return {
+            vehicles_in: 0,
+            vehicles_out: 0,
+            net_vehicles: 0,
+            people_on_site_min: 0,
+            people_on_site_max: 0,
+            vehicle_distribution: {}
+        };
+    }
+
     init() {
         this.setupCharts();
         this.setupSocketIO();
@@ -26,116 +40,112 @@ class DashboardManager {
     setupSocketIO() {
         // Connect to SocketIO server
         this.socket = io();
-        
         this.socket.on('connect', () => {
-            console.log('Connected to server');
-            if (this.sessionId) {
-                this.socket.emit('join_session', { session_id: this.sessionId });
-            }
-        });
-        
-        this.socket.on('disconnect', () => {
-            console.log('Disconnected from server');
-        });
-        
-        this.socket.on('connected', (data) => {
-            console.log('Server acknowledged connection:', data);
+            if (this.sessionId) this.socket.emit('join_session', { session_id: this.sessionId });
         });
-        
-        // Processing status updates
+
         this.socket.on('processing_status', (data) => {
-            console.log('Processing status:', data);
-            this.updateProcessingStatus(data);
+            if (window.workbenchManager) window.workbenchManager.handleProcessingUpdate(data);
         });
         
-        // Progress updates
         this.socket.on('processing_progress', (data) => {
-            console.log('Progress:', data.progress + '%');
-            this.updateProgress(data.progress);
+            if (window.workbenchManager) window.workbenchManager.handleProgressUpdate(data);
         });
         
-        // New vehicle event
         this.socket.on('vehicle_event', (data) => {
-            console.log('New vehicle event:', data.event);
             this.addEventToLog(data.event);
         });
         
-        // Statistics update
+        // CHANGED: Handle statistics per camera
         this.socket.on('statistics_update', (data) => {
-            console.log('Statistics update:', data.statistics);
-            this.updateStatistics(data.statistics);
-            this.updateDistributionChart(data.statistics.vehicle_distribution);
+            if (data.camera_role) {
+                this.updateCameraStatistics(data.camera_role, data.statistics);
+            } else {
+                // Fallback for initial load or legacy events
+                this.updateAggregatedStatistics(data.statistics);
+            }
         });
         
-        // Processing complete
         this.socket.on('processing_complete', (data) => {
-            console.log('Processing complete:', data);
             this.onProcessingComplete(data);
+            if (window.workbenchManager) {
+                window.workbenchManager.handleProcessingUpdate({
+                    camera_role: data.camera_role,
+                    status: 'completed',
+                    progress: 100
+                });
+            }
         });
         
-        // Processing error
         this.socket.on('processing_error', (data) => {
             console.error('Processing error:', data.error);
             this.onProcessingError(data.error);
+             if (window.workbenchManager) {
+                window.workbenchManager.handleProcessingUpdate({
+                    camera_role: data.camera_role,
+                    status: 'error',
+                    progress: 0
+                });
+            }
         });
     }
     
+    // Update stats for a specific camera and then refresh display
+    updateCameraStatistics(role, stats) {
+        this.cameraStats[role] = stats;
+        this.refreshDashboard();
+    }
+
+    // Calculate totals and update UI
+    refreshDashboard() {
+        const entry = this.cameraStats.ENTRY;
+        const exit = this.cameraStats.EXIT;
+        
+        // Sum distribution
+        const totalDist = {};
+        const allTypes = new Set([
+            ...Object.keys(entry.vehicle_distribution || {}), 
+            ...Object.keys(exit.vehicle_distribution || {})
+        ]);
+        
+        allTypes.forEach(type => {
+            totalDist[type] = (entry.vehicle_distribution[type] || 0) + 
+                            (exit.vehicle_distribution[type] || 0);
+        });
+
+        const aggregated = {
+            vehicles_in: (entry.vehicles_in || 0) + (exit.vehicles_in || 0),
+            vehicles_out: (entry.vehicles_out || 0) + (exit.vehicles_out || 0),
+            net_vehicles: (entry.net_vehicles || 0) + (exit.net_vehicles || 0),
+            people_on_site_min: (entry.people_on_site_min || 0) + (exit.people_on_site_min || 0),
+            people_on_site_max: (entry.people_on_site_max || 0) + (exit.people_on_site_max || 0),
+            vehicle_distribution: totalDist
+        };
+        
+        this.updateAggregatedStatistics(aggregated);
+    }    
+    
     async fetchInitialData() {
         try {
-            // Fetch statistics
             const statsResponse = await fetch('/api/statistics');
             if (statsResponse.ok) {
                 const stats = await statsResponse.json();
-                this.updateStatistics(stats);
-                if (stats.vehicle_distribution) {
-                    this.updateDistributionChart(stats.vehicle_distribution);
-                }
-            }
-            
-            // Fetch events
-            const eventsResponse = await fetch('/api/events');
-            if (eventsResponse.ok) {
-                const events = await eventsResponse.json();
-                this.eventCount = events.length;
-                document.getElementById('event-count').textContent = `${this.eventCount} events`;
+                // Initial load is likely the total from DB, so we display it directly
+                // Note: Real-time updates will takeover shortly
+                this.updateAggregatedStatistics(stats);
             }
+            // ... events fetch ...
         } catch (error) {
-            console.error('Error fetching initial data:', error);
+            console.error(error);
         }
     }
     
+    // Legacy support or global banner
     updateProcessingStatus(data) {
-        const banner = document.getElementById('processing-banner');
-        const text = document.getElementById('processing-text');
-        const entryStatus = document.getElementById('entry-status');
-        
-        if (data.status === 'processing') {
-            banner.classList.remove('hidden');
-            text.textContent = `Processing video... ${data.progress}%`;
-            if (entryStatus) entryStatus.textContent = 'PROCESSING';
-        } else if (data.status === 'completed') {
-            banner.classList.add('hidden');
-            if (entryStatus) entryStatus.textContent = 'COMPLETED';
-        } else if (data.status === 'error') {
-            banner.classList.add('hidden');
-            if (entryStatus) entryStatus.textContent = 'ERROR';
-        }
+        // Implementation moved to WorkbenchManager for specific handling
     }
     
-    updateProgress(progress) {
-        const progressBar = document.getElementById('progress-bar');
-        const text = document.getElementById('processing-text');
-        
-        if (progressBar) {
-            progressBar.style.width = `${progress}%`;
-        }
-        if (text) {
-            text.textContent = `Processing video... ${progress}%`;
-        }
-    }
-    
-    updateStatistics(stats) {
-        // Update KPI values
+    updateAggregatedStatistics(stats) {
         const vehiclesIn = document.getElementById('vehicles-in');
         const vehiclesOut = document.getElementById('vehicles-out');
         const netVehicles = document.getElementById('net-vehicles');
@@ -146,9 +156,11 @@ class DashboardManager {
         if (netVehicles) netVehicles.textContent = stats.net_vehicles || 0;
         
         if (peopleRange) {
-            const min = stats.people_on_site_min || 0;
-            const max = stats.people_on_site_max || 0;
-            peopleRange.textContent = `${min} - ${max}`;
+            peopleRange.textContent = `${stats.people_on_site_min} - ${stats.people_on_site_max}`;
+        }
+        
+        if (stats.vehicle_distribution) {
+            this.updateDistributionChart(stats.vehicle_distribution);
         }
     }
     
@@ -156,17 +168,14 @@ class DashboardManager {
         const tbody = document.getElementById('event-log-body');
         if (!tbody) return;
         
-        // Remove "no events" message if present
         const emptyRow = tbody.querySelector('.empty-row');
         if (emptyRow) {
             emptyRow.remove();
         }
         
-        // Create new row
         const row = document.createElement('tr');
         row.className = 'new-event';
         
-        // Format timestamp
         let timestamp = '--:--:--';
         if (event.timestamp) {
             const ts = event.timestamp;
@@ -177,7 +186,6 @@ class DashboardManager {
             }
         }
         
-        // Direction badge class
         const directionClass = event.direction === 'IN' ? 'badge-in' : 'badge-out';
         
         row.innerHTML = `
@@ -187,19 +195,15 @@ class DashboardManager {
             <td>${event.seats_min} - ${event.seats_max}</td>
         `;
         
-        // Insert at top
         tbody.insertBefore(row, tbody.firstChild);
         
-        // Remove excess rows
         while (tbody.children.length > this.maxLogEvents) {
             tbody.removeChild(tbody.lastChild);
         }
         
-        // Update event count
         this.eventCount++;
         document.getElementById('event-count').textContent = `${this.eventCount} events`;
         
-        // Highlight animation
         setTimeout(() => {
             row.classList.remove('new-event');
         }, 1000);
@@ -217,16 +221,7 @@ class DashboardManager {
     }
     
     onProcessingComplete(data) {
-        const banner = document.getElementById('processing-banner');
-        const entryStatus = document.getElementById('entry-status');
-        
-        if (banner) banner.classList.add('hidden');
-        if (entryStatus) entryStatus.textContent = 'COMPLETED';
-        
-        // Show completion notification
         this.showNotification('Processing Complete', 'Video analysis finished successfully!', 'success');
-        
-        // Update final statistics
         if (data.statistics) {
             this.updateStatistics(data.statistics);
             if (data.statistics.vehicle_distribution) {
@@ -236,17 +231,10 @@ class DashboardManager {
     }
     
     onProcessingError(error) {
-        const banner = document.getElementById('processing-banner');
-        const entryStatus = document.getElementById('entry-status');
-        
-        if (banner) banner.classList.add('hidden');
-        if (entryStatus) entryStatus.textContent = 'ERROR';
-        
         this.showNotification('Processing Error', error, 'error');
     }
     
     showNotification(title, message, type = 'info') {
-        // Create notification element
         const notification = document.createElement('div');
         notification.className = `notification notification-${type}`;
         notification.innerHTML = `
@@ -255,8 +243,6 @@ class DashboardManager {
         `;
         
         document.body.appendChild(notification);
-        
-        // Auto-remove after 5 seconds
         setTimeout(() => {
             notification.classList.add('fade-out');
             setTimeout(() => notification.remove(), 300);
@@ -264,7 +250,6 @@ class DashboardManager {
     }
     
     setupCharts() {
-        // Vehicle Distribution Chart
         const distCtx = document.getElementById('distributionChart');
         if (distCtx) {
             this.charts.distribution = new Chart(distCtx, {
@@ -281,65 +266,10 @@ class DashboardManager {
                 options: {
                     responsive: true,
                     maintainAspectRatio: false,
-                    animation: {
-                        duration: 300
-                    },
-                    plugins: {
-                        legend: { display: false }
-                    },
+                    plugins: { legend: { display: false } },
                     scales: {
-                        y: {
-                            beginAtZero: true,
-                            grid: { color: '#e2e8f0' }
-                        },
-                        x: {
-                            grid: { display: false }
-                        }
-                    }
-                }
-            });
-        }
-
-        // People Flow Trend Chart
-        const flowCtx = document.getElementById('flowChart');
-        if (flowCtx) {
-            this.charts.flow = new Chart(flowCtx, {
-                type: 'line',
-                data: {
-                    labels: [],
-                    datasets: [
-                        {
-                            label: 'Actual Flow',
-                            data: [],
-                            borderColor: '#3b82f6',
-                            backgroundColor: 'rgba(59, 130, 246, 0.2)',
-                            fill: true,
-                            tension: 0.4
-                        },
-                        {
-                            label: 'Predicted Flow',
-                            data: [],
-                            borderColor: '#ef4444',
-                            backgroundColor: 'rgba(239, 68, 68, 0.2)',
-                            fill: true,
-                            tension: 0.4
-                        }
-                    ]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: { display: false }
-                    },
-                    scales: {
-                        y: {
-                            beginAtZero: true,
-                            grid: { color: '#e2e8f0' }
-                        },
-                        x: {
-                            grid: { display: false }
-                        }
+                        y: { beginAtZero: true, grid: { color: '#e2e8f0' } },
+                        x: { grid: { display: false } }
                     }
                 }
             });
@@ -351,14 +281,11 @@ class DashboardManager {
             btn.addEventListener('click', () => {
                 document.querySelectorAll('.time-btn').forEach(b => b.classList.remove('active'));
                 btn.classList.add('active');
-                // TODO: Fetch data for selected time period
             });
         });
     }
 }
 
-// Note: Initialization moved to end of file to include WorkbenchManager
-
 class WorkbenchManager {
     constructor() {
         // State
@@ -369,8 +296,8 @@ class WorkbenchManager {
         
         // Track camera configurations separately
         this.cameraConfigs = {
-            'ENTRY': { hasVideo: false, hasLine: false, videoName: '' },
-            'EXIT': { hasVideo: false, hasLine: false, videoName: '' }
+            'ENTRY': { hasVideo: false, hasLine: false, videoName: '', processingStatus: 'pending', progress: 0 },
+            'EXIT': { hasVideo: false, hasLine: false, videoName: '', processingStatus: 'pending', progress: 0 }
         };
 
         // Elements
@@ -388,7 +315,9 @@ class WorkbenchManager {
             processingStatus: document.getElementById('processing-status'),
             locationInput: document.getElementById('location-input'),
             modeLabel: document.getElementById('mode-label'),
-            liveBadge: document.getElementById('live-badge')
+            liveBadge: document.getElementById('live-badge'),
+            progressBar: document.getElementById('progress-bar'),
+            processingText: document.getElementById('processing-text')
         };
 
         this.init();
@@ -400,23 +329,17 @@ class WorkbenchManager {
     }
 
     setupEventListeners() {
-        // Handle Video Upload
         if (this.els.videoUpload) {
             this.els.videoUpload.addEventListener('change', (e) => this.handleVideoUpload(e));
         }
-
-        // Handle Clear/Redraw Line
         if (this.els.clearLineBtn) {
             this.els.clearLineBtn.addEventListener('click', () => this.resetLine());
         }
-
-        // Handle Start Analysis
         if (this.els.startBtn) {
             this.els.startBtn.addEventListener('click', () => this.startAnalysis());
         }
     }
 
-    // --- Camera Context Switching (Entry/Exit Tabs) ---
     switchCameraContext(role) {
         this.currentCameraRole = role;
         
@@ -425,11 +348,9 @@ class WorkbenchManager {
         const activeId = role === 'ENTRY' ? 'tab-entry' : 'tab-exit';
         document.getElementById(activeId).classList.add('active');
         
-        // Update Stage Label
         document.getElementById('stage-label').textContent = 
             `${role.charAt(0).toUpperCase() + role.slice(1).toLowerCase()} Camera Preview`;
 
-        // Update file name display
         const config = this.cameraConfigs[role];
         if (config.videoName) {
             this.els.fileName.textContent = config.videoName;
@@ -437,7 +358,6 @@ class WorkbenchManager {
             this.els.fileName.textContent = 'No file selected';
         }
         
-        // Load the frame for the selected camera if video exists
         if (config.hasVideo) {
             this.loadFirstFrame();
             this.updateConfigStatus(config.hasLine);
@@ -445,60 +365,101 @@ class WorkbenchManager {
                 this.els.clearLineBtn.disabled = false;
             }
         } else {
-            // No video for this camera - show placeholder
             this.els.canvas.style.display = 'none';
             this.els.placeholder.style.display = 'block';
             this.updateConfigStatus(false);
             this.els.clearLineBtn.disabled = true;
         }
+
+        // Update action panel UI to reflect status of THIS camera
+        this.updateActionPanelUI();
+    }
+    
+    // NEW: Handle processing updates from socket
+    handleProcessingUpdate(data) {
+        if (!data.camera_role) return;
+        
+        const config = this.cameraConfigs[data.camera_role];
+        if (config) {
+            config.processingStatus = data.status;
+            if (data.progress) config.progress = data.progress;
+            
+            if (this.currentCameraRole === data.camera_role) {
+                this.updateActionPanelUI();
+            }
+        }
     }
 
-    // --- Video Upload & First Frame Extraction ---
-    async handleVideoUpload(e) {
-        console.log('handleVideoUpload called', e);
+    handleProgressUpdate(data) {
+        if (!data.camera_role) return;
         
-        if (!e.target.files || !e.target.files.length) {
-            console.log('No files selected');
-            return;
+        const config = this.cameraConfigs[data.camera_role];
+        if (config) {
+            config.progress = data.progress;
+            if (config.processingStatus === 'pending') config.processingStatus = 'processing';
+            
+            if (this.currentCameraRole === data.camera_role) {
+                this.updateActionPanelUI();
+            }
         }
+    }
 
-        const file = e.target.files[0];
-        console.log('File selected:', file.name, 'Size:', file.size, 'Type:', file.type);
-        
-        if (this.els.fileName) {
-            this.els.fileName.textContent = file.name;
+    updateActionPanelUI() {
+        const config = this.cameraConfigs[this.currentCameraRole];
+        const status = config.processingStatus;
+        
+        if (status === 'processing') {
+             this.els.processingStatus.classList.remove('hidden');
+             this.els.startBtn.disabled = true;
+             this.els.startBtn.innerHTML = `<i data-feather="loader" class="spin"></i> Processing...`;
+             
+             if (this.els.progressBar) {
+                 this.els.progressBar.style.width = (config.progress || 0) + '%';
+             }
+             if (this.els.processingText) {
+                 this.els.processingText.textContent = `Processing... ${config.progress || 0}%`;
+             }
+             feather.replace();
+        } else if (status === 'completed') {
+             this.els.processingStatus.classList.add('hidden');
+             this.els.startBtn.disabled = true;
+             this.els.startBtn.innerHTML = `<i data-feather="check"></i> Completed`;
+             this.els.configStatusText.textContent = "Analysis Complete";
+             this.els.configStatusDot.className = "status-dot ready";
+             feather.replace();
+        } else {
+             // Pending or reset
+             this.els.processingStatus.classList.add('hidden');
+             this.els.startBtn.innerHTML = `<i data-feather="play"></i> Start Analysis`;
+             this.updateConfigStatus(config.hasLine); // Re-enable if ready
+             feather.replace();
         }
+    }
+
+    async handleVideoUpload(e) {
+        if (!e.target.files || !e.target.files.length) return;
+        const file = e.target.files[0];
+        this.els.fileName.textContent = file.name;
         
         const formData = new FormData();
         formData.append('video', file);
         formData.append('camera_role', this.currentCameraRole);
 
         try {
-            console.log('Uploading to /setup/upload-video for camera:', this.currentCameraRole);
-            
-            // Use existing endpoint from setup.py
             const response = await fetch('/setup/upload-video', {
                 method: 'POST',
                 body: formData
             });
-            
-            console.log('Response status:', response.status);
             const data = await response.json();
-            console.log('Response data:', data);
 
             if (data.success) {
-                // Update camera config
                 this.cameraConfigs[this.currentCameraRole].hasVideo = true;
                 this.cameraConfigs[this.currentCameraRole].videoName = file.name;
-                
-                console.log('Upload successful, loading first frame...');
                 this.loadFirstFrame();
             } else {
-                console.error('Upload failed:', data.error);
                 alert('Upload failed: ' + data.error);
             }
         } catch (error) {
-            console.error('Upload error:', error);
             alert('Error uploading video: ' + error.message);
         }
     }
@@ -509,40 +470,53 @@ class WorkbenchManager {
             const data = await response.json();
 
             if (data.frame) {
-                // UI State: Show Canvas, Hide Placeholder
                 this.els.placeholder.style.display = 'none';
                 this.els.canvas.style.display = 'block';
                 this.els.liveFeed.classList.add('hidden');
 
-                // Initialize Line Drawer
                 this.lineDrawer = new LineDrawer('setup-canvas');
                 await this.lineDrawer.loadImage('data:image/jpeg;base64,' + data.frame);
 
-                // If line points exist for this camera, restore them
                 if (data.line_points) {
                     this.lineDrawer.setLinePoints(data.line_points);
                     this.lineSet = true;
                     this.cameraConfigs[this.currentCameraRole].hasLine = true;
                     this.els.clearLineBtn.disabled = false;
                     this.updateConfigStatus(true);
-                } else {
-                    // Setup Callback for when line is drawn
-                    this.lineDrawer.onLineComplete = (points) => {
-                        this.lineSet = true;
-                        this.cameraConfigs[this.currentCameraRole].hasLine = true;
-                        this.els.clearLineBtn.disabled = false;
-                        this.updateConfigStatus(true);
-                    };
-                    
-                    // Update Status
-                    this.els.configStatusText.textContent = "Video Loaded. Draw Line.";
-                    this.els.configStatusDot.className = "status-dot error"; // Orange/Red until line drawn
                 }
+                
+                // NEW: Attach Callback with Auto-Save
+                this.lineDrawer.onLineComplete = (points) => {
+                    this.lineSet = true;
+                    this.cameraConfigs[this.currentCameraRole].hasLine = true;
+                    this.els.clearLineBtn.disabled = false;
+                    this.updateConfigStatus(true);
+                    
+                    // FIX: Automatically save line to backend
+                    this.saveLine(points);
+                };
             }
         } catch (error) {
             console.error('Error loading frame:', error);
         }
     }
+    
+    // Helper to auto-save
+    async saveLine(points) {
+        try {
+            await fetch('/setup/save-line', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ 
+                    line_points: points,
+                    camera_role: this.currentCameraRole
+                })
+            });
+            console.log('Line auto-saved');
+        } catch (e) {
+            console.error('Failed to auto-save line', e);
+        }
+    }
 
     resetLine() {
         if (this.lineDrawer) {
@@ -565,31 +539,19 @@ class WorkbenchManager {
         }
     }
 
-    // --- Processing ---
     async startAnalysis() {
         if (!this.lineSet || !this.lineDrawer) {
             alert("Please draw the counting line first.");
             return;
         }
 
-        // 1. Save Line for current camera
-        const linePoints = this.lineDrawer.getLinePoints();
-        await fetch('/setup/save-line', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ 
-                line_points: linePoints,
-                camera_role: this.currentCameraRole
-            })
-        });
-
-        // 2. UI Updates (Switch to Analysis Mode)
+        // Line is already auto-saved, but we can double check or just proceed
+        
         this.els.processingStatus.classList.remove('hidden');
         this.els.startBtn.disabled = true;
         
         const location = this.els.locationInput.value || 'Unknown';
 
-        // 3. Trigger Processing
         try {
             const response = await fetch('/setup/start-processing', {
                 method: 'POST',
@@ -602,10 +564,13 @@ class WorkbenchManager {
             const data = await response.json();
 
             if (data.success) {
-                // Switch View to "Analysis Mode"
+                // Update local state
+                const config = this.cameraConfigs[this.currentCameraRole];
+                config.processingStatus = 'processing';
+                this.updateActionPanelUI();
+
                 this.setAnalysisMode(true);
                 
-                // Join the session room for real-time updates
                 if (window.dashboardManager && window.dashboardManager.socket) {
                     window.dashboardManager.sessionId = data.session_id;
                     window.dashboardManager.socket.emit('join_session', { 
@@ -622,20 +587,15 @@ class WorkbenchManager {
 
     setAnalysisMode(isActive) {
         if (isActive) {
-            // Hide Setup Canvas, Show Live Feed (which will be populated by processed video)
             this.els.canvas.style.display = 'none';
             this.els.liveFeed.classList.remove('hidden');
             this.els.liveBadge.classList.remove('hidden');
             this.els.modeLabel.textContent = "Live Analysis";
-            
-            // In a real app, you'd set the src of liveFeed to the processed stream URL
-            // For now, we rely on the dashboard.js socket updates to handle data
         }
     }
     
     checkExistingSession() {
-        // If the page loads and we already have a session, switch to analysis mode
-        // (This relies on backend session logic or a global variable)
+        // Simple check
         const hasSession = document.getElementById('live-badge').classList.contains('active-session'); 
         if(hasSession) {
             this.setAnalysisMode(true);
@@ -643,18 +603,13 @@ class WorkbenchManager {
     }
 }
 
-// Global function for the HTML onclick attributes
 function switchCameraContext(role) {
     if (window.workbenchManager) {
         window.workbenchManager.switchCameraContext(role);
     }
 }
 
-// Initialize when DOM is ready
 document.addEventListener('DOMContentLoaded', () => {
-    // Initialize Dashboard (Analytics)
     window.dashboardManager = new DashboardManager();
-    
-    // Initialize Workbench (Setup/UI)
     window.workbenchManager = new WorkbenchManager();
-});
+});

app/templates/setup.html

@@ -1,335 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Configuration - R&R Vehicle Analytics{% endblock %}
-
-{% block content %}
-<div class="setup-layout">
-    <!-- Left Sidebar -->
-    <aside class="setup-sidebar">
-        <a href="{{ url_for('dashboard.index') }}" class="back-link">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M19 12H5M12 19l-7-7 7-7"/>
-            </svg>
-            Back
-        </a>
-
-        <!-- Input Source Section -->
-        <div class="sidebar-section">
-            <h3 class="sidebar-title">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <circle cx="12" cy="12" r="10"/>
-                    <circle cx="12" cy="12" r="3"/>
-                </svg>
-                Input Source
-            </h3>
-
-            <div class="form-group">
-                <label class="form-label">Camera Role</label>
-                <select class="form-select" id="camera-role">
-                    <option value="ENTRY">Entry Camera</option>
-                    <option value="EXIT">Exit Camera</option>
-                </select>
-            </div>
-            
-            <div class="form-group">
-                <label class="form-label">Select Source Type</label>
-                <select class="form-select" id="source-type">
-                    <option value="">Select</option>
-                    <option value="video">Video File</option>
-                    <option value="camera">Live Camera</option>
-                </select>
-            </div>
-
-            <div id="video-upload-section">
-                <input type="file" id="video-input" accept="video/*" class="hidden">
-                <button class="btn btn-primary btn-full" id="browse-btn">
-                    Browse Files
-                </button>
-                <div id="file-name" class="file-name-display"></div>
-            </div>
-
-            <div id="camera-section" class="hidden">
-                <div class="form-group">
-                    <label class="form-label">Camera URL</label>
-                    <input type="text" class="form-input" id="camera-url" placeholder="rtsp://...">
-                </div>
-            </div>
-        </div>
-
-        <!-- Location Section -->
-        <div class="sidebar-section">
-            <div class="form-group">
-                <label class="form-label">R&R Location</label>
-                <input type="text" class="form-input" id="location-input" placeholder="e.g., Skudai">
-            </div>
-        </div>
-
-        <!-- Action Panel -->
-        <div class="sidebar-section">
-            <h3 class="sidebar-title">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M12 3v18M3 12h18"/>
-                </svg>
-                Action Panel
-            </h3>
-
-            <!-- <button class="btn btn-primary btn-full" id="set-line-btn" disabled>
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M12 19l7-7 3 3-7 7-3-3z"/>
-                    <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/>
-                </svg>
-                Set Counting Line
-            </button> -->
-
-            <button class="btn btn-outline btn-full" id="reset-line-btn" disabled>
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
-                    <path d="M3 3v5h5"/>
-                </svg>
-                Reset Line
-            </button>
-
-            <hr class="sidebar-divider">
-
-            <button class="btn btn-success btn-full" id="save-config-btn" disabled>
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-                    <polyline points="17,21 17,13 7,13 7,21"/>
-                    <polyline points="7,3 7,8 15,8"/>
-                </svg>
-                Start Processing
-            </button>
-        </div>
-    </aside>
-
-    <!-- Main Content -->
-    <main class="setup-main">
-        <!-- Instruction Alert -->
-        <div class="alert alert-warning">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
-                <line x1="12" y1="9" x2="12" y2="13"/>
-                <line x1="12" y1="17" x2="12.01" y2="17"/>
-            </svg>
-            <div>
-                <strong>Instruction:</strong> 
-                Drag the endpoints of the line to define the entry/exit threshold. 
-                The line should be placed perpendicular to vehicle traffic flow.
-            </div>
-        </div>
-
-        <!-- Video Preview -->
-        <div class="preview-section">
-            <h3 class="preview-title">Video Preview</h3>
-            
-            <div class="canvas-wrapper">
-                <div class="canvas-container" id="canvas-container">
-                    <canvas id="preview-canvas"></canvas>
-                    <div class="canvas-placeholder" id="canvas-placeholder">
-                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
-                            <path d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
-                        </svg>
-                        <p>Video Feed Preview</p>
-                        <span class="canvas-info" id="frame-info">Frame: 1/1200 | Time: 00:00:00</span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="line-position">
-                <span>Line Position:</span>
-                <span class="position-value" id="line-position">X: --, Y: --</span>
-            </div>
-        </div>
-
-        <!-- Processing Progress (hidden by default) -->
-        <div class="processing-section hidden" id="processing-section">
-            <h3>Processing Video...</h3>
-            <div class="progress-bar">
-                <div class="progress-bar-fill" id="progress-fill" style="width: 0%"></div>
-            </div>
-            <p class="progress-text" id="progress-text">0% complete</p>
-        </div>
-    </main>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script src="{{ url_for('static', filename='js/setup_canvas.js') }}"></script>
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const sourceType = document.getElementById('source-type');
-    const videoInput = document.getElementById('video-input');
-    const browseBtn = document.getElementById('browse-btn');
-    const fileNameDisplay = document.getElementById('file-name');
-    const videoUploadSection = document.getElementById('video-upload-section');
-    const cameraSection = document.getElementById('camera-section');
-    // const setLineBtn = document.getElementById('set-line-btn');
-    const resetLineBtn = document.getElementById('reset-line-btn');
-    const saveConfigBtn = document.getElementById('save-config-btn');
-    const canvasPlaceholder = document.getElementById('canvas-placeholder');
-    const linePosition = document.getElementById('line-position');
-    const processingSection = document.getElementById('processing-section');
-    
-    let lineDrawer = null;
-    let lineSet = false;
-
-    // Source type change
-    sourceType.addEventListener('change', function() {
-        if (this.value === 'video') {
-            videoUploadSection.classList.remove('hidden');
-            cameraSection.classList.add('hidden');
-        } else if (this.value === 'camera') {
-            videoUploadSection.classList.add('hidden');
-            cameraSection.classList.remove('hidden');
-        }
-    });
-
-    // Browse button click
-    browseBtn.addEventListener('click', function() {
-        videoInput.click();
-    });
-
-    // Video file selected
-    videoInput.addEventListener('change', async function() {
-        if (this.files.length > 0) {
-            const file = this.files[0];
-            fileNameDisplay.textContent = file.name;
-            
-            // Upload video
-            const formData = new FormData();
-            formData.append('video', file);
-            
-            try {
-                const response = await fetch('/setup/upload-video', {
-                    method: 'POST',
-                    body: formData
-                });
-                
-                const data = await response.json();
-                
-                if (data.success) {
-                    // Get first frame
-                    await loadFirstFrame();
-                    // setLineBtn.disabled = false;
-                } else {
-                    alert('Error uploading video: ' + data.error);
-                }
-            } catch (error) {
-                console.error('Upload error:', error);
-                alert('Failed to upload video');
-            }
-        }
-    });
-
-    async function loadFirstFrame() {
-        try {
-            const response = await fetch('/setup/get-first-frame');
-            const data = await response.json();
-            
-            if (data.frame) {
-                // Hide placeholder first
-                canvasPlaceholder.style.display = 'none';
-                canvasPlaceholder.classList.add('hidden');
-                
-                // Initialize line drawer
-                lineDrawer = new LineDrawer('preview-canvas');
-                await lineDrawer.loadImage('data:image/jpeg;base64,' + data.frame);
-                
-                // Update instruction
-                console.log('Frame loaded, canvas ready for drawing');
-                
-                // Line complete callback
-                lineDrawer.onLineComplete = function(points) {
-                    lineSet = true;
-                    resetLineBtn.disabled = false;
-                    saveConfigBtn.disabled = false;
-                    
-                    const startX = Math.round(points[0][0]);
-                    const startY = Math.round(points[0][1]);
-                    const endX = Math.round(points[1][0]);
-                    const endY = Math.round(points[1][1]);
-                    
-                    linePosition.textContent = `Start: (${startX}, ${startY}) → End: (${endX}, ${endY})`;
-                };
-            } else {
-                console.error('No frame data received');
-                alert('Failed to load video frame');
-            }
-        } catch (error) {
-            console.error('Error loading frame:', error);
-            alert('Error loading video frame: ' + error.message);
-        }
-    }
-
-    // Set counting line button - just provides instruction
-    // setLineBtn.addEventListener('click', function() {
-    //     if (lineDrawer) {
-    //         alert('Click and drag on the video preview to draw the counting line');
-    //     } else {
-    //         alert('Please upload a video first');
-    //     }
-    // });
-
-    // Reset line button
-    resetLineBtn.addEventListener('click', function() {
-        if (lineDrawer) {
-            lineDrawer.reset();
-            lineSet = false;
-            saveConfigBtn.disabled = true;
-            linePosition.textContent = 'X: --, Y: --';
-        }
-    });
-
-    // Save configuration / Start processing
-    saveConfigBtn.addEventListener('click', async function() {
-        if (!lineDrawer || !lineSet) {
-            alert('Please draw a counting line first');
-            return;
-        }
-        
-        const linePoints = lineDrawer.getLinePoints();
-        const location = document.getElementById('location-input').value || 'Unknown';
-        const cameraRole = document.getElementById('camera-role').value;
-        
-        try {
-            // Save line coordinates
-            await fetch('/setup/save-line', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ line_points: linePoints })
-            });
-            
-            // Show processing section
-            processingSection.classList.remove('hidden');
-            saveConfigBtn.disabled = true;
-            
-            // Start processing
-            const response = await fetch('/setup/start-processing', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ 
-                    location: location,
-                    camera_role: cameraRole 
-                })
-            });
-            
-            const data = await response.json();
-            
-            if (data.success) {
-                // Redirect to dashboard
-                window.location.href = '/';
-            } else {
-                alert('Processing error: ' + data.error);
-                processingSection.classList.add('hidden');
-                saveConfigBtn.disabled = false;
-            }
-        } catch (error) {
-            console.error('Error:', error);
-            alert('Failed to start processing');
-            processingSection.classList.add('hidden');
-            saveConfigBtn.disabled = false;
-        }
-    });
-});
-</script>
-{% endblock %}