[ROS]在Google地圖上即時顯示GPS 的軌跡(1/2) — 串接ROS和JavaScript

如題，目標是播放ROSbag，並接收ROSbag發布的訊息，在Google地圖上即時顯示GPS 的軌跡。要達到這點，要在JavaScript這端能接收到ROS的訊息，並更新軌跡，繪製在地圖上。

Google Map

一、 安裝

這裡使用rosbridge_suite的套件(http://wiki.ros.org/rosbridge_suite)來串接ROS與之後地圖API要使用的JavaScript。

$ sudo apt-get install ros-<rosdistro>-rosbridge-server

( 要記得選擇正確的ros版本。我一開始忘記在用Ubutnu 18.04還一直打kinetic… 還想說怎麼一直找不到這個套件 😅)

二、 測試

以下指令都在不同視窗開。

第一步先開啟rosbridge的部分

$ roslaunch rosbridge_server rosbridge_websocket.launch

成功執行 roslaunch rosbridge_server rosbridge_websocket.launch

從畫面中最後一行可以看到他用的是port 9090

之後開一個html檔，內容從roslibjs的Tutorial中複製，連結如下：http://wiki.ros.org/roslibjs/Tutorials/BasicRosFunctionality

我也把內容複製到gist去了

[embed]Basic ROS functionality with roslibjs : html file

之後打開瀏覽器並開啟console，如果有正確連接上，應該長的像這樣，右邊console的視窗第一行顯示的是 Connected to websocket server.。

Basic ROS functionality with roslibjs : successful connection

失敗的連線則像下面這張圖。可能的原因是rosbridge的程式沒在執行、port給錯等。

Basic ROS functionality with roslibjs : failed connection

這份html檔案比較複雜，我們在這裡只先簡單測試，在官方教程上還執行了下行指令，這裡先不理他。

$ rosrun rospy_tutorials add_two_ints_server

接下來測試一下功能

在這份檔案32~50行publish了一次message

32   var cmdVel = new ROSLIB.Topic({
33     ros : ros,
34     name : '/cmd_vel',
35     messageType : 'geometry_msgs/Twist'
36   });

38   var twist = new ROSLIB.Message({ 
39~ 49                               ...(message內容)... })

50   cmdVel.publish(twist);

所以我們在另一個terminal視窗輸入以下指令，並再開啟一次這個html檔

$ rostopic echo /cmd_vel

在terminal中會看到接收到JavaScript這端publish的訊息

linear:
  x: 0.1
  y: 0.2
  z: 0.3
angular:
  x: -0.1
  y: -0.2
  z: -0.3
---

接著來試試在JavaScript這端接收訊息。這部分在html檔案中的55~ 64行間。先是定義的欲接收的訊息名稱、內容，接著在定義接收時的callback function，印出訊息。

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   });

在terminal輸入以下指令來publish訊息

$ rostopic pub /listener std_msgs/String "Hello, World"

這裡發佈的是類型為 std_msgs/String 的訊息，topic是 /listener，而訊息內容是 Hello, World。結果如下：

Basic ROS functionality with roslibjs : subscribe

可以看到右側console的地方多了

Received message on /listener: Hello, World

在ROS這端發佈的訊息成功在JavaScript這端接收並印出來

接著回頭說明一下這整份檔案

Line 6, 7 引入了需要的JavaScript檔案，分別是EventEmitter2 和 roslibjs。

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>

接著，在Line 13~ 15，創建了一個ROS node的物件和 rosbridge server溝通，port 9090就是一開始開啟rosbridge時的預設port。

13   var ros = new ROSLIB.Ros({
14     url : 'ws://localhost:9090'
15   });

接下來的Line 17~ 19，我們對connection的個事件加了listener，用以觀察rosbridge server的連線狀況。

17   ros.on('connection', function() {
18     console.log('Connected to websocket server.');
19   });

常常我們也會注意 error 和 close 的event，寫在Line 21~ 23和25~ 27。

這篇連接ROS和non-ROS(JavaScript)就到這裡了，下一篇會和Google Map的API結合，播放ROSbag時同時在地圖上秀出軌跡。