Arduino 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 Arduino Uno R4 WiFi và nền tảng giáo dục DIYables STEM V4 IoT với khả năng giám sát cảm biến nâng cao, tính năng cảm biế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 để giám sát các 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 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 hoạt ảnh kiểu thủy ngân
- Hỗ Trợ Nhiều Đơn Vị: Độ C (°C), Fahrenheit (°F), Kelvin (K)
- Xử Lý Cấu Hình Tự Động: Đặt 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 tải lại trang
- Responsive Thiết Bị Di Động: Hoạt động hoàn hảo trên desktop, tablet, và điện thoại
- Thiết Kế Chuyên Nghiệp: Trực quan hóa nhiệt kế sạch sẽ với hoạt ảnh mượt mà
- Mở Rộng Nền Tảng: Hiện tại được triển khai cho Arduino Uno R4 WiFi, nhưng có thể mở rộng cho các nền tảng phần cứng khác. Xem DIYables_WebApps_ESP32
Linh Kiện Cần Thiết
| 1 | × | Arduino UNO R4 WiFi | ||
| 1 | × | Alternatively, DIYables STEM V4 IoT | ||
| 1 | × | (Tùy chọn) DIYables STEM V4 IoT | ||
| 1 | × | USB Cable Type-A to Type-C (for USB-A PC) | ||
| 1 | × | USB Cable Type-C to Type-C (for USB-C PC) | ||
| 1 | × | DS18B20 Temperature Sensor (tùy chọn) | ||
| 1 | × | DHT22 Temperature/Humidity Sensor (tùy chọn) | ||
| 1 | × | breadboard | ||
| 1 | × | dây jumper | ||
| 1 | × | (Khuyến nghị) Screw Terminal Block Shield for Arduino UNO R4 | ||
| 1 | × | (Khuyến nghị) Breadboard Shield for Arduino UNO R4 | ||
| 1 | × | (Khuyến nghị) Enclosure for Arduino UNO R4 | ||
| 1 | × | (Khuyến nghị) Power Splitter for Arduino UNO R4 | ||
| 1 | × | (Khuyến nghị) Prototyping Base Plate & Breadboard Kit for Arduino UNO |
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino 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 Thực Hiện
Thực hiện theo từng bước hướng dẫn sau:
- Mới sử dụng Arduino Uno R4 WiFi? Hãy bắt đầu với hướng dẫn Arduino UNO R4 - Cài Đặt Phần Mềm để học các kiến thức cơ bản trước.
- Kết nối board Arduino Uno R4/DIYables STEM V4 IoT với máy tính bằng cáp USB.
- Khởi động Arduino IDE trên máy tính.
- Chọn board Arduino Uno R4 phù hợp (ví dụ: Arduino Uno R4 WiFi) 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 WebApps", sau đó tìm thư viện DIYables WebApps của DIYables
- Nhấp 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ấp nút Install All để cài đặt tất cả thư viện phụ thuộc.
- Trong Arduino IDE, đi đến File Examples DIYables WebApps WebTemperature example, hoặc sao chép đoạn 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 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();
*/
- Cấu hình thông tin 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ấp nút Upload trên Arduino IDE để tải code lên Arduino UNO R4/DIYables STEM V4 IoT
- Mở Serial Monitor
- Kiểm tra kết quả trên Serial Monitor. Nó sẽ trông như bên dưới
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
- Nếu bạn không thấy gì, hãy khởi động lại board Arduino.
- Mở trình duyệt web trên PC hoặc điện thoại.
- 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 link Web Temperature, bạn sẽ thấy giao diện của ứng dụng Web Temperature như bên 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 hiển thị nhiệt kế trực quan cho thấy các số đo 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 hoạt ảnh kiểu thủy ngân
- Thang Đo Nhiệt Độ: Các vạch đo 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: Trực quan hóa nhiệt kế sạch sẽ, kiểu 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 qua kết nối WebSocket
- Hoạt Ảnh Mượt Mà: 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 Di Động: 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 hiển thị nhiệt kế
temperaturePage.sendTemperature(currentTemp);
}
Tích Hợp Cảm Biến Nhiệt Độ
DS18B20 Digital Temperature Sensor
#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);
}
DHT22 Temperature/Humidity Sensor
#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
}
Analog Temperature Sensor (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: Đặt số đọc thấp nhất dự kiến
- Nhiệt Độ Tối Đa: Đặt số đọc cao nhất dự kiến
- Đơn Vị: Chuỗi đơn vị hiển thị (°C, °F, K, hoặc tùy chỉnh)
- Thang Đo: Thang đo 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 hiển thị 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, kiểm soát nhà kính
- Học Điện Tử: Giao tiếp cảm biến, trực quan hóa dữ liệu
Ứng Dụng Thực Tế
- Nhà Thông Minh: Kiểm soát HVAC, giám sát năng lượng
- Kiểm Soát 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 độ 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 kết nối cảm biến và nguồn cấp điện
- Đảm bảo hàm callback được thiết lập đúng cách
- Kiểm tra Serial Monitor để xem số đọc 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 kết nối dây (nguồn, mass, dữ liệu)
- Xác minh điện trở kéo lên cho cảm biến số
- Kiểm tra cảm biến bằng đồng hồ vạn năng để hoạt động đúng
- Kiểm tra cài đặt và tương thích thư viện cảm biến
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 Log Nhiệt Độ
Kết hợp với Web Plotter cho dữ liệu nhiệt độ lịch sử:
// Gửi cùng giá trị cho 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 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
- Trực Quan Hóa 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 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 nền tảng toàn diện cho giám sát và trực quan hóa 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ế.