홈
Arduino Nano ESP32

아두이노 나노 ESP32용 DIYables ESP32 WebApps 라이브러리

DIYables ESP32 WebApps 라이브러리

DIYables ESP32 WebApps 라이브러리는 Arduino Nano ESP32를 위한 브라우저 기반 인터페이스 세트를 제공합니다. HTML, JavaScript, WebSocket 코드를 처음부터 작성하는 대신, 라이브러리를 포함하고 필요한 페이지를 등록하고 콜백을 스케치 로직에 연결합니다.

보드는 HTTP 서버와 WebSocket 서버를 동시에 실행합니다. 브라우저는 HTTP를 통해 페이지를 열고, 모든 실시간 업데이트를 위해 WebSocket 연결로 전환합니다. 라이브러리는 수신 메시지를 올바른 등록 페이지로 자동 라우팅합니다.

스마트폰이나 PC의 브라우저를 통해 세 가지 방법으로 Arduino Nano ESP32와 상호작용할 수 있습니다:

  • 사전 구축된 앱: 웹 프로그래밍 없이 제공된 11개 애플리케이션 중 하나를 사용합니다
  • 커스터마이즈된 앱: 필요에 맞게 사전 구축된 페이지의 HTML, CSS, JavaScript를 수정합니다
  • 커스텀 앱: DIYablesWebAppPageBase를 확장하여 자체 페이지를 구축합니다
diyaBLEs ESP32 webapps

주요 기능

  • 모듈식 설계 — 프로젝트에 필요한 페이지만 포함합니다
  • 모니터링, 제어, 시각화를 위한 11개의 즉시 사용 가능한 웹 애플리케이션
  • 플래시 사용량 최소화를 위한 축소된 HTML/CSS/JS; 편집을 위한 축소되지 않은 소스 제공
  • WebSocket 메시지 라우팅이 내장된 커스텀 앱 템플릿
  • 자동 브라우저 재연결을 포함한 WebSocket 기반 실시간 업데이트
  • 반응형 레이아웃 — 데스크톱, 태블릿, 모바일에서 작동하는 페이지
  • 콜백 API — 폴링 없음; 이벤트 발생 시 라이브러리가 코드를 호출합니다
  • 하나의 서버 인스턴스에서 여러 페이지 동시 활성화

설치

Arduino IDE 라이브러리 관리자를 통해 라이브러리를 설치합니다:

  • Arduino IDE 열기
  • Arduino IDE 왼쪽 바의 Libraries 아이콘으로 이동합니다.
  • "DIYables ESP32 WebApps"를 검색하여 DIYables의 DIYables ESP32 WebApps 라이브러리를 찾습니다
  • Install 버튼을 클릭하여 라이브러리를 설치합니다.
  • Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
