Robotics UIは、ReactとROS 2 Ironを使用したROS 2搭載ロボットのWebインターフェイスソリューションです。
私たちのビジョンは、シンプルなJSONファイルを構成することにより、すべてのROS 2ロボットにWebインターフェイスを即座に追加できるソフトウェアを作成することです。

このツールは、ROS 2とReact Frontendの間の翻訳層として機能するPythonバックエンドの2つの部分で構成されています。これを達成するために、ROS 2メッセージをJSONとバックに翻訳しています。

フロントエンドでは、各ウィンドウがバックエンドからのJSONデータとインターフェイスする独自のマイクロプログラムであるウィンドウベースのデザインを使用します。これにより、プラグインスタイルのアプローチを採用し、ユーザーがダッシュボードをカスタマイズできるようになります。目標は、ユーザーが独自のカスタムプラグインを作成することです。
また、よりコンパクトなデザインを備えた電話サポートもあります。

使用するROS 2鉄のセットアップ
ROS 2パッケージを使用するには、次のパッケージをインストールする必要があります。
セットアップROS
export ROS_DISTRO=ironFastapiをセットアップします
sudo apt install python3-pip
pip install fastapi
pip install uvicorn その他の依存関係
pip install pyyamlNVMをインストールします
sudo apt update
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
nvm install nodeROS 2ワークスペースSRCフォルダーに移動し、パッケージをダウンロードします
cd ~ /ros2_ws/src
git clone https://github.com/sciotaio/robotics-ui.gitワークスペースフォルダーに移動し、 ros2_webinterfaceパッケージをインストールします
cd ~ /ros2_ws
colcon build --packages-select ros2_webinterface && source install/setup.bashReactプロジェクトフォルダーに移動します
cd ~ /ros2_ws/src/robotics-web/react/robotics_ui/npmに依存関係をインストールします
npm install # test launch
ros2 launch ros2_webinterface test.launch.py
# main launch (only the webinterface)
ros2 launch ros2_webinterface webinterface.launch.py
# waypoint_manager launch (Backend for the OpenStreetMap Plugin)
ros2 launch ros2_webinterface waypoint_manager.launch.py cd ~ /ros2_ws/src/robotics-web/react/robotics_ui/
npm startTODO:ホストとプロキシの設定を変更する方法とバックエンドアドレスを変更する方法を説明する
ユーザーガイドでは、プロジェクトでアプリケーションをカスタマイズする方法と使用方法について説明します。
このガイドでは、JSON構成ファイルを作成および構成してカスタムダッシュボードを作成する方法について説明します。
フロントエンドを起動して、Webブラウザで開きます(デフォルトアドレスhttp:// localhost:3000/)
次のページを開く必要があります。

セクションJSONエディターに移動します。
JSONエディターには、複数のオプションがあります。

JSON構成ファイルまたはダッシュボードリンクをアップロードできます。
ダッシュボードリンクには、リンクパラメーターとしての構成JSONが含まれます。例えば: http:// localhost:3000/dashboard/settings?component = [{"id": "stringtopic"、 "state":false、 "render_type": "string"、 "position":{"x":0、 "y":0}、 "サイズ": {"width":200、 "height":200}、 "topic":[{"name": "topic1"、 "topic": "/topic1"、 "type": "string"、 "route": "/subscriber/topic1"}]}]&preset_list =未定義
リンクJSONを適用するには、[リンクJSONを適用]ボタンをクリックします。
または、「Default Link JSONの適用」ボタンを使用して、事前に保存されたデモリンクを選択できます。
JSONファイルを構成するには、Webフォームを使用できます。
はじめに、簡単なコンポーネントを追加しましょう。




私たちの場合、文字列レンダリングタイプには、事前に設定されたトピックが付いています。
次に、コンポーネントのトピックを構成する必要があります。トピックは、BackendにAPI呼び出しを行うために必要な情報をフロントエンドに提供し、それぞれに4つのプロパティがあります。
トピックの数と順序は、使用しているプラグインのタイプで定義されているため、その情報についてはプラグインドキュメントを参照してください。
トピックを削除または追加する場合は、「トピックを追加」または「トピックを削除する」ボタンを使用できます。
構成を使用するには、複数のオプションがあります。
「JSONの生成」ボタンを使用すると、JSONファイルをDEVツールコンソールに印刷できます。
「JSONのダウンロード」ボタンを使用すると、JSONファイルをダウンロードできます。
[JSONを使用]ボタンを使用すると、設定された設定でダッシュボードを直接開くことができます。
将来、まったく同じダッシュボードにアクセスする場合は、リンクセクションのリンクをコピーするだけです。
バックエンドでカスタム構成ファイルを使用するには、これをカスタム起動ファイルのプロパティとして設定する必要があります。
発売ファイルの例は、次のように見える可能性があります。
import os
from launch import LaunchDescription
from launch_ros . actions import Node
from launch . actions import IncludeLaunchDescription
from launch . launch_description_sources import PythonLaunchDescriptionSource
from ament_index_python . packages import get_package_share_directory
def generate_launch_description ():
share_dir = get_package_share_directory ( 'ros2_webinterface' )
launch_dir = os . path . join ( share_dir , 'launch' )
webinterface = IncludeLaunchDescription (
PythonLaunchDescriptionSource (
os . path . join ( launch_dir , 'webinterface.launch.py' )
),
launch_arguments = {
"yaml_config" : "topic_list.yaml" , # Name of the YAML config
file
"json_config" : "topic_list.json" , # Name of the JSON config file
"config_folder" : 'default' , # Path to the folder
# or 'default' to use the
# standard config folder
}. items (),
)
ld = LaunchDescription ()
ld . add_action ( webinterface )
return ldYAMLファイルは空にすることができます。起動時に正しい構成で自動的に上書きされます。
プラグインを使用すると、ダッシュボードをさらにカスタマイズできます。
このアプリには現在、3つの異なるプラグインが付属しています。

ストリートマッププラグインガイドを開きます
Open Street Map Centerを使用すると、マップ上でロボットを追跡し、簡単なクリックでGPSウェイポイントの手順を送信できます。
また、センターボタンとウェイポイントを削除および設定することでロボットに集中することもできます。

このプラグインを使用すると、着信JSONデータを単純に表示できます。
プラグインの提案をお送りください。
プラグインのインストールと構成の方法についてガイドします。
プラグインガイド
std_msgs.msg
sensor_msgs.msg
std_msgs.msg
将来の更新に登場するその他の形式。