Die Robotik -UI ist eine Webschnittstellenlösung für ROS 2 -betriebene Roboter mit React und ROS 2.
Unsere Vision ist es, Software zu erstellen, mit der Sie jedem ROS 2 -Roboter sofort eine Weboberfläche hinzufügen können, indem Sie eine einfache JSON -Datei konfigurieren.

Das Werkzeug besteht aus zwei Teilen: einem Python -Backend, das als Übersetzungsschicht zwischen ROS 2 und dem React -Frontend fungiert. Um dies zu erreichen, übersetzen wir ROS 2 -Nachrichten in JSON und Back.

In der Frontend verwenden wir ein Fensterbasis, bei dem jedes Fenster ein eigenes Micro-Programm mit den JSON-Daten aus dem Backend ist. Auf diese Weise können wir einen Plugin-Ansatz verfolgen und der Benutzer sein Dashboard anpassen. Das Ziel ist es, dass Benutzer eigene benutzerdefinierte Plugins erstellen.
Es gibt auch einen Telefonsupport mit einem kompakteren Design.

ROS 2 Iron Setup Wir verwenden
Um die ROS 2 -Pakete zu verwenden, müssen Sie die folgenden Pakete installieren:
ROS ROS einrichten
export ROS_DISTRO=ironSetup Fastapi
sudo apt install python3-pip
pip install fastapi
pip install uvicorn Andere Abhängigkeiten
pip install pyyamlNVM installieren
sudo apt update
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
nvm install nodeNavigieren Sie zu Ihrem ROS 2 -Arbeitsbereich SRC -Ordner und laden Sie das Paket herunter
cd ~ /ros2_ws/src
git clone https://github.com/sciotaio/robotics-ui.git Navigieren Sie zu Ihrem Arbeitsbereichsordner und installieren Sie das Paket ros2_webinterface
cd ~ /ros2_ws
colcon build --packages-select ros2_webinterface && source install/setup.bashNavigieren Sie zum React -Projektordner
cd ~ /ros2_ws/src/robotics-web/react/robotics_ui/Installieren Sie die Abhängigkeiten mit 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: Erklären Sie, wie Sie die Host- und Proxy -Einstellungen ändern und die Backend -Adresse ändern können
In der Benutzerhandbuch wird erläutert, wie Sie die Anwendung anpassen und wie Sie sie in Ihrem Projekt verwenden.
In diesem Handbuch wird erläutert, wie Sie die JSON -Konfigurationsdatei erstellen und konfigurieren, um Ihr benutzerdefiniertes Dashboard zu erstellen.
Starten Sie das Frontend und öffnen Sie sie in einem Webbrowser (Standardadresse http: // localhost: 3000/)
Die folgende Seite sollte sich öffnen:

Gehen Sie zum Abschnitt JSON -Editor.
Im JSON -Editor haben Sie mehrere Optionen:

Sie können entweder eine JSON -Konfigurationsdatei oder einen Dashboard -Link hochladen.
Das Dashboard -Links enthalten die Konfiguration JSON als Linkparameter. Zum Beispiel: http: // localhost: 3000/Dashboard/Einstellungen? component = [{"id": "StringTopic", "Status": false, "render_type": "String", "Position": {"x": 0, "y": 0}, "Größe": {"Breite": 200, "Höhe": 200}, "Thema": [{"name": "topic1", "topic": "/topic1", "type": "String", "Route": "/subscriber/topic1"}]}] & preset_list = undefiniert
Um den Link JSON anzuwenden, können Sie auf die Schaltfläche "Link JSON anwenden anwenden" klicken.
Oder Sie können die Schaltfläche "Standard-Link anwenden Link anwenden" verwenden, um den vorgespannten Demo-Link auszuwählen.
Um die JSON -Datei zu konfigurieren, können Sie das Webformular verwenden.
Als Einführung fügen wir eine einfache Komponente hinzu:




In unserem Fall wird der String -Render -Typ mit einem vorkonfigurierten Thema geliefert.
Als nächstes müssen wir die Themen der Komponente konfigurieren. Themen geben dem Frontend die Informationen, die für API -Anrufe zum Backend erforderlich sind, und sie haben jeweils 4 Eigenschaften:
Die Anzahl und Reihenfolge der Themen wird durch den von uns verwendeten Plugin -Typ definiert. Wenden Sie sich also an die Plugin -Dokumentation, um diese Informationen zu erhalten.
Wenn wir Themen löschen oder hinzufügen möchten, können wir die Schaltflächen "Thema hinzufügen" oder "Thema löschen" verwenden.
Um die Konfiguration zu verwenden, haben wir mehrere Optionen:
Mit der Schaltfläche "JSON generieren" können wir die JSON -Datei in die Dev -Tool -Konsole ausdrucken.
Mit der Schaltfläche "JSON herunterladen" können wir die JSON -Datei herunterladen.
Mit der Schaltfläche "JSON verwenden" können wir das Dashboard direkt mit den konfigurierten Einstellungen öffnen.
Wenn Sie in Zukunft auf das gleiche exakte Dashboard zugreifen möchten, können Sie den Link auch im Abschnitt Link kopieren.
Um eine benutzerdefinierte Konfigurationsdatei im Backend zu verwenden, müssen Sie diese als Eigenschaft in Ihrer benutzerdefinierten Startdatei festlegen.
Eine Beispiel -Startdatei könnte ungefähr so aussehen:
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 ldDie YAML -Datei kann leer sein - sie wird mit der richtigen Konfiguration beim Start automatisch überschrieben.
Mit Plugins können Sie Ihr Dashboard noch weiter anpassen.
Die App wird derzeit mit 3 verschiedenen Plugins geliefert.

Open Street Map Plugin Guide
Mit dem Open Street Map Center können Sie Ihren Roboter auf der Karte verfolgen und GPS -Waypoint -Anweisungen mit einem einfachen Klick senden.
Sie können sich auch mit der Mitte -Taste auf den Roboter konzentrieren sowie Wegpunkte löschen und festlegen.

Mit diesem Plugin können Sie einfach die eingehenden JSON -Daten anzeigen.
Bitte senden Sie uns Ihre Vorschläge für Plugins.
Leitfaden zum Installieren und Konfigurieren von Plugins:
Plugin Guide
std_msgs.msg
sensor_msgs.msg
std_msgs.msg
Weitere Formate in zukünftigen Updates.