Skip to content

stevehe-git/robot-viewer

BranchesTags

Repository files navigation

移动机器人2D可视化系统

一个基于 Vue 3 + TypeScript 的实时机器人监控和控制系统，支持 MQTT 数据通信、实时可视化、运动控制和数据回放功能。

功能特性

核心功能

  • ✅ 实时显示机器人位姿和运动轨迹

    • Canvas 实时渲染机器人位置、朝向
    • 历史轨迹可视化（可切换显示/隐藏）
    • 支持跟随机器人模式

  • ✅ 障碍物点云数据可视化

    • 实时点云数据渲染
    • 障碍物标记和显示
    • 可切换显示/隐藏

  • ✅ 机器人路径规划展示

    • 规划路径可视化（绿色）
    • 绕障路径可视化（紫色）
    • 独立控制显示

  • ✅ 机器人运动控制

    • 前进、后退、左转、右转控制
    • 停止按钮
    • 速度滑块控制（0-100%）
    • 通过 MQTT 发布控制命令

  • ✅ 连接状态监控和消息日志

    • MQTT 连接状态实时显示
    • 消息日志面板（支持清除）
    • 日志类型分类（信息、错误、成功、警告）

  • ✅ 响应式设计

    • 适配不同屏幕尺寸
    • 移动端友好界面
    • 现代化 UI 设计

  • ✅ MQTT 数据支持

    • 完整的 MQTT 客户端实现
    • 支持 SSL/TLS 加密连接
    • 多主题订阅和消息处理

  • ✅ 数据回放功能

    • 支持 JSON 格式回放文件
    • 回放控制（开始/停止）
    • 可调节回放速度（1x-10x）
    • 回放进度显示

技术栈

  • 前端框架: Vue 3 (Composition API)
  • 语言: TypeScript
  • 构建工具: Vite
  • MQTT 客户端: mqtt.js
  • 可视化: Canvas API
  • 图表库: Chart.js
  • 样式框架: Tailwind CSS
  • 图标库: Font Awesome

安装

前置要求

  • Node.js >= 16.0.0
  • npm >= 7.0.0

安装步骤

  1. 克隆项目
git clone <repository-url>
cd robot-viewer
  1. 安装依赖
npm install
  1. 启动开发服务器
npm run dev
  1. 构建生产版本
npm run build
  1. 预览生产构建
npm run preview

使用方法

1. MQTT 连接配置

  1. 打开应用后，在左侧面板找到"MQTT连接设置"
  2. 配置以下参数：
    • MQTT Broker IP: MQTT 服务器地址（如：127.0.0.1 或 172.16.5.89）
    • 端口: MQTT 服务器端口（如：8083）
    • 客户端ID: 唯一客户端标识符
    • 用户名/密码: MQTT 认证信息
    • 使用SSL/TLS: 是否启用加密连接
    • 清除会话: 连接时是否清除会话
  3. 点击"连接"按钮建立连接
  4. 连接成功后，状态指示器将变为绿色

2. 机器人控制

  • 前进/后退: 点击方向按钮或按住按钮持续控制
  • 左转/右转: 点击转向按钮控制机器人旋转
  • 停止: 点击停止按钮立即停止机器人
  • 速度控制: 使用滑块调节运动速度（0-100%）

3. 可视化功能

地图视图控制

  • 放大/缩小: 点击放大镜图标
  • 重置视图: 点击重置按钮恢复默认视图
  • 跟随机器人: 点击十字图标启用/禁用跟随模式

图层显示控制

  • 网格: 显示/隐藏坐标网格
  • 轨迹: 显示/隐藏历史运动轨迹
  • 障碍物: 显示/隐藏障碍物标记
  • 边界: 显示/隐藏工作边界
  • 连廊: 显示/隐藏连廊路径
  • 路径规划: 显示/隐藏规划路径
  • 绕障路径: 显示/隐藏绕障路径
  • 点云: 显示/隐藏点云数据
  • PCD地图: 显示/隐藏PCD地图数据
  • 图传: 显示/隐藏图传画面（占位符）
  • OSD: 显示/隐藏机器人实时状态信息

4. 数据回放

  1. 点击"数据回放"面板
  2. 选择 JSON 格式的回放文件
  3. 调整回放速度（1x-10x）
  4. 点击"开始回放"开始播放
  5. 点击"停止回放"停止播放

5. 消息日志

  • 查看所有 MQTT 消息日志
  • 日志按时间戳排序（最新在上）
  • 支持清除所有日志
  • 日志类型颜色标识：
    • 🔵 蓝色：信息
    • 🟢 绿色：成功
    • 🟡 黄色：警告
    • 🔴 红色：错误

MQTT 主题说明

系统订阅以下 MQTT 主题：

