아두이노 WebRotator 예제 대화형 회전 제어 튜토리얼
개요
WebRotator 예제는 모든 웹 브라우저에서 접근 가능한 대화형 회전 가능한 디스크 제어 인터페이스를 제공합니다. Arduino Uno R4 WiFi 및 DIYables STEM V4 IoT 교육 플랫폼을 위해 설계되었으며, 향상된 모터 제어 기능, 내장 서보/스텝퍼 제어 기능, 로봇 공학 교육 모듈과의 원활한 통합을 제공합니다. 서보 모터, 스텝퍼 모터, 로봇 팔, 안테나 또는 정밀한 회전 제어가 필요한 모든 시스템의 제어에 이상적입니다.
주요 기능
- 인터랙티브 회전 원판: 터치와 마우스로 제어되는 원판 인터페이스
- 이중 작동 모드: 연속(0-360°) 및 제한된 각도 범위
- 실시간 각도 피드백: 정밀한 각도 표시 및 제어
- 시각적 위치 표시기: 그라데이션 디자인의 명확한 원판 위치 표시
- 터치 및 마우스 지원: 데스크톱, 태블릿 및 모바일 기기에서 작동합니다
- 자동 구성 처리: 생성자에서 한 번 모드와 범위를 설정합니다
- WebSocket 통신: 페이지 새로고침 없이 즉시 응답
- 전문적인 UI: 부드러운 회전과 원뿔형 그라데이션 디자인
- 플랫폼 확장성: 현재 Arduino Uno R4 WiFi용으로 구현되었지만 다른 하드웨어 플랫폼으로 확장 가능합니다. 자세한 내용은 DIYables_WebApps_ESP32 참고
준비물
| 1 | × | 아두이노 우노 R4 와이파이 | 쿠팡 | 아마존 | |
| 1 | × | (또는) DIYables STEM V4 IoT | 쿠팡 | 아마존 | |
| 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 | × | (추천) 아두이노 우노 R4용 스크루 터미널 블록 쉴드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 브레드보드 쉴드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 케이스 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 전원 분배기 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노용 프로토타이핑 베이스 플레이트 & 브레드보드 키트 | 아마존 |
공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
설정 지침
빠른 단계
다음 지침을 단계별로 따르십시오:
- 이것이 Arduino Uno R4 WiFi/DIYables STEM V4 IoT를 처음 사용하는 경우에는 Arduino IDE에서 Arduino Uno R4 WiFi/DIYables STEM V4 IoT용 환경 설정에 대한 튜토리얼을 참조하세요: 아두이노 우노 R4 - 소프트웨어 설치.
- USB 케이블로 Arduino Uno R4/DIYables STEM V4 IoT 보드를 컴퓨터에 연결합니다.
- 컴퓨터에서 Arduino IDE를 실행합니다.
- 적절한 Arduino Uno R4 보드(예: Arduino Uno R4 WiFi)와 COM 포트를 선택합니다.
- Arduino IDE의 왼쪽 바에서 Libraries 아이콘으로 이동합니다.
- "DIYables WebApps"를 검색한 다음 DIYables에서 제공하는 DIYables WebApps 라이브러리를 찾으세요.
- 라이브러리를 설치하려면 Install 버튼을 클릭합니다.
- 다른 라이브러리 의존성 설치를 요청받게 됩니다.
- Install All 버튼을 클릭하여 모든 라이브러리 의존성을 설치하십시오.
- Arduino IDE에서, File 예제 DIYables 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: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* 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://[arduino-ip]/web-rotator in your web browser
*/
#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
UnoR4ServerFactory 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 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에서 Upload 버튼을 클릭하여 Arduino UNO R4/DIYables STEM V4 IoT에 코드를 업로드합니다
- 시리얼 모니터를 엽니다
- 시리얼 모니터에서 결과를 확인합니다. 아래와 같습니다
COM6
DIYables WebApp - Web Rotator Example
INFO: Added app /
INFO: Added app /web-rotator
DIYables WebApp Library
Platform: Arduino Uno R4 WiFi
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
- 아무 것도 보이지 않으면 Arduino 보드를 재부팅하세요.
- 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
하드웨어 통합
서보 모터 제어
다음 코드 조각은 부분적인 예시이며 정상적으로 작동하려면 메인 Arduino 스케치에 통합되어야 합니다.
#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);
}
맞춤 설정 옵션
각도 범위
- 최소 각도: 허용되는 회전의 최솟값을 설정
- 최대 각도: 허용되는 회전의 최댓값을 설정
- 기본 위치: 시스템 부팅 시 시작 각도
- 해상도: 각도 업데이트의 정밀도 제어
시각적 외관
웹 인터페이스는 구성에 자동으로 적응합니다:
- Range Display: 설정된 각도 한계를 표시
- Mode Indicator: 현재 작동 모드를 표시
- Position Marker: 현재 각도의 시각적 표시
- Gradient Design: 매끄러운 색상으로 전문적인 외관
일반적인 사용 사례
교육 프로젝트
- 서보 제어 학습: PWM 및 서보 작동 이해
- 로봇 교육: 팔 위치 설정, 관절 제어
- 안테나 위치 제어: 지향형 안테나 제어
- 카메라 팬/틸트: 원격 카메라 위치 설정
실용적 응용
- 가정 자동화: 자동화된 블라인드, 통풍구, 문
- 로봇 공학: 로봇 팔 관절, 이동 로봇의 조향
- 사물인터넷 프로젝트: 원격 위치 결정 시스템
- 산업용: 자동 위치 제어, 밸브 제어
문제 해결
회전이 작동하지 않음
- WiFi 연결 및 WebSocket 상태 확인
- 콜백 함수가 올바르게 설정되었는지 확인
- 서보/모터가 올바르게 연결되었는지 확인
- 모터용 전원 공급이 정상인지 확인
잘못된 각도 값들
- 특정 하드웨어에 대한 각도 매핑을 확인하십시오.
- 서보 라이브러리와 핀 구성을 확인하십시오.
- 콜백 함수에서 적절한 스케일링을 보장하십시오.
- 시리얼 모니터 출력으로 테스트하십시오.
연결 문제
- 브라우저에서 IP 주소를 확인하세요
- 방화벽 설정을 확인하세요
- 2.4GHz Wi‑Fi 네트워크를 사용하세요(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 신호 학습
- 위치 제어: 정밀 위치 지정 작업 연습
- 시스템 통합: 센서와 모터 제어를 결합
- 문제 해결: 하드웨어 및 소프트웨어 문제 디버깅
이 예제는 회전 제어 시스템에 대한 포괄적인 기초를 제공합니다. 교육용과 실용 로봇 애플리케이션 모두에 적합합니다.