esp32 webteleop - dingdongdengdong/astra_ws GitHub Wiki

핵심 구성 요소:

1. ESP32 (마이크로컨트롤러):

   • 로봇의 모터, 센서 등 하드웨어를 직접 제어합니다.
   • Wi-Fi를 통해 네트워크에 연결됩니다.
   • 웹소켓(WebSocket) 또는 HTTP 요청을 통해 웹 서버(또는 직접 웹 브라우저)와 통신하여 제어 명령을 수신하고, 로봇의 상태 정보(센서 값 등)를 송신합니다.
   • ESP32에 업로드된 펌웨어는 수신된 명령을 해석하여 모터를 구동하거나 LED를 제어하는 등의 동작을 수행합니다.

2. 웹 브라우저 (사용자 인터페이스):

   • 사용자가 로봇을 원격으로 조종할 수 있는 인터페이스를 제공합니다. (예: non_ros_src/astra_teleop_web/src/astra_teleop_web/static/index.html)
   • HTML, CSS, JavaScript로 구성되며, 사용자의 입력(버튼 클릭, 슬라이더 조작 등)을 감지합니다.
   • JavaScript를 사용하여 웹소켓을 통해 ESP32 또는 중간 서버(ROS2 노드)로 제어 명령을 전송합니다.
   • 필요에 따라 ESP32로부터 로봇 상태 정보를 받아 화면에 표시할 수 있습니다 (예: 배터리 잔량, 센서 값, 카메라 영상 스트리밍).

3. teleop_web_node.py (ROS2 웹 원격 조종 노드):

   • ROS2 시스템과 웹 인터페이스, 그리고 ESP32 간의 중간 다리 역할을 합니다. 이 노드는 astra_controller 패키지에 포함되어 있습니다.
   • 웹 서버 역할: 웹 브라우저(클라이언트)로부터 웹소켓 또는 HTTP 요청을 수신합니다. (Python의 aiohttp, flask, fastapi 등의 웹 프레임워크와 웹소켓 라이브러리 사용)
   • ROS2 퍼블리셔/서브스크라이버:
     • 웹 브라우저로부터 받은 제어 명령 (예: 전진, 후진, 좌회전, 우회전, 팔/헤드 각도 조절)을 ROS2 토픽 (예: /cmd_vel, /joint_command)으로 발행하여 로봇의 다른 제어 노드(head_node.py, arm_node.py 등)로 전달합니다.
     • ESP32와 직접 통신하는 경우, 수신한 웹 명령을 ESP32가 이해할 수 있는 형태로 변환하여 시리얼 또는 네트워크(TCP/IP, UDP, 웹소켓)를 통해 ESP32로 전송합니다.
     • (선택 사항) ESP32로부터 로봇의 상태 정보를 받아 이를 웹 브라우저로 전송하거나 다른 ROS2 노드에서 사용할 수 있도록 특정 토픽으로 발행할 수 있습니다.

4. (선택 사항) astra_teleop_web/src/astra_teleop_web/webserver.py 및 teleoperator.py:

   • non_ros_src에 있는 이 코드는 ROS2와 직접적인 연관이 없을 수도 있지만, 독립적인 웹 기반 원격 조종 시스템을 구성할 수 있습니다.
   • webserver.py: Python 기반의 웹 서버(Flask, aiohttp 등)를 실행하여 static/index.html과 같은 정적 파일을 제공하고, 웹소켓 또는 HTTP 엔드포인트를 통해 클라이언트(웹 브라우저, ESP32)와 통신합니다.
   • teleoperator.py: 웹 서버로부터 받은 명령을 처리하거나, ESP32와 직접 통신하는 로직을 담당할 수 있습니다.

데이터 송수신 및 구동 방식 다이어그램:

아래 다이어그램은 두 가지 주요 시나리오를 보여줍니다.

• 시나리오 1: 웹 브라우저 -> teleop_web_node.py (ROS2) -> 로봇 제어 노드 -> ESP32 (또는 직접 하드웨어) (ROS2 시스템에 통합된 경우)
• 시나리오 2: 웹 브라우저 -> astra_teleop_web/webserver.py -> ESP32 (독립적인 웹 조종 시스템의 경우, 또는 teleop_web_node.py가 이 역할을 겸하는 경우)

graph TD
    %% 전체 그래프 방향 설정 (Set overall graph direction)
    direction TB

    %% 사용자 인터페이스 서브그래프 (User Interface Subgraph)
    subgraph "사용자 인터페이스 (User Interface)"
        direction LR
        A[웹 브라우저 - index.html, JS]
    end

    %% 네트워크 통신 서브그래프 (Network Communication Subgraph)
    subgraph "네트워크 통신 (Network Communication)"
        direction LR
        B[Websocket, HTTP]
    end

    %% 서버 및 ROS2 통합 서브그래프 (Server-Side/ROS2 Integration Subgraph)
    subgraph "서버/ROS2 통합 (Server-Side/ROS2 Integration)"
        direction LR
        C[teleop_web_node.py - ROS2]
        D[webserver.py - Non-ROS]
    end

    %% ROS2 시스템 서브그래프 (ROS2 System Subgraph)
    subgraph "ROS2 시스템 (ROS2 System)"
        direction LR
        E[ROS2 노드 - head_node, arm_node, base_node]
        F[ROS2 토픽 - cmd_vel, joint_command]
    end

    %% 마이크로컨트롤러 및 하드웨어 서브그래프 (Microcontroller/Hardware Subgraph)
    subgraph "마이크로컨트롤러/하드웨어 (Microcontroller/Hardware)"
        direction LR
        G[ESP32]
        H[로봇 모터, 센서]
    end

    %% 연결 (Connections)
    A -->|"제어 명령 - JSON, Text"| B
    B -->|"웹 명령"| C
    B -->|"웹 명령"| D

    %% 시나리오 1: teleop_web_node.py를 통한 ROS2 통합 (Scenario 1: ROS2 Integration via teleop_web_node.py)
    C -->|"파싱된 명령"| F
    F --> E
    E -->|"저수준 명령 - Serial, CAN, I2C"| G
    %% 대체 경로: teleop_web_node에서 직접 제어 (Alternative path: Direct control from teleop_web_node)
    C -->|"직접 명령 - Serial, TCP, UDP, Websocket"| G

    %% 시나리오 2: 독립 웹 서버 (Scenario 2: Standalone Web Server)
    D -->|"파싱된 명령 - Serial, TCP, UDP, Websocket"| G

    %% 하드웨어 상호작용 (Hardware Interactions)
    G -->|"제어 신호"| H
    H -->|"센서 데이터"| G
    G -->|"상태, 센서 데이터 - Websocket, TCP, UDP, Serial"| C
    G -->|"상태, 센서 데이터 - Websocket, HTTP"| D
    D -->|"상태, 센서 데이터"| B
    C -->|"상태, 센서 데이터 - Websocket 또는 ROS2 토픽"| B
    B -->|"화면 업데이트, 로봇 상태"| A

    %% 스타일링 (Styling)
    classDef ui fill:#D5F5E3,stroke:#28B463,stroke-width:2px
    classDef network fill:#E8DAEF,stroke:#8E44AD,stroke-width:2px
    classDef ros fill:#D6EAF8,stroke:#2E86C1,stroke-width:2px
    classDef hardware fill:#FDEDEC,stroke:#CB4335,stroke-width:2px
    classDef topic fill:#FEF9E7,stroke:#F39C12,stroke-width:1px

    class A ui
    class B network
    class C,E ros
    class D ros
    class F topic
    class G,H hardware

데이터 송수신 및 구동 상세 설명:

1. 사용자 입력 (A -> B):

   • 사용자는 웹 브라우저(A)에 로드된 index.html 페이지의 버튼(전진, 후진, 헤드 올림 등)을 클릭하거나 슬라이더를 조작합니다.
   • 브라우저의 JavaScript (index.js 등)는 이 입력을 감지하여 특정 형식(주로 JSON 또는 간단한 문자열)의 제어 메시지를 생성합니다.
   • 생성된 메시지는 웹소켓(실시간 양방향 통신에 유리) 또는 HTTP POST/GET 요청(B)을 통해 서버로 전송됩니다. 웹소켓 주소나 HTTP URL은 JavaScript 코드에 명시되어 있습니다.

