はじめに
vueでroslibjsを使ってrosと通信する方法を記載します．
使用環境は以下の通りです．
Ubuntu 20.04
ROS noetic
Vue 3.0
準備
まずはvuecliをインストールし,vueプロジェクトを作成します．
vueプロジェクトを作成したら,まずROSとの通信に使用するroslibをインストールします
npm install roslib
あとはsrc/App.vueを以降の記事内用に記載しているサンプルに置き換えます．
また，roslaunch rosbridge_server rosbridge_websocket.launchも同時に実行します．
サンプル
1.ベースプログラム
rosbridgeとのコネクションをするだけのコードです.今後記載するサンプルのベースプログラムとなります.
src/App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import ROSLIB from "roslib" // 追加
import HelloWorld from './components/HelloWorld.vue'
// *** 追加 ここから *** //
const ros = new ROSLIB.Ros({
url: 'ws://localhost:9090'
});
// *** 追加 ここまで *** //
export default {
name: 'App',
components: {
HelloWorld
},
// *** 追加 ここから *** //
mounted() {
this.init();
},
methods: {
init: function () {
ros.on("connection", function() {
console.log("connected to websocket server.");
});
ros.on("error", function(error) {
console.log("error connecting to websocket server: ", error);
});
ros.on("close", function() {
console.log("connection to websocket server closed.");
});
},
// *** 追加 ここまで *** //
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
2.Publisher
ブラウザからPublishするサンプルプログラムです。
src/App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<p><button v-on:click="publish()">publish</button></p> <!-- 追加 -->
</template>
<script>
import ROSLIB from "roslib"
import HelloWorld from './components/HelloWorld.vue'
const ros = new ROSLIB.Ros({
url: 'ws://localhost:9090'
});
// *** 追加 ここから *** //
var cmdVel = new ROSLIB.Topic({
ros : ros,
name : '/cmd_vel',
messageType : 'geometry_msgs/Twist'
});
var twist = new ROSLIB.Message({
linear : {
x : 0.1,
y : 0.2,
z : 0.3
},
angular : {
x : -0.1,
y : -0.2,
z : -0.3
}
});
// *** 追加 ここまで *** //
export default {
name: 'App',
components: {
HelloWorld
},
mounted() {
this.init();
},
methods: {
init: function () {
ros.on("connection", function() {
console.log("connected to websocket server.");
});
ros.on("error", function(error) {
console.log("error connecting to websocket server: ", error);
});
ros.on("close", function() {
console.log("connection to websocket server closed.");
});
},
// *** 追加 ここから *** //
publish: function () {
cmdVel.publish(twist);
},
// *** 追加 ここまで *** //
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
実行の結果以下のようになり、ブラウザのボタンを押すと,/cmd_velがpublishされます
3.Subscriber
次はSubscriberのサンプルプログラムです。
src/App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<p>sub msg: {{ msg }} </p> <!-- 追加 -->
</template>
<script>
import ROSLIB from "roslib"
import HelloWorld from './components/HelloWorld.vue'
const ros = new ROSLIB.Ros({
url: 'ws://localhost:9090'
});
// *** 追加 ここから *** //
var sub = new ROSLIB.Topic({
ros: ros,
name: "/listener",
messageType: "std_msgs/String"
});
// *** 追加 ここまで *** //
export default {
name: 'App',
components: {
HelloWorld
},
// *** 追加 ここから *** //
data: function () {
return {
msg: "",
};
},
// *** 追加 ここまで *** //
mounted() {
this.init();
},
methods: {
init: function () {
ros.on("connection", function() {
console.log("connected to websocket server.");
});
ros.on("error", function(error) {
console.log("error connecting to websocket server: ", error);
});
ros.on("close", function() {
console.log("connection to websocket server closed.");
});
// *** 追加 ここから *** //
var self = this;
sub.subscribe(function(message) {
//console.log("callback",message);
self.msg = message;
});
// *** 追加 ここまで *** //
},
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
実行の結果以下のようになり、/listenerにデータを送るとブラウザに表示されます
4.Service Client
Service Clientのサンプルです。
src/Add.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<p><button v-on:click="call()">service call</button></p> <!-- 追加 -->
</template>
<script>
import ROSLIB from "roslib"
import HelloWorld from './components/HelloWorld.vue'
const ros = new ROSLIB.Ros({
url: 'ws://localhost:9090'
});
// *** 追加 ここから *** //
var addTwoIntsClient = new ROSLIB.Service({
ros : ros,
name : '/add_two_ints',
serviceType : 'rospy_tutorials/AddTwoInts'
});
var request = new ROSLIB.ServiceRequest({
a : 1,
b : 2
});
// *** 追加 ここまで *** //
export default {
name: 'App',
components: {
HelloWorld
},
mounted() {
this.init();
},
methods: {
init: function () {
ros.on("connection", function() {
console.log("connected to websocket server.");
});
ros.on("error", function(error) {
console.log("error connecting to websocket server: ", error);
});
ros.on("close", function() {
console.log("connection to websocket server closed.");
});
},
// *** 追加 ここから *** //
call: function () {
addTwoIntsClient.callService(request, function(result) {
console.log('Result for service call on ' + addTwoIntsClient.name + ': ' + result.sum);
});
},
// *** 追加 ここまで *** //
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
rospy_tutorialsのadd_two_serverを実行するとサービスのコールを確認できます。標準では入っていないと思うので別途インストールしてください。
4.最後に
vueでroslibjsを使ってrosと通信することができました．
5.参考
- スマホアプリでROSのUIを作る場合はFlutterがおすすめらしい(ロボットにスマホ乗せる場合とか良さそう)
- roslib JavaScriptでの使用方法