L'interface utilisateur de la robotique est une solution d'interface Web pour les robots alimentés ROS 2 à l'aide de React et ROS 2 Iron.
Notre vision est de créer un logiciel qui vous permet d'ajouter instantanément une interface Web à chaque robot ROS 2 en configurant un fichier JSON simple.

L'outil se compose de deux parties: un backend Python, qui agit comme une couche de traduction entre ROS 2 et le frontend React. Pour y parvenir, nous traduisons les messages ROS 2 en JSON et retour.

Dans le frontend, nous utilisons une conception basée sur une fenêtre où chaque fenêtre est son propre micro-programme interfaçant avec les données JSON du backend. Cela nous permet d'adopter une approche de style plugin et de personnaliser son tableau de bord. L'objectif est que les utilisateurs créent leurs propres plugins personnalisés.
Il y a également une prise en charge téléphonique avec un design plus compact.

Ros 2 Configuration du fer que nous utilisons
Pour utiliser les packages ROS 2, vous devez installer les packages suivants:
Configuration des ROS
export ROS_DISTRO=ironConfiguration de Fastapi
sudo apt install python3-pip
pip install fastapi
pip install uvicorn Autres dépendances
pip install pyyamlInstaller NVM
sudo apt update
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
nvm install nodeAccédez à votre dossier SRC Ros 2 Workspace et téléchargez le package
cd ~ /ros2_ws/src
git clone https://github.com/sciotaio/robotics-ui.git Accédez à votre dossier d'espace de travail et installez le package ros2_webinterface
cd ~ /ros2_ws
colcon build --packages-select ros2_webinterface && source install/setup.bashAccédez au dossier React Project
cd ~ /ros2_ws/src/robotics-web/react/robotics_ui/Installez les dépendances avec 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: Expliquez comment modifier les paramètres de l'hôte et de procuration et comment modifier l'adresse backend
Le guide de l'utilisateur explique comment personnaliser l'application et comment l'utiliser dans votre projet.
Ce guide explique comment créer et configurer le fichier de configuration JSON pour créer votre tableau de bord personnalisé.
Démarrez le frontend et ouvrez-le dans un navigateur Web (adresse par défaut http: // localhost: 3000 /)
La page suivante doit s'ouvrir:

Accédez à la section éditeur JSON.
Dans l'éditeur JSON, vous avez plusieurs options:

Vous pouvez télécharger un fichier de configuration JSON ou un lien de tableau de bord.
Les liens de tableau de bord incluent la configuration JSON comme paramètres de liaison. Par exemple: http: // localhost: 3000 / tableau de bord / paramètres? Component = [{"id": "stringTopic", "état": false, "render_type": "string", "position": {"x": 0, "y": 0}, "size": {"width": 200, "height": 200}, "topic": [{"name": "topic1", "topic": "/ topic1", "type": "string", "itinér
Pour appliquer le lien JSON, vous pouvez ensuite cliquer sur le bouton "Appliquer le lien JSON".
Ou vous pouvez utiliser le bouton "Appliquer le lien par défaut JSON" pour choisir le lien de démonstration pré-sauvé.
Pour configurer le fichier JSON, vous pouvez utiliser le formulaire Web.
En introduction, ajoutons un composant simple:




Dans notre cas, le type de rendu de chaîne est livré avec un sujet préconfiguré.
Ensuite, nous devons configurer les sujets du composant. Les sujets donnent au frontend les informations nécessaires pour passer des appels d'API au backend, et ils ont chacun 4 propriétés:
Le nombre et l'ordre des sujets sont définis par le type de plugin que nous utilisons, alors consultez la documentation du plugin pour ces informations.
Si nous souhaitons supprimer ou ajouter des sujets, nous pouvons utiliser les boutons "Ajouter un sujet" ou "Supprimer le sujet".
Pour utiliser la configuration, nous avons plusieurs options:
Avec le bouton "Générer JSON", nous pouvons imprimer le fichier JSON à la console de dev.
Avec le bouton "Télécharger JSON", nous pouvons télécharger le fichier JSON.
Avec le bouton "Utiliser JSON", nous pouvons ouvrir directement le tableau de bord avec les paramètres configurés.
Si vous souhaitez accéder au même tableau de bord exact à l'avenir, vous pouvez également copier le lien dans la section Lien.
Pour utiliser un fichier de configuration personnalisé dans le backend, vous devez le définir en tant que propriété dans votre fichier de lancement personnalisé.
Un exemple de fichier de lancement pourrait ressembler à ceci:
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 ldLe fichier YAML peut être vide - il est automatiquement écrasé avec la configuration correcte au lancement.
Les plugins vous permettent de personnaliser encore plus votre tableau de bord.
L'application est actuellement livrée avec 3 plugins différents.

Guide du plugin Open Street Map
L'Open Street Map Center vous permet de suivre votre robot sur la carte et d'envoyer des instructions GPS Waypoint en un simple clic.
Vous pouvez également centrer sur le robot avec le bouton central ainsi que supprimer et définir des points de cheminement.

Ce plugin vous permet d'afficher simplement les données JSON entrantes.
Veuillez nous envoyer vos suggestions pour les plugins.
Guide sur la façon d'installer et de configurer les plugins:
Guide du plugin
std_msgs.msg
sensor_msgs.msg
std_msgs.msg
Plus de formats à venir dans les futures mises à jour.