Ví dụ ESP32 WebAnalogGauge Hướng dẫn Giao diện Đồng hồ đo chuyên nghiệp
Tổng quan
Ví dụ WebAnalogGauge tạo ra một giao diện đồng hồ đo hình tròn chuyên nghiệp có thể truy cập từ bất kỳ trình duyệt web nào. Nền tảng giáo dục Designed for ESP32 với khả năng giám sát cảm biến được cải tiến, các tính năng đầu vào tương tự tích hợp sẵn, và sự tích hợp liền mạch với các mô-đun giáo dục đo lường. Hoàn hảo cho việc giám sát các giá trị cảm biến, mức điện áp, các giá trị áp suất, hoặc bất kỳ phép đo tương tự nào cần phản hồi trực quan.
Tính năng
- Đồng hồ đo vòng tròn chuyên nghiệp: Hiển thị đồng hồ đo tương tác qua giao diện web
- Phạm vi có thể cấu hình: Giá trị tối thiểu và tối đa tùy chỉnh kèm đơn vị
- Cập nhật thời gian thực: Hiển thị giá trị cảm biến theo thời gian thực với hoạt ảnh kim đồng hồ mượt mà
- Các vùng được mã màu: Hiển thị trạng thái trực quan (vùng xanh lá, vàng, đỏ)
- Điều khiển độ chính xác: Độ phân giải thập phân có thể cấu hình cho các giá trị hiển thị
- Giao tiếp WebSocket: Cập nhật tức thì mà không cần làm mới trang
- Thiết kế đáp ứng di động: Hoạt động hoàn hảo trên máy tính để bàn, máy tính bảng và thiết bị di động
- Cấu hình tự động: Thiết lập phạm vi một lần trong hàm khởi tạo - không cần cấu hình thủ công
Phần cứng cần chuẩn bị
| 1 | × | mô-đun phát triển ESP-WROOM-32 | ||
| 1 | × | Alternatively, ESP32 Uno-form board | ||
| 1 | × | Alternatively, ESP32 S3 Uno-form board | ||
| 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 | × | Potentiometer (optional for testing) | ||
| 1 | × | Alternatively, 10k Ohm Trimmer Potentiometer | ||
| 1 | × | Alternatively, Potentiometer Kit | ||
| 1 | × | Alternatively, Potentiometer Module with Knob | ||
| 1 | × | breadboard | ||
| 1 | × | dây 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
Hãy làm theo các hướng dẫn này từng bước một:
- Nếu đây là lần đầu bạn sử dụng ESP32, tham khảo bài hướng dẫn ESP32 - Cài Đặt Phần Mềm.
- Kết nối bo mạch ESP32 với máy tính của bạn 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.
- Chuyển đến biểu tượng Thư việ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 do DIYables.
- Nhấn nút Cài đặt để cài đặt thư viện.
- Bạn sẽ được yêu cầu cài đặt một số phụ thuộc thư viện khác.
- Nhấp nút Cài đặt tất cả để cài đặt tất cả các phụ thuộc thư viện.
- Trên Arduino IDE, hãy vào File Examples DIYables ESP32 WebApps WebAnalogGauge ví dụ, hoặc sao chép mã ở trên và dán vào trình soạn thảo của Arduino 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: ESP32 Boards
*
* 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://[esp32-ip]/web-gauge in your web browser
*/
#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 WebApp server and page instances
ESP32ServerFactory 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 ESP32 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);
}
- Cấu hình thông tin đăng nhập WiFi trong mã bằng cách cập nhật các dòng sau:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Nhấp vào nút Upload trên Arduino IDE để tải mã lên ESP32
- Mở Serial Monitor
- Kiểm tra kết quả trên Serial Monitor. Nó trông như dưới đây
COM6
DIYables WebApp - Web Analog Gauge Example
INFO: Added app /
INFO: Added app /web-gauge
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 Analog Gauge: http://192.168.0.2/web-gauge
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Mở trình duyệt web trên máy tính để bàn hoặc điện thoại di động của bạn.
- Nhập địa chỉ IP được 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 Analog Gauge, bạn sẽ thấy giao diện người dùng của ứng dụng Web Analog Gauge như bên dưới:
- Bạn cũng có thể truy cập trang trực tiếp bằng địa chỉ IP kèm theo /web-analog-gauge. Ví dụ: http://192.168.1.100/web-analog-gauge
- Bạn sẽ thấy một đồng hồ đo hình tròn chuyên nghiệp hiển thị các giá trị cảm biến theo thời gian thực
Các tính năng của giao diện web
Hiển thị đồng hồ đo tương tự
- Đồng hồ đo vòng tròn: Đồng hồ đo chuyên nghiệp với hoạt hình kim mượt mà
- Phạm vi giá trị: Hiển thị giá trị tối thiểu và tối đa được cấu hình
- Giá trị hiện tại: Hiển thị giá trị theo thời gian thực kèm đơn vị
- Vùng màu: Chỉ thị trạng thái trực quan dựa trên các phạm vi giá trị
- Độ chính xác: Số chữ số thập phân có thể cấu hình để các phép đo được chính xác
Cập nhật thời gian thực
- Dữ liệu thời gian thực: Các giá trị tự động cập nhật thông qua kết nối WebSocket
- Hoạt hình mượt mà: Con trỏ di chuyển mượt giữa các giá trị
- Phản hồi trạng thái: Biểu tượng trạng thái kết nối
- Tối ưu cho di động: Giao diện thân thiện với cảm ứng cho mọi thiết bị
Cấu hình mã nguồn
Thiết lập đồng hồ đo
// Configure gauge range and units
DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // 0-100 Volts
// Set up value request callback
gaugePage.onGaugeValueRequest(onGaugeValueRequested);
Gửi các giá trị
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);
}
Các tùy chọn tùy chỉnh
Cấu hình phạm vi
- Giá trị tối thiểu: Đặt giá trị đo tối thiểu dự kiến
- Giá trị tối đa: Đặt giá trị đo tối đa dự kiến
- Đơn vị: Hiển thị chuỗi đơn vị (V, A, °C, PSI, v.v.)
- Độ chính xác: Điều khiển số chữ số thập phân hiển thị
Tích hợp cảm biến
- Cảm biến tương tự: Cảm biến điện áp, dòng điện, áp suất, cảm biến ánh sáng
- Cảm biến số: Cảm biến nhiệt độ, độ ẩm, cảm biến khí qua I2C/SPI
- Các giá trị được tính toán: Các giá trị đo được suy ra từ nhiều cảm biến
- Các phép đo đã hiệu chuẩn: Áp dụng các hệ số hiệu chuẩn để đảm bảo độ chính xác
Các trường hợp sử dụng phổ biến
Các dự án giáo dục
- Giám sát điện áp: Điện áp pin, điện áp nguồn cấp
- Cảm biến môi trường: Nhiệt độ, độ ẩm, mức sáng
- Các thí nghiệm vật lý: Lực, áp suất, gia tốc – các phép đo
- Học điện tử: Phân tích mạch, kiểm tra linh kiện
Các ứng dụng thực tế
- Tự động hóa gia đình: Giám sát hệ thống, điều khiển môi trường
- Công nghệ robot: Phản hồi cảm biến, chẩn đoán hệ thống
- Các dự án IoT: Giám sát từ xa, trực quan hóa dữ liệu
- Công nghiệp: Kiểm soát chất lượng, giám sát quy trình
Khắc phục sự cố
Đồng hồ đo không cập nhật
- Kiểm tra kết nối WiFi và trạng thái WebSocket
- Xác nhận hàm gọi lại được thiết lập đúng
- Đảm bảo giá trị của đồng hồ đo nằm trong phạm vi được cấu hình
- Kiểm tra Serial Monitor để xem các thông điệp kết nối
Các giá trị không hợp lệ
- Kiểm tra dây dẫn và các kết nối của cảm biến
- Kiểm tra cài đặt điện áp tham chiếu analog
- Hiệu chuẩn các giá trị cảm biến nếu cần thiết
- Đảm bảo đúng tỷ lệ trong hàm gọi lại
Sự cố kết nối
- Kiểm tra địa chỉ IP trong trình duyệt web
- Kiểm tra cài đặt tường lửa
- Đảm bảo mạng WiFi 2.4GHz (không hỗ trợ 5GHz)
- Thử làm mới trang trình duyệt
Các tính năng nâng cao
Nhiều đồng hồ đo
Bạn có thể tạo nhiều thể hiện của đồng hồ đo cho các cảm biến khác nhau:
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);
Ghi nhật ký dữ liệu
Kết hợp với Web Plotter để trực quan hóa dữ liệu lịch sử:
// Send same value to both gauge and plotter
gaugePage.sendGaugeValue(voltage);
plotterPage.sendData("Voltage", voltage);
Tích hợp giáo dục
Mục tiêu học tập STEM
- Trực quan hóa dữ liệu: Hiểu về chuyển đổi tín hiệu tương tự sang số
- Vật lý cảm biến: Học các nguyên lý đo lường
- Công nghệ Web: Các khái niệm giao tiếp thời gian thực
- Lập trình: Hàm gọi lại, xử lý dữ liệu
Các hoạt động trong lớp học
- So sánh các loại cảm biến: So sánh các loại cảm biến khác nhau và phạm vi đo
- Bài tập hiệu chuẩn: Tìm hiểu độ chính xác và độ lặp lại của phép đo
- Tích hợp hệ thống: Kết hợp nhiều cảm biến và màn hình hiển thị
- Giải quyết vấn đề: Khắc phục sự cố cảm biến và màn hình hiển thị
Ví dụ này cung cấp nền tảng toàn diện cho việc giám sát và trực quan hóa cảm biến analog, phù hợp cho cả mục đích giáo dục và ứng dụng thực tế.