ESP32 WebTemperature Example Hướng Dẫn Giao Diện Nhiệt Kế Trực Quan
Tổng Quan
Ví dụ WebTemperature tạo ra một giao diện nhiệt kế trực quan có thể truy cập từ bất kỳ trình duyệt web nào. Được thiết kế cho ESP32 nền tảng giáo dục với khả năng giám sát cảm biến nâng cao, tính năng cảm nhận nhiệt độ tích hợp, và tích hợp liền mạch với các module giáo dục giám sát môi trường. Hoàn hảo cho việc giám sát cảm biến nhiệt độ, điều kiện môi trường, hoặc bất kỳ phép đo dựa trên nhiệt độ nào cần phản hồi trực quan.
Tính Năng
- Hiển Thị Nhiệt Kế Trực Quan: Nhiệt kế tương tác thông qua giao diện web
- Phạm Vi Nhiệt Độ Có Thể Cấu Hình: Nhiệt độ tối thiểu và tối đa tùy chỉnh với đơn vị
- Cập Nhật Thời Gian Thực: Hiển thị nhiệt độ trực tiếp với hiệu ứng hoạt hình kiểu thủy ngân
- Hỗ Trợ Nhiều Đơn Vị: Celsius (°C), Fahrenheit (°F), Kelvin (K)
- Xử Lý Cấu Hình Tự Động: Thiết lập phạm vi và đơn vị một lần trong constructor
- Giao Tiếp WebSocket: Cập nhật tức thì mà không cần làm mới trang
- Responsive Trên Mobile: Hoạt động hoàn hảo trên desktop, tablet và thiết bị di động
- Thiết Kế Chuyên Nghiệp: Hiển thị nhiệt kế sạch sẽ với hiệu ứng hoạt hình mượt mà
Phần Cứng Cần Thiết
| 1 | × | mô-đun phát triển ESP-WROOM-32 | ||
| 1 | × | Alternatively, ESP32 Uno-form board | ||
| 1 | × | Alternatively, ESP32 S3 Uno-form board | ||
| 1 | × | Cáp USB Type-C | ||
| 1 | × | Cảm Biến Nhiệt Độ DS18B20 (tùy chọn) | ||
| 1 | × | Cảm Biến Nhiệt Độ/Độ Ẩm DHT22 (tùy chọn) | ||
| 1 | × | breadboard (bo mạch thí nghiệm) | ||
| 1 | × | Dây Nối Jumper | ||
| 1 | × | (Khuyến nghị) Screw Terminal Expansion Board for ESP32 | ||
| 1 | × | (Khuyến nghị) Breakout Expansion Board for ESP32 | ||
| 1 | × | (Khuyến nghị) Power Splitter for ESP32 |
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | ||
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | ||
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Hướng Dẫn Thiết Lập
Các Bước Nhanh
Làm theo các hướng dẫn này từng bước:
- Mới sử dụng ESP32? Hãy bắt đầu với hướng dẫn ESP32 - Cài Đặt Phần Mềm để học các kiến thức cơ bản trước.
- Kết nối bo mạch ESP32 với máy tính bằng cáp USB.
- Khởi động Arduino IDE trên máy tính của bạn.
- Chọn bo mạch ESP32 phù hợp (ví dụ: ESP32 Dev Module) và cổng COM.
- Điều hướng đến biểu tượng Libraries trên thanh bên trái của Arduino IDE.
- Tìm kiếm "DIYables ESP32 WebApps", sau đó tìm thư viện DIYables ESP32 WebApps Library của DIYables
- Nhấn nút Install để cài đặt thư viện.
- Bạn sẽ được yêu cầu cài đặt một số thư viện phụ thuộc khác
- Nhấn nút Install All để cài đặt tất cả các thư viện phụ thuộc.
- Trên Arduino IDE, vào File Examples DIYables ESP32 WebApps WebTemperature example, hoặc sao chép code trên và dán vào editor của 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();
*/
- Cấu hình thông tin đăng nhập WiFi trong code bằng cách cập nhật các dòng này:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Nhấn nút Upload trên Arduino IDE để tải code lên ESP32
- Mở Serial Monitor
- Kiểm tra kết quả trên Serial Monitor. Nó sẽ trông như thế này
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
- Nếu bạn không thấy gì, hãy khởi động lại bo mạch ESP32.
- Mở trình duyệt web trên PC hoặc điện thoại của bạn.
- Nhập địa chỉ IP hiển thị trong Serial Monitor vào trình duyệt web
- Ví dụ: http://192.168.1.100
- Bạn sẽ thấy trang chủ như hình dưới đây:
- Nhấp vào liên kết Web Temperature, bạn sẽ thấy giao diện của ứng dụng Web Temperature như hình dưới:
- Hoặc bạn cũng có thể truy cập trang trực tiếp bằng địa chỉ IP theo sau bởi /web-temperature. Ví dụ: http://192.168.1.100/web-temperature
- Bạn sẽ thấy màn hình nhiệt kế trực quan hiển thị các đọc số nhiệt độ thời gian thực
Tính Năng Giao Diện Web
Hiển Thị Nhiệt Kế
- Nhiệt Kế Trực Quan: Thiết kế nhiệt kế cổ điển với hiệu ứng hoạt hình kiểu thủy ngân
- Thang Nhiệt Độ: Các vạch thang rõ ràng với phạm vi có thể cấu hình
- Cập Nhật Thời Gian Thực: Hiển thị nhiệt độ trực tiếp với chuyển tiếp mượt mà
- Hiển Thị Đơn Vị: Hiển thị đơn vị nhiệt độ đã cấu hình (°C, °F, K)
- Thiết Kế Chuyên Nghiệp: Hiển thị nhiệt kế sạch sẽ, phong cách giáo dục
Giám Sát Thời Gian Thực
- Dữ Liệu Trực Tiếp: Nhiệt độ cập nhật tự động thông qua kết nối WebSocket
- Hiệu Ứng Hoạt Hình Mượt: Mức thủy ngân di chuyển mượt mà giữa các lần đọc
- Phản Hồi Trạng Thái: Chỉ báo trạng thái kết nối
- Tối Ưu Cho Mobile: Giao diện thân thiện với cảm ứng cho tất cả thiết bị
Cấu Hình Code
Thiết Lập Nhiệt Độ
// Cấu hình phạm vi nhiệt độ và đơn vị
DIYablesWebTemperaturePage temperaturePage(-10.0, 50.0, "°C"); // -10 đến 50°C
// Thiết lập callback yêu cầu giá trị nhiệt độ
temperaturePage.onTemperatureValueRequested(onTemperatureValueRequested);
Gửi Giá Trị Nhiệt Độ
void onTemperatureValueRequested() {
// Đọc nhiệt độ từ cảm biến (ví dụ với mô phỏng)
float currentTemp = readTemperatureSensor();
// Gửi đến màn hình nhiệt kế
temperaturePage.sendTemperature(currentTemp);
}
Tích Hợp Cảm Biến Nhiệt Độ
Cảm Biến Nhiệt Độ Số DS18B20
#include <OneWire.h>
#include <DallasTemperature.h>
#define ONE_WIRE_BUS 2
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
void setup() {
sensors.begin();
// Cấu hình trang nhiệt độ cho phạm vi cảm biến
DIYablesWebTemperaturePage tempPage(-55.0, 125.0, "°C");
}
float readTemperatureSensor() {
sensors.requestTemperatures();
return sensors.getTempCByIndex(0);
}
Cảm Biến Nhiệt Độ/Độ Ẩm DHT22
#include <DHT.h>
#define DHT_PIN 2
#define DHT_TYPE DHT22
DHT dht(DHT_PIN, DHT_TYPE);
void setup() {
dht.begin();
// Cấu hình cho phạm vi DHT22
DIYablesWebTemperaturePage tempPage(-40.0, 80.0, "°C");
}
float readTemperatureSensor() {
return dht.readTemperature(); // Trả về °C
}
Cảm Biến Nhiệt Độ Analog (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; // Công thức TMP36
return temperatureC;
}
Chuyển Đổi Đơn Vị
Hỗ Trợ Nhiều Đơn Vị
// Nhiệt độ với các đơn vị khác nhau
DIYablesWebTemperaturePage celsiusPage(-10.0, 50.0, "°C");
DIYablesWebTemperaturePage fahrenheitPage(14.0, 122.0, "°F");
DIYablesWebTemperaturePage kelvinPage(263.15, 323.15, "K");
// Hàm chuyển đổi
float celsiusToFahrenheit(float celsius) {
return (celsius * 9.0/5.0) + 32.0;
}
float celsiusToKelvin(float celsius) {
return celsius + 273.15;
}
Tùy Chọn Tùy Chỉnh
Phạm Vi Nhiệt Độ
- Nhiệt Độ Tối Thiểu: Thiết lập giá trị đọc thấp nhất mong đợi
- Nhiệt Độ Tối Đa: Thiết lập giá trị đọc cao nhất mong đợi
- Đơn Vị: Chuỗi hiển thị đơn vị (°C, °F, K, hoặc tùy chỉnh)
- Thang Đo: Thang nhiệt kế tự động điều chỉnh theo phạm vi
Tần Suất Cập Nhật
// Kiểm soát tốc độ cập nhật để tránh làm quá tải giao diện
unsigned long lastUpdate = 0;
const unsigned long UPDATE_INTERVAL = 1000; // 1 giây
void loop() {
server.loop();
if (millis() - lastUpdate >= UPDATE_INTERVAL) {
// Cập nhật màn hình nhiệt độ
lastUpdate = millis();
}
}
Các Trường Hợp Sử Dụng Phổ Biến
Dự Án Giáo Dục
- Giám Sát Thời Tiết: Theo dõi nhiệt độ trong nhà/ngoài trời
- Thí Nghiệm Vật Lý: Truyền nhiệt, động lực học nhiệt
- Khoa Học Môi Trường: Giám sát khí hậu, điều khiển nhà kính
- Học Tập Điện Tử: Giao tiếp cảm biến, hiển thị dữ liệu
Ứng Dụng Thực Tế
- Tự Động Hóa Gia Đình: Điều khiển HVAC, giám sát năng lượng
- Điều Khiển Nhà Kính: Tối ưu hóa tăng trưởng cây trồng
- An Toàn Thực Phẩm: Giám sát nhiệt độ cho bảo quản
- Công Nghiệp: Giám sát quy trình, kiểm soát chất lượng
Khắc Phục Sự Cố
Nhiệt Độ Không Cập Nhật
- Kiểm tra kết nối WiFi và trạng thái WebSocket
- Xác minh dây nối cảm biến và nguồn cung cấp
- Đảm bảo hàm callback được thiết lập đúng cách
- Kiểm tra Serial Monitor cho các đọc số cảm biến
Giá Trị Nhiệt Độ Không Chính Xác
- Xác minh hiệu chuẩn và độ chính xác của cảm biến
- Kiểm tra điện áp tham chiếu cho cảm biến analog
- Đảm bảo khởi tạo cảm biến đúng cách
- Kiểm tra cảm biến độc lập với code cơ bản
Vấn Đề Kết Nối Cảm Biến
- Kiểm tra các kết nối dây (nguồn, đất, dữ liệu)
- Xác minh điện trở pull-up cho cảm biến số
- Kiểm tra cảm biến với đồng hồ vạn năng để hoạt động đúng
- Kiểm tra cài đặt thư viện cảm biến và tính tương thích
Tính Năng Nâng Cao
Nhiều Cảm Biến Nhiệt Độ
Giám sát nhiều vị trí với các nhiệt kế riêng biệt:
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);
Ghi Nhật Ký Nhiệt Độ
Kết hợp với Web Plotter cho dữ liệu nhiệt độ lịch sử:
// Gửi cùng một giá trị đến cả nhiệt kế và plotter
temperaturePage.sendTemperature(currentTemp);
plotterPage.sendData("Temperature", currentTemp);
Hệ Thống Cảnh Báo
Triển khai cảnh báo nhiệt độ:
void checkTemperatureAlerts(float temp) {
if (temp > 35.0) {
Serial.println("⚠️ Cảnh báo nhiệt độ cao!");
// Gửi cảnh báo qua giao diện web
} else if (temp < 5.0) {
Serial.println("🧊 Cảnh báo nhiệt độ thấp!");
// Gửi cảnh báo qua giao diện web
}
}
Tích Hợp Giáo Dục
Mục Tiêu Học Tập STEM
- Vật Lý Nhiệt Độ: Hiểu các khái niệm nhiệt
- Công Nghệ Cảm Biến: Học các cảm biến số và analog
- Hiển Thị Dữ Liệu: Kỹ thuật hiển thị dữ liệu thời gian thực
- Lập Trình: Hàm callback, tích hợp cảm biến
Hoạt Động Lớp Học
- So Sánh Cảm Biến: So sánh các loại cảm biến nhiệt độ khác nhau
- Bài Tập Hiệu Chuẩn: Học nguyên lý độ chính xác đo lường
- Giám Sát Môi Trường: Theo dõi thay đổi nhiệt độ theo thời gian
- Tích Hợp Hệ Thống: Kết hợp với các cảm biến môi trường khác
Thí Nghiệm Khoa Học
- Truyền Nhiệt: Giám sát thay đổi nhiệt độ trong các thí nghiệm
- Thay Đổi Pha: Quan sát nhiệt độ trong quá trình nóng chảy/sôi
- Kiểm Tra Cách Nhiệt: So sánh hiệu quả cách nhiệt
- Nghiên Cứu Khí Hậu: Giám sát nhiệt độ dài hạn
Ví dụ này cung cấp một nền tảng toàn diện cho việc giám sát và hiển thị nhiệt độ, hoàn hảo cho cả ứng dụng giáo dục và giám sát môi trường thực tế.