rosbridge_suiteとReactでROS 2 Webアプリを作る
海洋ロボコンをやってた人です。
今回は以前から作りたかったROS 2 Webアプリ： ros2_robot_react_app をReactで作成したので、その備忘録として記載していきます。
まとめる理由は以下です。
- rosbridge_suite等、自分でWebアプリ作るときにすぐ確認したいため
- ROS 2のWebアプリ作成に関する情報が少ないため
- UIがないと、様々な業界のユーザーが使いにくいため
また、本記事に対するコメントも積極的に募集しますので、よろしくお願いいたします。
rosbridge_suiteとReactでROS 2 Webアプリを作る
ROS 2でWebアプリを作る際、JSON API を使用して rosbridge と通信できるrosbridge_suiteを使用します。
また、フロントエンドはクロスプラットホーム対応、Android, iOSなどのネイティブアプリ対応が可能で、英語圏においてはシェア率の高い「React」を使用していきます。
他に理由をあげると、単にReactの勉強をしたかったからというのもあります。
また、Reactは構成要素をそれぞれ独立したオブジェクトとして扱うコンポーネント指向で各オブジェクトが独立しているので保守性が高く、拡張性が高い利点もあります。
あとはPropsで要素をバケツリレーで渡せる点とか。
この辺りは、Reactの説明になるので省略しますが、いきなりReactとROS 2のアプリを作るのは初学者の自分にはハードルが高かったので、初めにJSで記述することにします。
その後、この記事を書く力が尽きない限りReactについても備忘録も兼ねて記述していきたいと思います。
必要なパッケージのインストール
- rosbridge_server
まずはrosbridge_severを立てるために以下をインストールします。
aptでHumbleでもインストールできます。
また起動は以下のlaunchで実行してください。
sudo apt update
sudo apt install -y ros-$ROS_DISTRO-rosbridge-suite
ros2 launch rosbridge_server rosbridge_websocket_launch.xml
- node.js
フロントエンド用に先にnode.jsとReactもインストールしておきます。
sudo apt install nodejs
nodejs -v
npm -v # もしなければ sudo apt install npm
node.jsでよく出てくるnpmとnpxの違いもメモ書き。
- npm とは？
Node.jsをインストールすると一緒にnpmもインストールされます。
node package managerの略です。
「npm install」とかよく見ますがnpmはNode.jsのパッケージ管理ツールで「npm init」で作成できるpackage.jsonに書いてあるパッケージの管理を「npm 〜」でします。
- npx とは？
node package executerの略でパッケージの実行ツールです。
npmとの違いはインストールされてないパッケージでも自動的に探してインストールして実行してインストールしたパッケージの削除をします。
- React
後述で使用するReactのパッケージ作成、起動、ライブラリのインストールは下記で行えます。
React appの作成
sudo npm i -g create-react-app
create-react-app ros2_robot_react_app
npm start
ライブラリのインストール
npm install roslib
npm install react-bootstrap bootstrap
npm install --save chart.js react-chartjs-2
npm install three @types/three @react-three/fiber
上記のインストールは、使用するライブラリに応じてで構いません。
こちらは自分が気になって使いたいものを抜粋しております。
HTML & JSでrosbridge_suiteとROS 2を繋げる
必要なパッケージ等インストールできたら、まずはHTMLとJSで記述したプログラムをrosbridge_suite経由でROS 2と通信して動作確認します。
適当なディレクトリにHTMLファイルもしくはJSファイルを準備し、WebアプリでROS 2のデータとやりとりするプログラムを作成していきます。
- /image_raw via ROS 2 web
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- <script src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script> -->
<!-- <script type="text/javascript" src="roslib.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/roslibjs/0.20.0/roslib.min.js"></script>
</head>
<body>
<p><img id="image_sub"/></p>
<hr/>
<p>Connection: <span id="status" style="font-weight: bold;">N/A</span></p>
<script>
// Create ros object to communicate over your Rosbridge connection
const ros = new ROSLIB.Ros({
url: 'ws://localhost:9090',
options: {
ros_domain_id: '89' // ROS_DOMAIN_IDを設定する
}
});
// When the Rosbridge server connects, fill the span with id "status" with "successful"
ros.on("connection", () => {
document.getElementById("status").innerHTML = "successful";
console.log('Connected to ROSBridge WebSocket server.');
});
// When the Rosbridge server experiences an error, fill the "status" span with the returned error
ros.on('error', function(error) {
console.log('Error connecting to ROSBridge WebSocket server: ', error);
});
// When the Rosbridge server shuts down, fill the "status" span with "closed"
ros.on('close', function() {
console.log('Connection to ROSBridge WebSocket server closed.');
});
var image = new ROSLIB.Topic({
ros : ros,
name : '/color/image_raw/compressed',
messageType : 'sensor_msgs/CompressedImage'
});
image.subscribe(function(message) {
console.log('Received image');
var data = "data:image/png;base64," + message.data;
document.getElementById('image_sub').setAttribute('src', data);
});
</script>
</body>
</html>
簡単な説明を書いておくと、HTML内のscriptタグ内で主にROS 2の処理が実行されます。
初めのrosの記述がある部分でブラウザのURL、ROS_DOMAIN_ID、ROSの接続状況を判断し接続します。
IPアドレスを指定する場合はlocalhost:9090の部分を192.168.11.3:9090のように変更してください。
const ros = new ROSLIB.Ros({
url: 'ws://localhost:9090',
options: {
ros_domain_id: '89' // ROS_DOMAIN_IDを設定する
}
});
***略***
ros.on('close', function() {
console.log('Connection to ROSBridge WebSocket server closed.');
});
上記の部分はrosconnect.jsという形でJSに分割し、HTML側で
<script type="text/javascript" src="rosconnect.js"></script>
などと呼び出すとコンポーネント化でき、わかりやすいと思います。
そして、ROSLIB.Topic以降でROSで送受信するデータの型、publish/subscribeを記述します。
JSでROSの画像イメージを受け取るとき、Base64形式の画像ファイルとして処理することに注意してください。
var image = new ROSLIB.Topic({
ros : ros,
name : '/color/image_raw/compressed',
messageType : 'sensor_msgs/CompressedImage'
});
image.subscribe(function(message) {
console.log('Received image');
var data = "data:image/png;base64," + message.data;
document.getElementById('image_sub').setAttribute('src', data);
});
他の部分は、ただのHTMLです。
roslibjsは、ディレクトリに直置きするか（Wi-Fiがつながらない環境だとこちらを推奨）
<script src="https://cdnjs.cloudflare.com/ajax/libs/roslibjs/0.20.0/roslib.min.js"></script>
という形でcdnjsよりjsのプログラウを読み込むかも選べます。
アプリケーションがWi-Fiと常に接続できる環境にあるかどうかで判断するとよいかと思います。
これのHTMLをそのままGoogle Chromeで表示し
ros2 launch rosbridge_server rosbridge_websocket_launch.xml
とrosbridgeを起動すると接続が完了し/color/image_raw/compressedのカメラ映像を表示することができます。
カメラの場合、subscribeするのはcompressedイメージであることに注意してください。
接続できると、以下のような形でROS/ROS 2のデータを可視化できます。
私はTB3 Gazeboのカメラ画像を入力させています。
. install/setup.bash
ros2 launch turtlebot3_gazebo turtlebot3_world.launch.py
- /cmd_vel via ROS 2 web
続いて、cmd_velのpublishも記述してみましょう。
rosの接続箇所（上記のcamera.html ROS接続の部分）は先程と変わらないので、それ以外の箇所を後述します。
const cmdVel = new ROSLIB.Topic({
ros: ros,
name: '/cmd_vel',
messageType: 'geometry_msgs/Twist'
});
const pad = document.getElementById('pad');
const handle = document.getElementById('handle');
let twist = new ROSLIB.Message({
linear: { x: 0, y: 0, z: 0 },
angular: { x: 0, y: 0, z: 0 }
});
let padRect = pad.getBoundingClientRect();
handle.addEventListener('mousedown', (e) => {
e.preventDefault();
document.addEventListener('mousemove', moveHandle);
document.addEventListener('mouseup', stopHandle);
});
function moveHandle(e) {
let x = e.clientX - padRect.left - handle.offsetWidth / 2;
let y = e.clientY - padRect.top - handle.offsetHeight / 2;
let r = (pad.offsetWidth - handle.offsetWidth) / 2;
let cx = r, cy = r;
let dist = Math.sqrt(Math.pow(x - cx, 2) + Math.pow(y - cy, 2));
if (dist > r) {
x = (x - cx) * r / dist + cx;
y = (y - cy) * r / dist + cy;
}
handle.style.left = x + 'px';
handle.style.top = y + 'px';
let nx = ((x - cx) / r);
let ny = ((cy - y) / r);
twist.linear.x = parseFloat(ny.toFixed(3));
twist.angular.z = -parseFloat(nx.toFixed(3));
cmdVel.publish(twist);
}
function stopHandle(e) {
document.removeEventListener('mousemove', moveHandle);
document.removeEventListener('mouseup', stopHandle);
handle.style.left = '125px';
handle.style.top = '125px';
twist.linear.x = 0;
twist.angular.z = 0;
cmdVel.publish(twist);
}
上記は、pad, handleの操作量に応じてhandleやtwistが変化するようになっており、
<body>
<h1>ROS Websocket Example</h1>
<p>Subscribing to topic: <code>/my_topic</code></p>
<p><code>/my_topic</code> messages received: <span id="messages" style="font-weight: bold;"></span></p>
<div id="pad" style="width: 300px; height: 300px; background-color: #eee;">
<div id="handle" style="width: 50px; height: 50px; background-color: #303030; position: relative; left: 125px; top: 125px; border-radius: 50%;"></div>
</div>
<script>
このbodyタグ内で指定したidと紐付いています。
実行すると以下のようになり、pad, handleを動かすとTB3など/cmd_velを受信して動作するロボットが動きます。
このようにROSと接続する記述を用いるだけで簡単にWebアプリとやり取りができるので、HTML、JSファイルに上記の処理をまとめると
のようなことができるようになります。
Reactでrosbridge_suiteとROS 2を繋げる
続いて、Reactでrosbridge_suiteROS 2をつなげる方法も書いていきます。
まずcreate-react-appでReact appを作成する場合、以下のファイルは不要なので削除等を行います。
-
App.jsのheaderタグ削除など削除
-
index.htmlの"favicon.ico"を変更し、アプリアイコンを変える
-
reportWebVitals.js, setupTests.js, App.test.js
-
index.htmlのインポート部分で削除した上記がインポートされないよう調整
また、コンポーネントを作成するときはrafce + Tabキーでコンポーネントの雛形を整形できます。
- RosConnection.js
では最初にsrc下にcomponentsフォルダを作成し、RosConnection.jsというコンポーネントを作成します。
import React, { useEffect } from 'react';
import ROSLIB from 'roslib';
const Rosconnection = ({ rosUrl, rosDomainId, setRos}) => {
useEffect(() => {
const ros = new ROSLIB.Ros({
url: rosUrl,
options: {
ros_domain_id: rosDomainId // ROS_DOMAIN_IDを設定する
}
});
ros.on("connection", () => {
setRos(ros);
document.getElementById("status").innerHTML = "successful";
console.log('Connected to ROSBridge WebSocket server.');
});
ros.on('error', function(error) {
console.log('Error connecting to ROSBridge WebSocket server: ', error);
});
ros.on('close', function() {
console.log('Connection to ROSBridge WebSocket server closed.');
});
return () => {
ros.close();
};
}, [rosUrl, rosDomainId, setRos]);
return (
<>
</>
);
}
export default Rosconnection;
上記のプログラムですが、ROSとの接続でReactの副作用フックuseEffectを使用しています。
useEffect(() => {
const ros = new ROSLIB.Ros({
url: rosUrl,
options: {
ros_domain_id: rosDomainId // ROS_DOMAIN_IDを設定する
}
});
// 略 //
return () => {
ros.close();
};
}, [rosUrl, rosDomainId, setRos]);
useEffectは、Reactがコンポーネントの状態の変更に合わせて自動的に処理を行ってくれることです。
そのため、ROSブリッジサーバーへの接続が成功したとき、エラーが発生したとき、およびサーバーが閉じたときに、適切な処理が行われるようになります。
今回は、依存配列に指定された変数（下記）が変更された場合に再度実行されるので、ROSブリッジのサーバーと再接続等ができます。
}, [rosUrl, rosDomainId, setRos]);
また、Reactを使用する場合は、roslib.jsを読み込むのではなく、npm installでインストールしたroslibjsをインポートして使用します。
- App.js
RosConnection.jsが作成できたら、ここで定義したrosの情報を各コンポーネントに渡せるようにメインとなるApp.jsを先に記述してきます。
import './App.css';
import React, { useState } from 'react';
import CameraData from './components/CameraData';
import Rosconnection from './components/RosConnection';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Row, Col } from 'react-bootstrap';
function App() {
const [ros, setRos] = useState(null);
return (
<>
{/* <Rosconnection rosUrl="ws://localhost:9090" rosDomainId="89"> */}
<Rosconnection rosUrl="ws://192.168.11.3:9090" rosDomainId="89" setRos={setRos} />
{ros &&
<>
<Row>
<Col>
<div className="d-flex justify-content-center align-items-center">
<CameraData ros={ros} />
</div>
</Col>
</Row>
</>
}
<hr/>
<h3>Connection: <span id="status">N/A</span></h3>
</>
);
}
export default App;
重複しますが、RosConnection.jsでrosの接続等の情報を取得しているので、このrosという変数をReactのステートフックuseStateで親のコンポーネントから子のコンポーネントへ値を渡します。
これをpropsを渡すとも言います。
const [ros, setRos] = useState(null);
上記の記述をメインのApp.jsに記述しておくことで、後述するROSのコンポーネントや追加するROSコンポーネントに共通してROSの情報を渡すことができます。
rosという変数は
<div className="d-flex justify-content-center align-items-center">
<CameraData ros={ros} />
</div>
という形で<コンポーネント名 変数名={props名} />という形で渡しています。
Cardのタグはreact-bootstrapの装飾なので、任意です。
- CameraData.js
ROS接続用のコンポーネントおよびrosのpropsの受け渡し部分を作成したので、カメラのコンポーネントも作成します。
import React, { useEffect, useState } from 'react';
import ROSLIB from 'roslib';
import Card from 'react-bootstrap/Card';
const CameraData = ({ros}) => {
const [imgData, setImgData] = useState('');
useEffect(() => {
if (!ros) {
return;
}
var image = new ROSLIB.Topic({
ros : ros,
name : '/color/image_raw/compressed',
messageType : 'sensor_msgs/CompressedImage'
});
image.subscribe(function(message) {
console.log('Received image');
const data = "data:image/png;base64," + message.data;
// const imgData = setAttribute('src', data);
setImgData(data);
});
}, [ros]);
return (
<>
<Card className="mb-4" style={{ width: '48rem' }}>
<Card.Body>
<Card.Title>Camera Image</Card.Title>
<Card.Subtitle className="mb-2 text-muted">subscribe image_raw</Card.Subtitle>
<Card.Text>
<img src={imgData} alt="Camera Data" />
</Card.Text>
</Card.Body>
</Card>
</>
);
}
export default CameraData
コンポーネントでrosの情報：propsを受け取るには
const CameraData = ({ros}) => {
という形で受け取ります。
また、ROSの情報をReactで扱うときは、値の受け渡しがしやすいようにuseStateで管理しています。
const [imgData, setImgData] = useState('');
あとは、普通のHTML、JSで記述するときとほとんど変わりません。
これらを駆使してReactでアプリケーションを作って動かすと、下記のようなアプリができます。
以上、rosbridge_suiteとReactでROS 2 Webアプリを作る方法を備忘録でまとめました。
ロボットアプリを作る方の参考になれば幸いです。
もし役に立った！という場合は「いいね」ボタンをいただけると励みになります。
ここまでご覧いただき、ありがとうございました。
Reference
--- rosbridge
Foxglove: Using Rosbridge with ROS 2
--- React app
--- Camera
Ros-image-node-form-mobile-phones-using-Roslibjs
--- React library
Discussion