Vision-Web — AimBot Web 控制前端

基于 Vue 3 的机器人远程控制前端，提供实时视频监控、手动键盘遥控和在线 PID 调参三个功能页面。

技术栈

层	技术
框架	Vue 3.4 (Composition API, <script setup>)
构建	Vite 5 + pnpm
路由	Vue Router 4 (Hash 模式)
ROS 通信	roslibjs → rosbridge WebSocket
HTTP	原生 fetch
视频流	MJPEG (web_video_server 提供 HTTP 流)

页面

路由	页面	说明
#/auto	AutoMode	MJPEG 视频流，一键切换为自动模式
#/manual	ManualMode	键盘遥控底盘 (WASD) 和云台 (方向键)，J 键控制激光
#/debug	DebugMode	在线 PID 参数调节，激光开关，模式切换

目录结构

src/
├── main.js                     # 入口，挂载 App + Router
├── App.vue                     # 根布局：顶部导航 + router-view
├── config.js                   # 集中配置（地址、话题、控制参数、API 端点）
├── router/index.js             # Hash 路由表
├── composables/
│   └── useRosbridge.js         # roslibjs 封装 Composable
└── views/
    ├── AutoMode.vue            # 自动模式页
    ├── ManualMode.vue          # 手动遥控页
    └── DebugMode.vue           # 调试模式页

架构分层

View 层 (views/*.vue)
  - 页面 UI 与用户交互
  - 调用 useRosbridge + config + fetch
Composable 层 (composables/useRosbridge.js)
  - 封装 roslibjs 连接/发布/生命周期
  - 暴露响应式 connected 状态
  - 组件卸载时自动断开 WebSocket
Config 层 (config.js)
  - 所有可配置常量集中管理
  - 部署时只需修改此文件中的 IP 地址
Router 层 (router/index.js)
  - Hash 路由 /auto → /manual → /debug → 重定向到 /auto

config.js 配置项

常量	默认值	说明
HTTP_API_BASE	http://192.168.0.11	HTTP API 基础地址
ROSBRIDGE_URL	ws://192.168.0.11:9090	rosbridge WebSocket
MJPEG_AUTO_URL	...?topic=/vision/result_image&mode=auto	自动模式视频流
MJPEG_MANUAL_URL	...?topic=/vision/result_image&mode=manual	手动模式视频流
MJPEG_DEBUG_URL	...?topic=/vision/debug_image&mode=debug	调试模式视频流
CMD_WHEEL_TOPIC	/cmd_chassis	底盘轮速话题
CMD_GIMBAL_TOPIC	/cmd_gimbal	云台角速度话题
BASE_SPEED	10	线速度值
YAW_VELOCITY	5.0	角速度值 (度/秒)
GIMBAL_PITCH_DEG_S	10	云台俯仰速率 (度/秒)
GIMBAL_YAW_DEG_S	10	云台偏航速率 (度/秒)

页面功能

AutoMode（自动模式）

• MJPEG 实时视频流显示
• 两个按钮将云台和底盘切换为自动模式
• 离开页面时自动断开 MJPEG 连接 (img.src = "")

ManualMode（手动模式）

键盘遥控，支持多键同时按下:

W/S        — 前进/后退 (线速度 ±BASE_SPEED)
A/D        — 左转/右转 (角速度 ±YAW_VELOCITY)
↑/↓        — 云台俯仰 (角速度 ±GIMBAL_PITCH_DEG_S 度/秒)
←/→        — 云台偏航 (角速度 ±GIMBAL_YAW_DEG_S 度/秒)
J          — 激光开关 (e.repeat 防重发)

发布策略:

• requestAnimationFrame 循环，仅在速度值变化时通过 rosbridge 发布
• 无按键时自动停止循环，不发送消息
• /cmd_chassis 发布 Float32MultiArray([linear, angular])
• /cmd_gimbal 发布 Twist (angular.y=pitch, angular.z=yaw)

底盘差速解算由 ROS2 后端节点负责，前端直接发送线速度和角速度。

DebugMode（调试模式）

在线 PID 参数调节:

• 云台 PID (4 组 × Kp/Ki/Kd): 视觉环 Yaw/Pitch, 角度环 Yaw/Pitch
• 底盘 PID (3 组 × Kp/Ki/Kd): 速度环, 角度环, 位置环
• 挂载时自动通过 HTTP GET 加载当前 PID 配置
• 「保存配置」按钮通过 HTTP POST 将参数写入后端并下发至 MCU
• 激光开关按钮和模式切换按钮
• rosbridge 连接状态指示器

HTTP API

接口	方法	说明	调用位置
/api/gimbal/mode/switch	POST	云台模式切换	所有页面
/api/chassis/mode/switch	POST	底盘模式切换	所有页面
/api/laser	POST	激光开关	ManualMode J 键, DebugMode 按钮
/api/gimbal/pidconfig	GET/POST	云台 PID 读写	DebugMode
/api/chassis/pidconfig	GET/POST	底盘 PID 读写	DebugMode

ROS 话题 (rosbridge 发布)

话题	类型	数据	使用位置
/cmd_chassis	Float32MultiArray	[linear, angular]	ManualMode
/cmd_gimbal	geometry_msgs/Twist	angular.y=pitch, angular.z=yaw	ManualMode

通信架构

Vue3 前端
  ├── fetch → Nginx :80 → /api/* → web_node :8080 → ROS2 话题
  ├── roslibjs → rosbridge :9090 → ROS2 话题 (/cmd_chassis, /cmd_gimbal)
  └── <img> → web_video_server :8081 → MJPEG 流

开发

pnpm install      # 安装依赖
pnpm dev          # 开发服务器 → http://localhost:5173
pnpm build        # 生产构建 → dist/
pnpm preview      # 预览构建产物

部署时将 dist/ 目录部署至 Nginx 静态文件路径 (/var/www/aimbot/)。