1、一个简单的 ROS web 人机建图页面开发_ros web界面

文章参考：

制作简单的ROSWEB (2) -使用rosjs 进行栅格地图web端3d可视化_ros web_KaHoWong的博客-CSDN博客

代码下载：参考了博主的一些代码，并进行了一定的修改

下载地址：ROS WEB开发: ROS 仿真/实体 机器人 web端人机交互界面开发 - Gitee.com

1、运行环境：

ROS机器人端（linux仿真ROS系统、实体机器人ROS系统）

浏览器端（同一网段下某台电脑）

目前，文章使用的ROS 机器人端为虚拟机端仿真,使用古月mbot机器人，源码下载地址为：ROS WEB开发: ROS 仿真/实体 机器人 web端人机交互界面开发 - Gitee.com

 

将 catkin_ws.zip 进行解压后，获取仿真机器人文件，放入ubuntu 系统下catkin_ws/src目录下。

2、ROS机器人端配置：

2.1 配置rosbridge

 根据ros版本，配置rosbridge:

sudo apt-get install ros-<ROS系统版本：如：kinetic、melodic>-rosbridge-suite

2.2 启动仿真机器人

启动仿真机器人，这里使用古月mbot机器人:

roscore
roslaunch  mbot_gazebo mbot_laser_nav_gazebo.launch
roslaunch mbot_navigation gmapping_demo.launch

 

启动websocket:

roslaunch rosbridge_server rosbridge_websocket.launch

 

2.3  查看ROS机器人IP地址

ifconfig

 3、web端配置：

3.1  配置web端地址，指向ros机器人，使用websocket连接

index.html 配置：

main.js文件配置：

 

 3.2  运行前端代码

注意：目前引用的脚本js链接在国外服务器，加载较慢。