ROS是现在应为最为广泛的机器人操作系统,为了将ROS与Web端的应用结合起来,ROS Web Tools社区开发了很多Web功能包,利用这些工具,我们能够在Web端实现对机器人的监测与控制。

 

1

 

工具的准备

首先介绍以下所需要的工具包:rosbridge_suite功能包,roslibjs,ros2djs,ros3djs。

● rosbridge_suite:实现Web浏览器与ROS之间的数据交互;

● roslibjs:实现了ROS中的部分功能,如Topic,Service,URDF等;

● ros2djs:提供了二维可视化的管理工具,可以用来在Web浏览器中显示二维地图;

● ros3djs:提供了三维可视化的管理工具,可以在Web端显示三维模型。

 

在这几个功能包中,rosbridge_suite是最重要的,它是Web和ROS沟通的桥梁,roslibjs也是必须的,它能实现ROS中最基本的功能,下面的例程就是用它来实现的,至于ros2djs和ros3djs是后期开发所需要的,对于新手来说可以暂时不用下载。它们的下载安装方法如下,在终端中分别输入以下指令:

  1. $ sudo apt-get install ros-kinetic-rosbridge-suite
  2. $ git clone https://github.com/RobotWebTools/roslibjs.git
  3. $ git clone https://github.com/RobotWebTools/ros2djs
  4. $ git clone https://github.com/RobotWebTools/ros3djs

 

在使用ROS Web的时候,我们首先要运行一个launch文件,便于Web端能够连接到ROS主机上,在终端中运行:

  1. $ roslaunch rosbridge_server rosbridge_websocket.launch

 

在运行了这个launch文件后,我们只需要在浏览器中打开我们设计的html文件就能够实现Web端与ROS的交互了。下面来看一个简单的example.html的例子。

 

例程代码及解释

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <script type="text/javascript" src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
  6. <script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
  7. <script type="text/javascript" type="text/javascript">
  8. // Connecting to ROS
  9. var ros = new ROSLIB.Ros({
  10. url : 'ws://localhost:9090'
  11. });
  12. //判断是否连接成功并输出相应的提示消息到web控制台
  13. ros.on('connection', function() {
  14. console.log('Connected to websocket server.');
  15. });
  16. ros.on('error', function(error) {
  17. console.log('Error connecting to websocket server: ', error);
  18. });
  19. ros.on('close', function() {
  20. console.log('Connection to websocket server closed.');
  21. });
  22. // Publishing a Topic
  23. var cmdVel = new ROSLIB.Topic({
  24. ros : ros,
  25. name : '/cmd_vel',
  26. messageType : 'geometry_msgs/Twist'
  27. });//创建一个topic,它的名字是'/cmd_vel',,消息类型是'geometry_msgs/Twist'
  28. var twist = new ROSLIB.Message({
  29. linear : {
  30. x : 0.1,
  31. y : 0.2,
  32. z : 0.3
  33. },
  34. angular : {
  35. x : -0.1,
  36. y : -0.2,
  37. z : -0.3
  38. }
  39. });//创建一个message
  40. function func()//在点击”Publish”按钮后发布消息,并对消息进行更改
  41. {
  42. cmdVel.publish(twist);//发布twist消息
  43. twist.linear.x = twist.linear.x + 0.1;
  44. twist.linear.y = twist.linear.y + 0.1;
  45. twist.linear.z = twist.linear.z + 0.1;
  46. twist.angular.x = twist.angular.x + 0.1;
  47. twist.angular.y = twist.angular.y + 0.1;
  48. twist.angular.z = twist.angular.z + 0.1;
  49. }
  50. // Subscribing to a Topic
  51. var listener = new ROSLIB.Topic({
  52. ros : ros,
  53. name : '/chatter',
  54. messageType : 'std_msgs/String'
  55. });//创建一个topic,它的名字是'/chatter',,消息类型是'std_msgs/String'
  56. function subscribe()//在点击”Subscribe”按钮后订阅'/chatter'的消息,并将其显示到网页中
  57. {
  58. listener.subscribe(function(message) {
  59. document.getElementById("output").innerHTML = ('Received message on ' + listener.name + ': ' + message.data);
  60. });
  61. }
  62. function unsubscribe()//在点击”Unsubscribe”按钮后取消订阅'/chatter'的消息
  63. {
  64. listener.unsubscribe();
  65. }
  66. </script>
  67. </head>
  68. <body>
  69. <h1>Simple roslib Example</h1>
  70. <p>Check your Web Console for output.</p>
  71. <p id = "output"></p>
  72. <button onclick = "func()">Publish</button>
  73. <button onclick = "subscribe()">Subscribe</button>
  74. <button onclick = "unsubscribe()">Unsubscribe</button><br />
  75. </body>
  76. </html>

 

