• ros与web的交互

    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" />
    6. <script type="text/javascript" src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
    7. <script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
    9. <script type="text/javascript" type="text/javascript">
    10. // Connecting to ROS
    11. var ros = new ROSLIB.Ros({
    12. url : 'ws://localhost:9090'
    13. });
    15. //判断是否连接成功并输出相应的提示消息到web控制台
    16. ros.on('connection', function() {
    17. console.log('Connected to websocket server.');
    18. });
    20. ros.on('error', function(error) {
    21. console.log('Error connecting to websocket server: ', error);
    22. });
    24. ros.on('close', function() {
    25. console.log('Connection to websocket server closed.');
    26. });
    28. // Publishing a Topic
    29. var cmdVel = new ROSLIB.Topic({
    30. ros : ros,
    31. name : '/cmd_vel',
    32. messageType : 'geometry_msgs/Twist'
    33. });//创建一个topic,它的名字是'/cmd_vel',,消息类型是'geometry_msgs/Twist'
    35. var twist = new ROSLIB.Message({
    36. linear : {
    37. x : 0.1,
    38. y : 0.2,
    39. z : 0.3
    40. },
    41. angular : {
    42. x : -0.1,
    43. y : -0.2,
    44. z : -0.3
    45. }
    46. });//创建一个message
    48. function func()//在点击”Publish”按钮后发布消息，并对消息进行更改
    49. {
    50. cmdVel.publish(twist);//发布twist消息
    51. twist.linear.x = twist.linear.x + 0.1;
    52. twist.linear.y = twist.linear.y + 0.1;
    53. twist.linear.z = twist.linear.z + 0.1;
    54. twist.angular.x = twist.angular.x + 0.1;
    55. twist.angular.y = twist.angular.y + 0.1;
    56. twist.angular.z = twist.angular.z + 0.1;
    57. }
    59. // Subscribing to a Topic
    60. var listener = new ROSLIB.Topic({
    61. ros : ros,
    62. name : '/chatter',
    63. messageType : 'std_msgs/String'
    64. });//创建一个topic,它的名字是'/chatter',,消息类型是'std_msgs/String'
    66. function subscribe()//在点击”Subscribe”按钮后订阅'/chatter'的消息，并将其显示到网页中
    67. {
    68. listener.subscribe(function(message) {
    69. document.getElementById("output").innerHTML = ('Received message on ' + listener.name + ': ' + message.data);
    70. });
    71. }
    73. function unsubscribe()//在点击”Unsubscribe”按钮后取消订阅'/chatter'的消息
    74. {
    75. listener.unsubscribe();
    76. }
    78. </script>
    79. </head>
    81. <body>
    82. <h1>Simple roslib Example</h1>
    83. <p>Check your Web Console for output.</p>
    84. <p id = "output"></p>
    85. <button onclick = "func()">Publish</button>
    86. <button onclick = "subscribe()">Subscribe</button>
    87. <button onclick = "unsubscribe()">Unsubscribe</button><br />
    88. </body>
    89. </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
  • 相关阅读:
    Mat类具体解释（二）
    Android NDK开发篇(六)：Java与原生代码通信(异常处理)
    Redis源代码剖析--对象object
    NioEventLoopGroup源码分析与线程设定
    零拷贝剖析以及用户空间与内核空间切换
    Java 字符集编码
    NIO网络编程
    NIO网络访问模式实践
    Spring Boot使用Html
    内存映射文件MappedByteBuffer和Buffer的Scattering与Gathering
  • 原文地址：https://www.cnblogs.com/yang220/p/12491226.html
Copyright © 2020-2023  润新知