ESP32 WebTemperature 예제 시각적 온도계 인터페이스 튜토리얼
개요
WebTemperature 예제는 모든 웹 브라우저에서 접근 가능한 시각적 온도계 인터페이스를 제공합니다. ESP32 교육 플랫폼용으로 설계되었으며 향상된 센서 모니터링 기능과 내장된 온도 감지 기능, 그리고 환경 모니터링 교육 모듈과의 매끄러운 통합을 갖추고 있습니다. 온도 센서, 환경 조건, 또는 시각적 피드백이 필요한 모든 온도 기반 측정 값을 모니터링하는 데 이상적입니다.
주요 기능
- 시각적 온도계 디스플레이: 웹 인터페이스를 통한 인터랙티브한 온도계
- 구성 가능한 온도 범위: 단위가 포함된 최소 및 최대 온도 설정
- 실시간 업데이트: 수은 스타일의 애니메이션이 적용된 실시간 온도 표시
- 다중 단위 지원: 섭씨(°C), 화씨(°F), 켈빈(K)
- 자동 구성 처리: 생성자에서 한 번에 범위와 단위를 설정
- WebSocket 통신: 페이지 새로고침 없이 즉시 업데이트
- 모바일 반응형: 데스크탑, 태블릿 및 모바일 기기에서 완벽하게 작동
- 전문적인 디자인: 매끄러운 애니메이션이 적용된 깔끔한 온도계 시각화
준비물
| 1 | × | ESP32 ESP-WROOM-32 개발 모듈 | 쿠팡 | 아마존 | |
| 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 | × | (추천) ESP32용 스크루 터미널 확장 보드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) Breakout Expansion Board for ESP32 | 쿠팡 | 아마존 | |
| 1 | × | (추천) ESP32용 전원 분배기 | 쿠팡 | 아마존 |
공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
설치 지침
빠른 단계
다음 지침을 단계별로 따라가십시오:
- ESP32를 처음 사용하는 경우, ESP32 - 소프트웨어 설치 튜토리얼을 참조하십시오.
- ESP32 보드를 USB 케이블로 컴퓨터에 연결합니다.
- 컴퓨터에서 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 WebTemperature 예제로 이동하거나, 위의 코드를 복사하여 Arduino 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 ESP32 WebApps Library with ESP32.
*
* The library automatically detects the ESP32 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: ESP32 Boards
*/
#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 web app instances
ESP32ServerFactory 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에서 ESP32에 코드를 업로드하려면 Upload 버튼을 클릭하세요.
- 시리얼 모니터를 여세요.
- 시리얼 모니터에서 결과를 확인하세요. 아래와 같습니다.
COM6
Starting Web Temperature Server...
INFO: Added app /
INFO: Added app /web-temperature
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 Temperature: http://192.168.0.2/web-temperature
==========================================
Autoscroll
Clear output
9600 baud
Newline
- 아무것도 보이지 않으면 ESP32 보드를 재부팅하십시오.
- 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 제어, 에너지 모니터링
- 온실 제어: 식물 생장 최적화
- 식품 안전: 저장용 온도 모니터링
- 산업용: 공정 모니터링, 품질 관리
문제 해결
온도 업데이트되지 않음
- WiFi 연결 및 WebSocket 상태 확인
- 센서 배선 및 전원 공급 확인
- 콜백 함수가 올바르게 설정되어 있는지 확인
- 시리얼 모니터에서 센서 판독값 확인
잘못된 온도 값들
- 센서 보정 및 정확도 확인
- 아날로그 센서의 전압 기준 확인
- 올바른 센서 초기화 보장
- 기본 코드로 센서를 독립적으로 테스트
센서 연결 문제
- 배선 연결 확인(전원, 접지, 데이터)
- 디지털 센서용 풀업 저항 확인
- 멀티미터를 사용하여 센서가 정상 작동하는지 테스트
- 센서 라이브러리 설치 및 호환성 확인
고급 기능
다중 온도 센서들
별도의 온도계로 여러 위치를 모니터링:
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
}
}
교육적 통합
STEM 학습 목표
- 온도 물리학: 열적 개념 이해
- 센서 기술: 디지털 및 아날로그 센서 학습
- 데이터 시각화: 실시간 데이터 표시 기법
- 프로그래밍: 콜백 함수, 센서 통합
교실 활동
- 센서 비교: 다양한 온도 센서 유형 비교
- 보정 실습: 측정 정확도 원리 학습
- 환경 모니터링: 시간에 따른 온도 변화 추적
- 시스템 통합: 다른 환경 센서와의 통합
과학 실험
- 열 전달: 실험 중 온도 변화 모니터링
- 상 변화: 용융/비등 중 온도 관찰
- 단열 시험: 단열 효과 비교
- 기후 연구: 장기간 온도 모니터링
이 예제는 온도 모니터링과 시각화를 위한 포괄적인 기초를 제공합니다. 교육용과 실용적 환경 모니터링 응용에 모두 적합합니다.