<!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>