Arduino WebAnalogGauge Example Hướng Dẫn Tạo Giao Diện Đồng Hồ Đo Chuyên Nghiệp
Tổng Quan
Ví dụ WebAnalogGauge tạo ra giao diện đồng hồ đo tròn chuyên nghiệp 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 đầu vào analog tích hợp, và tích hợp liền mạch với các module giáo dục đo lường. Hoàn hảo để giám sát giá trị cảm biến, mức điện áp, đọc áp suất, hoặc bất kỳ phép đo analog nào cần phản hồi trực quan.
Xem video hướng dẫn từng bước này để biết cách sử dụng biến trở với ứng dụng Web Analog Gauge:
Tính Năng
- Đồng Hồ Đo Tròn Chuyên Nghiệp: Hiển thị đồng hồ tương tác qua giao diện web
- Dải Đo Có Thể Cấu Hình: Giá trị 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ị giá trị cảm biến trực tiếp với hoạt ảnh kim mượt mà
- Vùng Màu Sắc: Chỉ báo trạng thái trực quan (vùng xanh lá, vàng, đỏ)
- Kiểm Soát Độ Chính Xác: Độ chính xác thập phân có thể cấu hình cho giá trị hiển thị
- Giao Tiếp WebSocket: Cập nhật tức thì mà không cần tải lại trang
- Tương Thích Mobile: Hoạt động hoàn hảo trên máy tính để bàn, máy tính bảng và điện thoại di động
- Cấu Hình Tự Động: Đặt dải đo một lần trong constructor - không cần cấu hình thủ công
- Mở Rộng Nền Tảng: Hiện đượ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
Phần Cứng 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 | × | Cáp USB Type-C | ||
| 1 | × | Biến trở (tùy chọn để thử nghiệm) | ||
| 1 | × | Alternatively, 10k Ohm Trimmer Potentiometer | ||
| 1 | × | Alternatively, Potentiometer Kit | ||
| 1 | × | Alternatively, Potentiometer Module with Knob | ||
| 1 | × | breadboard | ||
| 1 | × | Dây nối 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 Nhanh
Thực hiện theo các hướng dẫn này từng bước:
- Nếu đây là lần đầu tiên bạn sử dụng Arduino Uno R4 WiFi/DIYables STEM V4 IoT, hãy tham khảo hướng dẫn về Arduino UNO R4 - Cài Đặt Phần Mềm.
- Kết nối bo mạch Arduino Uno R4/DIYables STEM V4 IoT 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 Arduino Uno R4 thích hợp (ví dụ: Arduino Uno R4 WiFi) và cổng COM.
- Di chuyển đến biểu tượng Libraries ở 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.
- Trên Arduino IDE, đi đến File Examples DIYables WebApps WebAnalogGauge example, hoặc sao chép code trên và dán vào editor 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: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* 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://[arduino-ip]/web-gauge in your web browser
*/
#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
UnoR4ServerFactory 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 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 xác thực WiFi trong code bằng cách cập nhật những 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 để upload 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ẽ như thế này
COM6
DIYables WebApp - Web Analog Gauge Example
INFO: Added app /
INFO: Added app /web-gauge
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 Analog Gauge: http://192.168.0.2/web-gauge
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Mở trình duyệt web trên PC hoặc điện thoại di động 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 bên dưới:
- Nhấp vào link Web Analog Gauge, bạn sẽ thấy giao diện UI của ứng dụng Web Analog Gauge 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 là /web-analog-gauge. Ví dụ: http://192.168.1.100/web-analog-gauge
- Bạn sẽ thấy màn hình đồng hồ đo tròn chuyên nghiệp hiển thị giá trị cảm biến thời gian thực
Tính Năng Giao Diện Web
Hiển Thị Analog Gauge
- Đồng Hồ Tròn: Đồng hồ chuyên nghiệp với hoạt ảnh kim mượt mà
- Dải Giá Trị: Hiển thị giá trị tối thiểu và tối đa đã cấu hình
- Đọc Hiện Tại: Hiển thị giá trị thời gian thực với đơn vị
- Vùng Màu: Chỉ báo trạng thái trực quan dựa trên dải giá trị
- Độ Chính Xác: Số chữ số thập phân có thể cấu hình để đọc chính xác
Cập Nhật Thời Gian Thực
- Dữ Liệu Trực Tiếp: Giá trị cập nhật tự động qua kết nối WebSocket
- Hoạt Ảnh Mượt: Kim di chuyển mượt mà giữa các giá trị
- Phản Hồi Trạng Thái: Chỉ báo trạng thái kết nối
- Tối Ưu 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 Gauge
// Cấu hình dải đo và đơn vị
DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // 0-100 Volt
// Thiết lập callback yêu cầu giá trị
gaugePage.onGaugeValueRequest(onGaugeValueRequested);
Gửi Giá Trị
void onGaugeValueRequested() {
// Đọc giá trị cảm biến (ví dụ với biến trở)
int sensorValue = analogRead(A0);
float voltage = (sensorValue / 1023.0) * 5.0;
// Gửi đến gauge
gaugePage.sendGaugeValue(voltage);
}
Tùy Chọn Tùy Chỉnh
Cấu Hình Dải Đo
- Giá Trị Tối Thiểu: Đặt giá trị thấp nhất mong đợi
- Giá Trị Tối Đa: Đặt giá trị cao nhất mong đợi
- Đơn Vị: Chuỗi đơn vị hiển thị (V, A, °C, PSI, v.v.)
- Độ Chính Xác: Kiểm soát số chữ số thập phân trong hiển thị
Tích Hợp Cảm Biến
- Cảm Biến Analog: Cảm biến điện áp, dòng điện, áp suất, ánh sáng
- Cảm Biến Digital: Cảm biến nhiệt độ, độ ẩm, khí gas qua I2C/SPI
- Giá Trị Tính Toán: Phép đo tính từ nhiều cảm biến
- Đọc Số Hiệu Chuẩn: Áp dụng hệ số hiệu chuẩn để có độ chính xác
Arduino Uno R4 Web Analog Gauge với Biến Trở
Dưới đây là code hoàn chỉnh để áp dụng web app này với biến trở:
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Define pin
#define PIN_ANALOG A0
// Create WebApp server and page instances
UnoR4ServerFactory 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%
// 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 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;
currentGaugeValue = analogRead(PIN_ANALOG);
currentGaugeValue = map(currentGaugeValue,0,1023,0,100);
// 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);
}
Dưới đây là video hướng dẫn từng bước để biết cách sử dụng biến trở với ứng dụng Web Analog Gauge:
Các Trường Hợp Sử Dụng Phổ Biến
Dự Án Giáo Dục
- Giám Sát Điện Áp: Điện áp pin, đọc số nguồn cung cấp
- Cảm Biến Môi Trường: Nhiệt độ, độ ẩm, mức ánh sáng
- Thí Nghiệm Vật Lý: Đo lực, áp suất, gia tốc
- Học Điện Tử: Phân tích mạch, thử nghiệm linh kiện
Ứng Dụng Thực Tế
- Tự Động Hóa Nhà: Giám sát hệ thống, điều khiển môi trường
- Robot: Phản hồi cảm biến, chẩn đoán hệ thống
- 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ố
Gauge Không Cập Nhật
- Kiểm tra kết nối WiFi và trạng thái WebSocket
- Xác minh hàm callback được đặt đúng cách
- Đảm bảo giá trị gauge nằm trong dải đã cấu hình
- Kiểm tra Serial Monitor để xem thông báo kết nối
Giá Trị Không Chính Xác
- Xác minh kết nối dây và kết nối cảm biến
- Kiểm tra cài đặt điện áp tham chiếu analog
- Hiệu chuẩn đọc số cảm biến nếu cần thiết
- Đảm bảo tỷ lệ thích hợp trong hàm callback
Vấn Đề Kết Nối
- Xác minh địa chỉ IP trong trình duyệt
- 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
Tính Năng Nâng Cao
Nhiều Gauge
Bạn có thể tạo nhiều instance gauge 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 Dữ Liệu
Kết hợp với Web Plotter để trực quan hóa dữ liệu lịch sử:
// Gửi cùng giá trị đến cả gauge và 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 chuyển đổi analog-to-digital
- Vật Lý Cảm Biến: Học các nguyên lý đo lường
- Công Nghệ Web: Khái niệm giao tiếp thời gian thực
- Lập Trình: Hàm callback, xử lý dữ liệu
Hoạt Động Lớp Học
- So Sánh Cảm Biến: So sánh các loại và dải cảm biến khác nhau
- Bài Tập Hiệu Chuẩn: Học độ chính xác và chính밀度 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
- Giải Quyết Vấn Đề: Khắc phục sự cố cảm biến và màn hình
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 cảm biến analog, hoàn hảo cho cả ứng dụng giáo dục và thực tế.