DIYables ESP32 웹앱 라이브러리 완전한 ESP32 웹 애플리케이션 프레임워크
DIYables ESP32 WebApps 라이브러리
ESP32용 WebSocket 기반 웹 애플리케이션을 만들기 위한 포괄적인 라이브러리입니다. 이 라이브러리는 현대적인 웹 인터페이스를 통해 ESP32 프로젝트를 모니터링하고 제어하며 상호 작용할 수 있는 여러 개의 바로 사용할 수 있는 웹 애플리케이션을 제공합니다.
이 라이브러리를 사용하면 스마트폰이나 PC의 웹 브라우저를 통해 ESP32와 상호 작용할 수 있습니다. 다음 두 가지 방법 중 하나를 통해:
- 제공된 11개의 애플리케이션 중에서 웹 프로그래밍 지식 없이 미리 구축된 웹 앱을 사용
- 미리 구축된 웹 앱을 귀하의 특정 프로젝트 요구사항에 맞게 맞춤화하십시오
- 유연한 프레임워크 아키텍처를 사용하여 나만의 웹 앱을 구축하고 추가하십시오
🚀 기능
- 모듈식 아키텍처: 메모리 사용량을 최적화하기 위해 필요한 웹 앱만 추가하십시오
- 메모리 효율성: 각 웹 앱은 독립적으로 활성화/비활성화할 수 있습니다
- 메모리 최적화: UI 및 기능을 유지하면서 코드 크기를 줄이기 위해 HTML, JavaScript 및 CSS 코드를 축소합니다. 참고 및 맞춤화를 위해 원본 비압축 소스 코드는 라이브러리에 포함되어 있습니다
- 11개의 미리 구축된 웹 애플리케이션: 웹 프로그래밍 지식이 필요 없이 ESP32를 완전히 제어할 수 있습니다
- 홈 페이지: 모든 웹 애플리케이션으로의 링크를 포함한 중앙 허브
- 웹 모니터: WebSocket을 통해 브라우저에서 실시간 시리얼 모니터
- 웹 채팅: 당신의 아두이노와 함께하는 대화형 채팅 인터페이스
- 웹 디지털 핀: 웹 인터페이스를 사용하여 모든 디지털 핀을 제어하고 모니터링
- 웹 슬라이더: 아날로그/PWM 출력용 이중 슬라이더 컨트롤
- 웹 조이스틱: 로봇 및 차량 제어를 위한 대화형 조이스틱
- 웹 아날로그 게이지: 센서 모니터링용 원형 게이지 디스플레이
- 웹 로테이터: 연속 모드와 제한 모드가 있는 회전 가능한 디스크 제어
- 웹 온도계: 구성 가능한 구간이 있는 온도계 시각화
- Web RTC: 시간 동기화 및 시간대 처리가 가능한 실시간 시계
- 웹 표: 실시간 업데이트가 가능한 두 열의 속성-값 표
- 웹 플로터: 실시간 데이터 시각화 및 그래프 작성
- 맞춤형 웹 애플리케이션 템플릿: 실시간 웹소켓 통신을 이용해 나만의 웹 애플리케이션을 만들 수 있는 완전한 템플릿
- 반응형 디자인: 데스크톱 및 모바일 기기에서 작동합니다
- 실시간 통신: 실시간 업데이트를 위한 웹소켓 기반의 통신
- 간단한 통합: 간단한 콜백 기반 API
- 다중 앱 지원: 한 번에 여러 웹 애플리케이션을 동시에 추가할 수 있습니다
- 홈 페이지 자동 통합: 추가된 웹 애플리케이션이 홈 페이지에 자동으로 표시되는 링크로 나타납니다
📦 설치 - 아두이노 IDE 라이브러리 매니저
- Arduino IDE를 엽니다.
- Arduino IDE의 왼쪽 바에 있는 Libraries 아이콘으로 이동합니다.
- "DIYables ESP32 WebApps"를 검색한 뒤 DIYables가 만든 DIYables ESP32 WebApps 라이브러리를 찾습니다.
- Install 버튼을 클릭하여 라이브러리를 설치합니다.
- 다른 라이브러리 의존성 설치를 요청받게 됩니다.
- Install All 버튼을 클릭하여 모든 라이브러리 의존성을 설치합니다.
🔧 의존성
이 라이브러리는 다음과 같은 것을 필요로 합니다:
- DIYables_ESP32_WebServer 라이브러리(웹소켓 지원용)
🎯 빠른 시작
자세한 설정 지침 및 코드 예제는 아래를 참조하십시오:
- API 참조 문서 - 전체 API 문서
- 예제 자습서 - 각 웹 애플리케이션에 대한 포괄적인 가이드:
- 웹 채팅 예제 - 아두이노와 함께하는 대화형 채팅 인터페이스
- 웹 모니터 예제 - 웹 브라우저를 통한 실시간 시리얼 모니터
- 웹 플로터 예제 - 실시간 데이터 시각화 및 그래프 그리기
- 웹 디지털 핀 예제 - 디지털 핀 제어 및 모니터링
- 웹 슬라이더 예제 - 아날로그/PWM 출력용 이중 슬라이더 컨트롤
- 웹 조이스틱 예제 - 방향 제어용 가상 조이스틱
- 웹 아날로그 게이지 예시 - 센서 모니터링을 위한 전문 원형 게이지
- Web Rotator Example - 서보/스테퍼 모터용 인터랙티브 회전 디스크 컨트롤
- Web Temperature Example - 온도 모니터링용 시각적 온도계 디스플레이
- Web RTC 예시 - 웹 기반 시간 동기화 및 시간대 처리를 갖춘 실시간 시계
- 웹 표 예제 - 실시간 속성-값 업데이트가 있는 두 열 데이터 표
- 맞춤형 웹 애플리케이션 템플릿 - 자신만의 맞춤형 웹 애플리케이션을 구축하기 위한 완전한 템플릿
- 다중 웹 앱 예제 - 모든 기능을 포함한 완전한 통합 가이드
📱 웹 애플리케이션
1. 홈 페이지 (`/`)
- 중앙 탐색 허브
- 모든 웹 애플리케이션에 대한 링크
- 활성화되었거나 추가된 앱만 홈 페이지에 표시됩니다
- 연결 상태 표시
- 반응형 디자인
2. 웹 모니터링 (`/web-monitor`)
- 브라우저 기반 시리얼 모니터
- 실시간 양방향 통신
- 메시지 타임스탬프 부여 및 개수 세기
- 이력 있는 명령 입력
3. 웹 플롯터 (`/web-plotter`)
- 실시간 데이터 시각화 및 차트 작성
- 다중 데이터 시리즈 지원(최대 8개 선)
- Y축 자동 스케일링 또는 고정 범위
- 사용자 정의 가능한 차트 제목 및 축 레이블
- 최소 지연을 위한 WebSocket 스트리밍
- 센서 모니터링 및 디버깅에 적합
4. 웹채팅 (`/chat`)
- 대화형 채팅 인터페이스
- 자연어 응답
- 채팅 명령으로 LED 제어
- 재미있고 교육적인 상호작용
5. 웹 디지털 핀 (`/web-digital-pins`)
- 개별 핀 제어(핀 0~13)
- 각 핀은 입력(INPUT) 또는 출력(OUTPUT) 모드로 설정할 수 있습니다
- 활성화된 핀만 웹 UI에 표시됩니다
- 입력 및 출력 핀 모니터링
- 일괄 작업(전체 켜기/끄기, 토글)
- 실시간 핀 상태 피드백
6. 웹 슬라이더 (`/web-slider`)
- 듀얼 레인지 슬라이더(0-255)
- PWM 출력 제어
- 프리셋 값 버튼들
- 동기화된 제어 옵션
7. 웹 조이스틱 (`/web-joystick`)
- 터치/마우스 지원이 있는 인터랙티브 조이스틱 제어
- X/Y 좌표 값(-100에서 +100까지)
- 실시간 위치 피드백
- ESP32 코드로 자동 중앙 복귀를 활성화/비활성화할 수 있습니다
- 로봇 및 차량 제어에 최적입니다
8. 웹 아날로그 게이지 (`/web-gauge`)
- 실시간 센서 모니터링을 위한 전문 원형 게이지 디스플레이
- 설정 가능한 값 범위, 단위 및 정밀도
- 시각적 피드백이 있는 매끄러운 바늘 애니메이션
- 상태 표시를 위한 색상 구역(녹색, 황색, 적색)
- 자동 구성 처리 - 생성자에서 한 번만 범위를 설정
- 압력 센서, 전압 모니터링 및 아날로그 읽기에 최적화
9. 웹 로테이터 (`/web-rotator`)
- 시각적 피드백이 있는 대화형 회전 디스크 제어
- 작동 모드 두 가지: 연속(0-360°) 및 제한(사용자 정의 범위)
- 부드러운 회전과 함께하는 실시간 각도 피드백
- 데스크톱과 모바일을 위한 터치 및 마우스 지원
- 위치 표시기가 있는 전문적인 원뿔형 그라디언트 디자인
- 서보 모터, 스테퍼 모터 및 회전 제어에 적합
10. 웹 온도 (`/web-temperature`)
- 실시간 온도 모니터링이 가능한 시각적 온도계 디스플레이
- 구성 가능한 온도 범위 및 단위(°C, °F, K)
- 수은식 애니메이션이 적용된 대화형 온도계 시각화
- 자동 구성 처리 - 생성자에서 한 번만 범위 설정
- WebSocket을 통한 실시간 값 업데이트
- 온도 센서 및 환경 모니터링에 적합
11. 웹 RTC (`/web-rtc`)
- 실시간 시계 표시 ESP32 RTC와 클라이언트 기기 시간을 모두 표시
- 원클릭 시간 동기화 웹 브라우저에서 ESP32 RTC로
- 시각적 시간 차이 표시기 분 단위로 동기화 정확도 표시
- 두 줄 시간 형식 12시간 형식의 오전/오후 표시와 전체 날짜 포함
- WebSocket 기반 실시간 업데이트 즉시 시간 동기화를 위해
- 현대적인 그라데이션 UI 반응형 카드 스타일 레이아웃 제공
- 시간대 인식 동기화 로컬 기기 시간을 사용
- ESP32용 내장 RTC 지원
- 연결 상태 모니터링 시각적 WebSocket 표시기로
- 페이지 로드 시 자동 시간 요청 즉시 표시를 위해
- 타임스탬프 기록, 데이터 로깅, 스케줄링 및 시간 기반 자동화에 이상적
12. 웹 표 (`/web-table`)
- 두 열 데이터 테이블로, 정리된 데이터 표시를 위한 속성-값 쌍
- 실시간 값 업데이트 WebSocket을 통해 즉시 데이터 새로고침
- 구성 가능한 표 구조 ESP32 setup() 함수에서 한 번 설정
- 런타임 중 동적 값 업데이트 페이지 새로고침 없이
- 현대적 반응형 디자인 마우스 오버 효과와 시각적 피드백
- 연결 상태 모니터링 시각적 WebSocket 표시로
- 빈 상태 처리 데이터가 없을 때를 위한 사용자 친화적인 메시지
- 수동 새로고침 기능 전용 버튼으로
- 문자열, 숫자 및 형식화된 값을 지원하는 유연한 데이터 유형
- 구성 가능한 최대 행 수로 메모리 효율적인 저장 (기본값: 20)
- 페이지 로드 시 자동 데이터 요청으로 즉시 테이블 채우기
- 센서 모니터링, 시스템 상태, 구성 표시 및 실시간 대시보드에 적합
13. CustomWebApp 템플릿 (`/custom`)
- 나만의 맞춤형 웹 애플리케이션을 만들기 위한 완전한 템플릿
- 실시간 WebSocket 통신과 자동 메시지 필터링이 포함됩니다
- 앱 식별자(APP_IDENTIFIER) 시스템을 캡슐화한 전문 클래스 기반 설계
- 초보자 친화적인 템플릿으로 웹과 Arduino 간의 간단한 텍스트 메시지 교환
- 자동 재연결 기능으로 신뢰할 수 있는 WebSocket 연결
- 모바일 반응형 디자인으로 휴대폰, 태블릿, 컴퓨터에서 작동합니다
- 다수의 맞춤 앱 개발을 위한 충돌 예방 지침
- 모듈형 파일 구조로 분리된 HTML, ESP32 로직 및 라이브러리 통합
- 확장 가능한 프레임워크 - 템플릿을 수정하여 정교한 애플리케이션을 만들 수 있습니다
- 통합 준비 완료 - 다른 DIYables ESP32 WebApps와 원활하게 작동합니다
- 맞춤형 IoT 인터페이스, 센서 대시보드, 기기 제어 패널 및 교육용 프로젝트에 이상적입니다
🧩 모듈식 아키텍처
메모리 최적화: DIYables ESP32 WebApps 라이브러리는 실제로 필요한 웹 애플리케이션만 포함할 수 있는 모듈식 설계를 제공하여 아두이노의 메모리 사용량을 크게 줄여줍니다.
핵심 이점:
- 선택적 통합: 프로젝트에 필요한 웹 앱만 추가
- 메모리 효율적: 각 웹 앱은 독립적이며 선택적입니다
- 확장 가능: 필요에 따라 작게 시작하고 더 많은 기능을 추가하세요
- 성능 최적화: 활성 앱 수가 적을수록 성능이 더 좋아집니다
작동 원리:
// Basic setup - include only what you need
DIYablesWebAppServer webAppsServer(80, 81);
DIYablesHomePage homePage; // Always recommended
DIYablesWebSliderPage webSliderPage; // Only if you need sliders
DIYablesWebJoystickPage webJoystickPage; // Only if you need joystick
DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // Only if you need analog gauge
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS); // Only if you need rotator
DIYablesWebTemperaturePage tempPage(-10.0, 50.0, "°C"); // Only if you need temperature
DIYablesWebRTCPage webRTCPage; // Only if you need time sync
// Add only the apps you want
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webSliderPage); // Skip apps you don't need
webAppsServer.addApp(&gaugePage); // Add only what you use
webAppsServer.addApp(&tempPage); // to save memory
webAppsServer.addApp(&webRotatorPage); // Customize as needed
webAppsServer.addApp(&webRTCPage); // Add time synchronization
// Start server - choose appropriate method
webAppsServer.begin("WiFi_SSID", "password"); // WiFi connection
// OR
// webAppsServer.begin(); // For Ethernet or pre-configured connections (future)
// Runtime management (advanced)
if (sensorConnected) {
webAppsServer.addApp(&webJoystickPage); // Add dynamically
}
런타임 유연성:
- 동적 관리: 런타임 중에 addApp() 및 removeApp()를 사용하여 앱을 추가하거나 제거합니다
- 조건부 로딩: 하드웨어나 구성에 따라 앱을 로드합니다
- 맞춤형 앱: DIYablesWebAppPageBase를 상속하여 맞춤형 웹 애플리케이션을 생성합니다
- 재컴파일 필요 없음: 재빌드 없이 사용 가능한 앱을 변경합니다
📋 예시
라이브러리에는 포괄적인 예제 튜토리얼이 포함되어 있습니다:
- 웹 채팅 예제 - 아두이노와 함께하는 인터랙티브 채팅 인터페이스
- 웹 모니터 예제 - 웹 브라우저를 통한 실시간 직렬 모니터
- 웹 플로터 예제 - 실시간 데이터 시각화 및 플로팅
- 웹 디지털 핀 예제 - 디지털 핀 제어 및 모니터링
- 웹 슬라이더 예제 - 아날로그/PWM 출력용 이중 슬라이더 컨트롤
- 웹 조이스틱 예제 - 방향 제어를 위한 가상 조이스틱
- 웹 아날로그 게이지 예제 - 센서 모니터링용 전문 원형 게이지
- 웹 회전 디스크 예제 - 서보/스텝 모터용 인터랙티브 회전 디스크 컨트롤
- 웹 온도계 예제 - 온도 모니터링용 시각 온도계 디스플레이
- 웹 실시간 시계 예제 - 웹 기반 시간 동기화 및 시간대 처리가 포함된 실시간 시계
- 웹 표 예제 - 실시간 속성-값 업데이트가 포함된 2열 데이터 표
- 사용자 정의 웹앱 템플릿 - 자체 맞춤형 웹 응용 프로그램을 만들기 위한 완전한 템플릿
- 다중 웹 앱 예제 - 모든 기능을 결합한 완전한 통합 가이드
각 예제 튜토리얼에는:
- 단계별 설정 안내
- 하드웨어 연결 다이어그램
- 전체 코드 예제
- 문제 해결 가이드
- 프로젝트 아이디어 및 통합 팁
🌐 웹 인터페이스 URL들
와이파이에 연결되면, 다음에서 애플리케이션에 접근하십시오:
- 홈: http://[IP_ADDRESS]/
- 웹 채팅: http://[IP_ADDRESS]/chat
- 웹 모니터: http://[IP_ADDRESS]/web-monitor
- 웹 플로터: http://[IP_ADDRESS]/web-plotter
- 웹 디지털 핀: http://[IP_ADDRESS]/web-digital-pins
- 웹 슬라이더: http://[IP_ADDRESS]/web-slider
- 웹 조이스틱: http://[IP_ADDRESS]/web-joystick
- 웹 아날로그 게이지: http://[IP_ADDRESS]/web-gauge
- 웹 로테이터: http://[IP_ADDRESS]/web-rotator
- 웹 온도: http://[IP_ADDRESS]/web-temperature
- 웹 RTC: http://[IP_ADDRESS]/web-rtc
- 웹 테이블: http://[IP_ADDRESS]/web-table
- 커스텀 앱: http://[IP_ADDRESS]/custom (CustomWebApp 템플릿 사용 시)
💡 사용 팁
- 메모리 최적화: 모듈식 아키텍처를 사용하세요 - 메모리를 절약하기 위해 필요한 웹 앱만 추가하세요
- 와이파이 연결: 안정적인 웹소켓 통신을 위해 강한 와이파이 신호를 확보하세요
- 핀 안전성: 외부 장치를 연결하기 전에 핀의 기능을 항상 확인하세요
- 전원 공급: 연결된 장치를 위해 충분한 전원 공급 장치를 사용하세요
- 브라우저 호환성: 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 가장 잘 작동합니다
- 모바일 친화성: 모든 인터페이스가 반응형이며 모바일 기기에서도 작동합니다
- 작게 시작하기: 1~2개의 웹 앱으로 시작하고 프로젝트가 커지면 기능을 더 추가하세요
🔍 문제 해결
와이파이 연결 문제
- SSID 및 비밀번호 확인
- Wi-Fi 신호 강도 확인
- 2.4GHz 네트워크 사용 여부 확인(5GHz는 지원되지 않음)
웹소켓 연결 문제
- 방화벽 설정을 확인하세요
- 브라우저에서 IP 주소를 확인하세요
- 웹 페이지를 새로 고침해 보세요
- 시리얼 모니터에서 오류 메시지를 확인하세요
성능 문제
- 메모리 최적화: 사용하지 않는 웹 앱을 제거하여 RAM 및 플래시 메모리 확보
- 선택적 로딩: 필요한 기능만 포함하도록 모듈형 아키텍처를 사용
- 고주파 데이터의 업데이트 빈도 제한
- 루프에서 적절한 지연 사용
- 장시간 실행 애플리케이션의 메모리 사용량 모니터링
📚 고급 사용법
동적 앱 관리
라이브러리는 런타임 중 웹 애플리케이션의 추가 및 제거를 지원합니다:
// Add apps dynamically during runtime
if (sensorConnected && !webAppsServer.getApp("/webmonitor")) {
webAppsServer.addApp(new DIYablesWebMonitorPage());
}
// Remove apps to free memory
webAppsServer.removeApp("/chat"); // Remove webchat if not needed
// Get specific app instances
DIYablesWebDigitalPinsPage* pinsPage = webAppsServer.getWebDigitalPinsPage();
if (pinsPage) {
pinsPage->enablePin(2, WEB_PIN_OUTPUT);
}
맞춤형 웹 애플리케이션
DIYablesWebAppPageBase를 상속받아 나만의 웹 앱을 만들어 보세요:
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()));
}
}
};
// Add your custom app
webAppsServer.addApp(new MySensorDashboard());
맞춤형 HTML 페이지
웹 인터페이스의 모양과 기능을 사용자 정의하려면 src/html/ 디렉터리에 있는 HTML 파일을 수정할 수 있습니다.
여러 웹소켓 클라이언트
이 라이브러리는 여러 개의 동시 웹소켓 연결을 지원하며, 이를 통해 여러 사용자가 같은 Arduino를 제어할 수 있습니다.
다른 라이브러리와의 통합
센서 라이브러리, 서보 제어, 모터 드라이버 및 기타 ESP32 라이브러리와 쉽게 통합할 수 있습니다.
📄 라이선스
이 라이브러리는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하십시오.
---
DIYables ESP32 WebApps 라이브러리와 함께 즐거운 코딩! 🎉