WSL2の環境下において、Open-RMFを使って複数のturtlebot3を動かしてみた　ブラウザから指示編

# 1. はじめに
[先日の投稿](WSL2の環境下において、Open-RMFを使って複数のturtlebot3を動かしてみた　移動編)では、[[1]](#参考記事やサイト)の記事を参考に、Free Fleet ServerとOpen-RMFを接続し、turtlebot3をOpen-RMFを介して動かすことができました。今回は[[2]](#参考記事やサイト)の記事を参考にブラウザからturtlebot3に指示を出してみたいと思います。

# 2. 実行環境
- CPU: CORE i7 7th Gen
- メモリ: 32GB
- GPU: GeForce RTX 2070
- OSと構築した環境: Window11でWSL2にUbuntu20.04をインストールした環境
- ROS: ROS/ROS 2の混在環境で、ROSは Noetic, ROS 2はFoxy

# 3. ブラウザの設定
[[2]](#参考記事やサイト)の記事と同じように本記事でもWebアプリはOpen-RMF Demoパッケージのものを使います。

## 3.1 dashboard_config.jsonの作成
かなり我流のやり方ですが、どのようにしていったかを箇条書きにて示します。
- rmf_demos/rmf_demos_dashboard_resourcesのディレクトリにてofficeのフォルダーを見つけコピーします。
- rmf_demos/rmf_demos_dashboard_resourcesのディレクトリにて先ほどコピーしたofficeのフォルダーを「house」という名前で貼り付けます。
- タスクの開始・終了地点は、Traffic Editorで作成したものに変えることと使わないタスクは削除し、今回用のdashboard_config.jsonは以下のような内容にしました

```json:作成したdashboard_config.json
{
  "world_name" : "House World",  
  "valid_task": ["Loop"],
  "task": {
    "Delivery": {
    },
    "Loop": {
      "places": [
        "tb3_0_start",
        "tb3_1_start",
        "tb3_2_start",
        "goal0",
        "goal1",
        "goal2",
        "goal3",
        "goal4",
        "goal5",
        "goal6",
        "goal7",
        "goal8",
        "goal9",
        "goal10",
        "goal11",
        "goal12",
        "goal13",
        "goal14",
        "goal15",
        "goal16"
      ]
    },
    "Clean": {
    },
    "Station": {
    },
    "Patrol": {
    },
    "Charging": {
    }
  }
}
```
- 作成が完了したら以下のコマンドで再ビルドしました。
```
cd ~/Work/open-rmf/free_fleet/ros2
source install/setup.bash
colcon build --symlink-install
```
## 3.2 house.launchの設定変更
[先日の投稿](WSL2の環境下において、Open-RMFを使って複数のturtlebot3を動かしてみた　移動編)にて使用したoffice.launch.xmlを以下のように修正します。修正したところにはコメントを入れています。

```xml:修正したしたhouse.launch.xml
<?xml version='1.0' ?>

<launch>
  <arg name="use_sim_time" default="true"/>
  <arg name="failover_mode" default="false"/>

  <!-- Common launch -->
  <include file="$(find-pkg-share rmf_demos)/common.launch.xml">
    <arg name="use_sim_time" value="$(var use_sim_time)"/>
    <arg name="viz_config_file" value ="$(find-pkg-share rmf_demos)/include/house/house.rviz"/>
    <arg name="config_file" value="$(find-pkg-share rmf_demos_maps)/house/house.building.yaml"/>
    <arg name="dashboard_config_file" value="$(find-pkg-share rmf_demos_dashboard_resources)/house/dashboard_config.json"/><!--ここを先ほど作成したdashboard_config.jsonが保存されているところにする。 -->
  </include>

  <group>
    <let name="fleet_name" value="turtlebot3"/>
    <include file="$(find-pkg-share rmf_demos)/include/adapters/turtlebot3_adapter.launch.xml">
      <arg name="fleet_name" value="$(var fleet_name)"/>
      <arg name="use_sim_time" value="$(var use_sim_time)"/>
      <arg name="nav_graph_file" value="$(find-pkg-share rmf_demos_maps)/maps/house/nav_graphs/0.yaml" />
    </include>
    <include file="$(find-pkg-share rmf_fleet_adapter)/robot_state_aggregator.launch.xml">
      <arg name="robot_prefix" value="tb3_"/>
      <arg name="fleet_name" value="$(var fleet_name)"/>
      <arg name="use_sim_time" value="$(var use_sim_time)"/>
      <arg name="failover_mode" value="$(var failover_mode)"/>
    </include>
  </group>

</launch>
```

# 4. 実行
実行の手順は[[1]](#参考記事やサイト)の記事の「実行手順」と同じように以下のコマンドを順次実行します。
```:terminal(1)
cd ~/Work/open-rmf/free_fleet/ros1
source install/setup.bash
export TURTLEBOT3_MODEL=burger; roslaunch ff_examples_ros1 multi_turtlebot3_ff.launch
```
```:terminal(2)
cd ~/Work/open-rmf/free_fleet/ros2
source install/setup.bash
ros2 launch ff_examples_ros2 turtlebot3_world_ff_server.launch.xml
```
```:terminal(3)
cd ~/Work/open-rmf/free_fleet/ros1_bridge_ws
source /opt/ros/noetic/setup.bash
source /opt/ros/foxy/setup.bash
source install/setup.bash
ros2 run ros1_bridge dynamic_bridge
```
```:terminal(4)
cd ~/Work/open-rmf/free_fleet/ros2
source install/setup.bash
ros2 launch rmf_demos house.launch.xml
```

そして以下のコマンドでブラウザを開きます。
```:terminal(5)
firefox https://open-rmf.github.io/rmf-panel-js/
```
[[2]](#参考記事やサイト)の記事ではgoogle chromeを使われていますが、私はfire foxにしました（インストール方法は[[3]](#参考記事やサイト)の記事を参照）。

そうしますとfire foxで以下の画面が開きます。

![初期画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581920/16391cd5-d705-2637-a1b7-2ad0b1d46666.png)

次に「Robots」という項目の下にあるREFRESHを押しますと、以下のようにロボットの状態が表示されます。（本記事ではブラウザからturtlebot3に指示を出して移動させることを目的としているので、バッテリーの状態を確認するためのpluginなども入れてませんので、すべて0%になっています。）
![ロボットの状態.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581920/db5a0e1f-a9cc-032d-ff1d-60f2b7862af6.png)

そして次のように各項目を入力してブラウザからturtlebot3へ指示を出します。
![移動指示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581920/bbcd0f8d-c9ae-e488-6d0d-440f42397a31.png)
そうしたところ、以下の図のようにturtlebot3が動き始めました。
![ブラウザからの移動指示確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581920/78b3aab0-f941-af14-cc53-23fd8c8e342e.png)

# 5. まとめ
　WSL2の環境でもFree Fleet ServerとOpen-RMFを接続し、かつブラウザから指示を出し複数のturtlebot3を動かすことができたと考えられます。
　ここまで環境構築編、現在地取得編、移動編、ブラウザから指示編とやってきましたが、課題の解消などに対応していく中で、Open-RMFについてかなり勉強になりました。そしてOpen-RMFで他にも色々とやってみたいなという思いが強くなりました。
 　本記事にて「複数のturtlebot3を動かすこと」については一旦完了とし、今後はtraffice-editorを使って環境を構築してその中でロボットを動かすことや非ROS対応のロボットを動かすことにも取り組んでいきたいなと考えていますが、何をやるかは未定です。

# その他
以前の投稿で挙げた「rviz上で元の地図データが表示され、経路とのずれが目立ち見た目があまり良くない」という問題についても今回対応しました。方法としては単にhouse.building.yamlで読み込まれているpngファイルを削除しただけです。

# 参考サイト
[1][ロボット群制御：実践編 ～ ROS/ROS 2混在環境でOpen-RMFを使って複数のturtlebot3を動かしてみた](https://qiita.com/yoshi-ima/items/153fd05ef40955d03503)
[2][ロボット群制御：応用編 ～ Open-RMFを使って種類の違うロボットを動かしてみた](https://qiita.com/yoshi-ima/items/00919c8eff9c24d1b993)
[3][Firefox のインストール（Ubuntu 上）](https://www.kkaneko.jp/tools/ubuntu/firefox.html)