148 lines
5.3 KiB
Markdown
148 lines
5.3 KiB
Markdown
# 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 流
|
||
```
|
||
|
||
## 开发
|
||
|
||
```bash
|
||
pnpm install # 安装依赖
|
||
pnpm dev # 开发服务器 → http://localhost:5173
|
||
pnpm build # 生产构建 → dist/
|
||
pnpm preview # 预览构建产物
|
||
```
|
||
|
||
部署时将 `dist/` 目录部署至 Nginx 静态文件路径 (`/var/www/aimbot/`)。
|