initial commit

2025-10-26 10:03:07 +08:00
commit 62de9573ac
7 changed files with 1024 additions and 0 deletions
--- a/templates/index.html
+++ b/templates/index.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Real-time Image Display via WebSocket</title>
+    <!-- 引入 Socket.IO 客户端库 -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
+    <style>
+        .container { 
+            display: flex; 
+            flex-wrap: wrap; 
+            justify-content: center; 
+        }
+        .image-container { 
+            margin: 10px; 
+            text-align: center; 
+        }
+        .image-container img { 
+            width: 400px; 
+            height: auto; 
+            border: 1px solid #ccc; 
+        }
+        .timestamp { 
+            font-size: 0.9em; 
+            color: #666; 
+        }
+        #status { 
+            padding: 10px; 
+            margin: 10px; 
+            background-color: #f0f0f0; 
+            text-align: center; 
+        }
+        #button-container {
+            text-align: center;
+            margin: 20px 0;
+        }
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+        }
+        a {
+            color: #007bff;
+            text-decoration: none;
+        }
+        a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+    <h1>Live Stereo Camera Feed (via WebSocket)</h1>
+    <!-- 添加导航链接 -->
+    <p style="text-align: center;"><a href="/list">View Saved Images</a></p>
+    <div id="status">Connecting to server...</div>
+    
+    <!-- 新增按钮容器 -->
+    <div id="button-container">
+        <button id="capBtn">触发采集</button>
+        <!-- <div id="button-response">Button response will appear here.</div> -->
+    </div>
+
+    <div class="container">
+        <div class="image-container">
+            <h3>Left Camera</h3>
+            <img id="left-img" src="" alt="No Left Image">
+            <div class="timestamp" id="left-ts">No timestamp</div>
+        </div>
+        <div class="image-container">
+            <h3>Right Camera</h3>
+            <img id="right-img" src="" alt="No Right Image">
+            <div class="timestamp" id="right-ts">No timestamp</div>
+        </div>
+    </div>
+
+    <script>
+        // 建立 Socket.IO 连接
+        const socket = io('http://' + document.domain + ':' + location.port);
+
+        socket.on('connect', function() {
+            console.log('Connected to server');
+            document.getElementById('status').innerHTML = 'Connected to server. Waiting for images...';
+        });
+
+        socket.on('disconnect', function() {
+            console.log('Disconnected from server');
+            document.getElementById('status').innerHTML = 'Disconnected from server.';
+        });
+
+        // 监听 'update_image' 事件
+        socket.on('update_image', function(data) {
+            // 更新左图
+            if (data.left_image) {
+                document.getElementById('left-img').src = 'data:image/jpeg;base64,' + data.left_image;
+            }
+            // 更新右图
+            if (data.right_image) {
+                document.getElementById('right-img').src = 'data:image/jpeg;base64,' + data.right_image;
+            }
+            // 更新时间戳
+            if (data.timestamp) {
+                document.getElementById('left-ts').textContent = 'Timestamp: ' + data.timestamp;
+                document.getElementById('right-ts').textContent = 'Timestamp: ' + data.timestamp;
+            }
+        });
+
+        socket.on('error', function(data) {
+            console.error('WebSocket Error:', data);
+            document.getElementById('status').innerHTML = 'Error: ' + data.message;
+        });
+
+        // --- 新增：处理按钮点击事件 ---
+        document.getElementById('capBtn').onclick = function() {
+            console.log("触发采集.");
+            socket.emit('capture_button', {
+                client_time: new Date().toISOString(),
+                // button_id: 'myButton'
+            });
+        };
+
+        // --- 新增：监听服务器对按钮点击的响应 ---
+        socket.on('button_response', function(data) {
+            console.log('Received button response from server:', data);
+            document.getElementById('button-response').textContent = 
+                `Response: ${data.message} (Server Time: ${new Date(data.server_time * 1000).toISOString()})`;
+        });
+
+    </script>
+</body>
+</html>