signed

QiShunwang

“诚信为本、客户至上”

ROS与Web交互控制显示

2021/6/3 16:39:52   来源:

环境配置

每次机器人建图都需要使用远程软件到机器人上进行建图、定位。真是太烦了ing。所以准备搞一个web界面控制机器,并在web上显示点云地图。先上自己做的index.html连接:

git clone https://gitee.com/NovaWu/ros_web.git

ros机器人建图的一些接口,使用system()函数进行roslaunch和rosnode kill一些节点。

git clone https://gitee.com/NovaWu/robot_api.git

1.安装rosbridge:

sudo apt-get install ros-melodic-rosbridge-suite

2.获取相关JavaScript库:

git clone https://github.com/RobotWebTools/roslibjs.git
git clone https://github.com/RobotWebTools/ros2djs.git
git clone https://github.com/RobotWebTools/ros3djs.git
git clone https://github.com/rctoris/mjpegcanvasjs.git

3.3D可视化效果:

需要用到3D可视化效果,那么还需要安装tf2_web_republisher,tf2_web_republisher的作用是计算TF数据并通过rosbridge_server发给ros3djs client(ROSLIB.TFClient 实例),ROSLIB.TFClient对象订阅来自tf2_web_republisher的TF数据并更新ROS3D.Viewer对象,ROS3D.Viewer对象将URDF model在浏览器里可视化。

sudo apt install ros-melodic-tf2-web-republisher

4.模拟视频监控:

git clone https://github.com/RobotWebTools/web_video_server.git

由于我使用的是Intel d455深度相机的视频数据流,所以需要新建一个launch文件:

<launch>
  <node pkg="web_video_server" type="web_video_server" name="web_video_server_1" output="screen">
    <param name="port" type="int" value="8080" />
    <param name="address" type="string" value="127.0.0.1" />
    <param name="server_threads" type="int" value="1" />
    <param name="ros_threads" type="string" value="2" />
    <param name="width" type="int" value="640" />
    <param name="height" type="int" value="480" />
    <param name="quality" type="int" value="30" />
  </node>
</launch>

此处有一个问题是在远端不能显示视频数据,不知道此处的ip要改成什么,是不是只能对应的ip才能看到数据,有了解的大佬可以安利我一下。

5.需安装个http sever,比如安装apache,下面是安装apache2并启动:

sudo apt-get install apache2

启动apache2

systemctl restart apache2.service

6.将机器人作为服务器

拷贝demo目录(ros_web)到apache下并访问它:

cp -rf ros_web /var/www/html

在其他电脑上的浏览器输入

http://192.168.1.172/ros_web/html/index.html

7.启动

roscore
roslaunch web_video_server web_video.launch
rosrun tf2_web_republisher tf2_web_republisher
roslaunch rosbridge_server rosbridge_websocket.launch

效果图(界面很丑,勿喷~~~~):
在这里插入图片描述