∞
Newbiely | Arduino IDE 2.3.8
──
☐
✕
File
Edit
Sketch
Tools
Help
Arduino Nano ESP32
Library Manager
DIYables ESP32 WebApps
Type:
All
Topic:
All
DIYables ESP32 WebApps by DIYables
A comprehensive library designed for ESP32 that provides multiple professional web applications including Web Monitor, Chat, Digital Pin Control, Sliders, Joystick, Analog Gauge, Rotator Control, and Temperature Display via WebSocket communication. Features modular architecture for memory efficiency, automatic config handling, and perfect for IoT projects, robotics, sensor monitoring, servo/stepper control, temperature monitoring, and remote ESP32 control. More info
1.0.1
INSTALL
Newbiely.ino
···
1 void setup() {
Output
Serial Monitor
Ln 1, Col 1
Arduino Nano ESP32 on COM15
1
  • 다른 라이브러리 의존성 설치 요청을 받게 됩니다
  • Install All 버튼을 클릭하여 모든 라이브러리 의존성을 설치합니다.

의존성

  • DIYables_ESP32_WebServer — 기본 HTTP 및 WebSocket 서버를 제공합니다

사용 가능한 웹 애플리케이션

홈 페이지 (`/`)

모든 등록된 애플리케이션의 링크를 보여주는 중앙 탐색 페이지. 연결 상태를 표시하고 앱이 추가되거나 제거될 때 자동으로 업데이트됩니다.

웹 모니터 (`/webmonitor`)

양방향 텍스트를 지원하는 브라우저 기반 시리얼 모니터. 히스토리가 있는 명령 입력, 메시지 타임스탬프, 메시지 계산을 지원합니다.

웹 채팅 (`/webchat`)

브라우저와 보드 간의 양방향 메시징 인터페이스. 각 측은 일반 텍스트 메시지를 주고받을 수 있습니다.

웹 디지털 핀 (`/webdigitalpins`)

디지털 핀 0–13을 제어하고 읽습니다. 각 핀은 코드에서 WEB_PIN_INPUT 또는 WEB_PIN_OUTPUT으로 개별적으로 활성화됩니다. 페이지는 활성화된 핀만 표시하고 일괄 작업을 지원합니다.

웹 슬라이더 (`/webslider`)

0–255 범위의 두 개의 독립적인 슬라이더. PWM 듀티 사이클, 밝기, 속도 또는 다른 8비트 아날로그 출력에 적합합니다.

웹 조이스틱 (`/webjoystick`)

–100에서 +100 범위의 X/Y 값을 반환하는 가상 2D 조이스틱. 터치 및 마우스 입력을 지원합니다. 중앙으로의 자동 복귀는 코드에서 구성 가능합니다.

웹 아날로그 게이지 (`/web-gauge`)

실시간 센서 모니터링을 위한 원형 게이지. 범위, 단위, 정밀도는 생성자에서 한 번 설정됩니다. 색상 코드 영역은 작동 영역을 나타냅니다.

웹 로테이터 (`/web-rotator`)

서보 또는 스테퍼 위치 제어를 위한 회전 가능한 디스크. 연속(0–360°) 및 제한 범위 모드를 지원합니다. 현재 각도를 WebSocket을 통해 반환합니다.

웹 온도계 (`/web-temperature`)

수은 온도계 스타일의 시각화. 온도 범위와 단위(°C, °F, 또는 K)는 생성자에서 구성됩니다. WebSocket을 통해 실시간으로 업데이트됩니다.

웹 RTC (`/web-rtc`)

실시간 시계 표시. 브라우저는 클릭 한 번으로 현재 시간을 보드와 동기화할 수 있습니다. 브라우저와 보드 시계 간의 시간 차이를 보여줍니다.

웹 테이블 (`/web-table`)

두 열로 구성된 속성-값 테이블. 열 이름과 행 레이블은 setup에서 정의되며, 페이지 새로고침 없이 런타임에 값이 업데이트됩니다. 기본적으로 최대 20개의 행을 지원합니다.

웹 플로터 (`/webplotter`)

최대 8개의 데이터 시리즈를 지원하는 스트리밍 라인 차트. Y축은 자동 스케일링되거나 고정 범위를 사용합니다. 제목과 축 레이블을 구성할 수 있습니다.

커스텀 웹 앱 템플릿 (`/custom`)

사용자 정의 페이지를 위한 시작점. 템플릿은 WebSocket 메시지 라우팅, 재연결, 홈 페이지 카드 등록을 처리합니다. 사용 사례에 맞게 HTML, CSS, 메시지 핸들러를 수정하세요.

URL 참조

| Application | URL Path |
|---|---|
| Home Page | / |
| Web Monitor | /webmonitor |
| Web Chat | /webchat |
| Web Digital Pins | /webdigitalpins |
| Web Slider | /webslider |
| Web Joystick | /webjoystick |
| Web Analog Gauge | /web-gauge |
| Web Rotator | /web-rotator |
| Web Temperature | /web-temperature |
| Web RTC | /web-rtc |
| Web Table | /web-table |
| Web Plotter | /webplotter |
| Custom (template) | /custom |

보드가 WiFi에 연결된 후 http://[보드-IP][경로]에서 모든 페이지에 액세스합니다.

모듈식 아키텍처

라이브러리는 각 웹 애플리케이션이 독립적인 클래스가 되도록 구조화되어 있습니다. 인스턴스화하고 등록하는 클래스만 바이너리로 컴파일됩니다. addApp(&joystickPage)를 호출하지 않으면, 해당 페이지의 코드가 실행되지 않고 HTML이 플래시 메모리를 차지하지 않습니다.

이 예제는 슬라이더와 게이지 페이지만 등록하고 나머지는 생략합니다:

DIYablesWebAppServer webAppsServer(80, 81); DIYablesHomePage homePage; DIYablesWebSliderPage webSliderPage; DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); void setup() { webAppsServer.addApp(&homePage); webAppsServer.addApp(&webSliderPage); webAppsServer.addApp(&gaugePage); webAppsServer.begin("WiFi_SSID", "password"); }

