Webブラウザからgeometry_msgs/TwistをPublishする

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のソースはこちらです.