DIYables ESP32 WebApps 라이브러리를 사용한 아두이노 나노 ESP32 웹 슬라이더
개요
이 튜토리얼은 DIYables ESP32 WebApps 라이브러리의 DIYablesWebSliderPage 클래스를 다룹니다. 이 페이지는 브라우저에서 각각 0~255 범위를 가진 두 개의 독립적인 슬라이더를 표시합니다. Arduino Nano ESP32는 콜백을 통해 WebSocket으로 슬라이더 값을 수신합니다. 값은 LED, 모터 또는 모든 8비트 출력의 PWM 기반 제어를 위해 analogWrite()와 함께 직접 사용할 수 있습니다.
이 튜토리얼에서 다루는 내용
- 스케치 콜백에서 슬라이더 값 수신하기
- 슬라이더 1과 슬라이더 2 값을 analogWrite() 출력에 적용하기
- 새로 연결된 브라우저에 현재 슬라이더 위치 제공하기
- 기본 초기 슬라이더 위치 설정하기
준비물
| 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 WebSlider 예제로 이동하거나, 위의 코드를 복사하여 Arduino IDE 편집기에 붙여넣습니다
/*
* DIYables WebApp Library - Web Slider Example
*
* This example demonstrates the Web Slider feature:
* - Two independent sliders (0-255)
* - Real-time value monitoring
* - Template for hardware control
*
* 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]/webslider
*/
#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;
DIYablesWebSliderPage webSliderPage;
// Current slider values
int slider1Value = 64; // Default 25%
int slider2Value = 128; // Default 50%
void setup() {
Serial.begin(9600);
delay(1000);
// TODO: Initialize your hardware pins here
Serial.println("DIYables ESP32 WebApp - Web Slider Example");
// Add home and web slider pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webSliderPage);
// 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 slider callback for value changes
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Store the received values
slider1Value = slider1;
slider2Value = slider2;
// Print slider values (0-255)
Serial.println("Slider 1: " + String(slider1) + ", Slider 2: " + String(slider2));
// TODO: Add your control logic here based on slider values
// Examples:
// - Control PWM: analogWrite(LED_PIN, slider1);
// - Control servos: servo.write(map(slider1, 0, 255, 0, 180));
// - Control motor speed: analogWrite(MOTOR_PIN, slider2);
// - Control brightness: strip.setBrightness(slider1);
// - Send values via Serial, I2C, SPI, etc.
});
// Set up callback for config requests (when client requests current values)
webSliderPage.onSliderValueToWeb([]() {
webSliderPage.sendToWebSlider(slider1Value, slider2Value);
Serial.println("Web client requested values - Sent: Slider1=" + String(slider1Value) + ", Slider2=" + String(slider2Value));
});
}
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 Slider Example
INFO: Added app /
INFO: Added app /web-slider
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 Slider: http://192.168.0.2/web-slider
==========================================
- 아무것도 표시되지 않으면 보드의 리셋 버튼을 누르세요.
- 시리얼 모니터의 IP 주소를 동일한 네트워크의 브라우저에 입력합니다.
- 예: http://192.168.0.2
- 홈 페이지에 슬라이더 애플리케이션 카드가 표시됩니다:
- 웹 슬라이더 카드를 선택하여 슬라이더 제어 페이지를 엽니다:
- 페이지는 http://192.168.0.2/web-slider에서 직접 접근할 수도 있습니다.
- 슬라이더를 이동하고 시리얼 모니터에 출력되는 값을 확인합니다.
기본 슬라이더 값
콜백을 등록하기 전에 상태 변수에서 현재 슬라이더 위치를 추적하고 기본값을 설정합니다:
int slider1Value = 64; // 25% initial position
int slider2Value = 128; // 50% initial position
콜백
슬라이더 변경 수신
사용자가 어느 슬라이더든 이동할 때마다 호출됩니다:
webSliderPage.onSliderValueFromWeb([](int s1, int s2) {
slider1Value = s1;
slider2Value = s2;
Serial.println("Slider1: " + String(s1) + " Slider2: " + String(s2));
analogWrite(PWM_PIN_1, s1);
analogWrite(PWM_PIN_2, s2);
});
브라우저에 값 제공하기
브라우저가 연결하여 현재 위치를 요청할 때 호출됩니다:
webSliderPage.onSliderValueToWeb([]() {
webSliderPage.sendToWebSlider(slider1Value, slider2Value);
});
일반적인 사용 사례
LED 밝기: 슬라이더 1을 LED가 있는 PWM 지원 핀에 연결합니다. 0~255 범위가 analogWrite()를 통해 0~100% 밝기에 직접 매핑됩니다.
모터 속도: 슬라이더 값을 모터 드라이버의 속도 제어 입력으로 보냅니다. 콜백 내에서 필요한 범위로 스케일을 조정합니다.
듀얼 채널 제어: 슬라이더 1과 슬라이더 2는 완전히 독립적입니다. 하나는 속도에, 하나는 방향에 사용하거나 듀얼 드라이브 시스템에서 모터당 하나씩 사용합니다.
문제 해결
슬라이더 값이 수신되지 않음
- webAppsServer.begin() 전에 onSliderValueFromWeb이 등록되었는지 확인합니다
- 들어오는 값에 대해 시리얼 모니터를 확인합니다
- 브라우저에서 WebSocket 연결이 활성 상태인지 확인합니다
브라우저 슬라이더가 재연결 시 초기화됨
- onSliderValueToWeb을 구현하고 그 안에서 sendToWebSlider()를 호출하여 연결 시 브라우저가 마지막 위치를 복원하도록 합니다
PWM 출력이 없음
- Arduino Nano ESP32에서 해당 핀이 analogWrite()를 지원하는지 확인합니다
- analogWrite() 전에 pinMode(pin, OUTPUT)이 설정되어 있는지 확인합니다