关于html文件的具体语法和内容,在此处就不做过多的介绍了,我主要说明一下几个与ROS相关的配置。

  1.   var ros = new ROSLIB.Ros({
  2.     url : 'ws://localhost:9090'
  3.   });

 

 

这个代码段的作用是创建一个ROSLIB.ros对象,用于连接rosbridge服务器,如果rosbridge服务器位于本机,url的设置中可用localhost代表IP地址,否则需要修改为rosbridge服务器对应的IP地址。

  1.    var cmdVel = new ROSLIB.Topic({
  2.     ros : ros,
  3.     name : '/cmd_vel',
  4.     messageType : 'geometry_msgs/Twist'
  5.   });

 

 

这个代码段的作用是创建一个ROSLIB.Topic对象,用于在这个话题上发布或者订阅消息。

 

具体实现过程

首先,在新终端中运行:

  1. $roslaunch rosbridge_server rosbridge_websocket.launch

 

将出现以下界面:

2

 

接着,在新终端中运行:

  1. $rosrun  roscpp_tutorials  talker

 

将出现以下界面:

3

 

这一操作的目的是为了通过talker节点发布话题‘/chatter’的消息,便于在Web端进行该话题的订阅操作。

 

然后在浏览器中打开example.html文件,并打开Web控制台,将出现以下界面:

4

 

在控制台中,可以看到“Connected to websocket server”的提示信息,说明Web端与ROS端成功连接了起来。

 

在新终端中运行:

  1. $rostopic  echo  /cmd_vel

 

这一操作的目的是为了监控‘/cmd_vel’话题的消息。

 

点击几次网页中的Publish按钮,会看到此终端中出现如下的界面:

5

 

这说明Web端成功地发布了‘/cmd_vel’话题的消息。

 

在网页中点击Subscribe按钮,将会在网页中看到如下界面:

6

这说明Web端成功地订阅了talker节点发布的消息,然后点击Unsubscribe按钮,结束对于该话题的订阅操作。

 

我们也可以在新终端中运行rqt_graph命令,得到当前ROS系统中的计算图,类似于下图:

7

 

从该图中我们可以看出,rosbridge_websocket节点订阅了名为‘/chatter’的topic,发布了名为‘/cmd_vel’的topic。

 

以上就是整个example.html文件实现过程,该例程只实现了topic的订阅与发布,具体的实际应用将会涉及到更加复杂的情景,还需要我们去做更多的摸索。

 

拓展延伸:如何在其他移动的Web端实现与ROS的交互?

上面举的例子是ROS的master与Web端处于同一个主机的情形,那么如何使用更多移动端实现Web与ROS的交互也成了我们非常关心的问题,下面提供一种解决思路,目前该方法只能用于ios端,具体方法如下:

1.确保移动的Web端设备与ROS的master处在同一个局域网中,最简单的方法就是ROS master所在的电脑与Web的移动端连接同一个WIFI。

2.对html文件中的ROSLIB.ros对象进行初始化时,将localhost改为所在局域网中的IP地址,用点分十进制来表示。

3.打开终端并运行roslaunch bridge_server bridge_socket.launch,再在移动的Web端打开html文件,就能够实现移动的Web端与ROS的交互。

 

采用上述的方法将大大地扩展了ROS Web的使用范围,这也更有利于对于机器人状态的监测和调试,当然,此方法在andriod端还存在问题,需要进一步地完善,也希望和大家多多交流。

 

全文转载自:https://www.guyuehome.com/5386