はじめに
ROSのUIを考える上で、ジョイスティック等ではなく、Webブラウザから操作することによって、ボタンやレイアウトのカスタムが自由自在など、様々なメリットがあります。
Robot Web Toolsというサイトには、ROSをWeb上で操作するDEMOやパッケージ等がまとめられています。
roswwwとrosbridge-suiteのインストール
ROSをWebブラウザから操作するために、2つパッケージをインストールします。
roswwwによって簡単なWebサーバーを実現できます。さらに、JavaScriptでROSトピックをPub&Subするため、rosbridgeパッケージを使用します。
git clone https://github.com/tork-a/roswww.git
sudo apt-get install ros-melodic-rosbridge-suite
$ roslaunch rosbridge_server rosbridge_websocket.launch
$ roslaunch roswww roswww.launchこの状態で、http://localhost:8085/にアクセスすると、インストール済みのパッケージの一覧が表示されます。roswwwパッケージのwwwディレクトリ下にあるhtmlファイルも読み込まれているため、URLスラッグを指定することでアクセスが可能です。
サンプルHTMLファイルの作成
今回は、試しにcmd_velをPublishするスクリプトを書いて実行します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script src="https://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
<script>
// Connecting to ROS
// -----------------
var ros = new ROSLIB.Ros();
// Create a connection to the rosbridge WebSocket server.
ros.connect('ws://localhost:9090');
//Subscribing to a Topic
//----------------------
// We first create a Topic object with details of the topic's name
// and message type. Note that we can call publish or subscribe on the same topic object.
var cmd_vel = new ROSLIB.Topic({
ros : ros,
name : '/cmd_vel',
messageType : 'geometry_msgs/Twist'
});
var twist = new ROSLIB.Message({
linear : {
x : 0.5,
y : 0.0,
z : 0.0
},
angular : {
x : 0.0,
y : 0.0,
z : 0.5
}
});
var index = 0;
$(document).ready(function () {
$("#button").click(function() {
var string = new ROSLIB.Message({
data : "Hello World " + index
});
index += 1;
cmd_vel.publish(twist);
console.log("publishing..." + string.data);
$(this).button('reset');
});
});
</script>
</head>
<body>
<h1></h1>
<div id="modal" class="container">
<div class="panel panel-default">
<div class="panel-heading">
Simple roslib Example (talker)
</div>
<div class="panel-body">
<p>Run the following commands in the terminal.</p>
<ul>
<li><tt>rostopic echo /chatter</tt></li>
</ul>
<p> If it not working well , check the JavaScript console for the
output or Shift+F5 to reload without Cache.</p>
<button type="button" id="button" data-publishing-text="Publishing..." class="btn btn-default" autocomplete="off" >Push this button to publish /chatter topic</button>
</div>
</div>
</body>
</html>
roswwwを実行した状態で、http://localhost:8085/roswww/cmd_vel.htmlにアクセスすると、ブラウザ上のボタンから、cmd_velをPublishできます。
参考にさせて頂いたリンク
https://github.com/tork-a/roswww/blob/develop/doc/index.rst#installation
https://symfoware.blog.fc2.com/blog-entry-2292.html