ESP32 WebAnalogGauge 예제 전문 게이지 인터페이스 튜토리얼
개요
WebAnalogGauge 예제는 모든 웹 브라우저에서 접근 가능한 전문적인 원형 게이지 인터페이스를 제공합니다. ESP32용으로 설계된 교육 플랫폼으로서, 향상된 센서 모니터링 기능, 내장 아날로그 입력 기능, 그리고 측정 교육 모듈과의 원활한 통합을 갖추고 있습니다. 센서 값, 전압 수준, 압력 읽기 또는 시각적 피드백이 필요한 모든 아날로그 측정값에 이상적입니다.
주요 기능
- 전문 원형 게이지: 웹 인터페이스를 통한 상호작용형 게이지 표시
- 구성 가능한 범위: 단위가 포함된 사용자 정의 최소값 및 최대값
- 실시간 업데이트: 부드러운 바늘 애니메이션이 적용된 실시간 센서 값 표시
- 색상 코드가 적용된 구역: 시각적 상태 표시 (녹색, 노란색, 빨간색 구역)
- 정밀도 제어: 표시 값의 소수점 자리수 설정 가능
- 웹소켓 통신: 페이지 새로고침 없이 즉시 업데이트
- 모바일 반응형: 데스크탑, 태블릿, 모바일 기기에서 완벽하게 작동
- 자동 구성: 생성자에서 한 번 범위를 설정하면 수동 구성이 필요 없음
준비물
| 1 | × | ESP32 ESP-WROOM-32 개발 모듈 | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-A to 타입-C (USB-A PC용) | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-C to 타입-C (USB-C PC용) | 아마존 | |
| 1 | × | Potentiometer (optional for testing) | 쿠팡 | 아마존 | |
| 1 | × | 브레드보드 | 쿠팡 | 아마존 | |
| 1 | × | 점퍼케이블 | 쿠팡 | 아마존 | |
| 1 | × | (추천) ESP32용 스크루 터미널 확장 보드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) Breakout Expansion Board for ESP32 | 쿠팡 | 아마존 | |
| 1 | × | (추천) ESP32용 전원 분배기 | 쿠팡 | 아마존 |
공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
설정 지침
빠른 단계
다음 지시를 단계별로 따라가세요:
- ESP32를 처음 사용하는 경우, ESP32 - 소프트웨어 설치 튜토리얼을 참조하세요.
- USB 케이블로 ESP32 보드를 컴퓨터에 연결하세요.
- 컴퓨터에서 Arduino IDE를 실행하세요.
- 적절한 ESP32 보드(예: ESP32 Dev Module)와 COM 포트를 선택하세요.
- Arduino IDE의 왼쪽 바에서 Libraries 아이콘으로 이동하세요.
- "DIYables ESP32 WebApps"를 검색한 다음, DIYables가 제공하는 DIYables ESP32 WebApps 라이브러리를 찾으세요.
- Install 버튼을 클릭하여 라이브러리를 설치하세요.
- 다른 라이브러리 의존성을 설치하라는 메시지가 표시됩니다.
- 모든 라이브러리 의존성을 설치하려면 Install All 버튼을 클릭하십시오.
- Arduino IDE에서, File 예제 DIYables ESP32 WebApps WebAnalogGauge 예제로 이동하거나, 위의 코드를 복사하여 Arduino IDE의 에디터에 붙여넣으십시오
/*
* DIYables WebApp Library - Web Analog Gauge Example
*
* This Serial.println("\nWebAnalogGauge is ready!");
Serial.print("IP Address: ");
Serial.println(webAppsServer.getLocalIP());
Serial.println("Open your web browser and navigate to:");
Serial.print("1. http://");
Serial.print(webAppsServer.getLocalIP());
Serial.println("/ (Home page)");
Serial.print("2. http://");
Serial.print(webAppsServer.getLocalIP());
Serial.println("/webanalogGauge (Analog Gauge)");
Serial.println("\nSimulating sensor data...");monstrates the Web Analog Gauge application:
* - Real-time analog gauge visualization
* - Simulated sensor data with smooth animation
* - WebSocket communication for live updates
* - Beautiful analog gauge with tick marks and smooth pointer movement
*
* Features:
* - Automatic gauge value simulation
* - Smooth animation between values
* - Range: 0° to 280° (customizable)
* - Real-time WebSocket updates
* - Professional analog gauge appearance
*
* 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://[esp32-ip]/web-gauge in your web browser
*/
#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
ESP32ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
// Gauge configuration constants
const float GAUGE_MIN_VALUE = 0.0;
const float GAUGE_MAX_VALUE = 100.0;
const String GAUGE_UNIT = "%";
DIYablesWebAnalogGaugePage webAnalogGaugePage(GAUGE_MIN_VALUE, GAUGE_MAX_VALUE, GAUGE_UNIT); // Range: 0-100%
// Other examples:
// DIYablesWebAnalogGaugePage webAnalogGaugePage(-50.0, 150.0, "°C"); // Temperature: -50°C to 150°C
// DIYablesWebAnalogGaugePage webAnalogGaugePage(0.0, 1023.0, ""); // Analog sensor: 0-1023 (no unit)
// DIYablesWebAnalogGaugePage webAnalogGaugePage(0.0, 5.0, "V"); // Voltage: 0-5V
// Simulation variables
unsigned long lastUpdateTime = 0;
const unsigned long UPDATE_INTERVAL = 500; // Update every 500ms (0.5 second)
const float STEP_SIZE = 1.0; // Step size for simulation
float currentGaugeValue = GAUGE_MIN_VALUE; // Start at minimum value
float step = STEP_SIZE; // Positive step means increasing, negative means decreasing
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables ESP32 WebApp - Web Analog Gauge Example");
// Add web applications to the server
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webAnalogGaugePage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
setupCallbacks();
}
void setupCallbacks() {
// Handle gauge value requests (when web page loads/reconnects)
webAnalogGaugePage.onGaugeValueRequest([]() {
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
Serial.println("Web client requested gauge value - Sent: " + String(currentGaugeValue, 1) + GAUGE_UNIT);
});
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// Update gauge with simulated sensor data
if (millis() - lastUpdateTime >= UPDATE_INTERVAL) {
lastUpdateTime = millis();
Serial.println("Updating gauge value..."); // Debug message
// Simple linear simulation: step changes direction at boundaries
currentGaugeValue += step;
// Change direction when reaching boundaries
if (currentGaugeValue >= GAUGE_MAX_VALUE || currentGaugeValue <= GAUGE_MIN_VALUE) {
step *= -1; // Reverse direction
}
// Ensure value stays within bounds (safety check)
if (currentGaugeValue < GAUGE_MIN_VALUE) currentGaugeValue = GAUGE_MIN_VALUE;
if (currentGaugeValue > GAUGE_MAX_VALUE) currentGaugeValue = GAUGE_MAX_VALUE;
// Send the new value to all connected web clients
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
// Print to serial for debugging
Serial.println("Gauge: " + String(currentGaugeValue, 1) + GAUGE_UNIT + " (" + (step > 0 ? "↑" : "↓") + ")");
}
delay(10);
}
- 다음 줄들을 업데이트하여 코드에서 WiFi 자격 증명을 구성합니다:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Arduino IDE에서 Upload 버튼을 클릭하여 ESP32에 코드를 업로드합니다
- 시리얼 모니터를 엽니다
- 시리얼 모니터의 결과를 확인합니다. 아래와 같습니다
COM6
DIYables WebApp - Web Analog Gauge Example
INFO: Added app /
INFO: Added app /web-gauge
DIYables WebApp Library
Platform: 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/
⏲️ Web Analog Gauge: http://192.168.0.2/web-gauge
==========================================
Autoscroll
Clear output
9600 baud
Newline
- PC나 모바일 폰에서 웹 브라우저를 여세요.
- 시리얼 모니터에 표시된 IP 주소를 웹 브라우저에 입력하세요.
- 예: http://192.168.1.100
- 아래 그림과 같은 홈 페이지가 표시됩니다.
- Web Analog Gauge 링크를 클릭하면 아래와 같은 Web Analog Gauge 앱의 UI가 표시됩니다.
- 또는 IP 주소 뒤에 /web-analog-gauge를 붙여 페이지에 직접 접속하실 수도 있습니다. 예를 들어: http://192.168.1.100/web-analog-gauge
- 실시간 센서 값을 표시하는 전문적인 원형 게이지 디스플레이가 표시됩니다.
웹 인터페이스 기능
아날로그 게이지 디스플레이
- 원형 게이지: 매끄러운 바늘 애니메이션을 갖춘 전문 게이지
- 값 범위: 구성된 최소값 및 최대값 표시
- 현재 판독값: 단위와 함께 실시간 값 표시
- 색상 구역: 값 범위에 따른 시각적 상태 표시
- 정밀도: 정확한 판독을 위한 소수점 자리 수 설정 가능
실시간 업데이트
- 실시간 데이터: 값이 WebSocket 연결을 통해 자동으로 업데이트됩니다
- 매끄러운 애니메이션: 바늘이 값들 사이를 부드럽게 움직입니다
- 상태 피드백: 연결 상태 표시기
- 모바일 최적화: 모든 기기에서 터치 친화적인 인터페이스
코드 구성
게이지 설정
// Configure gauge range and units
DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // 0-100 Volts
// Set up value request callback
gaugePage.onGaugeValueRequest(onGaugeValueRequested);
값 전송
void onGaugeValueRequested() {
// Read sensor value (example with potentiometer)
int sensorValue = analogRead(A0);
float voltage = (sensorValue / 1023.0) * 5.0;
// Send to gauge
gaugePage.sendGaugeValue(voltage);
}
맞춤 설정 옵션
범위 구성
- 최소값: 예상 최저 측정값 설정
- 최대값: 예상 최고 측정값 설정
- 단위: 표시 단위 문자열(예: V, A, °C, PSI 등)
- 소수점 자리수: 표시의 소수점 자릿수 제어
센서 통합
- 아날로그 센서: 전압, 전류, 압력, 광 센서
- 디지털 센서: 온도, 습도, I2C/SPI를 이용한 가스 센서
- 계산 값: 여러 센서에서 도출된 측정값
- 보정된 측정값: 정확도를 위한 보정 계수 적용
일반적인 사용 사례
교육 프로젝트
- 전압 모니터링: 배터리 전압, 전원 공급 장치의 측정값
- 환경 감지: 온도, 습도, 광도
- 물리 실험: 힘, 압력, 가속도 측정값
- 전자공학 학습: 회로 분석, 부품 테스트
실용적 응용
- 홈 자동화: 시스템 모니터링, 환경 제어
- 로봇 공학: 센서 피드백, 시스템 진단
- 사물인터넷 프로젝트: 원격 모니터링, 데이터 시각화
- 산업: 품질 관리, 공정 모니터링
문제 해결
게이지가 업데이트되지 않음
- WiFi 연결 및 WebSocket 상태 확인
- 콜백 함수가 올바르게 설정되었는지 확인
- 게이지 값이 구성된 범위 내에 있는지 확인
- 연결 메시지를 시리얼 모니터에서 확인
잘못된 값들
- 센서 배선 및 연결 점검
- 아날로그 참조 전압 설정 점검
- 필요한 경우 센서 측정값 보정
- 콜백 함수에서 올바른 스케일링을 보장
연결 문제
- 브라우저에서 IP 주소를 확인하세요
- 방화벽 설정을 확인하세요
- 2.4GHz 와이파이 네트워크를 사용하세요(5GHz는 지원되지 않습니다)
- 브라우저 페이지를 새로 고침해 보세요
고급 기능
다중 게이지
다른 센서를 위해 여러 개의 게이지 인스턴스를 생성할 수 있습니다:
DIYablesWebAnalogGaugePage voltageGauge(0.0, 5.0, "V");
DIYablesWebAnalogGaugePage currentGauge(0.0, 2.0, "A");
DIYablesWebAnalogGaugePage tempGauge(-40.0, 85.0, "°C");
server.addApp(&voltageGauge);
server.addApp(¤tGauge);
server.addApp(&tempGauge);
데이터 로깅
역사적 데이터 시각화를 위한 Web Plotter와의 결합:
// Send same value to both gauge and plotter
gaugePage.sendGaugeValue(voltage);
plotterPage.sendData("Voltage", voltage);
교육적 통합
STEM 학습 목표
- 데이터 시각화: 아날로그-디지털 변환 이해
- 센서 물리학: 측정 원리 학습
- 웹 기술: 실시간 통신 개념
- 프로그래밍: 콜백 함수, 데이터 처리
교실 활동
- 센서 비교: 다양한 센서 유형과 범위를 비교
- 교정 연습: 측정 정확도와 정밀도 이해하기
- 시스템 통합: 여러 센서와 디스플레이를 통합하기
- 문제 해결: 센서 및 디스플레이 문제를 해결하기
이 예제는 아날로그 센서 모니터링 및 시각화를 위한 포괄적인 기초를 제공하며, 교육용 및 실용적 응용에 모두 적합합니다.