아두이노 WebAnalogGauge 예제 고급 게이지 인터페이스 튜토리얼
개요
WebAnalogGauge 예제는 모든 웹 브라우저에서 접근 가능한 전문적인 원형 게이지 인터페이스를 생성합니다. 본 예제는 아두이노 Uno R4 WiFi 및 DIYables STEM V4 IoT 교육 플랫폼용으로 설계된 향상된 센서 모니터링 기능, 내장 아날로그 입력 기능 및 측정 교육 모듈과의 원활한 통합을 제공합니다. 센서 값, 전압 수준, 압력 읽기 또는 시각적 피드백이 필요한 모든 아날로그 측정에 이상적입니다.
주요 기능
- 전문적인 원형 게이지: 웹 인터페이스를 통한 대화형 게이지 표시
- 구성 가능한 범위: 단위가 포함된 최소값 및 최대값 구성
- 실시간 업데이트: 부드러운 바늘 애니메이션으로 센서 값을 실시간 표시
- 색상 코드화된 구역: 시각적 상태 표시(녹색, 노란색, 빨간색 구역)
- 정밀도 제어: 표시 값의 소수점 이하 자릿수 설정 가능
- WebSocket 통신: 페이지 새로고침 없이 즉시 업데이트
- 모바일 반응형: 데스크탑, 태블릿, 모바일 기기에서 완벽하게 작동
- 자동 구성: 생성자에서 한 번 범위를 설정하면 수동 구성 필요 없음
- 플랫폼 확장성: 현재 Arduino Uno R4 WiFi용으로 구현되어 있지만 다른 하드웨어 플랫폼에도 확장 가능합니다. 자세한 내용은 DIYables_WebApps_ESP32 참조
준비물
| 1 | × | 아두이노 우노 R4 와이파이 | 쿠팡 | 아마존 | |
| 1 | × | (또는) DIYables STEM V4 IoT | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-A to 타입-C (USB-A PC용) | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-C to 타입-C (USB-C PC용) | 아마존 | |
| 1 | × | Potentiometer (optional for testing) | 쿠팡 | 아마존 | |
| 1 | × | 브레드보드 | 쿠팡 | 아마존 | |
| 1 | × | 점퍼케이블 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 스크루 터미널 블록 쉴드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 브레드보드 쉴드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 케이스 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 전원 분배기 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노용 프로토타이핑 베이스 플레이트 & 브레드보드 키트 | 아마존 |
공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
설정 지침
빠른 단계
다음 지시를 차근차근 따라가세요:
- 이 Arduino Uno R4 WiFi/DIYables STEM V4 IoT를 처음 사용하는 경우, Arduino IDE에서 Arduino Uno R4 WiFi/DIYables STEM V4 IoT의 환경 설정에 대한 튜토리얼을 참조하십시오 아두이노 우노 R4 - 소프트웨어 설치.
- Arduino Uno R4/DIYables STEM V4 IoT 보드를 USB 케블로 컴퓨터에 연결합니다.
- 컴퓨터에서 Arduino IDE를 실행합니다.
- 적절한 Arduino Uno R4 보드(예: Arduino Uno R4 WiFi)와 COM 포트를 선택합니다.
- Arduino IDE의 왼쪽 바에서 Libraries 아이콘으로 이동합니다.
- "DIYables WebApps"를 검색한 다음 DIYables에서 제공하는 DIYables WebApps 라이브러리를 찾습니다.
- 라이브러리를 설치하려면 Install 버튼을 클릭합니다.
- 다른 라이브러리 의존성 설치를 요청받게 됩니다
- Install All 버튼을 클릭하여 모든 라이브러리 의존성을 설치합니다.
- 아두이노 IDE에서, File 예제 DIYables WebApps WebAnalogGauge 예제, 또는 위의 코드를 복사하여 아두이노 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: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* 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://[arduino-ip]/web-gauge in your web browser
*/
#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
UnoR4ServerFactory 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 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";
- 아두이노 IDE에서 Upload 버튼을 클릭하여 아두이노 UNO R4/DIYables STEM V4 IoT에 코드를 업로드합니다.
- 시리얼 모니터를 엽니다.
- 시리얼 모니터에서 결과를 확인합니다. 아래와 같습니다.
COM6
DIYables WebApp - Web Analog Gauge Example
INFO: Added app /
INFO: Added app /web-gauge
DIYables WebApp Library
Platform: Arduino Uno R4 WiFi
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를 통한 온도, 습도, 가스 센서
- 계산된 값: 여러 센서로부터 얻은 파생 측정값
- 보정된 판독값: 정확성을 위한 보정 계수 적용
일반 사용 사례
교육 프로젝트
- 전압 모니터링: 배터리 전압, 전원 공급 측정값
- 환경 감지: 온도, 습도, 조도
- 물리 실험: 힘, 압력, 가속도 측정
- 전자공학 학습: 회로 분석, 부품 테스트
실용적 응용
- 홈 자동화: 시스템 모니터링, 환경 제어
- 로봇 공학: 센서 피드백, 시스템 진단
- 사물인터넷 프로젝트: 원격 모니터링, 데이터 시각화
- 산업: 품질 관리, 공정 모니터링
문제 해결
게이지가 업데이트되지 않음
- Wi-Fi 연결 및 웹소켓 상태 확인
- 콜백 함수가 올바르게 설정되었는지 확인
- 게이지 값이 구성된 범위 내에 있는지 확인
- 연결 메시지를 시리얼 모니터에서 확인
잘못된 값들
- 센서 배선 및 연결 확인
- 아날로그 기준 전압 설정 확인
- 필요한 경우 센서 측정값 보정
- 콜백 함수에서 올바른 스케일링 보장
연결 문제
- 브라우저에서 IP 주소를 확인하세요
- 방화벽 설정을 확인하세요
- 2.4GHz WiFi 네트워크를 사용하세요(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 학습 목표
- 데이터 시각화: 아날로그-디지털 변환 이해
- 센서 물리학: 측정 원리 배우기
- 웹 기술: 실시간 통신 개념
- 프로그래밍: 콜백 함수, 데이터 처리
교실 활동
- 센서 비교: 다양한 센서 유형과 범위를 비교합니다.
- 보정 연습: 측정의 정확도와 정밀도를 학습합니다.
- 시스템 통합: 여러 센서와 디스플레이를 결합합니다.
- 문제 해결: 센서 및 디스플레이 문제를 해결합니다.
이 예제는 아날로그 센서 모니터링 및 시각화를 위한 포괄적인 기초를 제공하며, 교육적 및 실용적 용도에 모두 적합합니다.