DIYables ESP32 WebApps 라이브러리를 사용한 아두이노 나노 ESP32 웹 디지털 핀 제어
개요
이 튜토리얼은 DIYables ESP32 WebApps 라이브러리의 DIYablesWebDigitalPinsPage 클래스를 다룹니다. 이 페이지는 브라우저에서 등록된 각 핀을 버튼으로 표시합니다. 출력 핀은 토글할 수 있고, 입력 핀은 현재 상태를 표시합니다. 핀 구성은 스케치에서 완전히 수행되며 브라우저는 스케치에서 정의한 모드를 반영합니다.
이 튜토리얼에서 다루는 내용
- 개별 핀을 WEB_PIN_OUTPUT 또는 WEB_PIN_INPUT으로 활성화하기
- 콜백을 통해 브라우저에서 출력 상태 변경 읽기
- 읽기 콜백을 통해 브라우저에 입력 핀 값 제공하기
- 스케치에서 연결된 브라우저로 상태 업데이트 푸시하기
준비물
| 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 WebDigitalPins 예제로 이동하거나, 위의 코드를 복사하여 Arduino IDE 편집기에 붙여넣습니다
/*
* DIYables WebApp Library - Web Digital Pins Example
*
* This example demonstrates the Web Digital Pins feature with automatic command handling:
* - Control output pins 0-13 via web interface
* - Monitor input pins 0-13 in real-time
* - Individual pin ON/OFF control for outputs
* - Real-time pin status feedback for inputs
* - Bulk operations (All ON, All OFF, Toggle All) for outputs
*
* 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]/webdigitalpins
*/
#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 using platform abstraction
ESP32ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebDigitalPinsPage webDigitalPinsPage;
// Array to store the state of each digital pin (0-13). Index corresponds to pin number.
int pinStates[16] = { 0 }; // Initialize all states to LOW (0)
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables ESP32 WebApp - Web Digital Pins Example");
// Add home and digital pins pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webDigitalPinsPage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Pin Configuration Examples:
// Method 1: Enable specific pins individually for output control
webDigitalPinsPage.enablePin(0, WEB_PIN_OUTPUT); // Enable pin 0 (TX - use with caution)
webDigitalPinsPage.enablePin(1, WEB_PIN_OUTPUT); // Enable pin 1 (RX - use with caution)
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(3, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(4, WEB_PIN_OUTPUT);
//webDigitalPinsPage.enablePin(5, WEB_PIN_OUTPUT); // Comment/uncomment to disable/enable
//webDigitalPinsPage.enablePin(6, WEB_PIN_OUTPUT); // Comment/uncomment to disable/enable
webDigitalPinsPage.enablePin(13, WEB_PIN_OUTPUT); // Enable pin 13 (built-in LED)
// Method 2: Enable pins for input monitoring
webDigitalPinsPage.enablePin(8, WEB_PIN_INPUT);
webDigitalPinsPage.enablePin(9, WEB_PIN_INPUT);
//webDigitalPinsPage.enablePin(10, WEB_PIN_INPUT); // Comment/uncomment to disable/enable
//webDigitalPinsPage.enablePin(11, WEB_PIN_INPUT); // Comment/uncomment to disable/enable
// Method 3: Enable all pins at once (uncomment to use)
// for (int pin = 0; pin <= 13; pin++) {
// webDigitalPinsPage.enablePin(pin, WEB_PIN_OUTPUT); // or WEB_PIN_INPUT as needed
// }
// Method 4: Enable pins in a range using for loop (uncomment to use)
// for (int pin = 7; pin <= 11; pin++) {
// webDigitalPinsPage.enablePin(pin, WEB_PIN_OUTPUT); // or WEB_PIN_INPUT as needed
// }
// Initialize enabled pins
int outputPins[] = { 0, 1, 2, 3, 4, 13 }; // Note: Pins 0,1 are TX/RX - use with caution
for (int i = 0; i < 6; i++) {
int pin = outputPins[i];
pinMode(pin, OUTPUT);
digitalWrite(pin, LOW);
pinStates[pin] = LOW;
}
int inputPins[] = { 8, 9 };
for (int i = 0; i < 2; i++) {
int pin = inputPins[i];
pinMode(pin, INPUT); // Use INPUT_PULLUP if needed
pinStates[pin] = digitalRead(pin);
}
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
// Return the current state to display on Web App
webDigitalPinsPage.onPinRead([](int pin) {
return pinStates[pin]; // Return the current state of the pin
// You can implement custom read logic here if needed
});
// Handle the control request from Web App (for output pins)
webDigitalPinsPage.onPinWrite([](int pin, int state) {
digitalWrite(pin, state);
pinStates[pin] = state;
// You can implement custom control logic here if needed
});
// Handle pin mode change requests (optional)
webDigitalPinsPage.onPinModeChange([](int pin, int mode) {
if (mode == WEB_PIN_OUTPUT) {
pinMode(pin, OUTPUT);
digitalWrite(pin, LOW);
pinStates[pin] = LOW;
} else if (mode == WEB_PIN_INPUT) {
pinMode(pin, INPUT); // or INPUT_PULLUP as needed
pinStates[pin] = digitalRead(pin);
}
// You can implement custom mode change logic here if needed
});
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// Monitor input pins for real-time updates
static unsigned long lastInputCheck = 0;
if (millis() - lastInputCheck > 100) { // Check every 100ms
lastInputCheck = millis();
// Check input pins for changes and send real-time updates
int inputPins[] = { 8, 9 };
for (int i = 0; i < 2; i++) {
int pin = inputPins[i];
int currentState = digitalRead(pin);
if (currentState != pinStates[pin]) {
pinStates[pin] = currentState;
// Send real-time update to web clients
webDigitalPinsPage.updatePinState(pin, currentState);
}
}
}
// 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 Digital Pins Example
INFO: Added app /
INFO: Added app /web-digital-pins
DEBUG: Enabling pin 0 with mode OUTPUT
DEBUG: Enabling pin 1 with mode OUTPUT
DEBUG: Enabling pin 2 with mode OUTPUT
DEBUG: Enabling pin 3 with mode OUTPUT
DEBUG: Enabling pin 4 with mode OUTPUT
DEBUG: Enabling pin 13 with mode OUTPUT
DEBUG: Enabling pin 8 with mode INPUT
DEBUG: Enabling pin 9 with mode INPUT
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/
Digital Pins: http://192.168.0.2/web-digital-pins
==========================================
- 아무것도 표시되지 않으면 보드의 리셋 버튼을 누르세요.
- 시리얼 모니터의 IP 주소를 동일한 네트워크의 브라우저에 입력합니다.
- 예: http://192.168.0.2
- 홈 페이지에 디지털 핀 애플리케이션 카드가 표시됩니다:
- 디지털 핀 카드를 선택하여 핀 제어 페이지를 엽니다:
- 페이지는 http://192.168.0.2/web-digital-pins에서 직접 접근할 수도 있습니다.
- 해당 버튼을 클릭하여 출력 핀을 토글합니다. 핀 13(내장 LED)이 즉시 응답해야 합니다.
핀 구성 방법
핀은 webAppsServer.begin() 전에 등록해야 합니다. 세 가지 패턴이 지원됩니다:
개별 핀 활성화
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT); // Pin 2 as output
webDigitalPinsPage.enablePin(3, WEB_PIN_OUTPUT); // Pin 3 as output
webDigitalPinsPage.enablePin(4, WEB_PIN_INPUT); // Pin 4 as input
출력 핀 범위 활성화
// Registers pins 2 through 13 as outputs
webDigitalPinsPage.enableOutputPins(2, 13);
모든 핀 활성화
// Registers all pins 0-13 (use with care for pins 0 and 1 — UART)
webDigitalPinsPage.enableAllPins();
콜백
쓰기 콜백 (출력 핀)
브라우저가 출력 핀을 토글할 때 호출됩니다:
webDigitalPinsPage.onPinWrite([](int pin, int state) {
digitalWrite(pin, state);
Serial.println("Pin " + String(pin) + " set to " + String(state));
});
읽기 콜백 (입력 핀)
브라우저가 입력 핀의 현재 상태를 요청할 때 호출됩니다:
webDigitalPinsPage.onPinRead([](int pin) -> int {
return digitalRead(pin);
});
스케치에서 상태 푸시하기
브라우저 요청 외부에서 입력이 상태를 변경하면 업데이트를 수동으로 푸시합니다:
void loop() {
webAppsServer.loop();
int currentState = digitalRead(buttonPin);
if (currentState != lastButtonState) {
lastButtonState = currentState;
webDigitalPinsPage.updatePinState(buttonPin, currentState);
}
}
웹 인터페이스 컨트롤
- 핀 버튼: 클릭하여 출력 핀을 HIGH 또는 LOW로 토글합니다. 녹색은 HIGH, 빨간색은 LOW를 나타냅니다.
- All ON: 등록된 모든 출력 핀을 HIGH로 설정합니다.
- All OFF: 등록된 모든 출력 핀을 LOW로 설정합니다.
- Toggle All: 모든 출력 핀의 현재 상태를 반전합니다.
입력 핀은 토글 버튼 없이 현재 상태를 표시하며 브라우저는 WebSocket을 통해 주기적으로 새로 고침합니다.
문제 해결
클릭해도 핀 상태가 변경되지 않음
- webAppsServer.begin() 전에 onPinWrite 콜백이 등록되었는지 확인합니다
- 핀이 WEB_PIN_OUTPUT으로 등록되었는지 확인합니다
- 들어오는 WebSocket 메시지에 대해 시리얼 모니터를 확인합니다
입력 핀에 잘못된 상태가 표시됨
- onPinRead 콜백이 등록되었는지 확인합니다
- 플로팅 입력을 방지하기 위해 풀업 또는 풀다운 저항을 추가합니다
- 콜백에서 digitalRead()가 예상된 값을 반환하는지 확인합니다
페이지에 접근할 수 없음
- 시리얼 모니터에 출력된 IP 주소를 확인합니다
- 네트워크에서 포트 80이 열려 있는지 확인합니다
- 보드와 브라우저 기기가 모두 동일한 2.4GHz WiFi 네트워크에 있어야 합니다