roslibjsでブラウザにROS Topicの時系列グラフを描く #JavaScript

目的

　robotwebtoolsのroslibjsを使って、RosのTopicをWEBブラウザからグラフで表示する。
　スマホなどでも、ROSのTopicの時系列データを見ることができる。
　rviz/rqtが使えない環境でのデバックなどの活用が期待できる。
　
　グラフ作成には、smoothiecharts.jsを使う。

smoothiecharts.js： http://smoothiecharts.org/
Github: https://github.com/joewalnes/smoothie/

Install

まず、ROSの動作するPCに、
rosbridge-server、robot-pose-publisher をインストールする。

ROS Indigoの場合

$ sudo apt-get install ros-indigo-rosbridge-server
$ sudo apt-get install ros-indigo-robot-pose-publisher

ROS Kineticの場合

$ sudo apt-get install ros-kinetic-rosbridge-server
$ sudo apt-get install ros-kinetic-robot-pose-publisher

apache2のインストール

Apache2(webサーバ)をインストールする。

sudo apt-get install apache2

launchファイルからのノード起動

rosbridge-server・robot-pose-publisher を起動する。
これと別にTopicを発行させておく。

<launch>
 <node pkg="robot_pose_publisher" type="robot_pose_publisher" name="robot_pose_publisher">
 </node>
 <include file="$(find rosbridge_server)/launch/rosbridge_websocket.launch" > 
   <arg name="port" value="9090"/>
 </include>
</launch>

RoslibjsからTopicをsubscribeし、smoothiecharts.jsに渡すHTMLを作成し、/var/www以下に配置する。

<html>
  <head>
   <script src="https://raw.githubusercontent.com/joewalnes/smoothie/master/smoothie.js"></script>
   <script src="http://cdn.robotwebtools.org/EaselJS/current/easeljs.min.js"></script>
   <script src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
   <script src="http://cdn.robotwebtools.org/roslibjs/current/roslib.js"></script>
   <script src="http://cdn.robotwebtools.org/ros2djs/current/ros2d.js"></script>

    <script type="text/javascript">
    var TimeLine1 = new TimeSeries();
    var value1 = '0.0';
    var ros = new ROSLIB.Ros({
    url : 'ws://127.0.0.1:9090'
    });

    var listener = new ROSLIB.Topic({
    ros : ros,
    name : '/teat_data',
    messageType : 'std_msgs/Float32'
    });

    listener.subscribe(function(message) {
    console.log('Received message on ' + listener.name + ': ' + message.data);
    value1=message.data;
    });

    setInterval(function() {
          TimeLine1.append(new Date().getTime(), value1);
        }, 50);

    function createTimeline() {
     var chart = new SmoothieChart();
     chart.addTimeSeries(TimeLine1, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 });
         chart.streamTo(document.getElementById("chart"), 500);
    }
    </script>

  </head>
  <body onload="createTimeline()" >
    <canvas id="chart" width="640" height="160"></canvas>
  </body>
</html>

参考

ROSのWebインタフェースを作る
 move_baseをWEBブラウザから操作する。

http://robotwebtools.org/
https://github.com/RobotWebTools