<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机器人控制中枢</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="main-container">
        <header class="dashboard-header">
            <div>
                <h1>机器人控制中枢</h1>
                <p>集中监控摄像头、底盘、继电器、滑轨与音频采集，统一页面即时操控。</p>
            </div>
            <div class="header-actions">
                <a class="ghost-button" href="/video0/snapshot" target="_blank">打开摄像头快照</a>
                <a class="ghost-button" href="/driver/health" target="_blank">底盘健康检查</a>
            </div>
        </header>

        <section class="dashboard-grid">
            <article class="card voice-card">
                <div class="card-heading">
                    <div>
                        <h2>音频监控</h2>
                        <p>USB 声卡实时监听 & FFT 主频分析</p>
                    </div>
                </div>
                <div class="button-row">
                    <button id="listenButton">开始实时监听</button>
                    <span class="status-pill" id="listenStatus">状态: 未监听</span>
                </div>
                <div class="button-row">
                    <button id="startButton">开始工作 (录制)</button>
                    <button id="stopButton" disabled>结束工作</button>
                    <span class="status-pill" id="recordingStatus">状态: 未工作</span>
                </div>
                <div class="chart-wrap">
                    <h3>实时监听频率（近 20 秒）</h3>
                    <div class="chart-container">
                        <canvas id="frequencyChart"></canvas>
                    </div>
                </div>
            </article>

            <article class="card camera-card">
                <div class="card-heading">
                    <div>
                        <h2>视觉回传</h2>
                        <p>点击按钮后加载实时流，默认不占用带宽</p>
                    </div>
                    <span class="status-pill" id="cameraStatus">待命: 点击开启视频</span>
                </div>
                <div class="camera-frame">
                    <div class="camera-placeholder" id="cameraPlaceholder">点击“开启视频”后才加载实时流，以节省带宽。</div>
                    <img id="cameraStream" alt="摄像头实时流" loading="lazy" hidden>
                </div>
                <div class="button-row">
                    <button id="cameraStart">开启视频</button>
                    <button id="cameraStop" class="ghost" disabled>停止视频</button>
                    <button id="cameraReload" class="ghost" disabled>刷新当前流</button>
                </div>
            </article>

            <article class="card driver-card">
                <div class="card-heading">
                    <div>
                        <h2>底盘控制</h2>
                        <p>麦克纳姆轮底盘运动，支持键盘 WASD/方向键</p>
                    </div>
                    <span class="status-pill" id="driverStatus">待命</span>
                </div>
                <div class="driver-pad">
                    <div></div>
                    <button class="control" id="driver-forward">↑</button>
                    <div></div>

                    <button class="control" id="driver-left">←</button>
                    <button class="control danger" id="driver-stop">■</button>
                    <button class="control" id="driver-right">→</button>

                    <div></div>
                    <button class="control" id="driver-back">↓</button>
                    <div></div>
                </div>
                <div class="range-row">
                    <label for="driver-speed">速度</label>
                    <input type="range" id="driver-speed" min="0" max="100" value="70">
                    <span class="badge" id="driver-speed-val">70%</span>
                </div>
                <p class="hint">提示：键盘 WASD / 方向键可直接控制，空格键急停。</p>
            </article>

            <article class="card knock-card">
                <div class="card-heading">
                    <div>
                        <h2>GPIO 继电器</h2>
                        <p>四路继电器脉冲激活</p>
                    </div>
                    <span class="status-pill" id="knockStatus">待命</span>
                </div>
                <div class="knock-grid">
                    <button class="control" data-channel="0">通道 0</button>
                    <button class="control" data-channel="1">通道 1</button>
                    <button class="control" data-channel="2">通道 2</button>
                    <button class="control" data-channel="3">通道 3</button>
                </div>
                <p class="hint">操作提示：每次点击输出 10ms 脉冲。</p>
            </article>

            <article class="card slider-card">
                <div class="card-heading">
                    <div>
                        <h2>滑轨控制</h2>
                        <p>步进电机滑台，工作区 0-20 cm</p>
                    </div>
                    <span class="status-pill" id="sliderStatus">位置: -- cm</span>
                </div>
                <div class="slider-readout">
                    <div class="big-number" id="sliderPosition">--</div>
                    <span class="meta">当前工作坐标 (cm)</span>
                </div>
                <div class="button-row">
                    <button id="sliderCalibrate">开机校准</button>
                    <button id="sliderGoZero">工作归零</button>
                </div>
                <div class="button-row compact">
                    <button class="ghost" data-speed="slow">慢速</button>
                    <button class="ghost" data-speed="medium">中速</button>
                    <button class="ghost" data-speed="fast">快速</button>
                </div>
                <div class="button-row compact">
                    <button class="control" data-move="left">◀ 左移 0.5cm</button>
                    <button class="control" data-move="right">▶ 右移 0.5cm</button>
                </div>
                <div class="absolute-move">
                    <input type="number" id="sliderTarget" min="0" max="20" step="0.1" placeholder="目标位置 (0-20 cm)">
                    <button id="sliderGoAbs">移动到指定位置</button>
                </div>
            </article>
        </section>
    </div>

    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>