主题 说明 数据格式
robot/pose 机器人位姿 {x: number, y: number, yaw: number}
robot/state 机器人状态 {battery, charge, emergency, pauseCode, roll, pitch, status, networkType, networkSignal, sensors: {...}}
robot/pointcloud 点云数据 {points: [{x, y}, ...]}
robot/path 规划路径 {path: [{x, y}, ...]}
robot/bypass 绕障路径 {path: [{x, y}, ...]}
robot/obstacles 障碍物 {obstacles: [{x, y, radius?}, ...]}
robot/boundary 边界 {boundary: [{x, y}, ...]}
robot/corridor 连廊 {corridor: [{x, y}, ...]}
robot/pcd_map PCD地图 {map: [{x, y}, ...]}
robot/# 所有机器人主题（调试用） -

系统发布以下 MQTT 主题：

主题 说明 数据格式
robot/cmd_vel 速度控制命令 {linear: {x, y, z}, angular: {x, y, z}}

数据格式示例

机器人位姿 (robot/pose)

{
  "x": 1.5,
  "y": 2.3,
  "yaw": 0.785
}

机器人状态 (robot/state)

{
  "battery": 85.5,
  "charge": 1,
  "emergency": 0,
  "pauseCode": 0,
  "roll": 0.1,
  "pitch": -0.05,
  "status": "运行中",
  "networkType": "WiFi",
  "networkSignal": 85,
  "sensors": {
    "vcu": true,
    "imu": true,
    "lmotor": true,
    "rmotor": true,
    "cutter": false,
    "rain": false,
    "bumper": false,
    "lift": false,
    "gps": true,
    "lidar": true,
    "camera": true,
    "blue": false
  }
}

点云数据 (robot/pointcloud)

{
  "points": [
    {"x": 1.0, "y": 2.0},
    {"x": 1.1, "y": 2.1},
    {"x": 1.2, "y": 2.2}
  ]
}

速度控制命令 (robot/cmd_vel)

{
  "linear": {"x": 0.5, "y": 0, "z": 0},
  "angular": {"x": 0, "y": 0, "z": 0.2}
}

回放文件格式

[
  {
    "timestamp": 1234567890,
    "state": {
      "pose": {"x": 1.0, "y": 2.0, "yaw": 0.5},
      "battery": 85.0
    }
  },
  {
    "timestamp": 1234567891,
    "state": {
      "pose": {"x": 1.1, "y": 2.1, "yaw": 0.6},
      "battery": 84.9
    }
  }
]

项目结构

robot-viewer/
├── src/
│   ├── components/          # Vue 组件
│   │   ├── MqttConnection.vue    # MQTT 连接配置组件
│   │   ├── RobotStatus.vue      # 机器人状态显示组件
│   │   ├── RobotControl.vue     # 机器人控制组件
│   │   ├── RobotVisualization.vue # Canvas 可视化组件
│   │   ├── MessageLog.vue       # 消息日志组件
│   │   ├── SensorChart.vue      # 传感器数据图表组件
│   │   └── ReplayControl.vue    # 数据回放控制组件
│   ├── composables/          # 组合式函数
│   │   ├── useMqtt.ts        # MQTT 客户端逻辑
│   │   └── useRobotState.ts  # 机器人状态管理
│   ├── utils/                # 工具函数
│   │   └── visualization.ts  # Canvas 可视化类
│   ├── App.vue               # 主应用组件
│   ├── main.ts               # 入口文件
│   └── style.css             # 全局样式
├── public/                   # 静态资源
├── index.html                # HTML 入口
├── package.json              # 项目配置
├── tsconfig.json             # TypeScript 配置
├── vite.config.ts           # Vite 配置
└── README.md                 # 项目文档

开发说明

代码规范

  • 使用 TypeScript 进行类型检查
  • 遵循 Vue 3 Composition API 最佳实践
  • 使用 ESLint 进行代码检查

主要依赖

{
  "dependencies": {
    "vue": "^3.5.24",
    "mqtt": "^5.x.x"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.1",
    "typescript": "~5.9.3",
    "vite": "^7.2.4",
    "vue-tsc": "^3.1.4"
  }
}

浏览器支持

  • Chrome (推荐)
  • Firefox
  • Safari
  • Edge

常见问题

Q: 无法连接到 MQTT 服务器？

A: 请检查：

  • MQTT 服务器地址和端口是否正确
  • 网络连接是否正常
  • 防火墙是否阻止连接
  • 用户名和密码是否正确
  • 是否启用了 SSL/TLS（如果服务器要求）

Q: 看不到机器人可视化？

A: 请检查：

  • MQTT 连接是否成功
  • 是否订阅了 robot/pose 主题
  • 数据格式是否正确
  • 浏览器控制台是否有错误信息

Q: 控制命令不生效？

A: 请检查：

  • MQTT 连接是否正常
  • 是否发布了 robot/cmd_vel 主题
  • 机器人端是否订阅了该主题
  • 数据格式是否符合要求

许可证

查看 LICENSE 文件了解详情。

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

v1.0.0 (2025-01-XX)

  • ✅ 初始版本发布
  • ✅ 实现所有核心功能
  • ✅ 支持 MQTT 实时数据
  • ✅ 支持数据回放功能

移动机器人2D可视化系统 - 让机器人监控更简单、更直观！

About

No description, website, or topics provided.

Resources

Readme

License

Apache-2.0 license
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages