DIYables WebApps 라이브러리 완전한 아두이노 웹 애플리케이션 프레임워크

DIYables WebApps 라이브러리

포괄적인 Arduino 라이브러리로 Arduino Uno R4 WiFiDIYables STEM V4 IoT에서 WebSocket 기반의 웹 애플리케이션을 만들 수 있습니다. 이 라이브러리는 현대적인 웹 인터페이스를 통해 Arduino 프로젝트를 모니터링하고 제어하며 상호 작용할 수 있는 다수의 즉시 사용 가능한 웹 애플리케이션을 제공합니다. DIYables STEM V4 IoT 교육 플랫폼에 특별히 최적화된 이 라이브러리는 향상된 IoT 기능과 내장 센서를 갖추고 있습니다.

이 라이브러리를 사용하면 스마트폰이나 PC의 웹 브라우저를 통해 Arduino와 상호 작용할 수 있습니다. 아래의 두 가지 방법 중 하나를 통해:

  • 제공된 11개의 애플리케이션 중에서 아무런 웹 프로그래밍 지식 없이 미리 구축된 웹 앱을 사용하세요.
  • 미리 구축된 웹 앱을 사용자 정의하여 특정 프로젝트 요구사항에 맞추세요.
  • 유연한 프레임워크 아키텍처를 사용하여 자신만의 웹 앱을 구축하고 추가하세요.
아두이노 우노 R4 diyables 웹앱

🚀 주요 기능

  • 모듈형 아키텍처: 필요한 웹 앱만 추가하여 메모리 사용을 최적화하세요.
  • 메모리 효율성: 각 웹 앱은 독립적으로 활성화/비활성화될 수 있습니다.
  • 메모리 최적화: HTML, JavaScript 및 CSS 코드는 UI와 기능을 유지하면서 코드 크기를 줄이기 위해 축소됩니다. 참고 및 커스터마이징을 위해 원래의 압축되지 않은 소스 코드는 라이브러리에 포함되어 있습니다.
  • 11개의 사전 구축된 웹 애플리케이션: 웹 프로그래밍 지식이 필요 없이 Arduino를 완전히 제어할 수 있습니다.
  • 홈 페이지: 모든 웹 애플리케이션으로의 링크가 있는 중앙 허브
  • 웹 모니터: 브라우저에서 WebSocket을 통해 실시간 직렬 모니터
  • 웹 채팅: 아두이노와 함께하는 대화형 채팅 인터페이스
  • 웹 디지털 핀들: 웹 인터페이스로 모든 디지털 핀을 제어하고 모니터링합니다
  • 웹 슬라이더: 아날로그/PWM 출력용 이중 슬라이더 컨트롤
  • 웹 조이스틱: 로봇 및 차량 제어를 위한 인터랙티브 조이스틱
  • 웹 아날로그 게이지: 센서 모니터링을 위한 원형 게이지 디스플레이
  • 웹 로테이터: 연속/제한 모드를 갖춘 회전 가능한 디스크 컨트롤
  • 웹 온도: 구성 가능한 범위의 온도계 시각화
  • Web RTC: 시간 동기화 및 타임존 처리를 갖춘 실시간 시계
  • 웹 표: 실시간 업데이트가 이루어지는 두 열 속성-값 표
  • 웹 플로터: 실시간 데이터 시각화 및 그래프 작성
  • 맞춤형 웹 앱 템플릿: 실시간 WebSocket 통신으로 나만의 웹 애플리케이션을 만들기 위한 완전한 템플릿
  • 반응형 디자인: 데스크탑과 모바일 기기에서 작동
  • 실시간 통신: 실시간 업데이트를 위한 WebSocket 기반
  • 간편한 통합: 콜백 기반의 간단한 API
  • 다중 앱 지원: 동시에 여러 개의 웹 앱을 추가할 수 있는 지원
  • 자동 홈 페이지 통합: 추가된 웹 앱이 자동으로 홈 페이지에 링크로 표시됩니다
  • 플랫폼 확장성: 현재 아두이노 우노 R4 WiFi에 대해 구현되었지만, 다른 하드웨어 플랫폼으로도 확장 가능합니다. 자세한 내용은 DIYables_WebApps_ESP32를 참조하십시오.

📦 설치 - Arduino IDE 라이브러리 매니저

  • 아두이노 IDE를 엽니다.
  • 아두이노 IDE의 왼쪽 바에 있는 Libraries 아이콘으로 이동합니다.
  • "DIYables WebApps"를 검색한 다음, DIYables가 만든 DIYables WebApps 라이브러리를 찾으십시오.
  • 라이브러리를 설치하려면 Install 버튼을 클릭합니다.
아두이노 우노 r4 diyables 웹앱 라이브러리
  • 다른 라이브러리 의존성 설치를 요청받게 됩니다.
  • Install All 버튼을 클릭하여 모든 라이브러리 의존성을 설치합니다.
아두이노 우노 R4 diyables 웹앱 의존성

🔧 의존성

이 라이브러리는 다음이 필요합니다:

  • UnoR4WiFi_WebServer 라이브러리 (웹소켓 지원용)

🎯 빠른 시작

자세한 설치 지침 및 코드 예제는 아래를 참조하십시오:

📱 웹 애플리케이션

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)
  • 실시간 위치 피드백
  • 자동 중앙 복귀 기능은 Arduino 코드로 활성화/비활성화할 수 있습니다
  • 로봇 및 차량 제어에 적합합니다

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

  • 실시간 센서 모니터링을 위한 전문 원형 게이지 디스플레이
  • 구성 가능한 값 범위, 단위 및 정밀도
  • 시각적 피드백이 있는 부드러운 바늘 애니메이션
  • 상태 표시를 위한 색상 구역(초록, 노란색, 빨간색)
  • 자동 구성 처리 - 생성자에서 한 번만 범위를 설정
  • 압력 센서, 전압 모니터링 및 아날로그 측정에 적합

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

  • 시각적 피드백이 있는 인터랙티브한 회전 가능한 원판 컨트롤
  • 두 가지 작동 모드: 연속(0-360°) 및 제한(사용자 정의 범위)
  • 매끄러운 회전과 함께 제공되는 실시간 각도 피드백
  • 데스크탑과 모바일에서의 터치 및 마우스 지원
  • 위치 표시기가 있는 전문적인 원뿔형 그라디언트 디자인
  • 서보 모터, 스텝 모터 및 회전 제어에 적합

10. 웹 온도 (`/web-temperature`)

  • 실시간 온도 모니터링이 가능한 시각적 온도계 디스플레이
  • 구성 가능한 온도 범위 및 단위(°C, °F, K)
  • 수은 스타일 애니메이션이 적용된 대화형 온도계 시각화
  • 자동 구성 처리 - 생성자에서 한 번만 범위를 설정
  • WebSocket을 통한 실시간 값 업데이트
  • 온도 센서 및 환경 모니터링에 적합

11. 웹 RTC (`/web-rtc`)

  • 실시간 시계 표시로 Arduino RTC와 클라이언트 디바이스 시간 모두를 표시
  • 원클릭 시간 동기화가 웹 브라우저에서 Arduino RTC로 수행됩니다
  • 시각적 시간 차이 표시기로 분 단위 동기화 정확도를 표시합니다
  • 두 줄 시간 형식으로 12시간 표기(AM/PM)와 전체 날짜를 표시합니다
  • WebSocket 기반의 실시간 업데이트를 통해 즉시 시간 동기화를 제공합니다
  • 모던한 그라데이션 UI와 반응형 카드 스타일 레이아웃
  • 로컬 디바이스 시간 사용으로 타임존 인식 동기화
  • Arduino Uno R4 WiFi 전용 내장 RTC 지원
  • 연결 상태 모니터링을 위한 시각적 WebSocket 표시기로
  • 페이지 로드 시 자동 시간 요청으로 즉시 표시
  • 타임스탬프, 데이터 로깅, 스케줄링 및 시간 기반 자동화에 적합합니다

12. 웹 표 (`/web-table`)

  • 두 열 데이터 표를 정리된 데이터 표시를 위한 속성-값 쌍을 제공합니다
  • 실시간 값 업데이트 WebSocket을 통해 즉시 데이터 새로고침을 제공합니다
  • 구성 가능한 표 구조 Arduino setup() 함수에서 한 번 설정됩니다
  • 동적 값 업데이트 페이지 새로고침 없이 런타임 중에 수행됩니다
  • 현대적인 반응형 디자인 호버 효과 및 시각적 피드백이 포함됩니다
  • 연결 상태 모니터링 시각적 WebSocket 표시기로 연결 상태를 모니터링합니다
  • 빈 상태 처리 데이터가 없을 때 사용자 친화적인 메시지를 제공합니다
  • 수동 새로고침 기능 전용 새로고침 버튼이 제공됩니다
  • 유연한 데이터 유형 문자열, 숫자 및 형식화된 값을 지원합니다
  • 메모리 효율적인 저장 구성 가능한 최대 행 수(기본값: 20)로 제한합니다
  • 자동 데이터 요청 페이지 로드 시 즉시 표를 채우기 위해 자동으로 데이터 요청을 수행합니다
  • 센서 모니터링, 시스템 상태, 구성 표시 및 실시간 대시보드에 적합합니다

13. CustomWebApp 템플릿 (`/custom`)

  • 자신만의 맞춤형 웹 애플리케이션을 만들기 위한 완전한 템플릿
  • 자동 메시지 필터링이 적용된 실시간 WebSocket 통신
  • 캡슐화된 APP_IDENTIFIER 시스템을 갖춘 전문적인 클래스 기반 설계
  • 웹과 Arduino 간의 간단한 텍스트 메시징을 제공하는 초보자 친화적 템플릿
  • 신뢰할 수 있는 WebSocket 연결을 위한 자동 재연결 기능
  • 휴대폰, 태블릿 및 컴퓨터에서 작동하는 반응형 디자인
  • 다중 맞춤 앱 개발을 위한 충돌 예방 가이드
  • HTML, Arduino 로직, 라이브러리 통합이 분리된 모듈식 파일 구조
  • 확장 가능한 프레임워크 - 템플릿을 수정하여 정교한 애플리케이션을 만들어 보세요
  • 통합 준비 완료 - 다른 DIYables WebApps와 원활하게 작동합니다
  • 맞춤형 IoT 인터페이스, 센서 대시보드, 장치 제어 패널 및 교육용 프로젝트에 안성맞춤

🧩 모듈식 아키텍처

메모리 최적화: DIYables WebApps 라이브러리는 필요한 웹 애플리케이션만 포함할 수 있도록 모듈식 설계를 제공하여 Arduino의 메모리 사용량을 크게 줄여줍니다.

핵심 혜택:

  • 선택적 통합: 프로젝트에 필요한 웹 앱만 추가하세요
  • 메모리 효율성: 각 웹 앱은 독립적이며 선택적으로 사용할 수 있습니다
  • 확장 가능: 작게 시작하고 필요에 따라 더 많은 기능을 추가하세요
  • 성능 최적화: 활성 앱 수가 적을수록 성능이 더 좋습니다

작동 원리:

// 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를 상속하여 커스텀 웹 애플리케이션을 만듭니다.
  • 재컴파일 없이: 빌드하지 않고 사용 가능한 앱을 변경합니다.

🔌 API 레퍼런스

모든 클래스, 메서드 및 사용 예제를 포함한 전체 API 문서는 아래를 참조하십시오:

DIYables WebApps 라이브러리 API 레퍼런스 - 전체 문서

📋 예시

라이브러리에는 포괄적인 예제 튜토리얼이 포함되어 있습니다:

각 예제 튜토리얼에는 다음이 포함됩니다:

  • 단계별 설치 지침
  • 하드웨어 연결 다이어그램
  • 전체 코드 예제들
  • 문제 해결 가이드들
  • 프로젝트 아이디어 및 통합 팁

🌐 웹 인터페이스 URL들

WiFi에 연결되면 아래의 애플리케이션에 접속하십시오:

  • : 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 템플릿을 사용할 때)

🔧 하드웨어 설정

DIYables STEM V4 IoT (권장 플랫폼)

  • 최적화된 안테나 설계가 적용된 내장 WiFi 기능
  • 박스에서 바로 사용할 수 있는 온보드 LED 및 센서
  • 추가 연결성을 갖춘 확장 I/O 옵션
  • IoT 개발 학습에 최적화된 교육 중심 설계
  • 신뢰할 수 있는 프로토타이핑을 위한 전문급 부품
  • 브레드보드 사용에 최적화된 포괄적인 핀 배치
  • 안정적인 작동을 위한 향상된 전원 관리
  • STEM 교육 및 IoT 프로젝트 개발에 최적화되어 있습니다

아두이노 우노 R4 와이파이

  • 기본 기능에 추가 하드웨어가 필요하지 않습니다
  • LED를 시각적 피드백을 위해 디지털 핀에 연결하세요
  • 모니터링을 위해 센서를 아날로그 핀에 연결하세요
  • 표준 Arduino 호환성

💡 사용 팁

  1. 메모리 최적화: 메모리를 절약하기 위해 필요한 웹 앱만 추가하는 모듈식 아키텍처를 사용하십시오
  2. 와이파이 연결: 안정적인 웹소켓 통신을 위해 강한 와이파이 신호를 보장하십시오
  3. 핀 안전성: 외부 장치를 연결하기 전에 핀 기능을 항상 확인하십시오
  4. 전원 공급: 연결된 장치에 충분한 전원을 공급하십시오
  5. 브라우저 호환성: 최신 브라우저에서 가장 잘 작동합니다 (Chrome, Firefox, Safari, Edge)
  6. 모바일 친화성: 모든 인터페이스가 반응형이며 모바일 기기에서 작동합니다
  7. 시작은 작게: 초기에는 1~2개의 웹 앱으로 시작하고 프로젝트가 성장하면 더 많은 기능을 추가하십시오

🔍 문제 해결

와이파이 연결 문제

  • SSID 및 비밀번호 확인
  • 와이파이 신호 강도 확인
  • 2.4GHz 네트워크 사용 확인 (5GHz는 지원되지 않음)

웹소켓 연결 문제

  • 방화벽 설정 확인
  • 브라우저에서 IP 주소 확인
  • 웹 페이지를 새로고침 시도
  • 시리얼 모니터에서 오류 메시지 확인

성능 문제

  • 메모리 최적화: 사용하지 않는 웹 앱을 제거하여 램과 플래시 메모리를 확보합니다
  • 선택적 로딩: 필요한 기능만 포함되도록 모듈형 아키텍처를 사용합니다
  • 고주파 데이터의 업데이트 빈도를 제한합니다
  • Loop()에서 적절한 지연을 사용합니다
  • 장시간 실행되는 애플리케이션의 메모리 사용량을 모니터링합니다

📚 고급 사용법

동적 앱 관리

라이브러리는 런타임 중 웹 애플리케이션의 추가 및 제거를 지원합니다:

// 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 파일을 수정하여 웹 인터페이스의 모양과 기능을 사용자 정의할 수 있습니다.

다중 WebSocket 클라이언트

이 라이브러리는 여러 개의 동시 WebSocket 연결을 지원하여 여러 사용자가 같은 아두이노를 제어할 수 있습니다.

다른 라이브러리와의 통합

센서 라이브러리, 서보 제어, 모터 드라이버 및 기타 아두이노 라이브러리와 쉽게 통합할 수 있습니다.

📄 라이선스

이 라이브러리는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하십시오.

🔗 링크

---

DIYables WebApps 라이브러리와 함께하는 즐거운 코딩! 🎉