页面详解

SimPage

路由: /

模拟器主页面，用于数据采集与模型推理测试。

布局结构

┌─────────────────────────────────────────────────────────────┐
│                      SimPage                                │
├───────────────────────────────┬─────────────────────────────┤
│                               │       RightPanel             │
│        TopDownView            │  ┌─────────────────────┐    │
│       (俯视画布)              │  │   FirstPersonView   │    │
│                               │  │   (第一视角)          │    │
│   [小车站 + 障碍物 + 地图]    │  └─────────────────────┘    │
│                               │  ┌─────────────────────┐    │
│                               │  │    LogConsole       │    │
│                               │  │   (日志控制台)       │    │
├───────────────────────────────┴─────────────────────────────┤
│                   TrainingControl + InferenceControl         │
└─────────────────────────────────────────────────────────────┘

核心功能

键盘控制: WASD/方向键控制小车运动
数据采集: 录制驾驶演示数据
训练控制: 启动/停止模型训练
推理测试: 加载模型进行模拟推理
实时日志: 显示后端运行日志

Socket.IO 事件

事件名	方向	说明
`action`	emit	发送动作指令
`car_state_update`	listen	接收小车状态更新
`collect_data`	emit	发送采集数据
`training_progress`	listen	接收训练进度
`act_infer_result`	listen	接收推理结果

RealPage

路由: /real

真实小车控制页面，用于连接和控制物理机器人。

布局结构

┌─────────────────────────────────────────────────────────────┐
│                      RealPage                                │
├─────────────────────────────────┬─────────────────────────────┤
│                                 │        RealRightPanel       │
│       RealCameraView            │  ┌─────────────────────┐    │
│      (浏览器摄像头)              │  │     Car IP 配置      │    │
│                                 │  │   连接状态显示        │    │
│                                 │  │   电机状态显示        │    │
├─────────────────────────────────┴─────────────────────────────┤
│                      控制面板                                  │
│     [连接] [前进] [后退] [左转] [右转] [停止]                   │
└─────────────────────────────────────────────────────────────┘

核心功能

摄像头访问: 使用浏览器 API 获取小车摄像头画面
IP 配置: 设置小车 IP 地址
电机控制: HTTP 请求控制小车电机
状态监控: 显示心跳和电机状态

API 通信

真实小车通过 HTTP API 直接通信：

// 发送心跳
carHeartbeat(carIP)

// 获取电机状态
motorStatusAt(carIP)

// 直接控制电机
motorDirect(carIP, leftVel, rightVel)

// 小车整体控制
carControl(carIP, action)