# 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/`)。