ESP32 WebRotator 예제 대화형 회전 제어 튜토리얼
개요
WebRotator 예제는 모든 웹 브라우저에서 접근 가능한 인터랙티브한 회전 원판 제어 인터페이스를 만듭니다. ESP32용으로 설계된 교육용 플랫폼으로, 향상된 모터 제어 기능, 내장 서보/스텝퍼 제어 기능, 로봇 공학 교육 모듈과의 원활한 통합을 제공합니다. 서보 모터, 스텝퍼 모터, 로봇 팔, 안테나 또는 정밀한 회전 제어가 필요한 모든 시스템에 적합합니다.
주요 기능
- 인터랙티브 회전 원판: 터치 및 마우스로 제어하는 원판 인터페이스
- 이중 작동 모드: 연속(0-360°) 및 제한 각도 범위
- 실시간 각도 피드백: 정밀한 각도 표시 및 제어
- 시각적 위치 표시기: 그라데이션 디자인의 명확한 원판 위치 표시
- 터치 및 마우스 지원: 데스크톱, 태블릿 및 모바일 기기에서 작동
- 자동 구성 처리: 생성자에서 한 번만 모드와 범위를 설정
- WebSocket 통신: 페이지 새로고침 없이 즉시 응답
- 전문적인 UI: 원뿔형 그라데이션 디자인과 매끄러운 회전
준비물
| 1 | × | ESP32 ESP-WROOM-32 개발 모듈 | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-A to 타입-C (USB-A PC용) | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-C to 타입-C (USB-C PC용) | 아마존 | |
| 1 | × | Servo Motor (optional for testing) | 쿠팡 | 아마존 | |
| 1 | × | 브레드보드 | 쿠팡 | 아마존 | |
| 1 | × | 점퍼케이블 | 쿠팡 | 아마존 | |
| 1 | × | (추천) ESP32용 스크루 터미널 확장 보드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) Breakout Expansion Board for ESP32 | 쿠팡 | 아마존 | |
| 1 | × | (추천) ESP32용 전원 분배기 | 쿠팡 | 아마존 |
공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
설정 지침
빠른 단계
다음 지시를 차근차근 따라가세요:
- ESP32를 처음 사용하는 경우, ESP32 - 소프트웨어 설치을 참조하십시오.
- USB 케이블을 사용하여 ESP32 보드를 컴퓨터에 연결합니다.
- 컴퓨터에서 Arduino IDE를 실행합니다.
- 적합한 ESP32 보드(예: ESP32 Dev Module)와 COM 포트를 선택합니다.
- Arduino IDE의 왼쪽 바에서 Libraries 아이콘으로 이동합니다.
- "DIYables ESP32 WebApps"를 검색한 다음, DIYables에서 제공하는 DIYables ESP32 WebApps 라이브러리를 찾으십시오.
- Install 버튼을 클릭하여 라이브러리를 설치합니다.
- 다른 라이브러리 의존성 설치를 요청받게 됩니다.
- 모든 라이브러리 의존성을 설치하려면 Install All 버튼을 클릭하세요.
- Arduino IDE에서, File 예제 DIYables ESP32 WebApps WebRotator 예제로 이동한 다음, 또는 위의 코드를 복사하여 Arduino IDE의 편집기에 붙여넣으십시오
/*
* DIYables WebApp Library - Web Rotator Example
*
* This example demonstrates the Web Rotator application:
* - Interactive rotatable disc control
* - Two modes: Continuous rotation and Limited angle range
* - Real-time angle feedback with WebSocket communication
* - Touch and mouse support for desktop and mobile
*
* Features:
* - Configurable rotation modes (continuous or limited)
* - Beautiful conic gradient disc with visual indicator
* - Real-time angle display and feedback
* - WebSocket communication for live updates
* - Professional responsive UI design
*
* Hardware: ESP32 Boards
*
* Setup:
* 1. Update WiFi credentials below
* 2. Upload the sketch to your Arduino
* 3. Open Serial Monitor to see the IP address
* 4. Navigate to http://[esp32-ip]/web-rotator in your web browser
*/
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create WebApp server and page instances
ESP32ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
// Rotator configuration constants
const int ROTATOR_MODE = ROTATOR_MODE_CONTINUOUS; // Change to ROTATOR_MODE_LIMITED for limited rotation
const float MIN_ANGLE = 0.0; // Minimum angle for limited mode
const float MAX_ANGLE = 180.0; // Maximum angle for limited mode
// Create WebRotator page with configuration
//DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS);
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, MIN_ANGLE, MAX_ANGLE);
// Variables for angle tracking
float currentAngle = 0.0;
void setup() {
Serial.begin(9600);
delay(1000);
// TODO: Initialize your hardware pins here
Serial.println("DIYables ESP32 WebApp - Web Rotator Example");
// Add pages to server
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webRotatorPage);
// Set 404 Not Found page (optional - for better user experience)
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Set callback functions for WebRotator
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
// Start server
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
if (ROTATOR_MODE == ROTATOR_MODE_LIMITED) {
Serial.println("\nRotator Mode: Limited");
Serial.print("Angle Range: ");
Serial.print(MIN_ANGLE);
Serial.print("° to ");
Serial.print(MAX_ANGLE);
Serial.println("°");
} else {
Serial.println("\nRotator Mode: Continuous Rotation");
}
Serial.println("\nTurn the disc in your web browser to control the rotator!");
}
void loop() {
// Handle web server and WebSocket connections
webAppsServer.loop();
// Simulate rotator movement or control actual hardware here
// For demonstration, we'll just echo back the received angle
delay(10);
}
/**
* Callback function called when angle is received from web interface
* This is where you would control your actual rotator hardware
*/
void onRotatorAngleReceived(float angle) {
currentAngle = angle;
Serial.print("Rotator angle received: ");
Serial.print(angle, 1);
Serial.println("°");
// TODO: Add your rotator control code here
// Examples:
// - Control servo motor: servo.write(map(angle, 0, 360, 0, 180));
// - Control stepper motor: stepper.moveTo(angle * stepsPerDegree);
// - Control DC motor with encoder feedback
// - Send commands to external rotator controller
// Note: No echo back to avoid interfering with smooth web interface rotation
}
/**
* Example function to change rotator mode at runtime
* Call this function to switch between continuous and limited modes
*/
void setRotatorMode(int mode, float minAng = 0, float maxAng = 360) {
webRotatorPage.setRotatorMode(mode, minAng, maxAng);
Serial.print("Rotator mode changed to: ");
if (mode == ROTATOR_MODE_LIMITED) {
Serial.print("Limited (");
Serial.print(minAng);
Serial.print("° to ");
Serial.print(maxAng);
Serial.println("°)");
} else {
Serial.println("Continuous");
}
}
/**
* Example function to send angle updates to web interface
* Call this function when your rotator position changes
*/
void sendAngleUpdate(float angle) {
currentAngle = angle;
webRotatorPage.sendToWebRotator(angle);
Serial.print("Angle update sent to web: ");
Serial.print(angle, 1);
Serial.println("°");
}
- 다음 줄들을 업데이트하여 코드에서 WiFi 자격 증명을 구성합니다:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Arduino IDE에서 ESP32에 코드를 업로드하려면 Upload 버튼을 클릭합니다.
- 시리얼 모니터를 엽니다.
- 시리얼 모니터에서 결과를 확인합니다. 아래와 같이 보입니다.
COM6
DIYables WebApp - Web Rotator Example
INFO: Added app /
INFO: Added app /web-rotator
DIYables WebApp Library
Platform: ESP32
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
📱 Web Interface: http://192.168.0.2
🔗 WebSocket: ws://192.168.0.2:81
📋 Available Applications:
🏠 Home Page: http://192.168.0.2/
🔄 Web Rotator: http://192.168.0.2/web-rotator
==========================================
Autoscroll
Clear output
9600 baud
Newline
- 아무 것도 보이지 않으면 ESP32 보드를 재부팅하십시오.
- PC나 모바일 기기에서 웹 브라우저를 여세요.
- 직렬 모니터에 표시된 IP 주소를 웹 브라우저에 입력하십시오.
- 예: http://192.168.1.100
- 아래 이미지와 같은 홈 페이지가 표시됩니다.
- Web Rotator 링크를 클릭하면 아래와 같이 Web Rotator 앱의 UI가 표시됩니다:
- 또는 IP 주소 뒤에 /web-rotator를 붙여 페이지에 직접 접속할 수 있습니다. 예를 들어: http://192.168.1.100/web-rotator
- 드래그하여 회전을 제어할 수 있는 인터랙티브한 회전 원판이 보입니다.
웹 인터페이스 기능
회전 가능한 디스크 제어
- 인터랙티브 디스크: 디스크를 회전시키려면 클릭하고 드래그하세요
- 시각적 피드백: 실시간 각도 표시 및 위치 표시
- 매끄러운 애니메이션: 전문적인 그라데이션 디자인으로 부드러운 회전
- 각도 표시: 현재 각도가 도 단위로 표시됩니다
- 모드 표시: 현재 회전 모드와 한계를 표시합니다
터치 및 마우스 지원
- 데스크탑 제어: 마우스 클릭 및 드래그
- 모바일 제어: 터치 및 스와이프 제스처
- 반응형 디자인: 모든 화면 크기에 최적화
- 시각적 신호: 상호작용 영역에 대한 명확한 표시
코드 구성
로터 설정
// Continuous rotation mode (full 0-360 degrees)
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS);
// Limited rotation mode with custom range
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, 0.0, 180.0);
// Set up angle callback
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
각도 명령 수신
void onRotatorAngleReceived(float angle) {
Serial.print("Rotator angle received: ");
Serial.print(angle, 1);
Serial.println("°");
// Control your hardware here
}
작동 모드
연속 모드
- 전체 회전: 0°에서 360°까지 및 그 이상, 상한이 없음
- 랩핑 없음: 각도 값은 360°를 초과하여 증가할 수 있으며 0°로 재설정되지 않습니다
- 사용 사례: 연속 회전 서보, 안테나, 턴테이블
- 구성: ROTATOR_MODE_CONTINUOUS
제한 모드
- 사용자 정의 범위: 최소 각도와 최대 각도를 정의합니다
- 경계 제한: 설정된 한도를 넘는 회전을 방지합니다
- 사용 사례: 표준 서보 모터, 로봇 팔, 조향 시스템
- 구성: ROTATOR_MODE_LIMITED, minAngle, maxAngle
하드웨어 통합
서보 모터 제어
참고: 아래 코드 스니펫은 부분적인 예시이며, 정상적으로 작동하려면 메인 ESP32 스케치에 통합되어야 합니다.
#include <Servo.h>
Servo myServo;
// Set rotator to limited mode: 0 to 180 degrees
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, 0.0, 180.0);
void setup() {
myServo.attach(9); // Servo on pin 9
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
}
void onRotatorAngleReceived(float angle) {
// Directly write angle (0-180) to servo
myServo.write((int)angle);
}
스테퍼 모터 제어
#include <Stepper.h>
const int stepsPerRevolution = 200;
Stepper myStepper(stepsPerRevolution, 8, 9, 10, 11);
void onRotatorAngleReceived(float angle) {
// Calculate steps for desired angle
int steps = (angle / 360.0) * stepsPerRevolution;
myStepper.step(steps);
}
사용자 정의 옵션
각도 범위
- 최소 허용 회전 각도: 허용 가능한 최저 회전 각도 설정
- 최대 허용 회전 각도: 허용 가능한 최대 회전 각도 설정
- 기본 각도: 시스템 부팅 시 시작 각도
- 해상도: 각도 업데이트의 정밀도 설정
시각적 외관
웹 인터페이스는 구성에 자동으로 적응합니다:
- 범위 표시: 설정된 각도 한계를 표시합니다
- 모드 표시: 현재 작동 모드를 표시합니다
- 위치 표시: 현재 각도의 시각적 표시
- 그라데이션 디자인: 매끄러운 색상으로 전문적인 외관
일반적인 사용 사례
교육 프로젝트
- 서보 제어 학습: PWM(펄스 폭 변조)와 서보 작동 원리 이해
- 로봇 교육: 팔 위치 제어, 관절 제어
- 안테나 위치 제어: 지향성 안테나 제어
- 카메라 팬/틸트: 원격 카메라 위치 제어
실용적 응용
- 가정 자동화: 자동화된 블라인드, 통풍구, 문
- 로봇 공학: 로봇 팔 관절, 이동 로봇의 조향
- 사물인터넷 프로젝트: 원격 위치 결정 시스템
- 산업 자동화: 자동화된 위치 결정, 밸브 제어
문제 해결
회전이 작동하지 않음
- WiFi 연결 및 WebSocket 상태 확인
- 콜백 함수가 올바르게 설정되었는지 확인
- 서보/모터가 올바르게 연결되어 있는지 확인
- 모터용 전원 공급 확인
잘못된 각도 값들
- 특정 하드웨어에 대한 각도 매핑을 확인하세요
- 서보 라이브러리와 핀 구성을 확인하세요
- 콜백 함수에서 적절한 스케일링을 보장하세요
- 시리얼 모니터 출력으로 테스트하세요
연결 문제
- 브라우저에서 IP 주소를 확인하세요.
- 방화벽 설정을 확인하세요.
- 2.4GHz WiFi 네트워크를 사용하세요(5GHz는 지원되지 않습니다).
- 브라우저 페이지를 새로 고침해 보세요.
고급 기능
런타임 모드 변경 사항
작동 중에 로테이터 모드를 변경할 수 있습니다:
void setRotatorMode(int mode, float minAng = 0, float maxAng = 360) {
webRotatorPage.setRotatorMode(mode, minAng, maxAng);
Serial.print("Rotator mode changed to: ");
if (mode == ROTATOR_MODE_LIMITED) {
Serial.print("Limited (");
Serial.print(minAng);
Serial.print("° to ");
Serial.print(maxAng);
Serial.println("°)");
} else {
Serial.println("Continuous");
}
}
위치 피드백
현재 위치를 웹 인터페이스로 다시 보내기:
void sendAngleUpdate(float angle) {
currentAngle = angle;
webRotatorPage.sendToWebRotator(angle);
Serial.print("Angle update sent to web: ");
Serial.print(angle, 1);
Serial.println("°");
}
참고: 웹 인터페이스에 자주 각도 피드백을 보내면 움직임이 덜 매끄럽게 될 수 있습니다. 실시간 위치 업데이트가 필요한 경우에만 이 기능을 사용하십시오.
다축 제어
복합 위치를 위한 여러 로터의 결합:
DIYablesWebRotatorPage panRotator(ROTATOR_MODE_CONTINUOUS);
DIYablesWebRotatorPage tiltRotator(ROTATOR_MODE_LIMITED, -90.0, 90.0);
server.addApp(&panRotator);
server.addApp(&tiltRotator);
교육적 통합
STEM 학습 목표
- 모터 제어: 서보 및 스텝 모터의 동작 이해
- 좌표계: 각도 측정 및 위치 결정
- 웹 기술: 실시간 제어 인터페이스
- 프로그래밍: 콜백 함수, 하드웨어 제어
교실 활동
- 서보 보정: 서보의 작동 원리와 PWM 신호를 학습합니다
- 위치 제어: 정밀 위치 제어를 연습합니다
- 시스템 통합: 센서를 모터 제어와 결합합니다
- 문제 해결: 하드웨어 및 소프트웨어 문제를 디버깅합니다
이 예제는 회전 제어 시스템에 대한 포괄적인 기초를 제공하며, 교육용 및 실용적인 로봇 공학 응용 모두에 완벽하게 적합합니다.