robotics ui
1.0.0
Robotics UI는 React 및 ROS 2 Iron을 사용하는 ROS 2 전원 로봇을위한 웹 인터페이스 솔루션입니다.
우리의 비전은 간단한 JSON 파일을 구성하여 모든 ROS 2 로봇에 즉시 웹 인터페이스를 추가 할 수있는 소프트웨어를 만드는 것입니다.
이 도구는 ROS 2와 React 프론트 엔드 사이의 번역 층 역할을하는 파이썬 백엔드의 두 부분으로 구성됩니다. 이를 달성하기 위해 ROS 2 메시지를 JSON과 뒤로 변환하고 있습니다.
Frontend에서는 각 창이 백엔드의 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 Workspace 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 구성 파일을 작성하고 구성하여 사용자 정의 대시 보드를 작성하는 방법을 설명합니다.
프론트 엔드를 시작하여 웹 브라우저에서 열어줍니다 (기본 주소 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}, "size": { "width": 200, "height": 200}, "topic": [{ "name": "topic1", "topic": "/topic1", "type": "string", "rout": "/subscriber/topic1"}]}] & preset_list = undefined
링크 JSON을 적용하려면 "링크 JSON 적용"버튼을 클릭 할 수 있습니다.
또는 "Default Link JSON Apply"버튼을 사용하여 사전 절약 된 데모 링크를 선택할 수 있습니다.
JSON 파일을 구성하려면 웹 양식을 사용할 수 있습니다.
소개대로 간단한 구성 요소를 추가합시다.
이 경우 문자열 렌더 유형에는 미리 구성된 주제가 제공됩니다.
다음으로 구성 요소의 주제를 구성해야합니다. 주제는 Frontend에 API 호출을 백엔드로 호출하는 데 필요한 정보를 제공하며 각각 4 개의 속성이 있습니다.
주제의 번호와 순서는 사용중인 플러그인 유형으로 정의되므로 해당 정보의 플러그인 문서를 참조하십시오.
주제를 삭제하거나 추가하려면 "주제 추가"또는 "주제 삭제"버튼을 사용할 수 있습니다.
구성을 사용하려면 여러 옵션이 있습니다.
"JSON 생성"버튼을 사용하면 JSON 파일을 개발 도구 콘솔에 인쇄 할 수 있습니다.
"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
향후 업데이트에서 더 많은 형식이 제공됩니다.
