DIYables ESP32 WebApps 라이브러리를 사용한 아두이노 나노 ESP32 웹 조이스틱
개요
이 튜토리얼은 DIYables ESP32 WebApps 라이브러리의 DIYablesWebJoystickPage 클래스를 다룹니다. 브라우저 페이지는 터치 및 마우스를 지원하는 가상 조이스틱을 렌더링하여 WebSocket을 통해 Arduino Nano ESP32에 X/Y 좌표를 전송합니다. 스케치는 이 값을 수신하는 콜백을 등록하여 모터 드라이버, 서보 컨트롤러 또는 모든 방향 하드웨어에 적용할 수 있습니다.
이 튜토리얼에서 다루는 내용
- 자동 복귀 및 감도 설정으로 조이스틱 페이지 인스턴스화하기
- 스케치 콜백에서 X/Y 위치 값 수신하기
- 좌표를 사용하여 차동 구동 모터 시스템 제어하기
- 요청 시 브라우저에 현재 조이스틱 위치 반환하기
준비물
| 1 | × | 아두이노 나노 ESP32 | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-A to 타입-C (USB-A PC용) | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-C to 타입-C (USB-C PC용) | 아마존 | |
| 1 | × | (추천) 아두이노 나노용 스크루 터미널 확장 보드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 나노용 브레이크아웃 확장 보드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 나노 ESP32용 전원 분배기 | 쿠팡 | 아마존 |
공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
단계
다음 지침을 단계별로 따르세요:
- Arduino Nano ESP32가 처음이라면, 아두이노 나노 ESP32 - 소프트웨어 설치 튜토리얼을 참조하세요.
- USB 케이블을 사용하여 Arduino Nano ESP32 보드를 컴퓨터에 연결합니다.
- 컴퓨터에서 Arduino IDE를 실행합니다.
- 적절한 보드(예: Arduino Nano ESP32)와 COM 포트를 선택합니다.
- Arduino IDE 왼쪽 바의 Libraries 아이콘으로 이동합니다.
- "DIYables ESP32 WebApps"를 검색하여 DIYables의 DIYables ESP32 WebApps 라이브러리를 찾습니다
- Install 버튼을 클릭하여 라이브러리를 설치합니다.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- 다른 라이브러리 의존성 설치 요청을 받게 됩니다
- Install All 버튼을 클릭하여 모든 라이브러리 의존성을 설치합니다.
- Arduino IDE에서 File Examples DIYables ESP32 WebApps WebJoystick 예제로 이동하거나, 위의 코드를 복사하여 Arduino IDE 편집기에 붙여넣습니다
/*
* DIYables WebApp Library - Web Joystick Example
*
* This example demonstrates the Web Joystick feature:
* - Interactive joystick control via web interface
* - Real-time X/Y coordinate values (-100 to +100)
* - Control pins based on joystick position
*
* 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://[IP_ADDRESS]/webjoystick
*/
#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
// MEMORY SAFETY FIX: Use static factory to avoid stack object lifetime issues
static ESP32ServerFactory serverFactory; // Static ensures lifetime matches program
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
// Configure joystick with autoReturn=false and sensitivity=5 (minimum 5% change to trigger updates)
DIYablesWebJoystickPage webJoystickPage(false, 5);
// Variables to store current joystick values
int currentJoystickX = 0;
int currentJoystickY = 0;
void setup() {
Serial.begin(9600);
delay(1000);
// TODO: initialize your hardware pins here
Serial.println("DIYables ESP32 WebApp - Web Joystick Example");
// Add home and web joystick pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webJoystickPage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
// Set up joystick callback for position changes
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Store the received values
currentJoystickX = x;
currentJoystickY = y;
// Print joystick position values (-100 to +100)
Serial.println("Joystick - X: " + String(x) + ", Y: " + String(y));
// TODO: Add your control logic here based on joystick position
// Examples:
// - Control motors: if (x > 50) { /* move right */ }
// - Control servos: servo.write(map(y, -100, 100, 0, 180));
// - Control LEDs: analogWrite(LED_PIN, map(abs(x), 0, 100, 0, 255));
// - Send commands to other devices via Serial, I2C, SPI, etc.
});
// Optional: Handle requests for current joystick values (when web page loads)
webJoystickPage.onJoystickValueToWeb([]() {
// Send the stored joystick values back to the web client
webJoystickPage.sendToWebJoystick(currentJoystickX, currentJoystickY);
Serial.println("Web client requested values - Sent to Web: X=" + String(currentJoystickX) + ", Y=" + String(currentJoystickY));
});
// You can change configuration at runtime:
// webJoystickPage.setAutoReturn(false); // Disable auto-return
// webJoystickPage.setSensitivity(10.0); // Only send updates when joystick moves >10% (less sensitive)
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// TODO: Add your main application code here
delay(10);
}
- 스케치의 WiFi 자격 증명을 업데이트합니다:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Arduino IDE의 Upload 버튼을 클릭하여 코드를 Arduino Nano ESP32에 업로드합니다
- 시리얼 모니터를 엽니다
- 시리얼 모니터 출력은 다음과 유사해야 합니다:
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
DIYables WebApp - Web Joystick Example
INFO: Added app /
INFO: Added app /web-joystick
DIYables WebApp Library
Platform: Arduino Nano 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 Joystick: http://192.168.0.2/web-joystick
==========================================
- 아무것도 표시되지 않으면 보드의 리셋 버튼을 누르세요.
- 시리얼 모니터의 IP 주소를 동일한 네트워크의 브라우저에 입력합니다.
- 예: http://192.168.0.2
- 홈 페이지에 조이스틱 애플리케이션 카드가 표시됩니다:
- 웹 조이스틱 카드를 선택하여 제어 페이지를 엽니다:
- 페이지는 http://192.168.0.2/web-joystick에서 직접 접근할 수도 있습니다.
- 조이스틱을 드래그하고 시리얼 모니터에 출력되는 X/Y 값을 확인합니다.
조이스틱 구성
기본 설정
// autoReturn defaults to true, sensitivity defaults to 10.0
DIYablesWebJoystickPage webJoystickPage;
사용자 정의 설정
// autoReturn=false: joystick holds position after release
// sensitivity=5: updates only when displacement exceeds 5%
DIYablesWebJoystickPage webJoystickPage(false, 5);
좌표 시스템
- X축: –100 (완전 왼쪽) ~ +100 (완전 오른쪽)
- Y축: –100 (완전 아래) ~ +100 (완전 위)
- 중앙: X = 0, Y = 0 (중립)
콜백
위치 업데이트 수신
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
currentJoystickX = x;
currentJoystickY = y;
Serial.println("X: " + String(x) + " Y: " + String(y));
// Apply to hardware here
});
브라우저에 위치 제공하기
브라우저가 연결하여 현재 상태를 요청할 때 호출됩니다:
webJoystickPage.onJoystickValueToWeb([]() {
webJoystickPage.sendToWebJoystick(currentJoystickX, currentJoystickY);
});
모터 제어 예제
조이스틱 X/Y를 차동 구동 모터 시스템에 매핑합니다:
const int MOTOR_LEFT_PIN1 = 2;
const int MOTOR_LEFT_PIN2 = 3;
const int MOTOR_RIGHT_PIN1 = 4;
const int MOTOR_RIGHT_PIN2 = 5;
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Tank drive mixing
int leftSpeed = constrain(y + (x / 2), -100, 100);
int rightSpeed = constrain(y - (x / 2), -100, 100);
// Forward direction for left motor
digitalWrite(MOTOR_LEFT_PIN1, leftSpeed > 0 ? HIGH : LOW);
digitalWrite(MOTOR_LEFT_PIN2, leftSpeed < 0 ? HIGH : LOW);
analogWrite(MOTOR_LEFT_PIN1, abs(leftSpeed) * 255 / 100);
// Forward direction for right motor
digitalWrite(MOTOR_RIGHT_PIN1, rightSpeed > 0 ? HIGH : LOW);
digitalWrite(MOTOR_RIGHT_PIN2, rightSpeed < 0 ? HIGH : LOW);
analogWrite(MOTOR_RIGHT_PIN1, abs(rightSpeed) * 255 / 100);
});
문제 해결
브라우저에서 조이스틱이 움직이지만 시리얼 모니터에 아무것도 표시되지 않음
- webAppsServer.begin() 전에 onJoystickValueFromWeb이 등록되었는지 확인합니다
- 브라우저의 WebSocket 상태 표시기에 "connected"가 표시되는지 확인합니다
조이스틱이 중앙으로 돌아오지 않음
- 생성자에서 autoReturn이 true여야 합니다 (기본값은 true)
- 브라우저가 복귀 애니메이션을 처리하며, 보드는 위치 이벤트만 수신합니다
초당 업데이트가 너무 많아 지연 발생
- sensitivity 매개변수를 늘립니다 (예: 5에서 15로 변경)
- 콜백에서 하드웨어 작업을 실행하기 전에 최소 간격 확인을 추가합니다
보드에 접근할 수 없음
- 보드와 브라우저 기기가 모두 동일한 2.4GHz 네트워크에 있어야 합니다
- 시리얼 모니터의 IP 주소가 올바른지 확인합니다