ROS Flutter GUI App：跨平台机器人可视化控制界面使用记录

ROS Flutter GUI App项目地址https://github.com/chengyangkj/ROS_Flutter_Gui_AppROS Flutter GUI App 是基于 Google 的 Flutter 框架开发能够一套代码同时运行在 Android、iOS、Web、Linux、Windows 和 macOS 平台为 ROS1/ROS2 机器人提供统一的可视化控制界面。项目背景ROS Flutter GUI App 由开发者 chengyangkj 发起并开源是一个专门为 ROS 机器人设计的跨平台人机交互软件。它通过 WebSocket 与 ROS 系统通信让用户可以用手机、平板或电脑轻松控制机器人实时查看地图、传感器数据、摄像头画面等信息。项目的核心理念是让机器人控制像玩手机游戏一样简单。无论你使用的是 Android 手机、iPhone、Windows 电脑还是 Linux 工作站都能获得一致的操作体验。核心功能亮点根据项目文档这款应用具备以下主要功能功能模块具体能力地图显示实时显示机器人的占用网格地图机器人定位实时展示机器人在地图上的位置和朝向遥操作控制虚拟手柄、键盘或物理游戏手柄控制机器人移动导航功能支持单点和多点路径导航路径规划可视化显示机器人的规划路径状态监控电池电量实时显示摄像头画面实时查看机器人摄像头回传画面这些功能覆盖了机器人日常开发和调试的绝大部分场景从建图、定位到导航都可以通过这个 App 完成。技术架构解析通信原理ROS Flutter GUI App 采用 WebSocket rosbridge 的通信方案机器人端运行rosbridge_server将 ROS 话题通过 WebSocket 对外暴露App 端通过 WebSocket 连接到 rosbridge订阅和发布 ROS 话题所有通信数据采用 JSON 格式轻量且跨语言这种架构的优势在于无需修改机器人原有代码只需启动 rosbridge 服务即可让任意平台的应用与 ROS 系统通信。跨平台实现得益于 Flutter 的跨平台能力应用的核心代码全部用 Dart 语言编写一套代码可以编译到 6 个平台Android生成 APK 或 AppBundle可直接安装到手机iOS生成 iOS 应用需 Mac 编译Web生成 HTML5 页面浏览器即可访问Linux生成 Linux 桌面应用Windows生成 Windows 可执行文件macOS生成 Mac 桌面应用项目还配置了 GitHub Actions 自动构建每次发布新版本都会自动编译各平台的可执行文件用户可以直接下载使用。使用过程详解接下来我们以一个实际的仿真机器人为例完整演示如何使用 ROS Flutter GUI App。前期准备1. 安装 ROS Flutter GUI App你可以通过两种方式获取应用从 GitHub Releases 下载预编译的二进制文件或者克隆源码自行编译git clone https://github.com/chengyangkj/ROS_Flutter_Gui_Appcd ROS_Flutter_Gui_Appflutter run -d linux # Linux桌面版2. 准备 ROS 环境本文以 ROS2 Humble 为例需要安装rosbridge_serverbashsudo apt install ros-humble-rosbridge-server如果需要摄像头画面还需安装web_video_serverbashsudo apt install ros-humble-web-video-server启动仿真机器人以 walking 仿真机器人为例这是一个开源的移动机器人仿真平台bash# 加载gazebo环境. /usr/share/gazebo/setup.bash# 启动仿真环境ros2 launch walking_application house_world_inspection.launch.py执行后你会看到 Gazebo 仿真界面加载出一个室内环境机器人已经准备就绪。启动通信桥接新开一个终端启动 rosbridge 服务bashros2 launch rosbridge_server rosbridge_websocket_launch.xml如果需要摄像头画面再开一个终端启动web_video_serverbashros2 run web_video_server web_video_server连接并控制机器人启动 ROS Flutter GUI App如果你使用的是 Linux 桌面版直接运行bashcd ~/tools/ROS_Flutter_Gui_Appflutter run -d linux配置连接参数在应用设置中将init配置改为2使用 walking 机器人配置确保 WebSocket 地址正确指向运行 rosbridge 的机器人 IP默认ws://localhost:9090连接机器人点击左上角的连接按钮如果一切正常应用界面会显示地图和机器人的当前位置。开始控制移动控制点击键盘图标底部会出现两个控制圆盘。左边控制前后移动右边控制转向。再次点击键盘图标可隐藏控制盘。设置导航目标点击水滴图标然后在地图上点击想要机器人到达的位置再次点击水滴图标确认。机器人就会开始自主导航。状态监控顶栏会实时显示机器人的速度、方向等信息。整个过程非常直观就像在玩一个遥控机器人游戏。在手机上使用如果你希望用手机控制机器人可以编译 Android 版本bash# 连接安卓手机需开启USB调试flutter run编译完成后应用会自动安装到手机。手机和机器人需要在同一网络下配置好机器人 IP 即可实现无线控制。手机端界面与桌面版一致触控操作更加自然真正实现“捧着手机控制机器人”。实际应用案例案例1Turtlebot4 仿真控制在创客智造的教程中作者详细演示了用 ROS Flutter GUI App 控制 Turtlebot4 仿真机器人的过程启动 Turtlebot4 仿真环境通过 App 订阅地图话题实时显示建图进度设置多个导航点机器人依次到达监控电池电量防止仿真中“电量耗尽”常见问题解决报错1text./ros_flutter_gui_app: /usr/lib/x86_64-linux-gnu/libstdc.so.6: version GLIBCXX_3.4.32 not found (required by /home/kobe/ros2_ws/src/ros_flutter_gui_app_linux_x86_64/lib/libgamepads_linux_plugin.so)解决方法bashsudo apt-get install ros-humble-async-web-server-cpp报错2text./ros_flutter_gui_app: /usr/lib/x86_64-linux-gnu/libstdc.so.6: version GLIBCXX_3.4.32 not found (required by /home/kobe/ros2_ws/src/ros_flutter_gui_app_linux_x86_64/lib/libgamepads_linux_plugin.so)解决方法添加 Ubuntu Toolchain 测试 PPA 并更新 libstdc。编译错误CMake安装权限问题如果你在编译 Linux 版本时遇到类似错误textCMake Error at cmake_install.cmake:66 (file): file INSTALL cannot copy file ... to /usr/local/...: Permission denied.这是因为 CMake 试图将应用安装到系统目录。解决方法直接运行编译好的程序推荐bash./build/linux/x64/debug/bundle/ros_flutter_gui_app或修改 CMakeLists.txt注释掉 install 相关行。无法连接到 rosbridge如果应用提示连接失败请检查rosbridge 服务是否已启动ps aux | grep rosbridge防火墙是否开放 9090 端口手机/电脑与机器人是否在同一网段WebSocket 地址格式是否正确ws://IP:9090地图显示空白可能的原因话题名称不匹配检查机器人发布的地图话题名在应用配置中对应修改坐标变换问题确认机器人发布了 tf 变换