机器狗养龙虾（OpenClaw）第十天 — 网页控制系统

整个系统采用**前后端分离**设计： ``` ┌──────────────────────────────────────┐ │ 浏览器（前端） │ │ React + TypeScript + Ant Design │ │ HTTP REST API / WebSocket │ └──────────────┬───────────────────────┘ │ 端口 19000 ┌──────────────┴───────────────────────┐ │ 后端 FastAPI 服务 │ │ routes.py ─ robot_manager.py │ │ ws_manager.py ─ database.py │ └──────────────┬───────────────────────┘ │ unitree_sdk2py DDS ┌──────────────┴───────────────────────┐ │ Unitree Go2 机器狗 │ └──────────────────────────────────────┘ ``` * **后端**：Python FastAPI，通过 `unitree_sdk2py` 的 DDS 协议与机器狗通信，提供 REST 接口和 WebSocket 推送。 * **前端**：React + Ant Design，编译产物直接由 FastAPI 以静态文件方式托管，无需单独部署 Web 服务器。 * **数据库**：SQLite，异步驱动 `aiosqlite`，存储连接配置和历史指令日志。 控制台采用深色科技风设计，背景深蓝近黑，卡片底色略亮，强调色为青蓝色，危险提示用橙黄/红色区分。整体视觉接近工业控制终端，适合长时间盯屏监控操作。 左侧固定侧边导航栏，共 **4 个功能入口**：**遥控台 / 动作库 / 外设控制 / 运维调试**。顶部状态栏实时显示机器狗连接状态（在线/离线）和 WebSocket 连接状态。所有页面的操作结果会实时同步给所有已打开该控制台的浏览器窗口。整体界面全览如下图所示。 

这是使用最频繁的主页面，所有日常操控都在这里完成，分为六个功能卡片，以仪表盘式网格布局排列，如下图所示。  ### 2.1 连接与状态 页面左上角是连接面板：输入网卡名称（有线通常为 `eth0`，无线为 `wlan0`）和指令超时时间，点击「连接」即可建立与机器狗的 DDS 通信。连接成功后，卡片下半部分会实时刷新机器狗的运动状态，包括：当前速度（纵向/横向/偏航）、步态类型、身体高度、足底压力等数据，每 0.5 秒自动更新。两个参数旁都有问号图标，悬停可查看详细说明，方便新用户快速上手。 ### 2.2 基础姿态 7 个常用姿态按钮排列为网格：**站立、趴下、坐下、起坐、平衡站、恢复站、阻尼**，末尾配一个红色「■ 停止」按钮。按钮尺寸均等，一目了然，紧急情况可快速定位停止键。 ### 2.3 步态 & 速度档 上半部分为步态模式选择（2×2 网格）：**静步态、小跑、节能步态、自由行走**，点击即切换，无需确认。下半部分为速度档位快捷按钮：**慢 / 中 / 快**，直接对应三档预设速度。 ### 2.4 移动控制 移动控制卡片是整个控制台的视觉重心，水平居中排列三组控件： * **左侧虚拟摇杆**：圆形触控区，拖拽控制前后左右平移，支持鼠标和触摸屏 * **中间方向键**：3×3 九宫格布局，四向移动键 + 顺逆时针旋转键 + 中央红色停止键，按住持续发指令，松开立即停止 * **右侧旋转摇杆**：独立控制偏航旋转，与左摇杆逻辑相同 卡片标题旁有蓝色标签提示支持键盘操作：`W/S`（或方向键）前后，`A/D` 左右，`Q/E` 旋转，`空格` 紧急停止。 ### 2.5 速度参数 三条水平滑杆分别调节纵速 vx（0.1–1.0 m/s）、横速 vy（0.1–1.0 m/s）、偏航速率 vyaw（0.1–2.0 rad/s），右侧实时显示当前值。上方提供「慢 / 中 / 快」三个预设按钮，一键设置常用参数组合。 ### 2.6 姿态调整（欧拉角） 三条滑杆控制身体姿态：横滚（Roll）、俯仰（Pitch）、偏航（Yaw），范围均为 ±30°。拖动后延迟 200ms 发送，避免频繁触发。右上角「重置」按钮一键归零。卡片顶部有简短说明：「横滚：身体左右倾斜 · 俯仰：抬头/低头 · 偏航：水平转向」。

专门收录所有预置动作，分为四类功能卡片。点击任意**危险动作**按钮后，不会立即执行，而是弹出安全确认弹窗，告知动作要求（如「前方及上方 2m 内无人员和障碍物」），用户二次确认后才发送指令；危险按钮左侧有橙色感叹号图标作为视觉警示。整体页面如下图所示。  ### 3.1 特技动作（需要 AI 模式） 收录幅度最大、最需要安全空间的运动，执行前均弹出确认： | 按钮 | 说明 | | --- | ------------------- | | 前空翻 | 向前翻转一周，前方及上方 2m 净空 | | 后空翻 | 向后翻转一周，后方及上方 2m 净空 | | 左空翻 | 向左侧翻转一周，左侧及上方 2m 净空 | | 前跳 | 向前跳跃，前方 2m 净空 | | 前扑 | 重心快速前移猛扑，前方 2m 内无人 | ### 3.2 表情 & 互动 轻量级互动动作，无需额外确认，直接点击执行：打招呼、伸展、爱心、挠脚、满足。 ### 3.3 舞蹈 舞蹈 1 与舞蹈 2 各自弹出确认，执行前提示周围 1.5m 净空，舞蹈过程中请勿干预。 ### 3.4 高级模式 Toggle（AI / Advanced 模式下有效） 以列表形式展示 7 个高级运动模式，每项配「开启 / 关闭」按钮对： * **自由跳跃 FreeBound**：大幅度连续跳跃，前方 3m 净空 * **自由弹跳 FreeJump**：弹跳动作，起跳前有蓄力过程 * **自由避障 FreeAvoid**：自主避障行走模式 * **倒立 HandStand**：四脚朝天倒立，极度不稳定 * **直立行走 WalkUpright**：后腿站立双腿行走，平衡要求极高 * **交叉步 CrossStep**：特殊步态模式 * **摆姿势 Pose**：静态姿势保持 ### 3.5 障碍物避障 与高级动作并排，集中管理避障功能：避障开/关、API 控制/遥控器控制切换、避障模式循环切换，以及三类避障移动指令（持续前进 0.3 m/s、增量前进 0.5 m、绝对位移 1 m），每个按钮悬停可见 Tooltip 说明。

将摄像头与 VUI 硬件控制整合在同一页面，布局为：音量与亮度水平并排在上方卡片，视频流在下方全宽展示。整体页面如下图所示。  ### 4.1 VUI 音量 & LED 亮度 左半部分为音量控制：水平滑杆，范围 0–5，实时调节机器狗扬声器音量；配有「读取当前」按钮同步实机数值，以及「VUI 开 / VUI 关」切换语音交互模块的开关状态。 右半部分为 LED 亮度控制：同样是 0–5 的水平滑杆，配「读取当前」按钮，实时调节机器狗头灯亮度。 ### 4.2 实时视频流 下方全宽区域播放前置摄像头的实时 MJPEG 视频流，流畅呈现机器狗第一视角画面。

将四类管理工具整合为一个 Tab 页，切换成本低，适合调试与运维场景。整体页面如下图所示。  ### 5.1 参数配置 Tab 以表单形式展示并编辑 DDS 连接参数：网卡名称、DDS 域 ID、指令超时时间。参数保存后持久化到 SQLite 数据库，下次打开控制台会自动回填，无需重复输入。每项参数旁有中文说明文字。 ### 5.2 服务管理 Tab 列表展示机器狗内部所有可管理服务的名称与当前状态（运行中 / 已停止 / 受保护），支持逐项启用/停止切换，右上角「刷新」按钮重新从机器狗拉取服务列表。 ### 5.3 命令日志 Tab 以表格形式记录每一条历史指令：指令名称、参数内容、返回码、来源（HTTP 或 WebSocket）、执行时间，支持分页查询，右上角提供清空按钮。可用于复盘操作记录或排查异常指令。 ### 5.4 通信调试 Tab 面向开发调试场景。页面上方显示实时推送流水（sport_state 广播、指令执行结果等），下方提供 JSON 输入框，可手动发送任意指令到后端并即时查看响应，方便验证协议格式或测试新功能。

到今天为止，所有前期测试过的机器狗功能都已集成进这套四模块网页控制台： * **遥控台**：日常操控主阵地，移动/姿态/步态一站搞定 * **动作库**：特技、舞蹈、互动动作集中管理，危险动作二次确认保安全 * **外设控制**：摄像头直播 + 音量灯光一屏掌控 * **运维调试**：配置、服务、日志、通信调试四合一，不再需要分散的命令行脚本 该网页应用程序可正常启动，连接并控制机器狗。测试通过。 下一期，我们将基于这套控制台的 API，让**龙虾（OpenClaw）自动生成复杂功能程序**，比如根据视觉输入自动决策或响应自然语言指令。