2. 서버에서의 명령 수신 및 처리 (B -> C 또는 B -> D):

   • teleop_web_node.py (C)의 경우 (ROS2 통합):
     • 이 Python 스크립트는 웹 서버(예: aiohttp 서버)를 내장하고 있어 특정 포트에서 웹소켓 연결 또는 HTTP 요청을 수신 대기합니다.
     • 웹 브라우저로부터 제어 메시지를 받으면, 이를 파싱하여 로봇의 어떤 부분을 어떻게 움직일지에 대한 정보(예: 선속도, 각속도, 목표 조인트 각도)를 추출합니다.
     • 추출된 정보를 바탕으로 적절한 ROS2 메시지 타입(예: geometry_msgs/msg/Twist 또는 astra_controller_interfaces/msg/JointCommand)을 생성합니다.
     • 생성된 ROS2 메시지를 해당 제어 토픽(F) (예: /cmd_vel 또는 /joint_command)으로 발행(publish)합니다.
     • 만약 ESP32와 직접 통신해야 하는 부분이 있다면 (예: 특정 GPIO 핀 제어), ROS2 토픽 발행 대신 또는 추가적으로 ESP32로 직접 명령을 전송할 수도 있습니다. (이 경우 teleop_web_node.py가 ESP32와의 통신 로직도 담당)
   • astra_teleop_web/webserver.py (D)의 경우 (독립 실행 또는 teleop_web_node.py가 이 역할 수행):
     • 이 Python 스크립트가 웹 서버 역할을 하며 웹 브라우저로부터 직접 명령을 수신합니다.
     • 수신된 명령을 ESP32가 이해할 수 있는 프로토콜(예: 간단한 문자열 명령 "FORWARD", "LEFT", 또는 JSON 객체)로 변환합니다.
     • 변환된 명령을 Wi-Fi를 통해 ESP32(G)로 전송합니다. 통신 방식은 ESP32 펌웨어에 맞춰 웹소켓 클라이언트, TCP 클라이언트, UDP 패킷 등으로 구현될 수 있습니다.

3. ROS2 시스템 내에서의 제어 (C -> F -> E -> G, 또는 C -> G):

   • teleop_web_node.py(C)가 ROS2 토픽(F)으로 명령을 발행하면, 해당 토픽을 구독하고 있는 로봇의 실제 제어 노드들(E) (예: head_node.py, arm_node.py, base_node.py)이 이 명령을 수신합니다.
   • 각 제어 노드는 수신된 명령에 따라 자신의 담당 부분(헤드, 팔, 베이스 등)을 제어하기 위해 head_controller.py, arm_controller.py, base_controller.py 등의 저수준 컨트롤러 클래스를 호출합니다.
   • 이 저수준 컨트롤러들은 시리얼, CAN, I2C 등의 통신 방식을 통해 실제 하드웨어(모터 드라이버 등) 또는 ESP32(G)와 통신하여 명령을 전달합니다.
   • 만약 teleop_web_node.py가 ESP32와 직접 통신하도록 설계되었다면, 이 단계에서 바로 ESP32로 명령을 전달합니다.

4. ESP32에서의 명령 실행 (G -> H):

   • ESP32(G)는 Wi-Fi를 통해 웹 서버(teleop_web_node.py 또는 astra_teleop_web/webserver.py)로부터 제어 명령을 수신합니다.
   • ESP32에 프로그래밍된 펌웨어는 수신된 명령을 해석합니다 (예: "FORWARD" 명령을 받으면 특정 GPIO 핀들을 제어하여 모터 드라이버에 신호를 보냄).
   • 해석된 명령에 따라 연결된 모터(H)를 구동시키거나, LED를 켜거나, 다른 액추에이터를 작동시킵니다.

