feat: initial implementation of People Counter web app
- Add Flask application with MJPEG video streaming - Implement OpenCV DNN face detection module - Add zone-based entry/exit tracking with cooldown mechanism - Create web interface with real-time WebSocket updates - Add model download script and comprehensive README - Include OpenCV DNN model files for face detection
This commit is contained in:
222
static/css/style.css
Normal file
222
static/css/style.css
Normal file
@@ -0,0 +1,222 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.1em;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
main {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.video-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
background: #000;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
#videoStream {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
max-height: 600px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background: #4caf50;
|
||||
box-shadow: 0 0 10px rgba(76, 175, 80, 0.6);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.status-indicator.warning {
|
||||
background: #ff9800;
|
||||
box-shadow: 0 0 10px rgba(255, 152, 0, 0.6);
|
||||
}
|
||||
|
||||
.status-indicator.danger {
|
||||
background: #f44336;
|
||||
box-shadow: 0 0 10px rgba(244, 67, 54, 0.6);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
border-radius: 10px;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.stat-card.warning {
|
||||
background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
|
||||
}
|
||||
|
||||
.stat-card.danger {
|
||||
background: linear-gradient(135deg, #fab1a0 0%, #e17055 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9em;
|
||||
color: #666;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-card.danger .stat-label {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 3em;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stat-card.danger .stat-value {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stat-entered {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.stat-exited {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.stat-subtitle {
|
||||
font-size: 0.85em;
|
||||
color: #888;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.stat-card.danger .stat-subtitle {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.controls-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 15px 40px;
|
||||
font-size: 1.1em;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.reset-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
|
||||
}
|
||||
|
||||
.reset-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-top: 30px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
header h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation for count updates */
|
||||
.stat-value {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.stat-value.updated {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
133
static/js/main.js
Normal file
133
static/js/main.js
Normal file
@@ -0,0 +1,133 @@
|
||||
// WebSocket connection and real-time UI updates
|
||||
const socket = io();
|
||||
|
||||
// Default maximum occupancy threshold (can be configured)
|
||||
const MAX_OCCUPANCY = 10;
|
||||
|
||||
// DOM elements
|
||||
const occupancyValue = document.getElementById('occupancyValue');
|
||||
const occupancyStatus = document.getElementById('occupancyStatus');
|
||||
const occupancyCard = document.getElementById('occupancyCard');
|
||||
const enteredValue = document.getElementById('enteredValue');
|
||||
const exitedValue = document.getElementById('exitedValue');
|
||||
const resetButton = document.getElementById('resetButton');
|
||||
const statusIndicator = document.getElementById('statusIndicator');
|
||||
const videoStream = document.getElementById('videoStream');
|
||||
|
||||
// Connection status
|
||||
let isConnected = false;
|
||||
|
||||
// WebSocket event handlers
|
||||
socket.on('connect', () => {
|
||||
console.log('Connected to server');
|
||||
isConnected = true;
|
||||
updateConnectionStatus(true);
|
||||
});
|
||||
|
||||
socket.on('disconnect', () => {
|
||||
console.log('Disconnected from server');
|
||||
isConnected = false;
|
||||
updateConnectionStatus(false);
|
||||
});
|
||||
|
||||
// Handle count updates from server
|
||||
socket.on('count_update', (data) => {
|
||||
updateCounts(data);
|
||||
});
|
||||
|
||||
// Handle reset confirmation
|
||||
socket.on('reset_confirmation', (data) => {
|
||||
console.log('Counts reset:', data);
|
||||
// Counts will be updated via count_update event
|
||||
});
|
||||
|
||||
// Update count displays
|
||||
function updateCounts(counts) {
|
||||
const { total_entered, total_exited, current_occupancy } = counts;
|
||||
|
||||
// Update values with animation
|
||||
updateValue(enteredValue, total_entered);
|
||||
updateValue(exitedValue, total_exited);
|
||||
updateValue(occupancyValue, current_occupancy);
|
||||
|
||||
// Update occupancy status and styling
|
||||
updateOccupancyStatus(current_occupancy);
|
||||
}
|
||||
|
||||
// Update a single value with animation
|
||||
function updateValue(element, newValue) {
|
||||
const oldValue = parseInt(element.textContent) || 0;
|
||||
if (oldValue !== newValue) {
|
||||
element.classList.add('updated');
|
||||
element.textContent = newValue;
|
||||
setTimeout(() => {
|
||||
element.classList.remove('updated');
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
// Update occupancy status based on current count
|
||||
function updateOccupancyStatus(occupancy) {
|
||||
// Remove all status classes
|
||||
occupancyCard.classList.remove('warning', 'danger');
|
||||
statusIndicator.classList.remove('warning', 'danger');
|
||||
|
||||
// Update status text and styling
|
||||
if (occupancy >= MAX_OCCUPANCY) {
|
||||
occupancyStatus.textContent = 'OVER LIMIT';
|
||||
occupancyCard.classList.add('danger');
|
||||
statusIndicator.classList.add('danger');
|
||||
} else if (occupancy >= MAX_OCCUPANCY * 0.8) {
|
||||
occupancyStatus.textContent = 'High';
|
||||
occupancyCard.classList.add('warning');
|
||||
statusIndicator.classList.add('warning');
|
||||
} else if (occupancy >= MAX_OCCUPANCY * 0.5) {
|
||||
occupancyStatus.textContent = 'Moderate';
|
||||
occupancyCard.classList.remove('warning', 'danger');
|
||||
statusIndicator.classList.remove('warning', 'danger');
|
||||
} else {
|
||||
occupancyStatus.textContent = 'Normal';
|
||||
occupancyCard.classList.remove('warning', 'danger');
|
||||
statusIndicator.classList.remove('warning', 'danger');
|
||||
}
|
||||
}
|
||||
|
||||
// Update connection status indicator
|
||||
function updateConnectionStatus(connected) {
|
||||
if (connected) {
|
||||
statusIndicator.style.background = '#4caf50';
|
||||
statusIndicator.title = 'Connected';
|
||||
} else {
|
||||
statusIndicator.style.background = '#f44336';
|
||||
statusIndicator.title = 'Disconnected';
|
||||
}
|
||||
}
|
||||
|
||||
// Handle reset button click
|
||||
resetButton.addEventListener('click', () => {
|
||||
if (confirm('Are you sure you want to reset all counts?')) {
|
||||
socket.emit('reset_counts');
|
||||
}
|
||||
});
|
||||
|
||||
// Handle video stream errors
|
||||
videoStream.addEventListener('error', () => {
|
||||
console.error('Error loading video stream');
|
||||
videoStream.src = ''; // Clear src to prevent repeated errors
|
||||
// Optionally show an error message
|
||||
const errorMsg = document.createElement('div');
|
||||
errorMsg.className = 'error-message';
|
||||
errorMsg.textContent = 'Unable to load video stream. Please check camera connection.';
|
||||
errorMsg.style.cssText = 'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: rgba(244, 67, 54, 0.9); padding: 20px; border-radius: 10px;';
|
||||
document.querySelector('.video-container').appendChild(errorMsg);
|
||||
});
|
||||
|
||||
// Periodic check for connection (fallback)
|
||||
setInterval(() => {
|
||||
if (!isConnected && socket.connected === false) {
|
||||
console.log('Attempting to reconnect...');
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
// Initialize
|
||||
console.log('People Counter frontend initialized');
|
||||
Reference in New Issue
Block a user