ROS برای مبتدیان III: ناوبری مبتنی بر وب با ROSBridge

سرفصل ها و درس ها

مقدمه Introduction

• مقدمه Introduction

• مروری بر کتابخانه ها و منابع Overview of Libraries and Resources

• [مهم] ساختار پروژه بذر [Important] Seed project structure

• چگونه این دوره را دنبال کنیم؟ How to follow this course?

• [مهم] با چه خطاهایی روبرو هستید و نیاز به اشکال زدایی و یافتن راه حل دارید؟ [IMPORTANT] What is you face errors and need to debug and find solutions?

• دسترسی به کد مربی دوره Udemy ROSBridge Accessing the Instructor Code for the Udemy ROSBridge Course

برنامه Basic React را ایجاد کنید Create the Basic React Application

• یک React Application جدید نصب کنید Install a new React Application

• آناتومی یک React App را درک کنید Understand the anatomy of a React App

• تنظیم تم بوت استرپ Setting-up the bootstrap theme

• کامپوننت های Header و Footer ایجاد کنید Create a Header and Footer components

• یک نوار ناوبری به مؤلفه هدر اضافه کنید Add a navigation bar to the header component

• یک روتر از صفحات ایجاد کنید Create a Router of Pages

• پاورقی را سفارشی کنید Customize the footer

مؤلفه اتصال: یک اتصال ربات با برنامه وب ایجاد کنید Connection Component: Establish a Robot Connection with the Web App

• نمای کلی مولفه <Connection/> Overview of the <Connection/> component

• مفهوم حالت را در React درک کنید Understand the concept of state in React

• کامپوننت <Connection/> را ایجاد کنید Create the <Connection/> Component

• وابستگی ROSLIB را وارد کنید Import the ROSLIB Dependency

• یک مؤلفه Alert ایجاد کنید Create an Alert component

• منطق اتصال با ROSlib و React State Connection Logic with ROSLib and React State

• به ROSBridge متصل شوید Connect to ROSBridge

• برخورد با اتصال مجدد خودکار Dealing with automatic reconnection

• کد را پاک کنید و از فایل پیکربندی استفاده کنید Clean code and use configuration file

جزء عملیات از راه دور: ربات خود را از برنامه وب هدایت کنید Teleoperation Component: Drive your robot from the web app

• یک کامپوننت دورکاری ایجاد کنید Create a Teleoperation Component

• چیدمان صفحه را با استفاده از ساختار React Grid مرتب کنید Arrange page layout using the React Grid structure

• React Joystick Component را توسعه دهید Develop the React Joystick Component

• ساختار متد handleMove The structure of the handleMove method

• یک ناشر cmd_vel در داخل handleMove ایجاد کنید Create a cmd_vel publisher inside handleMove

• با استفاده از ROSlib یک پیام پیچشی ایجاد و منتشر کنید Create and publish a twist message using ROSLib

• ویژگی رویداد مولفه react جوی استیک The event property of the react joystick component

• تنظیم سرعت های مناسب از دریچه گاز جزء جوی استیک Setting the right velocities from the Joystick component throttle

• روش HandleStop The HandleStop Method

نمایش موقعیت، جهت و سرعت ربات Display Robot Position, Orientation and Speed

• قبل از تماشای سخنرانی های بعدی توجه داشته باشید Note before watching next lectures

• Turtlebot3 Simulator را راه اندازی کنید Setup the Turtlebot3 Simulator

• تست Teleop با Turtlebot3 Test Teleop with Turtlebot3

• مولفه Robot State ReactJS را ایجاد کنید Create the Robot State ReactJS Component

• یک مشترک موقعیت ایجاد کنید و موقعیت را روی نقشه تجسم کنید Create A position subscriber and visualize position on the map

• یک مشترک برای جهت گیری ایجاد کنید Create a subscriber for the orientation

• یک مشترک برای سرعت ها ایجاد کنید Create a subscriber for the velocities

ناوبری مبتنی بر نقشه در مرورگر Map-based navigation on the browser

• نمای کلی Overview

• یک کامپوننت <Map> ایجاد کنید Create a <Map> component

• یک اتصال ROS را در مؤلفه <Map> راه اندازی کنید Initialize a ROS Connection in <Map> Component

• وارد کردن نقشه و کتابخانه JS ناوبری Importing Map and Navigation JS Libraries

• نقشه را در مرورگر تجسم کنید Visualize the map on the browser

• طرح بندی صفحه را بهبود بخشید Improve the page layout

• موقعیت ربات را روی نقشه تجسم کنید Visualize the robot position on the map