5. 상태 정보 송신 (H -> G -> D/C -> B -> A) (선택 사항):

   • 로봇의 센서(H) (예: 배터리 전압 센서, 거리 센서, 엔코더) 값은 ESP32(G)에서 읽힐 수 있습니다.
   • ESP32는 이 상태 정보를 주기적으로 또는 요청에 따라 Wi-Fi를 통해 웹 서버(D 또는 C)로 전송할 수 있습니다.
   • 웹 서버(D 또는 C)는 수신된 상태 정보를 웹소켓이나 HTTP 응답을 통해 웹 브라우저(A)로 전달합니다.
   • 웹 브라우저의 JavaScript는 이 정보를 받아 화면에 표시하여 사용자에게 로봇의 현재 상태를 알려줍니다.
   • teleop_web_node.py(C)의 경우, ESP32로부터 받은 센서 데이터를 다른 ROS2 노드에서 활용할 수 있도록 특정 ROS2 토픽으로 발행할 수도 있습니다.

실행 단계 (일반적인 시나리오):

1. ESP32 준비:

   • ESP32에 Wi-Fi 접속 정보(SSID, 비밀번호)와 웹 서버 주소(IP, 포트)를 설정하고, 제어 명령 수신 및 하드웨어 제어 로직이 포함된 펌웨어를 업로드합니다.
   • ESP32가 네트워크에 연결되고 웹 서버로부터 명령을 받을 준비를 합니다.

2. 웹 원격 조종 서버 실행:

   • ROS2 환경:

     source /opt/ros/<your_ros_distro>/setup.bash
     source <path_to_your_astra_ws>/install/setup.bash
     ros2 run astra_controller teleop_web_node

     (필요에 따라 launch 파일을 통해 관련 노드들과 함께 실행될 수 있습니다: 예: ros2 launch astra_controller start.launch.py)
   • 독립 실행 환경 (Non-ROS, astra_teleop_web 사용 시):

     cd <path_to_your_astra_ws>/non_ros_src/astra_teleop_web/src/astra_teleop_web
     python webserver.py

     (실행 명령어는 해당 스크립트의 구현 방식에 따라 다를 수 있습니다.)
   • 서버가 실행되면 특정 IP 주소와 포트에서 웹 요청을 기다립니다. (터미널 로그에서 주소 확인)

3. 웹 브라우저 접속:

   • PC 또는 모바일 기기의 웹 브라우저를 열고, 웹 서버가 실행 중인 주소 (예: http://<서버_IP_주소>:<포트번호>, 예를 들어 http://192.168.1.100:8080)로 접속합니다.
   • index.html 페이지가 로드되고, 사용자는 화면의 컨트롤을 사용하여 로봇 조종을 시작할 수 있습니다.

주요 기술:

• ESP32: Wi-Fi 통신, GPIO 제어, 센서 인터페이스.
• 웹 기술: HTML, CSS, JavaScript (프론트엔드 UI).
• 통신 프로토콜:
  • 웹소켓 (WebSockets): 웹 브라우저와 서버 간 실시간 양방향 통신에 주로 사용. 낮은 지연 시간.
  • HTTP (HyperText Transfer Protocol): 요청-응답 기반 통신. 간단한 명령 전송에 사용될 수 있음.
  • TCP/IP 또는 UDP: 서버(Python 스크립트)와 ESP32 간의 직접적인 네트워크 통신에 사용될 수 있음.
• Python (서버 사이드):
  • 웹 프레임워크: aiohttp (비동기, teleop_web_node.py에서 사용 가능성 높음), Flask, FastAPI 등.
  • 웹소켓 라이브러리: websockets, aiohttp-websockets 등.
  • ROS2 클라이언트 라이브러리: rclpy.
  • (필요시) 시리얼 통신 라이브러리: pyserial.

이 다이어그램과 설명은 ESP32와 웹을 사용한 원격 조종 시스템의 일반적인 아키텍처를 보여줍니다. 실제 구현은 제공된 코드의 세부 사항에 따라 다소 차이가 있을 수 있으므로, teleop_web_node.py와 astra_teleop_web 디렉토리 내의 Python 스크립트 및 HTML/JavaScript 파일들의 내용을 함께 살펴보시는 것이 중요합니다.