DIYables ESP32 WebApps 라이브러리를 사용한 아두이노 나노 ESP32 커스텀 웹앱
개요
DIYables ESP32 WebApps 라이브러리의 CustomWebApp 예제는 Arduino Nano ESP32에서 기존 DIYables 웹 앱 에코시스템과 통합되는 브라우저 기반 인터페이스를 구축하기 위한 시작 템플릿을 제공합니다. 템플릿은 브라우저와 보드 간의 양방향 WebSocket 통신을 설정합니다: 브라우저는 보드에 텍스트 명령을 보낼 수 있고, 보드는 언제든지 데이터를 브라우저로 푸시할 수 있습니다.
예제는 동일한 스케치 폴더에 함께 있어야 하는 네 개의 파일로 구성됩니다:
- CustomWebApp.ino — 애플리케이션 로직이 있는 메인 스케치
- CustomWebApp.h — 페이지 클래스 인터페이스를 정의하는 헤더
- CustomWebApp.cpp — 클래스 구현 및 WebSocket 메시지 라우팅
- custom_page_html.h — 브라우저 페이지용 내장 HTML, CSS, JavaScript
이 튜토리얼에서 다루는 내용
- Arduino Nano ESP32에서 기본 커스텀 앱 템플릿 실행하기
- 여러 앱 간에 메시지를 격리하는 앱 식별자 시스템 이해하기
- 커스텀 하드웨어 명령을 처리하도록 템플릿 수정하기
- 런타임에 브라우저로 센서 데이터 전송하기
- 내장 웹 페이지의 HTML, CSS, JavaScript 커스터마이징하기
- 메시지 충돌 없이 하나의 프로젝트에서 여러 커스텀 앱 관리하기
준비물
| 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 CustomWebApp으로 이동합니다. IDE가 네 개의 파일을 엽니다: CustomWebApp.ino, CustomWebApp.h, CustomWebApp.cpp, custom_page_html.h.
- CustomWebApp.ino에서 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
Starting Custom WebApp...
INFO: Added app /
INFO: Added app /custom
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/
Custom WebApp: http://192.168.0.2/custom
==========================================
- 아무것도 표시되지 않으면 보드의 리셋 버튼을 누릅니다.
- 시리얼 모니터의 IP 주소를 같은 네트워크의 브라우저에 입력합니다.
- 예시: http://192.168.0.2
- 홈 페이지에 커스텀 애플리케이션 카드가 표시됩니다:
- 커스텀 WebApp 카드를 선택하여 페이지를 엽니다:
- 페이지는 http://192.168.0.2/custom에서 직접 액세스할 수도 있습니다.
기본 템플릿 확인
기본 템플릿은 기본 양방향 통신을 보여줍니다:
- 페이지의 입력 필드에 텍스트를 입력하고 Send를 클릭합니다. 보드가 메시지를 받고 에코를 반환합니다. 웹 페이지에 Echo: <your message>가 표시됩니다.
- 보드는 5초마다 연결된 모든 브라우저에 가동 시간 메시지를 보냅니다: Arduino uptime: X seconds
- 수신된 모든 메시지는 시리얼 모니터에 출력됩니다.
앱 식별자 시스템
라이브러리는 여러 웹 앱이 포트 81의 WebSocket 서버 하나를 공유할 수 있도록 합니다. 각 앱은 앱 식별자라는 짧은 접두사 문자열로 격리됩니다. 식별자는 양방향의 모든 메시지 앞에 추가됩니다.
보드 측 (CustomWebApp.h / CustomWebApp.cpp)
// CustomWebApp.h
class CustomWebAppPage : public DIYablesWebAppPageBase {
private:
static const String APP_IDENTIFIER;
};
// CustomWebApp.cpp
const String CustomWebAppPage::APP_IDENTIFIER = "CUSTOM:";
// Receiving: strip identifier before passing to callback
void CustomWebAppPage::handleWebSocketMessage(const String& message) {
if (message.startsWith(APP_IDENTIFIER)) {
String payload = message.substring(APP_IDENTIFIER.length());
// invoke user callback with payload
}
}
// Sending: prepend identifier before broadcasting
void CustomWebAppPage::sendToWeb(const String& message) {
broadcastToAllClients(APP_IDENTIFIER + message);
}
브라우저 측 (custom_page_html.h)
const APP_IDENTIFIER = 'CUSTOM:';
// Receiving
ws.onmessage = function(event) {
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
// display message
}
};
// Sending
ws.send(APP_IDENTIFIER + userInput);
.cpp 파일과 .h 파일의 식별자 값이 정확히 일치해야 합니다. 추가 커스텀 앱을 만들 때는 각각 고유한 식별자를 할당하세요.
예약된 식별자 — 다음은 이미 내장 앱에서 사용 중이므로 재사용하면 안 됩니다:
- 앱 식별자: CHAT:, MONITOR:, PLOTTER:, DIGITAL_PINS:, JOYSTICK:, SLIDER:, TABLE:, RTC:, ROTATOR:, GAUGE:
- 서브 프로토콜 식별자: TIME:, DATETIME:, JOYSTICK_CONFIG:, PLOTTER_DATA:, PLOTTER_CONFIG:, SLIDER_VALUES:, TABLE_CONFIG:, TABLE_DATA:, VALUE_UPDATE:, PIN_CONFIG:, PIN_STATES:, PIN_UPDATE:
템플릿 적용
하드웨어 명령 처리
CustomWebApp.ino의 콜백을 확장하여 특정 명령에 응답합니다:
customPage.onCustomMessageReceived([](const String& message) {
Serial.println("Received: " + message);
if (message == "led_on") {
digitalWrite(LED_BUILTIN, HIGH);
customPage.sendToWeb("LED turned ON");
}
else if (message == "led_off") {
digitalWrite(LED_BUILTIN, LOW);
customPage.sendToWeb("LED turned OFF");
}
else if (message.startsWith("servo:")) {
int angle = message.substring(6).toInt();
// servo.write(angle);
customPage.sendToWeb("Servo moved to " + String(angle) + " degrees");
}
else if (message == "get_temperature") {
float temp = readTemperatureSensor();
customPage.sendToWeb("Temperature: " + String(temp) + " C");
}
});
루프에서 센서 데이터 전송
void loop() {
webAppsServer.loop();
static unsigned long lastSend = 0;
if (millis() - lastSend > 3000) {
int lightLevel = analogRead(A0);
customPage.sendToWeb("Light: " + String(lightLevel));
lastSend = millis();
}
}
웹 페이지 커스터마이징 (HTML)
버튼과 표시 요소를 추가하려면 custom_page_html.h를 편집합니다:
<div>
<h3>Device Control</h3>
<button onclick="send('led_on')">LED ON</button>
<button onclick="send('led_off')">LED OFF</button>
<label>Servo Angle:</label>
<input type="range" id="servoSlider" min="0" max="180" value="90"
onchange="send('servo:' + this.value)">
</div>
<div>
<h3>Sensor Data</h3>
<div>Temperature: <span id="tempValue">--</span></div>
<div>Light Level: <span id="lightValue">--</span></div>
</div>
메시지 처리 커스터마이징 (JavaScript)
특정 필드를 파싱하도록 custom_page_html.h의 ws.onmessage를 업데이트합니다:
ws.onmessage = function(event) {
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
if (message.startsWith('Temperature:')) {
document.getElementById('tempValue').textContent = message.split(':')[1].trim();
}
else if (message.startsWith('Light:')) {
document.getElementById('lightValue').textContent = message.split(':')[1].trim();
}
}
};
URL 경로 커스터마이징
CustomWebApp.cpp의 생성자를 수정하여 페이지가 제공되는 경로를 변경합니다:
// Default: accessible at /custom
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/custom") {}
// Change to a descriptive path
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/temperature") {}
경로는 /로 시작해야 하며 내장 앱에서 사용하는 경로(/chat, /monitor, /plotter, /web-digital-pins, /web-joystick, /web-slider, /web-table, /web-rtc, /web-rotator, /web-gauge)와 중복되면 안 됩니다.
여러 커스텀 앱 관리
하나 이상의 커스텀 페이지를 추가할 때 각각 고유한 식별자, 고유한 경로, 고유한 클래스 이름이 있어야 합니다.
파일 구조
MyProject/
├── MyProject.ino
├── TemperatureApp.h
├── TemperatureApp.cpp
├── temperature_page_html.h
├── MotorApp.h
├── MotorApp.cpp
├── motor_page_html.h
├── SensorApp.h
├── SensorApp.cpp
└── sensor_page_html.h
여러 앱 등록
#include "TemperatureApp.h"
#include "MotorApp.h"
#include "SensorApp.h"
DIYablesHomePage homePage;
TemperatureMonitorPage tempPage;
MotorControllerPage motorPage;
SensorDashboardPage sensorPage;
void setup() {
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&tempPage);
webAppsServer.addApp(&motorPage);
webAppsServer.addApp(&sensorPage);
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
tempPage.onTemperatureMessageReceived([](const String& message) {
// handle temperature commands
});
motorPage.onMotorMessageReceived([](const String& message) {
// handle motor commands
});
}