利用Rosweb实现ros与网页交互（1）
.png)
文章目录
利用Rosweb实现ros与网页交互（1）
文章目录
- 文章目录
- 前言
- 一、环境配置
- 1、首先下载功能包到主目录即可
- 2、下载安装rosbridge工具
- 二、使用步骤
- （一）、ROS部分
- 1.启动ROS核心
- 2.进入工作空间
- 3.编译
- 4.source
- 5.启动仿真机器人
- （二）、网页部分
- 1.查本机IP
- 2.修改index.html以及main.js文件
- 3.启动rosbridge websocket
- 4.使用浏览器打开index.html文件
- 总结
前言
1、需求：在网页上实时显示slam建图、导航等交互。即利用rosbridge -Websocket实现ROS与Web的交互；
2、本章节利用仿真机器人实现网页控制机器人建图；
3、操作环境：Ubuntu20.04，ROS版本：noetic；
4、源码下载地址已上传
一、环境配置
首先介绍常见的工具包：rosbridge_suite功能包，roslibjs,ros2djs，ros3djs。
● rosbridge_suite：实现Web浏览器与ROS之间的数据交互；
● roslibjs：实现了ROS中的部分功能，如Topic,Service,URDF等；
● ros2djs：提供了二维可视化的管理工具，可以用来在Web浏览器中显示二维地图；
● ros3djs：提供了三维可视化的管理工具，可以在Web端显示三维模型。
在这几个功能包中，rosbridge_suite是最重要的，它是Web和ROS沟通的桥梁 。
1、首先下载功能包到主目录即可
因为是国外的github所以会下载不成功，多尝试几次。
git clone https://github.com/RobotWebTools/roslibjs.git git clone https://github.com/RobotWebTools/ros2djs git clone https://github.com/RobotWebTools/ros3djs
2、下载安装rosbridge工具
注意ros版本，本版本为noetic。
sudo apt-get install ros-noetic-rosbridge-suite
二、使用步骤
（一）、ROS部分
1.启动ROS核心
roscore
2.进入工作空间
cd ros_web
3.编译
catkin_make
4.source
source ./devel/setup.sh
5.启动仿真机器人
本文使用的机器人为古月居的仿真机器人，首先启动Gazebo仿真环境，然后再启动Rviz可视化工具。
roslaunch mbot_gazebo mbot_laser_nav_gazebo.launch
roslaunch mbot_navigation gmapping_demo.launch
（二）、网页部分
1.查本机IP
获取主机IP地址，并且在index.html以及main.js文件修改成主机的IP。
ifconfig
2.修改index.html以及main.js文件
查得本机IP之后，打开index.html以及main.js文件，并修改url，改成自己的主机的IP地址。
如下所示：
3.启动rosbridge websocket
在终端上启动launch文件
roslaunch rosbridge_server rosbridge_websocket.launch
4.使用浏览器打开index.html文件
在文件夹中，双击文件，便可自动在浏览器打开，然后输入对应的地址，点击连接。
总结
问题1：index.html中，一些源访问过慢，可以下载到本地上调用。
本项目已把需要的全下载了，但是注意文件路径要修改成自己的路径。
问题2：如果网页不正常显示，请按F12打开控制台排查问题。就如问题1所说，很多是因为js文件或者是css文件在网络上无法正常访问，所以需要下载到本地，但是要注意对应的文件路径！！！！！
参考网址：
①利用Websocket实现ROS与Web的交互
②制作简单的ROSWEB (2) -使用rosjs 进行栅格地图web端3d可视化
③rosweb使用，roslibs使用，ros2djs，ros3djs具体使用
④基于 ros2djs 的地图可视化
⑤ROS学习（28）Web GUI
本项目资源已上传
展望：下一章尝试用ros2djs实现2d可视化交互
