A interface do usuário do Robotics é uma solução de interface da Web para robôs alimentados por ROS 2 usando o React e o ROS 2.
Nossa visão é criar software que permita que você adicione instantaneamente uma interface da Web a todos os robôs ROS 2, configurando um arquivo JSON simples.

A ferramenta consiste em duas partes: um back -end do Python, que atua como uma camada de tradução entre o ROS 2 e o front -end do React. Para conseguir isso, estamos traduzindo mensagens Ros 2 em JSON e Voltar.

No front-end, usamos um design baseado em janela, onde cada janela é seu próprio micro-programa que interfina os dados JSON do back-end. Isso nos permite adotar uma abordagem no estilo de plug-in e para o usuário personalizar seu painel. O objetivo é que os usuários criem seus próprios plugins personalizados.
Há também suporte telefônico com um design mais compacto.

Configuração de ferro do ROS 2 que usamos
Para usar os pacotes ROS 2, você precisa instalar os seguintes pacotes:
Configure o ROS
export ROS_DISTRO=ironConfigure o FASTAPI
sudo apt install python3-pip
pip install fastapi
pip install uvicorn Outras dependências
pip install pyyamlInstale o NVM
sudo apt update
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
nvm install nodeNavegue até a pasta SRC do espaço de trabalho do ROS 2 e faça o download do pacote
cd ~ /ros2_ws/src
git clone https://github.com/sciotaio/robotics-ui.git Navegue até a pasta de espaço de trabalho e instale o pacote ros2_webinterface
cd ~ /ros2_ws
colcon build --packages-select ros2_webinterface && source install/setup.bashNavegue até a pasta do projeto React
cd ~ /ros2_ws/src/robotics-web/react/robotics_ui/Instale as dependências com 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: Explique como alterar as configurações do host e proxy e como alterar o endereço de back -end
O Guia do Usuário explica como personalizar o aplicativo e como usá -lo em seu projeto.
Este guia explica como criar e configurar o arquivo de configuração JSON para criar seu painel personalizado.
Inicie o front -end e abra -o em um navegador da web (endereço padrão http: // localhost: 3000/)
A página a seguir deve abrir:

Vá para a seção JSON Editor.
No editor JSON, você tem várias opções:

Você pode fazer upload de um arquivo de configuração JSON ou um link do painel.
Os links do painel incluem o JSON de configuração como parâmetros de link. Por exemplo: http: // localhost: 3000/painel/configurações? componente = [{"id": "stringtopic", "estado": false, "render_type": "string", "position": {"x": 0, "y": 0}, tamanho ": {"Width": 200, "Height": 200}, "tópico": [{"nome": "tópico1", "tópico": "/tópico1", "type": "string", "rota": "/assinante/tópico1"}]}] & preset_list =
Para aplicar o link JSON, você pode clicar no botão "Aplicar link json".
Ou você pode usar o botão "Aplicar o link padrão JSON" para escolher o link de demonstração pré-salvo.
Para configurar o arquivo JSON, você pode usar o formulário da Web.
Como introdução, vamos adicionar um componente simples:




No nosso caso, o tipo de renderização de string vem com um tópico pré -configurado.
Em seguida, temos que configurar os tópicos do componente. Os tópicos dão ao front -end as informações necessárias para fazer chamadas de API para o back -end, e cada uma delas tem 4 propriedades:
O número e a ordem dos tópicos são definidos pelo tipo de plug -in que estamos usando, portanto, consulte a documentação do plug -in para essas informações.
Se queremos excluir ou adicionar tópicos, podemos usar os botões "Adicionar tópico" ou "excluir tópicos".
Para usar a configuração, temos várias opções:
Com o botão "Gereate JSON", podemos imprimir o arquivo JSON no console da ferramenta de desenvolvimento.
Com o botão "Download JSON", podemos baixar o arquivo json.
Com o botão "Use JSON", podemos abrir diretamente o painel com as configurações configuradas.
Se você deseja acessar o mesmo painel exato no futuro, também pode copiar o link na seção Link.
Para usar um arquivo de configuração personalizado no back -end, você deve definir isso como uma propriedade em seu arquivo de lançamento personalizado.
Um exemplo de arquivo de lançamento pode parecer algo assim:
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 ldO arquivo YAML pode estar vazio - é substituído automaticamente com a configuração correta no lançamento.
Os plugins permitem que você personalize seu painel ainda mais.
Atualmente, o aplicativo vem com 3 plugins diferentes.

Guia de plugin de mapa de rua aberto
O Open Street Map Center permite rastrear seu robô no mapa e enviar instruções do GPS Waypoint com um clique simples.
Você também pode centrar -se no robô com o botão central, além de excluir e definir waypoints.

Este plug -in permite que você simplesmente exiba os dados JSON recebidos.
Envie -nos suas sugestões para plugins.
Guia sobre como instalar e configurar plugins:
Guia do plug -in
std_msgs.msg
sensor_msgs.msg
std_msgs.msg
Mais formatos chegando em atualizações futuras.