addApp() 및 removeApp()을 사용하여 런타임 중에도 페이지를 추가하거나 제거할 수 있습니다.

API 참조

전체 클래스 및 메서드 문서: DIYables ESP32 WebApps 라이브러리 API 참조

예제 튜토리얼

고급 사용

런타임 페이지 관리

하드웨어 존재 여부나 런타임 상태에 따라 조건부로 페이지를 등록할 수 있습니다:

// Add dynamically when a sensor is detected if (sensorConnected && !webAppsServer.getApp("/webmonitor")) { webAppsServer.addApp(new DIYablesWebMonitorPage()); } // Remove a page to reclaim memory webAppsServer.removeApp("/chat"); // Retrieve a typed page pointer for direct method calls DIYablesWebDigitalPinsPage* pinsPage = webAppsServer.getWebDigitalPinsPage(); if (pinsPage) { pinsPage->enablePin(2, WEB_PIN_OUTPUT); }

커스텀 페이지

DIYablesWebAppPageBase를 확장하여 HTML과 WebSocket 메시지 형식을 자유롭게 정의하는 페이지를 만듭니다:

class MySensorDashboard : public DIYablesWebAppPageBase { public: MySensorDashboard() : DIYablesWebAppPageBase("/sensors") {} void handleHTTPRequest(WiFiClient& client) override { sendHTTPHeader(client); client.print("<h1>Sensor Dashboard</h1>"); client.print("<p>Temperature: " + String(getTemperature()) + " C</p>"); } void handleWebSocketMessage(WebSocket& ws, const String& message) override { if (message == "get_data") { sendWebSocketMessage(ws, "temp:" + String(getTemperature())); } } }; webAppsServer.addApp(new MySensorDashboard());

문제 해결

WiFi가 연결되지 않는 경우

  • SSID와 비밀번호가 올바른지 확인합니다
  • 보드는 2.4 GHz 네트워크만 지원합니다; 5 GHz 네트워크는 지원되지 않습니다
  • 보드의 물리적 위치에서 신호 강도를 확인합니다

브라우저가 페이지에 도달하지 못하는 경우

  • 시리얼 모니터에 출력된 IP 주소를 확인합니다
  • 브라우저와 보드가 같은 네트워크에 있는지 확인합니다
  • VPN이 활성화된 경우 비활성화합니다

WebSocket 연결이 자주 끊기는 경우

  • loop()의 모든 반복에서 webAppsServer.loop()가 호출되는지 확인합니다
  • 이벤트 루프를 중단시키는 블로킹 호출(delay(), 느린 I2C 읽기)을 피합니다
  • 시리얼 모니터에서 사용 가능한 힙 메모리를 확인합니다

높은 메모리 사용량

  • 프로젝트에 필요하지 않은 페이지를 제거합니다
  • 플로터 페이지에서 setMaxSamples()를 줄입니다
  • 테이블 페이지에서 최대 행 수를 줄입니다

관련 튜토리얼

DISCLOSURE
Newbiely.kr는 Amazon Services LLC Associates Program에 참여하고 있습니다. 이 프로그램은 Amazon.com, Amazon.fr, Amazon.it, Amazon.co.uk, Amazon.de, Amazon.ca, Amazon.es, Amazon.nl, Amazon.pl, Amazon.se에 광고 및 링크를 게재하여 사이트가 광고 수수료를 받을 수 있도록 고안된 제휴 광고 프로그램입니다.
Copyright © 2026 Newbiely.kr. All rights reserved.
Terms and Conditions | Privacy Policy
Email: newbiely.com@gmail.com