Robotics UI هو حل واجهة الويب لروبوتات ROS 2 التي تعمل باستخدام React و ROS 2 Iron.
تتمثل رؤيتنا في إنشاء برنامج يتيح لك إضافة واجهة ويب على الفور إلى كل روبوت ROS 2 عن طريق تكوين ملف JSON بسيط.

تتكون الأداة من جزأين: الواجهة الخلفية Python ، والتي تعمل كطبقة ترجمة بين ROS 2 والواجهة الأمامية React. لتحقيق ذلك ، نترجم رسائل ROS 2 إلى JSON والعودة.

في الواجهة الأمامية ، نستخدم تصميمًا قائمًا على النافذة حيث يكون كل نافذة عبارة عن برنامج صغير خاص به مع بيانات JSON من الواجهة الخلفية. يتيح لنا ذلك اتباع نهج على غرار المكون الإضافي وللأمر لتخصيص لوحة القيادة الخاصة بهم. الهدف هو أن يقوم المستخدمون بإنشاء ملحقات مخصصة خاصة بهم.
هناك أيضًا دعم عبر الهاتف يتميز بتصميم أكثر إحكاما.

ROS 2 إعداد الحديد الذي نستخدمه
لاستخدام حزم ROS 2 ، تحتاج إلى تثبيت الحزم التالية:
إعداد ROS
export ROS_DISTRO=ironإعداد fastapi
sudo apt install python3-pip
pip install fastapi
pip install uvicorn تبعيات أخرى
pip install pyyamlتثبيت NVM
sudo apt update
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
nvm install nodeانتقل إلى مجلد ROS 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.bashانتقل إلى مجلد مشروع React
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 ، {"العرض": 200 ، "الارتفاع": 200} ، "الموضوع": [{"name": "topic1" ، "topic": "/topic1" ، "type": "string" ، "route":
لتطبيق الرابط JSON ، يمكنك بعد ذلك النقر فوق الزر "تطبيق الرابط JSON".
أو يمكنك استخدام زر "تطبيق الرابط الافتراضي JSON" لاختيار الرابط التجريبي مسبقًا.
لتكوين ملف JSON ، يمكنك استخدام نموذج الويب.
كمقدمة ، دعنا نضيف مكونًا بسيطًا:




في حالتنا ، يأتي نوع عرض السلسلة مع موضوع تم تكوينه مسبقًا.
بعد ذلك ، علينا تكوين موضوعات المكون. تمنح الموضوعات الواجهة الواجهة المعلومات اللازمة لإجراء مكالمات API إلى الواجهة الخلفية ، وكل منها لديه 4 خصائص:
يتم تعريف رقم وترتيب الموضوعات من خلال نوع المكون الإضافي الذي نستخدمه ، لذلك استشر وثائق البرنامج المساعد لتلك المعلومات.
إذا أردنا حذف أو إضافة موضوعات ، فيمكننا استخدام أزرار "إضافة الموضوع" أو "حذف الموضوع".
لاستخدام التكوين ، لدينا خيارات متعددة:
باستخدام زر "إنشاء JSON" ، يمكننا طباعة ملف JSON إلى وحدة التحكم Dev Tool.
باستخدام زر "تنزيل JSON" ، يمكننا تنزيل ملف JSON.
باستخدام زر "Use 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 ldيمكن أن يكون ملف YAML فارغًا - يتم الكتابة تلقائيًا مع التكوين الصحيح عند الإطلاق.
تتيح لك الإضافات لتخصيص لوحة القيادة الخاصة بك أكثر.
يأتي التطبيق حاليًا مع 3 ملابس مختلفة.

Open Open Street Map Plugin
يتيح لك مركز Open Street Map Center تتبع الروبوت الخاص بك على الخريطة وإرسال تعليمات نقطة طريقة GPS بنقرة بسيطة.
يمكنك أيضًا مركز الروبوت مع زر الوسط وكذلك حذف ونقاط الطريق.

يتيح لك هذا البرنامج المساعد ببساطة عرض بيانات JSON الواردة.
من فضلك أرسل لنا اقتراحاتك للمكونات الإضافية.
دليل حول كيفية تثبيت وتكوين الإضافات:
دليل البرنامج المساعد
std_msgs.msg
sensor_msgs.msg
std_msgs.msg
المزيد من التنسيقات القادمة في التحديثات المستقبلية.