아두이노 WebTemperature 예제 시각적 온도계 인터페이스 튜토리얼
개요
WebTemperature 예제는 모든 웹 브라우저에서 접근 가능한 시각적 온도계 인터페이스를 생성합니다. 아두이노 우노 R4 WiFi 및 DIYables STEM V4 IoT 교육 플랫폼을 위해 설계된 향상된 센서 모니터링 기능, 내장 온도 감지 기능 및 환경 모니터링 교육 모듈과의 원활한 통합을 갖춘 예제입니다. 시각적 피드백이 필요한 모든 온도 기반 측정을 모니터링하는 데 이상적입니다.
주요 기능
- 시각적 온도계 디스플레이: 웹 인터페이스를 통한 대화형 온도계
- 설정 가능한 온도 범위: 단위가 포함된 사용자 정의 최솟값 및 최댓값
- 실시간 업데이트: 수은형 애니메이션이 적용된 실시간 온도 표시
- 다중 단위 지원: 섭씨(°C), 화씨(°F), 켈빈(K)
- 자동 설정 처리: 생성자에서 범위와 단위를 한 번 설정
- 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 | × | DS18B20 Temperature Sensor (optional) | 쿠팡 | 아마존 | |
| 1 | × | DHT22 Temperature/Humidity Sensor (optional) | 쿠팡 | 아마존 | |
| 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 WebTemperature 예제를 열거나, 위의 코드를 복사하여 아두이노 IDE의 에디터에 붙여넣으세요.
/*
* This example demonstrates how to create a web-base Serial.println("Starting Web Temperature Server...");
// Add web apps to server
server.addApp(&homePage);
server.addApp(&temperaturePage);
// Set 404 Not Found page (optional - for better user experience)
server.setNotFoundPage(DIYablesNotFoundPage());re display
* using the DIYables WebApps library with Arduino Uno R4 WiFi.
*
* The library automatically detects the Arduino Uno R4 WiFi platform and
* includes the appropriate abstraction layer for seamless operation.
*
* The web page displays a thermometer visualization that shows temperature
* readings in real-time through WebSocket communication.
*
* Features:
* - Real-time temperature display with thermometer visualization
* - Configurable temperature range and units
* - Auto-connecting WebSocket for seamless communication
* - Mobile-responsive design with professional UI
* - Automatic platform detection and abstraction
* - Compatible with both WiFi and Ethernet connections
* Hardware: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*/
#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 web app instances
UnoR4ServerFactory serverFactory;
DIYablesWebAppServer server(serverFactory, 80, 81); // HTTP port 80, WebSocket port 81
DIYablesHomePage homePage;
DIYablesWebTemperaturePage temperaturePage(-10.0, 50.0, "°C"); // Min: -10°C, Max: 50°C
// Temperature simulation variables
float currentTemp = 25.0; // Starting temperature
unsigned long lastUpdate = 0;
void setup() {
Serial.begin(9600);
Serial.println("Starting Web Temperature Server...");
// Add web apps to server
server.addApp(&homePage);
server.addApp(&temperaturePage);
// Set 404 Not Found page (optional - for better user experience)
server.setNotFoundPage(DIYablesNotFoundPage());
// Set up temperature callback for value requests
temperaturePage.onTemperatureValueRequested(onTemperatureValueRequested);
// Start the server
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
// Handle web server and WebSocket communications
server.loop();
// Simulate temperature readings
simulateTemperature();
// Send temperature update every 2 seconds
if (millis() - lastUpdate >= 2000) {
temperaturePage.sendTemperature(currentTemp);
// Print temperature to Serial Monitor
Serial.println("Temperature: " + String(currentTemp, 1) + "°C");
lastUpdate = millis();
}
delay(10); // Small delay for stability
}
void simulateTemperature() {
// Simple temperature simulation - slowly increases and decreases
static bool increasing = true;
if (increasing) {
currentTemp += 0.1; // Increase temperature slowly
if (currentTemp >= 35.0) {
increasing = false; // Start decreasing when it reaches 35°C
}
} else {
currentTemp -= 0.1; // Decrease temperature slowly
if (currentTemp <= 15.0) {
increasing = true; // Start increasing when it reaches 15°C
}
}
}
/**
* Callback function called when web interface requests temperature value
* Send current temperature value to web interface
*/
void onTemperatureValueRequested() {
Serial.println("Temperature value requested from web interface");
// Send current temperature value (config is automatically sent by the library)
temperaturePage.sendTemperature(currentTemp);
}
/*
* Alternative setup for real temperature sensor (DS18B20 example):
*
* #include <OneWire.h>
* #include <DallasTemperature.h>
*
* #define ONE_WIRE_BUS 2
* OneWire oneWire(ONE_WIRE_BUS);
* DallasTemperature sensors(&oneWire);
*
* void setup() {
* // ... existing setup code ...
* sensors.begin();
* }
*
* float readTemperature() {
* sensors.requestTemperatures();
* return sensors.getTempCByIndex(0);
* }
*
* // In loop(), replace simulateTemperature() with:
* // currentTemp = readTemperature();
*/
- 다음 줄들을 업데이트하여 코드에서 WiFi 자격 증명을 구성합니다:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Arduino IDE에서 Upload 버튼을 클릭하여 Arduino UNO R4/DIYables STEM V4 IoT에 코드를 업로드합니다.
- 시리얼 모니터를 엽니다.
- 시리얼 모니터의 결과를 확인합니다. 다음과 같습니다.
COM6
Starting Web Temperature Server...
INFO: Added app /
INFO: Added app /web-temperature
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 Temperature: http://192.168.0.2/web-temperature
==========================================
Autoscroll
Clear output
9600 baud
Newline
- 아무 것도 보이지 않으면 Arduino 보드를 재부팅하세요.
- PC나 모바일 기기에서 웹 브라우저를 여세요.
- 시리얼 모니터에 표시된 IP 주소를 웹 브라우저에 입력하세요.
- 예: http://192.168.1.100
- 아래 이미지와 같은 홈 페이지가 표시됩니다:
- Web Temperature 링크를 클릭하면 아래와 같이 Web Temperature 앱의 UI가 표시됩니다:
- 또는 IP 주소 뒤에 /web-temperature를 붙여 페이지에 직접 접속할 수도 있습니다. 예: http://192.168.1.100/web-temperature
- 실시간 온도 값을 시각적으로 표시하는 온도계 디스플레이가 나타납니다.
웹 인터페이스 기능
온도계 표시
- 시각적 온도계: 수은 스타일 애니메이션이 적용된 클래식한 온도계 디자인
- 온도 눈금: 구성 가능한 범위를 갖춘 선명한 눈금 표시
- 실시간 업데이트: 부드러운 전환으로 실시간 온도 표시
- 단위 표시: 구성된 온도 단위(°C, °F, K) 표시
- 전문적인 디자인: 깔끔하고 교육적인 스타일의 온도계 시각화
실시간 모니터링
- 실시간 데이터: WebSocket 연결을 통해 온도가 자동으로 업데이트됩니다.
- 부드러운 애니메이션: 수은 수위가 읽기 사이에서 매끄럽게 움직입니다.
- 상태 피드백: 연결 상태 표시기
- 모바일 최적화: 모든 기기에서 터치 친화적인 인터페이스를 제공합니다.
코드 구성
온도 설정
// Configure temperature range and units
DIYablesWebTemperaturePage temperaturePage(-10.0, 50.0, "°C"); // -10 to 50°C
// Set up temperature value request callback
temperaturePage.onTemperatureValueRequested(onTemperatureValueRequested);
온도 값 전송
void onTemperatureValueRequested() {
// Read temperature from sensor (example with simulation)
float currentTemp = readTemperatureSensor();
// Send to thermometer display
temperaturePage.sendTemperature(currentTemp);
}
온도 센서 통합
DS18B20 디지털 온도 센서
#include <OneWire.h>
#include <DallasTemperature.h>
#define ONE_WIRE_BUS 2
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
void setup() {
sensors.begin();
// Configure temperature page for sensor range
DIYablesWebTemperaturePage tempPage(-55.0, 125.0, "°C");
}
float readTemperatureSensor() {
sensors.requestTemperatures();
return sensors.getTempCByIndex(0);
}
DHT22 온도/습도 센서
#include <DHT.h>
#define DHT_PIN 2
#define DHT_TYPE DHT22
DHT dht(DHT_PIN, DHT_TYPE);
void setup() {
dht.begin();
// Configure for DHT22 range
DIYablesWebTemperaturePage tempPage(-40.0, 80.0, "°C");
}
float readTemperatureSensor() {
return dht.readTemperature(); // Returns °C
}
아날로그 온도 센서 (TMP36)
#define TEMP_PIN A0
float readTemperatureSensor() {
int reading = analogRead(TEMP_PIN);
float voltage = reading * 5.0 / 1024.0;
float temperatureC = (voltage - 0.5) * 100.0; // TMP36 formula
return temperatureC;
}
단위 변환
다중 단위 지원
// Temperature in different units
DIYablesWebTemperaturePage celsiusPage(-10.0, 50.0, "°C");
DIYablesWebTemperaturePage fahrenheitPage(14.0, 122.0, "°F");
DIYablesWebTemperaturePage kelvinPage(263.15, 323.15, "K");
// Conversion functions
float celsiusToFahrenheit(float celsius) {
return (celsius * 9.0/5.0) + 32.0;
}
float celsiusToKelvin(float celsius) {
return celsius + 273.15;
}
맞춤 설정 옵션
온도 범위
- 최저 온도: 예상 최저 읽기값 설정
- 최고 온도: 예상 최고 읽기값 설정
- 단위: 표시할 단위 문자열(°C, °F, K 또는 사용자 정의)
- 눈금: 온도계 눈금은 범위에 맞춰 자동으로 조정됩니다
업데이트 주기
// Control update rate to avoid overwhelming the interface
unsigned long lastUpdate = 0;
const unsigned long UPDATE_INTERVAL = 1000; // 1 second
void loop() {
server.loop();
if (millis() - lastUpdate >= UPDATE_INTERVAL) {
// Update temperature display
lastUpdate = millis();
}
}
일반적인 사용 사례
교육 프로젝트
- 기상 모니터링: 실내/실외 온도 측정
- 물리학 실험: 열전달, 열역학
- 환경 과학: 기후 모니터링, 온실 제어
- 전자 공학 학습: 센서 인터페이스, 데이터 시각화
실용적 응용
- 가정 자동화: HVAC 제어, 에너지 모니터링
- 온실 제어: 식물 생장 최적화
- 식품 안전: 저장용 온도 모니터링
- 산업: 공정 모니터링, 품질 관리
문제 해결
온도 업데이트가 되지 않음
- 와이파이 연결 및 웹소켓 상태 확인
- 센서 배선 및 전원 공급 확인
- 콜백 함수가 올바르게 설정되었는지 확인
- 시리얼 모니터에서 센서 값을 확인
잘못된 온도 값들
- 센서 보정 및 정확도 확인
- 아날로그 센서용 전압 레퍼런스 확인
- 올바른 센서 초기화 확인
- 기본 코드로 센서를 독립적으로 테스트
센서 연결 문제
- 배선 연결 확인(전원, 접지, 데이터)
- 디지털 센서용 풀업 저항 확인
- 멀티미터로 센서의 정상 작동 여부를 테스트
- 센서 라이브러리 설치 및 호환성 확인
고급 기능
다중 온도 센서
여러 위치를 별도의 온도계로 모니터링:
DIYablesWebTemperaturePage indoorTemp(-10.0, 40.0, "°C");
DIYablesWebTemperaturePage outdoorTemp(-30.0, 50.0, "°C");
DIYablesWebTemperaturePage waterTemp(0.0, 100.0, "°C");
server.addApp(&indoorTemp);
server.addApp(&outdoorTemp);
server.addApp(&waterTemp);
온도 로깅
역사적 온도 데이터용 Web Plotter와 결합:
// Send same value to both thermometer and plotter
temperaturePage.sendTemperature(currentTemp);
plotterPage.sendData("Temperature", currentTemp);
경보 시스템
온도 경보를 구현:
void checkTemperatureAlerts(float temp) {
if (temp > 35.0) {
Serial.println("⚠️ High temperature alert!");
// Send alert via web interface
} else if (temp < 5.0) {
Serial.println("🧊 Low temperature alert!");
// Send alert via web interface
}
}
교육적 통합
과학·기술·공학·수학 학습 목표
- 온도 물리학: 열 개념 이해
- 센서 기술: 디지털 및 아날로그 센서 학습
- 데이터 시각화: 실시간 데이터 표시 기법
- 프로그래밍: 콜백 함수, 센서 통합
교실 활동
- 센서 비교: 서로 다른 온도 센서 유형을 비교합니다
- 보정 연습: 측정 정확도 원리 배우기
- 환경 모니터링: 시간에 따른 온도 변화 추적
- 시스템 통합: 다른 환경 센서와 결합
과학 실험
- 열전달: 실험 중 온도 변화 모니터링
- 상 변화: 용융/비등 중 온도 관찰
- 단열 시험: 단열 효과 비교
- 기후 연구: 장기간 온도 모니터링
이 예제는 온도 모니터링과 시각화를 위한 포괄적인 기반을 제공하며, 교육용과 실용적인 환경 모니터링 애플리케이션 모두에 적합합니다.