ToB企服应用市场:ToB评测及商务社交产业平台

标题: 利用Rosweb实现ros与网页交互（1） [打印本页]

作者: 北冰洋以北 时间: 2024-9-15 13:46
标题: 利用Rosweb实现ros与网页交互（1）
文章目录

利用Rosweb实现ros与网页交互（1）

媒介

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可视化交互

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)