Spaces:

Bahajacom2
/

ptz-camera-control-hub

Running

App Files Files Community

Bahajacom2 commited on Sep 30, 2025

Commit

f35f899

verified ·

1 Parent(s): dcb8cda

Je souhaiterais créer une page web permettant de contrôler deux caméras PTZ (thermique et jour), d’afficher le flux RTSP de chacune, d’intégrer un bouton de configuration et un bouton pour basculer entre les deux caméras, tout en envoyant les commandes(clique et release) et en récupérant les informations de position (PAN, TILT, ZOOM) via une application Java desktop utilisant un WebSocketServer.

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +360 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Ptz Camera Control Hub
-emoji: 📈
-colorFrom: pink
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: PTZ Camera Control Hub 🎥
+colorFrom: gray
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,361 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PTZ Camera Control Hub</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .camera-feed {
+            background-color: #1a202c;
+            aspect-ratio: 16/9;
+        }
+        .position-indicator {
+            background-color: rgba(0, 0, 0, 0.7);
+        }
+        .control-btn {
+            transition: all 0.2s;
+        }
+        .control-btn:active {
+            transform: scale(0.95);
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <!-- Header -->
+    <header class="bg-gray-800 py-4 px-6 shadow-lg">
+        <div class="container mx-auto flex justify-between items-center">
+            <h1 class="text-2xl font-bold flex items-center">
+                <i data-feather="video" class="mr-2"></i>
+                PTZ Camera Control Hub
+            </h1>
+            <button id="configBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
+                <i data-feather="settings" class="mr-2"></i>
+                Configuration
+            </button>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto py-6 px-4">
+        <!-- Camera Toggle -->
+        <div class="flex justify-center mb-6">
+            <div class="inline-flex rounded-md shadow-sm">
+                <button id="dayCamBtn" class="px-4 py-2 text-sm font-medium rounded-l-lg bg-gray-700 hover:bg-gray-600 focus:z-10 focus:ring-2 focus:ring-blue-500">
+                    Day Camera
+                </button>
+                <button id="thermalCamBtn" class="px-4 py-2 text-sm font-medium rounded-r-md bg-gray-700 hover:bg-gray-600 focus:z-10 focus:ring-2 focus:ring-blue-500">
+                    Thermal Camera
+                </button>
+            </div>
+        </div>
+        <!-- Camera Feeds -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+            <!-- Day Camera Feed -->
+            <div class="camera-container" id="dayCameraContainer">
+                <div class="camera-feed rounded-lg overflow-hidden relative">
+                    <video id="dayCamFeed" class="w-full h-full" autoplay muted></video>
+                    <div class="position-indicator absolute bottom-0 left-0 right-0 p-2 text-sm">
+                        <div class="flex justify-between">
+                            <span>PAN: <span id="dayPan">0°</span></span>
+                            <span>TILT: <span id="dayTilt">0°</span></span>
+                            <span>ZOOM: <span id="dayZoom">1x</span></span>
+                        </div>
+                    </div>
+                </div>
+                <div class="controls grid grid-cols-3 gap-2 mt-2">
+                    <button class="control-btn bg-gray-700 hover:bg-gray-600 p-2 rounded" data-command="pan-left">
+                        <i data-feather="arrow-left"></i>
+                    </button>
+                    <button class="control-btn bg-gray-700 hover:bg-gray-600 p-2 rounded" data-command="tilt-up">
+                        <i data-feather="arrow-up"></i>
+                    </button>
+                    <button class="control-btn bg-gray-700 hover:bg-gray-600 p-2 rounded" data-command="zoom-in">
+                        <i data-feather="zoom-in"></i>
+                    </button>
+                    <button class="control-btn bg-gray-700 hover:bg-gray-600 p-2 rounded" data-command="pan-right">
+                        <i data-feather="arrow-right"></i>
+                    </button>
+                    <button class="control-btn bg-gray-700 hover:bg-gray-600 p-2 rounded" data-command="tilt-down">
+                        <i data-feather="arrow-down"></i>
+                    </button>
+                    <button class="control-btn bg-gray-700 hover:bg-gray-600 p-2 rounded" data-command="zoom-out">
+                        <i data-feather="zoom-out"></i>
+                    </button>
+                </div>
+            </div>
+            <!-- Thermal Camera Feed -->
+            <div class="camera-container hidden" id="thermalCameraContainer">
+                <div class="camera-feed rounded-lg overflow-hidden relative">
+                    <video id="thermalCamFeed" class="w-full h-full" autoplay muted></video>
+                    <div class="position-indicator absolute bottom-0 left-0 right-0 p-2 text-sm">
+                        <div class="flex justify-between">
+                            <span>PAN: <span id="thermalPan">0°</span></span>
+                            <span>TILT: <span id="thermalTilt">0°</span></span>
+                            <span>ZOOM: <span id="thermalZoom">1x</span></span>
+                        </div>
+                    </div>
+                </div>
+                <div class="controls grid grid-cols-3 gap-2 mt-2">
+                    <button class="control-btn bg-gray-700 hover:bg-gray-600 p-2 rounded" data-command="pan-left">
+                        <i data-feather="arrow-left"></i>
+                    </button>
+                    <button class="control-btn bg-gray-700 hover:bg-gray-600 p-2 rounded" data-command="tilt-up">
+                        <i data-feather="arrow-up"></i>
+                    </button>
+                    <button class="control-btn bg-gray-700 hover:bg-gray-600 p-2 rounded" data-command="zoom-in">
+                        <i data-feather="zoom-in"></i>
+                    </button>
+                    <button class="control-btn bg-gray-700 hover:bg-gray-600 p-2 rounded" data-command="pan-right">
+                        <i data-feather="arrow-right"></i>
+                    </button>
+                    <button class="control-btn bg-gray-700 hover:bg-gray-600 p-2 rounded" data-command="tilt-down">
+                        <i data-feather="arrow-down"></i>
+                    </button>
+                    <button class="control-btn bg-gray-700 hover:bg-gray-600 p-2 rounded" data-command="zoom-out">
+                        <i data-feather="zoom-out"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Status Bar -->
+        <div class="bg-gray-800 rounded-lg p-4 text-sm">
+            <div class="flex items-center">
+                <div id="connectionStatus" class="flex items-center mr-4">
+                    <span class="w-3 h-3 rounded-full bg-red-500 mr-2"></span>
+                    <span>Disconnected</span>
+                </div>
+                <div id="activeCamera" class="flex items-center">
+                    <i data-feather="video" class="mr-2"></i>
+                    <span>Day Camera</span>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Configuration Modal -->
+    <div id="configModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
+        <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-bold">Configuration</h2>
+                <button id="closeConfigBtn" class="text-gray-400 hover:text-white">
+                    <i data-feather="x"></i>
+                </button>
+            </div>
+            <div class="space-y-4">
+                <div>
+                    <label class="block text-sm font-medium mb-1">Day Camera RTSP URL</label>
+                    <input type="text" id="dayCamUrl" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1">Thermal Camera RTSP URL</label>
+                    <input type="text" id="thermalCamUrl" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1">WebSocket Server URL</label>
+                    <input type="text" id="wsUrl" value="ws://localhost:8080" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2">
+                </div>
+            </div>
+            <div class="mt-6 flex justify-end space-x-3">
+                <button id="saveConfigBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg">
+                    Save
+                </button>
+                <button id="cancelConfigBtn" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg">
+                    Cancel
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        feather.replace();
+        // WebSocket connection
+        let socket;
+        // DOM Elements
+        const dayCamBtn = document.getElementById('dayCamBtn');
+        const thermalCamBtn = document.getElementById('thermalCamBtn');
+        const dayCameraContainer = document.getElementById('dayCameraContainer');
+        const thermalCameraContainer = document.getElementById('thermalCameraContainer');
+        const configBtn = document.getElementById('configBtn');
+        const configModal = document.getElementById('configModal');
+        const closeConfigBtn = document.getElementById('closeConfigBtn');
+        const saveConfigBtn = document.getElementById('saveConfigBtn');
+        const cancelConfigBtn = document.getElementById('cancelConfigBtn');
+        const connectionStatus = document.getElementById('connectionStatus');
+        const activeCamera = document.getElementById('activeCamera');
+        // Camera control buttons
+        const controlButtons = document.querySelectorAll('.control-btn');
+        // Initialize camera feeds
+        const dayCamFeed = document.getElementById('dayCamFeed');
+        const thermalCamFeed = document.getElementById('thermalCamFeed');
+        // Toggle between cameras
+        dayCamBtn.addEventListener('click', () => {
+            dayCameraContainer.classList.remove('hidden');
+            thermalCameraContainer.classList.add('hidden');
+            dayCamBtn.classList.add('bg-blue-600');
+            thermalCamBtn.classList.remove('bg-blue-600');
+            activeCamera.innerHTML = '<i data-feather="video" class="mr-2"></i><span>Day Camera</span>';
+            feather.replace();
+        });
+        thermalCamBtn.addEventListener('click', () => {
+            dayCameraContainer.classList.add('hidden');
+            thermalCameraContainer.classList.remove('hidden');
+            dayCamBtn.classList.remove('bg-blue-600');
+            thermalCamBtn.classList.add('bg-blue-600');
+            activeCamera.innerHTML = '<i data-feather="video" class="mr-2"></i><span>Thermal Camera</span>';
+            feather.replace();
+        });
+        // Configuration modal
+        configBtn.addEventListener('click', () => {
+            configModal.classList.remove('hidden');
+        });
+        closeConfigBtn.addEventListener('click', () => {
+            configModal.classList.add('hidden');
+        });
+        cancelConfigBtn.addEventListener('click', () => {
+            configModal.classList.add('hidden');
+        });
+        saveConfigBtn.addEventListener('click', () => {
+            const dayCamUrl = document.getElementById('dayCamUrl').value;
+            const thermalCamUrl = document.getElementById('thermalCamUrl').value;
+            const wsUrl = document.getElementById('wsUrl').value;
+            // Save to localStorage
+            localStorage.setItem('dayCamUrl', dayCamUrl);
+            localStorage.setItem('thermalCamUrl', thermalCamUrl);
+            localStorage.setItem('wsUrl', wsUrl);
+            // Connect to WebSocket
+            connectWebSocket(wsUrl);
+            // Load camera feeds
+            if (dayCamUrl) {
+                dayCamFeed.src = dayCamUrl;
+            }
+            if (thermalCamUrl) {
+                thermalCamFeed.src = thermalCamUrl;
+            }
+            configModal.classList.add('hidden');
+        });
+        // Control button events
+        controlButtons.forEach(button => {
+            button.addEventListener('mousedown', () => {
+                const command = button.getAttribute('data-command');
+                sendCommand(command, 'start');
+            });
+            button.addEventListener('mouseup', () => {
+                const command = button.getAttribute('data-command');
+                sendCommand(command, 'stop');
+            });
+            button.addEventListener('mouseleave', () => {
+                const command = button.getAttribute('data-command');
+                sendCommand(command, 'stop');
+            });
+        });
+        // WebSocket functions
+        function connectWebSocket(url) {
+            if (socket) {
+                socket.close();
+            }
+            socket = new WebSocket(url);
+            socket.onopen = () => {
+                connectionStatus.innerHTML = '<span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span><span>Connected</span>';
+                console.log('WebSocket connected');
+            };
+            socket.onclose = () => {
+                connectionStatus.innerHTML = '<span class="w-3 h-3 rounded-full bg-red-500 mr-2"></span><span>Disconnected</span>';
+                console.log('WebSocket disconnected');
+            };
+            socket.onerror = (error) => {
+                console.error('WebSocket error:', error);
+            };
+            socket.onmessage = (event) => {
+                const data = JSON.parse(event.data);
+                console.log('Received:', data);
+                // Update position indicators
+                if (data.type === 'position') {
+                    if (data.camera === 'day') {
+                        document.getElementById('dayPan').textContent = `${data.pan}°`;
+                        document.getElementById('dayTilt').textContent = `${data.tilt}°`;
+                        document.getElementById('dayZoom').textContent = `${data.zoom}x`;
+                    } else if (data.camera === 'thermal') {
+                        document.getElementById('thermalPan').textContent = `${data.pan}°`;
+                        document.getElementById('thermalTilt').textContent = `${data.tilt}°`;
+                        document.getElementById('thermalZoom').textContent = `${data.zoom}x`;
+                    }
+                }
+            };
+        }
+        function sendCommand(command, action) {
+            if (!socket || socket.readyState !== WebSocket.OPEN) {
+                console.error('WebSocket is not connected');
+                return;
+            }
+            const activeCamera = dayCameraContainer.classList.contains('hidden') ? 'thermal' : 'day';
+            const message = {
+                type: 'control',
+                camera: activeCamera,
+                command: command,
+                action: action
+            };
+            socket.send(JSON.stringify(message));
+            console.log('Sent:', message);
+        }
+        // Load saved configuration
+        function loadConfig() {
+            const dayCamUrl = localStorage.getItem('dayCamUrl');
+            const thermalCamUrl = localStorage.getItem('thermalCamUrl');
+            const wsUrl = localStorage.getItem('wsUrl') || 'ws://localhost:8080';
+            if (dayCamUrl) {
+                document.getElementById('dayCamUrl').value = dayCamUrl;
+                dayCamFeed.src = dayCamUrl;
+            }
+            if (thermalCamUrl) {
+                document.getElementById('thermalCamUrl').value = thermalCamUrl;
+                thermalCamFeed.src = thermalCamUrl;
+            }
+            document.getElementById('wsUrl').value = wsUrl;
+            connectWebSocket(wsUrl);
+        }
+        // Initialize
+        loadConfig();
+        feather.replace();
+    </script>
+</body>
 </html>