開發ROS相關的web應用 - rosbridge
阿新 • • 發佈：2021-12-14
本文介紹rosbridge並介紹如何開發基於angular的ROS專案
1. rosbridge 介紹
Rosbridge提供了ROS的前端介面，使用者可以呼叫Javascript開發相關功能。
安裝rosbridge:
sudo apt-get install ros-<rosdistro>-rosbridge-server
開啟rosbridge服務：
roslaunch rosbridge_server rosbridge_websocket.launch
rosbridge protocol
rosbridge協議是一個用於向ROS(以及理論上的任何其他機器人中介軟體)傳送基於JSON的命令的規範。
該規範是程式語言和傳輸無關的。其思想是，任何能夠傳送JSON的語言或傳輸都可以使用rosbridge協議並與ROS進行互動。該協議涵蓋訂閱和釋出主題、服務呼叫、獲取和設定引數，甚至壓縮訊息等等。
{ "op": "subscribe",
"topic": "/cmd_vel",
"type": "geometry_msgs/Twist"
}
2. 開發ROS-web應用的API
http://robotwebtools.org/這個網站上提供了很多庫可以用來開發和ROS相關的Web應用。常用的roslib, ros2d等等，要注意這些庫並不是特別穩定。。。
下面這個例子是一個簡單的roslib用例：
首先起一個turtlesim:
rosrun turtlesim turtlesim_node
新建一個html如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 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> 8 9 <script type="text/javascript" type="text/javascript"> 10 // Connecting to ROS 11 // ----------------- 12 13 var ros = new ROSLIB.Ros({ 14 url : 'ws://localhost:9090' 15 }); 16 17 ros.on('connection', function() { 18 console.log('Connected to websocket server.'); 19 }); 20 21 ros.on('error', function(error) { 22 console.log('Error connecting to websocket server: ', error); 23 }); 24 25 ros.on('close', function() { 26 console.log('Connection to websocket server closed.'); 27 }); 28 29 // Publishing a Topic 30 // ------------------ 31 32 var cmdVel = new ROSLIB.Topic({ 33 ros : ros, 34 name : '/turtle1/cmd_vel', 35 messageType : 'geometry_msgs/Twist' 36 }); 37 38 var twist = new ROSLIB.Message({ 39 linear : { 40 x : 0.1, 41 y : 0.2, 42 z : 0.3 43 }, 44 angular : { 45 x : -0.1, 46 y : -0.2, 47 z : -0.3 48 } 49 }); 50 cmdVel.publish(twist); 51 52 // Subscribing to a Topic 53 // ---------------------- 54 55 var listener = new ROSLIB.Topic({ 56 ros : ros, 57 name : '/listener', 58 messageType : 'std_msgs/String' 59 }); 60 61 listener.subscribe(function(message) { 62 console.log('Received message on ' + listener.name + ': ' + message.data); 63 listener.unsubscribe(); 64 }); 65 66 // Calling a service 67 // ----------------- 68 69 var addTwoIntsClient = new ROSLIB.Service({ 70 ros : ros, 71 name : '/add_two_ints', 72 serviceType : 'rospy_tutorials/AddTwoInts' 73 }); 74 75 var request = new ROSLIB.ServiceRequest({ 76 a : 1, 77 b : 2 78 }); 79 80 addTwoIntsClient.callService(request, function(result) { 81 console.log('Result for service call on ' 82 + addTwoIntsClient.name 83 + ': ' 84 + result.sum); 85 }); 86 87 // Getting and setting a param value 88 // --------------------------------- 89 90 ros.getParams(function(params) { 91 console.log(params); 92 }); 93 94 var maxVelX = new ROSLIB.Param({ 95 ros : ros, 96 name : 'max_vel_y' 97 }); 98 99 maxVelX.set(0.8); 100 maxVelX.get(function(value) { 101 console.log('MAX VAL: ' + value); 102 }); 103 </script> 104 </head> 105 106 <body> 107 <h1>Simple roslib Example</h1> 108 <p>Check your Web Console for output.</p> 109 </body> 110 </html>
執行，發現釋出的cmd_vel起作用了，烏龜移動
瀏覽器上可以看到Javascript的輸出：
3. 在Angular中開發rosbridge應用
由於roslibrary基本都是以Javascript中的庫為主，所以需要採取Angular中使用scripts的方法進行使用。
這裡提一下roslib含有typescript的版本，理論上可以直接使用，但是親測會產生錯誤：
安裝@types/roslib:
npm install @types/roslib --save
然後實現：
import * as ROSLIB from "roslib" var ros = new ROSLIB.Ros({url : 'ws://localhost:9090'});
但是會報錯，還不知道怎麼解決。。。
如何正確使用：
首先安裝JS版本的roslib
npm install roslib --save-dev
之後修改angular.json，在scripts中加入roslib js路徑：
使用時在typescript中需要首先宣告：
declare var ROSLIB: any;
之後就可以正常使用了，用下面的程式碼可以傳送訊息讓turtlesim移動：
1 publishRobotMove() { 2 var ros = new ROSLIB.Ros({url : 'ws://localhost:9090'}); 3 var cmdVel = new ROSLIB.Topic({ 4 ros : ros, 5 name : '/turtle1/cmd_vel', 6 messageType : 'geometry_msgs/Twist' 7 }); 8 9 var twist = new ROSLIB.Message({ 10 linear : { 11 x : 0.1, 12 y : 0.2, 13 z : 0.3 14 }, 15 angular : { 16 x : -0.1, 17 y : -0.2, 18 z : -0.3 19 } 20 }); 21 cmdVel.publish(twist); 22 }