rosbridge_suiteを使うことで,ウェブブラウザからトピックのPublish/Subscribeを行うことができます.
ただ,サンプルとして公開されているhtmlはstd_msgs/String
ばかり対象にしていたので,今回はturtle_simでおなじみのgeometry_msgs/Twist
をPublishする方法についてお話しします.
rosbridge_suiteの使い方についてはsrsがQiitaの方で詳しく解説してくれているのでこちらをご参照ください.
とは言うものの基本的なPublishの仕方はstd_msgs/String
の場合と同じです.
srsさんのweb_lecture/www/pub.html
の15行目以降のscript部分の以下のコードに置き換えればgeometry_msgs/Twist
をPublishすることができます.
<script type="text/javascript">
if (!Talker) {
console.log('Making ROS taker');
var Talker = {
ros: null,
name: "",
init: function() {
this.ros = new ROSLIB.Ros();
this.ros.on('error', function(error) {
document.getElementById('state').innerHTML = "Error";
});
this.ros.on('connection', function(error) {
document.getElementById('state').innerHTML = "Connect";
});
this.ros.on('close', function(error) {
document.getElementById('state').innerHTML = "Close";
});
this.ros.connect('ws://' + location.hostname + ':9090');
},
send: function(vx,gz) {
// if (document.getElementById("comment").value.length == 0) return;
// var comment = document.getElementById("comment").value;
var pub = new ROSLIB.Topic({
ros: this.ros,
name: 'turtle1/cmd_vel',
messageType: 'geometry_msgs/Twist'
});
// var vx = document.getElementById('vx').innerHTML
// var gz = document.getElementById('gz').innerHTML
var vel = new ROSLIB.Message({
linear:{
x:vx,
y:0,
z:0
},
angular:{
x:0,
y:0,
z:gz
}
});
pub.publish(vel);
// document.getElementById('cmd').innerHTML = comment;
// console.log(comment + 'is published. ');
// console.log('is publisded. ')
}
}
Talker.init();
window.onload = function() {
document.getElementById('camera_image').src = 'http://' + location.hostname + ':8080/stream?topic=/image_raw&type=ros_compressed'
console.log();
};
window.onunload = function() {
Talker.ros.close();
};
}
</script>
std_msgs/String
の場合はメンバ変数はdata
だけでしたが,geometry_msgs/Twist
の場合はlinear
とangular
の2つの子メッセージを持っています.さらにこの2つのメッセージはそれぞれx,y,z
のメンバ変数を持っています.
そのためメッセージを記述する部分が複雑になっており,比較すると次のようになっています.
var str = new ROSLIB.Message({data : comment});
var vel = new ROSLIB.Message({
linear:{ x:vx, y:0, z:0 },
angular:{ x:0, y:0, z:gz}
});
メッセージの定義の仕方はROSLIB.Message
にPythonの辞書型のような形で渡せばいいようなので,他のメッセージ型に対しても対応できそうです.
余談ですが,僕のタミヤカムロボットもTwist
を受信して動かすことができます.teleop.launch
の代わりにteleop_twist.launch
を実行してteleop_twist.html
にアクセスして貰えば動かすことができます.
teleop_twist.htmlのソースはこちらです.
コメント