文章参考:
制作简单的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链接在国外服务器,加载较慢。