1132 lines
57 KiB
HTML
1132 lines
57 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="h-full">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Multi-Camera YOLO Detection</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
primary: {
|
|
50: '#f0f9ff',
|
|
100: '#e0f2fe',
|
|
200: '#bae6fd',
|
|
300: '#7dd3fc',
|
|
400: '#38bdf8',
|
|
500: '#0ea5e9',
|
|
600: '#0284c7',
|
|
700: '#0369a1',
|
|
800: '#075985',
|
|
900: '#0c4a6e',
|
|
},
|
|
},
|
|
animation: {
|
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
'fade-in': 'fadeIn 0.3s ease-out',
|
|
'slide-in': 'slideIn 0.3s ease-out',
|
|
'scale-in': 'scaleIn 0.2s ease-out',
|
|
'bounce-in': 'bounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0', transform: 'translateY(-10px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' }
|
|
},
|
|
slideIn: {
|
|
'0%': { transform: 'translateX(-20px)', opacity: '0' },
|
|
'100%': { transform: 'translateX(0)', opacity: '1' }
|
|
},
|
|
scaleIn: {
|
|
'0%': { transform: 'scale(0.95)', opacity: '0' },
|
|
'100%': { transform: 'scale(1)', opacity: '1' }
|
|
},
|
|
bounceIn: {
|
|
'0%': { transform: 'scale(0.3)', opacity: '0' },
|
|
'50%': { transform: 'scale(1.05)' },
|
|
'70%': { transform: 'scale(0.9)' },
|
|
'100%': { transform: 'scale(1)', opacity: '1' }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
@apply inline-flex items-center px-4 py-2 rounded-lg font-medium transition-all duration-200 text-sm;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 dark:bg-primary-500 dark:hover:bg-primary-600 dark:active:bg-primary-700;
|
|
}
|
|
|
|
.btn-outline {
|
|
@apply border border-gray-300 text-gray-700 hover:bg-gray-50 active:bg-gray-100
|
|
dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700/50 dark:active:bg-gray-600/50;
|
|
}
|
|
|
|
.btn-icon {
|
|
@apply p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200
|
|
rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200;
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
@apply bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden;
|
|
}
|
|
|
|
.camera-card {
|
|
@apply card relative transition-all duration-300 animate-fade-in;
|
|
}
|
|
|
|
.camera-card.fullscreen {
|
|
@apply fixed inset-0 z-50 m-0 rounded-none border-0;
|
|
}
|
|
|
|
/* Camera Items */
|
|
.camera-item {
|
|
@apply bg-white dark:bg-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700
|
|
shadow-sm hover:shadow-md transition-shadow duration-200;
|
|
}
|
|
|
|
.camera-item-header {
|
|
@apply flex items-center justify-between mb-3;
|
|
}
|
|
|
|
.camera-info-container {
|
|
@apply flex-1 min-w-0;
|
|
}
|
|
|
|
.camera-device-label {
|
|
@apply flex items-center gap-2 text-sm font-medium;
|
|
}
|
|
|
|
.camera-device-icon {
|
|
@apply w-4 h-4 text-primary-600 dark:text-primary-400;
|
|
}
|
|
|
|
.camera-path-label {
|
|
@apply text-xs text-gray-500 dark:text-gray-400 truncate mt-1;
|
|
}
|
|
|
|
/* Status Badges */
|
|
.badge {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
|
}
|
|
|
|
.badge-success {
|
|
@apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
|
|
}
|
|
|
|
.badge-error {
|
|
@apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400;
|
|
}
|
|
|
|
.badge-warning {
|
|
@apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
|
|
}
|
|
|
|
/* Camera Feed */
|
|
.camera-feed {
|
|
@apply relative aspect-video bg-gray-900 rounded-lg overflow-hidden;
|
|
}
|
|
|
|
.camera-feed img {
|
|
@apply w-full h-full object-cover;
|
|
}
|
|
|
|
.camera-controls {
|
|
@apply absolute inset-x-0 bottom-0 p-4 bg-gradient-to-t from-black/50 to-transparent opacity-0
|
|
hover:opacity-100 transition-opacity duration-200;
|
|
}
|
|
|
|
.camera-actions {
|
|
@apply flex items-center gap-2;
|
|
}
|
|
|
|
.camera-btn {
|
|
@apply p-2 rounded-lg bg-white/10 hover:bg-white/20 text-white backdrop-blur-sm
|
|
transition-all duration-200;
|
|
}
|
|
|
|
.camera-btn svg {
|
|
@apply w-5 h-5;
|
|
}
|
|
|
|
/* Camera Status */
|
|
.camera-status {
|
|
@apply absolute inset-0 flex items-center justify-center gap-2 bg-black/50 backdrop-blur-sm
|
|
text-white font-medium;
|
|
}
|
|
|
|
.status-dot {
|
|
@apply w-2 h-2 rounded-full;
|
|
}
|
|
|
|
.status-dot.connecting {
|
|
@apply bg-yellow-400 animate-pulse;
|
|
}
|
|
|
|
.status-dot.connected {
|
|
@apply bg-green-400;
|
|
}
|
|
|
|
.status-dot.error {
|
|
@apply bg-red-400;
|
|
}
|
|
|
|
/* Inputs */
|
|
.input-group {
|
|
@apply space-y-1;
|
|
}
|
|
|
|
.input-label {
|
|
@apply block text-sm font-medium text-gray-700 dark:text-gray-300;
|
|
}
|
|
|
|
.input {
|
|
@apply block w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600
|
|
bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400
|
|
dark:placeholder-gray-500 focus:ring-2 focus:ring-primary-500 focus:border-transparent
|
|
transition-all duration-200;
|
|
}
|
|
|
|
/* Range Slider */
|
|
.range-slider {
|
|
@apply w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer;
|
|
}
|
|
|
|
.range-slider::-webkit-slider-thumb {
|
|
@apply appearance-none w-4 h-4 rounded-full bg-primary-600 dark:bg-primary-500
|
|
hover:ring-4 hover:ring-primary-200 dark:hover:ring-primary-900/50 transition-all duration-200;
|
|
}
|
|
|
|
/* Tabs */
|
|
.tab {
|
|
@apply flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400
|
|
border-b-2 border-transparent hover:text-gray-700 dark:hover:text-gray-300
|
|
hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-200;
|
|
}
|
|
|
|
.tab.active {
|
|
@apply text-primary-600 dark:text-primary-400 border-primary-600 dark:border-primary-400;
|
|
}
|
|
|
|
/* Modal */
|
|
.modal {
|
|
@apply fixed inset-0 bg-black/50 backdrop-blur-sm hidden items-center justify-center z-50
|
|
opacity-0 transition-opacity duration-200;
|
|
}
|
|
|
|
.modal.show {
|
|
@apply flex opacity-100;
|
|
}
|
|
|
|
.modal-content {
|
|
@apply bg-white dark:bg-gray-800 rounded-xl p-6 w-full max-w-lg mx-4 shadow-xl
|
|
transform scale-95 opacity-0 transition-all duration-200;
|
|
}
|
|
|
|
.modal.show .modal-content {
|
|
@apply scale-100 opacity-100;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="h-full bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 text-gray-900 dark:text-white">
|
|
<div class="min-h-full">
|
|
<header class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-xl font-semibold flex items-center gap-3 group">
|
|
<div class="w-10 h-10 bg-primary-600 dark:bg-primary-500 rounded-lg flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
|
|
</div>
|
|
<span class="bg-gradient-to-r from-primary-600 to-primary-500 dark:from-primary-400 dark:to-primary-300 bg-clip-text text-transparent">
|
|
Multi-Camera YOLO Detection
|
|
</span>
|
|
</h1>
|
|
<div class="flex items-center gap-4">
|
|
<button class="btn btn-outline group" onclick="toggleTheme()" title="Toggle Dark Mode">
|
|
<svg class="sun-icon w-5 h-5 transition-transform group-hover:rotate-180 duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
<svg class="moon-icon w-5 h-5 hidden transition-transform group-hover:rotate-180 duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<div class="flex gap-6">
|
|
<!-- Sidebar -->
|
|
<div class="w-80 flex-shrink-0 space-y-6">
|
|
<!-- Model Settings -->
|
|
<div class="card bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm p-5 animate-fade-in">
|
|
<h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
|
|
<div class="w-8 h-8 bg-primary-100 dark:bg-primary-900/50 rounded-lg flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
</svg>
|
|
</div>
|
|
Model Settings
|
|
</h2>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between p-3 bg-gray-50/50 dark:bg-gray-700/50 rounded-lg">
|
|
<span class="text-sm font-medium">Status:</span>
|
|
<span id="modelStatus" class="badge badge-warning">
|
|
<svg class="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Checking...
|
|
</span>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<label for="confidenceThreshold" class="block text-sm font-medium">Confidence Threshold</label>
|
|
<div class="flex items-center gap-3">
|
|
<input type="range" id="confidenceThreshold" class="range-slider flex-1" min="0" max="1" step="0.05" value="0.35">
|
|
<span id="confidenceValue" class="text-sm font-medium w-12 text-center p-1 bg-gray-100 dark:bg-gray-700 rounded">0.35</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between p-3 bg-gray-50/50 dark:bg-gray-700/50 rounded-lg">
|
|
<span class="text-sm font-medium">CUDA:</span>
|
|
<span id="cudaStatus" class="badge">Checking...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Camera Controls -->
|
|
<div class="card bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm p-5 animate-fade-in delay-100">
|
|
<div class="border-b border-gray-200 dark:border-gray-700 mb-4">
|
|
<nav class="flex space-x-4" aria-label="Tabs">
|
|
<button class="tab active group" data-tab="local">
|
|
<div class="w-8 h-8 bg-primary-100 dark:bg-primary-900/50 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
|
<svg class="w-4 h-4 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</div>
|
|
Local
|
|
</button>
|
|
<button class="tab group" data-tab="network">
|
|
<div class="w-8 h-8 bg-gray-100 dark:bg-gray-700/50 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
|
|
</svg>
|
|
</div>
|
|
Network
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<div id="localCameras" class="tab-content space-y-4 animate-fade-in">
|
|
<button class="btn btn-primary w-full flex items-center justify-center gap-2 group" onclick="refreshCameras()">
|
|
<svg class="w-4 h-4 group-hover:rotate-180 transition-transform duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
Scan for Cameras
|
|
</button>
|
|
<div id="cameraList" class="space-y-3"></div>
|
|
</div>
|
|
|
|
<div id="networkCameras" class="tab-content hidden space-y-4 animate-fade-in">
|
|
<button class="btn btn-primary w-full flex items-center justify-center gap-2 group" onclick="showAddNetworkCamera()">
|
|
<svg class="w-4 h-4 group-hover:rotate-90 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
Add Network Camera
|
|
</button>
|
|
<div id="networkCameraList" class="space-y-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Camera Grid -->
|
|
<div class="flex-1">
|
|
<div id="cameraGrid" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 relative">
|
|
<!-- Camera feeds will be added here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Camera Settings Modal -->
|
|
<div id="cameraSettingsModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden items-center justify-center z-50">
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl p-6 w-full max-w-lg mx-4 shadow-xl">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-semibold flex items-center gap-2" id="settingsCameraName">
|
|
<svg class="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
Camera Settings
|
|
</h2>
|
|
<button onclick="closeCameraSettings()" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm font-medium">Status:</span>
|
|
<span id="settingsCameraStatus" class="badge badge-warning">Checking...</span>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<label class="block text-sm font-medium">Resolution</label>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Width</label>
|
|
<input type="number" id="cameraWidth" class="input">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Height</label>
|
|
<input type="number" id="cameraHeight" class="input">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">FPS</label>
|
|
<input type="number" id="cameraFps" class="input">
|
|
</div>
|
|
|
|
<div class="flex justify-between pt-4">
|
|
<button onclick="reconnectCamera()" class="btn btn-outline flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
Reconnect Camera
|
|
</button>
|
|
<button onclick="saveCameraSettings()" class="btn btn-primary flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Save Settings
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Network Camera Modal -->
|
|
<div id="addNetworkCameraModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h2 class="text-xl font-semibold flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-primary-100 dark:bg-primary-900/50 rounded-lg flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
Add Network Camera
|
|
</h2>
|
|
<button onclick="hideAddNetworkCamera()" class="btn-icon group" aria-label="Close modal">
|
|
<svg class="w-5 h-5 group-hover:rotate-90 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<div class="input-group animate-fade-in" style="animation-delay: 100ms;">
|
|
<label for="cameraName" class="input-label">Camera Name</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg class="w-5 h-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
|
</svg>
|
|
</div>
|
|
<input type="text" id="cameraName" class="input pl-10" placeholder="Living Room Camera">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group animate-fade-in" style="animation-delay: 200ms;">
|
|
<label for="cameraUrl" class="input-label">Camera URL</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg class="w-5 h-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
|
|
</svg>
|
|
</div>
|
|
<input type="text" id="cameraUrl" class="input pl-10" placeholder="http://192.168.1.100:8080/video">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="input-group animate-fade-in" style="animation-delay: 300ms;">
|
|
<label for="cameraUsername" class="input-label">Username</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg class="w-5 h-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
</div>
|
|
<input type="text" id="cameraUsername" class="input pl-10" placeholder="Optional">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group animate-fade-in" style="animation-delay: 400ms;">
|
|
<label for="cameraPassword" class="input-label">Password</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg class="w-5 h-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
</div>
|
|
<input type="password" id="cameraPassword" class="input pl-10" placeholder="Optional">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-3 pt-4 animate-fade-in" style="animation-delay: 500ms;">
|
|
<button class="btn btn-outline group" onclick="hideAddNetworkCamera()">
|
|
<svg class="w-4 h-4 mr-2 group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
Cancel
|
|
</button>
|
|
<button class="btn btn-primary group" onclick="addNetworkCamera()">
|
|
<svg class="w-4 h-4 mr-2 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
Add Camera
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let activeCameras = new Set();
|
|
let availableCameras = [];
|
|
let selectedCameras = new Set();
|
|
let currentCameraId = null;
|
|
|
|
// Initialize theme from localStorage or system preference
|
|
function initializeTheme() {
|
|
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
document.documentElement.classList.add('dark');
|
|
updateThemeIcon('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
updateThemeIcon('light');
|
|
}
|
|
}
|
|
|
|
function toggleTheme() {
|
|
if (document.documentElement.classList.contains('dark')) {
|
|
document.documentElement.classList.remove('dark');
|
|
localStorage.theme = 'light';
|
|
updateThemeIcon('light');
|
|
} else {
|
|
document.documentElement.classList.add('dark');
|
|
localStorage.theme = 'dark';
|
|
updateThemeIcon('dark');
|
|
}
|
|
}
|
|
|
|
function updateThemeIcon(theme) {
|
|
const sunIcon = document.querySelector('.sun-icon');
|
|
const moonIcon = document.querySelector('.moon-icon');
|
|
|
|
if (theme === 'dark') {
|
|
sunIcon.style.display = 'none';
|
|
moonIcon.style.display = 'block';
|
|
} else {
|
|
sunIcon.style.display = 'block';
|
|
moonIcon.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Initialize on page load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initializeTheme();
|
|
initializeTabs();
|
|
checkModelStatus();
|
|
refreshCameras();
|
|
loadNetworkCameras();
|
|
});
|
|
|
|
function initializeTabs() {
|
|
document.querySelectorAll('.tab').forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
|
|
document.querySelectorAll('.tab-content').forEach(content => {
|
|
content.style.display = 'none';
|
|
});
|
|
|
|
const tabId = tab.dataset.tab;
|
|
document.getElementById(tabId + 'Cameras').style.display = 'block';
|
|
});
|
|
});
|
|
}
|
|
|
|
async function checkModelStatus() {
|
|
try {
|
|
const response = await fetch('/model_info');
|
|
const data = await response.json();
|
|
|
|
const modelStatus = document.getElementById('modelStatus');
|
|
const cudaStatus = document.getElementById('cudaStatus');
|
|
|
|
if (data.model_loaded) {
|
|
modelStatus.textContent = 'Model Loaded';
|
|
modelStatus.className = 'badge badge-success';
|
|
} else {
|
|
modelStatus.textContent = 'No Model';
|
|
modelStatus.className = 'badge badge-error';
|
|
}
|
|
|
|
if (data.cuda_available) {
|
|
cudaStatus.textContent = 'Available';
|
|
cudaStatus.className = 'badge badge-success';
|
|
} else {
|
|
cudaStatus.textContent = 'CPU Only';
|
|
cudaStatus.className = 'badge badge-warning';
|
|
}
|
|
|
|
// Update confidence threshold
|
|
document.getElementById('confidenceThreshold').value = data.confidence_threshold;
|
|
document.getElementById('confidenceValue').textContent = data.confidence_threshold;
|
|
} catch (error) {
|
|
console.error('Error checking model status:', error);
|
|
}
|
|
}
|
|
|
|
// Update confidence threshold
|
|
document.getElementById('confidenceThreshold').addEventListener('input', async (e) => {
|
|
const value = e.target.value;
|
|
document.getElementById('confidenceValue').textContent = value;
|
|
|
|
try {
|
|
await fetch('/update_model_settings', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
confidence_threshold: parseFloat(value)
|
|
})
|
|
});
|
|
} catch (error) {
|
|
console.error('Error updating confidence threshold:', error);
|
|
}
|
|
});
|
|
|
|
async function refreshCameras() {
|
|
try {
|
|
const response = await fetch('/cameras');
|
|
const data = await response.json();
|
|
availableCameras = data.cameras;
|
|
updateCameraList();
|
|
} catch (error) {
|
|
console.error('Error fetching cameras:', error);
|
|
}
|
|
}
|
|
|
|
function updateCameraList() {
|
|
const list = document.getElementById('cameraList');
|
|
list.innerHTML = '';
|
|
|
|
availableCameras.filter(camera => !camera.id.startsWith('net:')).forEach(camera => {
|
|
const item = document.createElement('div');
|
|
item.className = 'camera-item group animate-fade-in';
|
|
item.innerHTML = `
|
|
<div class="camera-item-header">
|
|
<div class="camera-info-container">
|
|
<div class="camera-device-label">
|
|
<svg class="camera-device-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
${camera.name}
|
|
</div>
|
|
<div class="camera-path-label" title="${camera.id}">
|
|
ID: ${camera.id}
|
|
</div>
|
|
</div>
|
|
<div class="camera-item-status">
|
|
<span class="camera-status-badge ${camera.active ? 'active' : 'inactive'}">
|
|
<span class="flex-shrink-0 h-1.5 w-1.5 rounded-full ${camera.active ? 'bg-green-500 animate-pulse' : 'bg-gray-500'} mr-1.5"></span>
|
|
${camera.active ? 'Active' : 'Inactive'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<button class="camera-connect-btn ${camera.active ? 'disconnect' : 'connect'} group"
|
|
onclick="${camera.active ? `stopCamera('${camera.id}')` : `startCamera('${camera.id}')`}">
|
|
<svg class="camera-connect-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
${camera.active ?
|
|
`<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />` :
|
|
`<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M13 10V3L4 14h7v7l9-11h-7z" />`
|
|
}
|
|
</svg>
|
|
${camera.active ? 'Disconnect' : 'Connect'}
|
|
</button>
|
|
${camera.active ? `
|
|
<div class="flex items-center gap-2">
|
|
<button class="camera-control-btn settings group" onclick="openCameraSettings('${camera.id}')" title="Camera Settings">
|
|
<svg class="group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
`;
|
|
list.appendChild(item);
|
|
});
|
|
}
|
|
|
|
async function loadNetworkCameras() {
|
|
try {
|
|
const response = await fetch('/network_cameras/list');
|
|
const data = await response.json();
|
|
updateNetworkCameraList(data.cameras);
|
|
} catch (error) {
|
|
console.error('Error loading network cameras:', error);
|
|
}
|
|
}
|
|
|
|
function updateNetworkCameraList(cameras) {
|
|
const list = document.getElementById('networkCameraList');
|
|
list.innerHTML = '';
|
|
|
|
cameras.forEach(camera => {
|
|
const item = document.createElement('div');
|
|
item.className = 'camera-item group animate-fade-in';
|
|
item.innerHTML = `
|
|
<div class="camera-item-header">
|
|
<div class="camera-info-container">
|
|
<div class="camera-device-label">
|
|
<svg class="camera-device-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
|
|
</svg>
|
|
${camera.name}
|
|
</div>
|
|
<div class="camera-path-label" title="${camera.url}">
|
|
${camera.url}
|
|
</div>
|
|
</div>
|
|
<div class="camera-item-status">
|
|
${camera.has_auth ?
|
|
'<span class="camera-status-badge active"><span class="flex-shrink-0 h-1.5 w-1.5 rounded-full bg-green-500 mr-1.5"></span>Authenticated</span>' :
|
|
'<span class="camera-status-badge inactive"><span class="flex-shrink-0 h-1.5 w-1.5 rounded-full bg-gray-500 mr-1.5"></span>No Auth</span>'
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<button class="camera-connect-btn connect group" onclick="startNetworkCamera('${camera.name}')">
|
|
<svg class="camera-connect-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
Connect
|
|
</button>
|
|
<button class="camera-control-btn settings group" onclick="removeNetworkCamera('${camera.name}')" title="Remove Camera">
|
|
<svg class="group-hover:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
`;
|
|
list.appendChild(item);
|
|
});
|
|
}
|
|
|
|
function showAddNetworkCamera() {
|
|
document.getElementById('addNetworkCameraModal').classList.add('show');
|
|
}
|
|
|
|
function hideAddNetworkCamera() {
|
|
document.getElementById('addNetworkCameraModal').classList.remove('show');
|
|
}
|
|
|
|
async function addNetworkCamera() {
|
|
const name = document.getElementById('cameraName').value;
|
|
const url = document.getElementById('cameraUrl').value;
|
|
const username = document.getElementById('cameraUsername').value;
|
|
const password = document.getElementById('cameraPassword').value;
|
|
|
|
if (!name || !url) {
|
|
alert('Please provide both name and URL');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/network_cameras', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
name,
|
|
url,
|
|
username,
|
|
password
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
hideAddNetworkCamera();
|
|
loadNetworkCameras();
|
|
} else {
|
|
alert(data.error || 'Failed to add camera');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error adding network camera:', error);
|
|
alert('Failed to add camera');
|
|
}
|
|
}
|
|
|
|
async function removeNetworkCamera(name) {
|
|
if (!confirm(`Are you sure you want to remove camera "${name}"?`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/network_cameras/remove/${name}`, {
|
|
method: 'POST'
|
|
});
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
loadNetworkCameras();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error removing network camera:', error);
|
|
}
|
|
}
|
|
|
|
async function startCamera(cameraId) {
|
|
try {
|
|
await fetch(`/add_camera/${cameraId}`);
|
|
const camera = availableCameras.find(cam => cam.id === cameraId);
|
|
if (camera) {
|
|
camera.active = true;
|
|
updateCameraList();
|
|
addCameraToGrid(camera);
|
|
}
|
|
} catch (error) {
|
|
console.error(`Error starting camera ${cameraId}:`, error);
|
|
}
|
|
}
|
|
|
|
async function stopCamera(cameraId) {
|
|
try {
|
|
await fetch(`/remove_camera/${cameraId}`);
|
|
const camera = availableCameras.find(cam => cam.id === cameraId);
|
|
if (camera) {
|
|
camera.active = false;
|
|
updateCameraList();
|
|
removeCameraFromGrid(cameraId);
|
|
}
|
|
} catch (error) {
|
|
console.error(`Error stopping camera ${cameraId}:`, error);
|
|
}
|
|
}
|
|
|
|
function addCameraToGrid(camera) {
|
|
const grid = document.getElementById('cameraGrid');
|
|
const container = document.createElement('div');
|
|
container.className = 'camera-card';
|
|
container.setAttribute('data-camera-id', camera.id);
|
|
|
|
container.innerHTML = `
|
|
<div class="camera-header">
|
|
<div class="camera-header-title">
|
|
<svg class="camera-header-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
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>
|
|
${camera.name}
|
|
</div>
|
|
<button class="camera-action-btn group" onclick="openCameraSettings('${camera.id}')" title="Camera Settings">
|
|
<svg class="group-hover:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="camera-feed">
|
|
<img id="camera${camera.id}" src="" alt="${camera.name}">
|
|
<div class="camera-controls">
|
|
<div class="camera-actions">
|
|
<button class="camera-btn active" onclick="stopCamera('${camera.id}')" title="Stop Camera">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="camera-btn" onclick="toggleFullscreen('${camera.id}')" title="Toggle Fullscreen">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="status${camera.id}" class="camera-status">
|
|
<span class="status-dot connecting"></span>
|
|
<span class="status-text">Connecting...</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
grid.appendChild(container);
|
|
initializeInteractions(container);
|
|
startCameraStream(camera);
|
|
}
|
|
|
|
function initializeInteractions(element) {
|
|
// Make the element resizable
|
|
interact(element)
|
|
.resizable({
|
|
edges: { right: true, bottom: true, left: false, top: false },
|
|
listeners: {
|
|
move: function (event) {
|
|
let { x, y } = event.target.dataset;
|
|
|
|
x = (parseFloat(x) || 0) + event.deltaRect.left;
|
|
y = (parseFloat(y) || 0) + event.deltaRect.top;
|
|
|
|
Object.assign(event.target.style, {
|
|
width: `${event.rect.width}px`,
|
|
height: `${event.rect.height}px`,
|
|
transform: `translate(${x}px, ${y}px)`
|
|
});
|
|
|
|
Object.assign(event.target.dataset, { x, y });
|
|
}
|
|
},
|
|
modifiers: [
|
|
interact.modifiers.restrictSize({
|
|
min: { width: 320, height: 240 }
|
|
})
|
|
]
|
|
});
|
|
|
|
// Add double-click to fullscreen
|
|
element.addEventListener('dblclick', (e) => {
|
|
if (!e.target.closest('.btn') && !e.target.closest('.resize-handle')) {
|
|
const cameraId = element.getAttribute('data-camera-id');
|
|
toggleFullscreen(cameraId);
|
|
}
|
|
});
|
|
}
|
|
|
|
function toggleFullscreen(cameraId) {
|
|
const container = document.querySelector(`[data-camera-id="${cameraId}"]`);
|
|
const fullscreenBtn = container.querySelector('.fullscreen-btn');
|
|
const isFullscreen = container.classList.contains('fullscreen');
|
|
|
|
if (!isFullscreen) {
|
|
container.classList.add('fullscreen');
|
|
fullscreenBtn.classList.remove('hidden');
|
|
document.body.style.overflow = 'hidden';
|
|
} else {
|
|
exitFullscreen(cameraId);
|
|
}
|
|
}
|
|
|
|
function exitFullscreen(cameraId) {
|
|
const container = document.querySelector(`[data-camera-id="${cameraId}"]`);
|
|
const fullscreenBtn = container.querySelector('.fullscreen-btn');
|
|
|
|
container.classList.remove('fullscreen');
|
|
fullscreenBtn.classList.add('hidden');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
// Update the grid layout
|
|
document.getElementById('cameraGrid').className = 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 relative';
|
|
|
|
function removeCameraFromGrid(cameraId) {
|
|
const container = document.querySelector(`[data-camera-id="${cameraId}"]`);
|
|
if (container) {
|
|
container.remove();
|
|
}
|
|
}
|
|
|
|
function updateCameraStatus(cameraId, status, message) {
|
|
const statusEl = document.getElementById(`status${cameraId}`);
|
|
const dotEl = statusEl.querySelector('.status-dot');
|
|
const textEl = statusEl.querySelector('.status-text');
|
|
|
|
statusEl.className = `camera-status ${status}`;
|
|
dotEl.className = `status-dot ${status}`;
|
|
textEl.textContent = message;
|
|
}
|
|
|
|
function startCameraStream(camera) {
|
|
const img = document.getElementById(`camera${camera.id}`);
|
|
|
|
function updateStream() {
|
|
img.src = `/video_feed/${camera.id}?t=${Date.now()}`;
|
|
updateCameraStatus(camera.id, 'connecting', 'Connecting...');
|
|
|
|
img.onload = () => {
|
|
updateCameraStatus(camera.id, 'connected', 'Connected');
|
|
activeCameras.add(camera.id);
|
|
requestAnimationFrame(updateStream);
|
|
};
|
|
|
|
img.onerror = () => {
|
|
updateCameraStatus(camera.id, 'error', 'Connection Error');
|
|
activeCameras.delete(camera.id);
|
|
setTimeout(updateStream, 1000);
|
|
};
|
|
}
|
|
|
|
updateStream();
|
|
}
|
|
|
|
async function openCameraSettings(cameraId) {
|
|
currentCameraId = cameraId;
|
|
const modal = document.getElementById('cameraSettingsModal');
|
|
modal.classList.remove('hidden');
|
|
modal.classList.add('flex');
|
|
|
|
try {
|
|
const response = await fetch(`/camera_settings/${cameraId}`);
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
const settings = data.settings;
|
|
document.getElementById('cameraWidth').value = settings.width;
|
|
document.getElementById('cameraHeight').value = settings.height;
|
|
document.getElementById('cameraFps').value = settings.fps;
|
|
|
|
const statusBadge = document.getElementById('settingsCameraStatus');
|
|
statusBadge.textContent = settings.status;
|
|
statusBadge.className = `badge badge-${settings.status === 'connected' ? 'success' : 'error'}`;
|
|
|
|
document.getElementById('settingsCameraName').textContent =
|
|
`Camera Settings - ${settings.is_network ? 'Network Camera' : 'Local Camera'}`;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching camera settings:', error);
|
|
}
|
|
}
|
|
|
|
function closeCameraSettings() {
|
|
const modal = document.getElementById('cameraSettingsModal');
|
|
modal.classList.add('hidden');
|
|
modal.classList.remove('flex');
|
|
currentCameraId = null;
|
|
}
|
|
|
|
async function saveCameraSettings() {
|
|
if (!currentCameraId) return;
|
|
|
|
const settings = {
|
|
width: parseInt(document.getElementById('cameraWidth').value),
|
|
height: parseInt(document.getElementById('cameraHeight').value),
|
|
fps: parseInt(document.getElementById('cameraFps').value)
|
|
};
|
|
|
|
try {
|
|
const response = await fetch(`/camera_settings/${currentCameraId}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(settings)
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
closeCameraSettings();
|
|
} else {
|
|
alert(data.error || 'Failed to update camera settings');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error saving camera settings:', error);
|
|
alert('Failed to update camera settings');
|
|
}
|
|
}
|
|
|
|
async function reconnectCamera() {
|
|
if (!currentCameraId) return;
|
|
|
|
try {
|
|
const response = await fetch(`/camera_settings/${currentCameraId}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ reconnect: true })
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
const statusBadge = document.getElementById('settingsCameraStatus');
|
|
statusBadge.textContent = 'Reconnecting...';
|
|
statusBadge.className = 'badge badge-warning';
|
|
|
|
// Wait a bit and refresh settings
|
|
setTimeout(() => {
|
|
openCameraSettings(currentCameraId);
|
|
}, 2000);
|
|
} else {
|
|
alert(data.error || 'Failed to reconnect camera');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error reconnecting camera:', error);
|
|
alert('Failed to reconnect camera');
|
|
}
|
|
}
|
|
|
|
async function startNetworkCamera(name) {
|
|
try {
|
|
const cameraId = `net:${name}`;
|
|
await fetch(`/add_camera/${cameraId}`);
|
|
const camera = {
|
|
id: cameraId,
|
|
name: name,
|
|
active: true,
|
|
type: 'network'
|
|
};
|
|
addCameraToGrid(camera);
|
|
loadNetworkCameras(); // Refresh the network camera list
|
|
} catch (error) {
|
|
console.error('Error starting network camera:', error);
|
|
alert('Failed to start network camera');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |