Ví dụ ESP32 WebSlider Hướng dẫn Giao diện Điều khiển Hai Thanh Trượt
Tổng quan
Ví dụ WebSlider cung cấp hai thanh trượt độc lập có thể truy cập thông qua trình duyệt web. Được thiết kế cho nền tảng giáo dục ESP32 với khả năng analog được cải tiến, các tính năng điều khiển chính xác và các mô-đun giáo dục tích hợp để học PWM và điện tử analog. Mỗi thanh trượt cung cấp giá trị từ 0-255, làm cho chúng phù hợp cho điều khiển PWM, điều chỉnh độ sáng, điều khiển tốc độ động cơ và bất kỳ ứng dụng nào yêu cầu các giá trị điều khiển có đặc tính analog.
Tính năng
- Hai thanh trượt đôi: Hai thanh trượt độc lập (khoảng 0-255 cho mỗi thanh)
- Giá trị thời gian thực: Cập nhật giá trị tức thì qua giao tiếp WebSocket
- Tương thích PWM: Giá trị 8-bit (0-255) hoàn hảo cho các hàm analogWrite()
- Phản hồi trực quan: Hiển thị giá trị theo thời gian thực cho từng thanh trượt
- Nút thiết lập trước: Giá trị thiết lập trước nhanh cho các cấu hình phổ biến
- Hỗ trợ cảm ứng và chuột: Hoạt động trên máy tính để bàn, máy tính bảng và thiết bị di động
- Thiết kế đáp ứng: Phù hợp với các kích thước màn hình khác nhau
- Lưu giá trị: Các thanh trượt nhớ vị trí cuối cùng khi tải lại trang
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 | × | (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 chỉ dẫn này từng bước một:
- Nếu đây là lần đầu tiên bạn sử dụng ESP32, hãy tham khảo hướng dẫn ESP32 - Cài Đặt Phần Mềm.
- Kết nối bảng ESP32 với máy tính của bạn bằng cáp USB.
- Mở Arduino IDE trên máy tính của bạn.
- Chọn bảng ESP32 phù hợp (ví dụ ESP32 Dev Module) và cổng COM.
- Đi tới 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ấn nút Cài đặt Tất cả để cài đặt tất cả các phụ thuộc thư viện.
- Trong Arduino IDE, hãy vào File Examples DIYables ESP32 WebApps WebSlider ví dụ, hoặc sao chép đoạn mã ở trên và dán vào trình soạn thảo của Arduino IDE
/*
* DIYables WebApp Library - Web Slider Example
*
* This example demonstrates the Web Slider feature:
* - Two independent sliders (0-255)
* - Real-time value monitoring
* - Template for hardware control
*
* 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://[IP_ADDRESS]/webslider
*/
#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;
DIYablesWebSliderPage webSliderPage;
// Current slider values
int slider1Value = 64; // Default 25%
int slider2Value = 128; // Default 50%
void setup() {
Serial.begin(9600);
delay(1000);
// TODO: Initialize your hardware pins here
Serial.println("DIYables ESP32 WebApp - Web Slider Example");
// Add home and web slider pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webSliderPage);
// 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);
}
}
// Set up slider callback for value changes
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Store the received values
slider1Value = slider1;
slider2Value = slider2;
// Print slider values (0-255)
Serial.println("Slider 1: " + String(slider1) + ", Slider 2: " + String(slider2));
// TODO: Add your control logic here based on slider values
// Examples:
// - Control PWM: analogWrite(LED_PIN, slider1);
// - Control servos: servo.write(map(slider1, 0, 255, 0, 180));
// - Control motor speed: analogWrite(MOTOR_PIN, slider2);
// - Control brightness: strip.setBrightness(slider1);
// - Send values via Serial, I2C, SPI, etc.
});
// Set up callback for config requests (when client requests current values)
webSliderPage.onSliderValueToWeb([]() {
webSliderPage.sendToWebSlider(slider1Value, slider2Value);
Serial.println("Web client requested values - Sent: Slider1=" + String(slider1Value) + ", Slider2=" + String(slider2Value));
});
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// TODO: Add your main application code here
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 này:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Nhấn nút Tải lên trên Arduino IDE để tải mã lên ESP32
- Mở Serial Monitor
- Xem kết quả trên Serial Monitor. Nó trông như dưới đây
COM6
DIYables WebApp - Web Slider Example
INFO: Added app /
INFO: Added app /web-slider
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 Slider: http://192.168.0.2/web-slider
==========================================
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.
- Ghi chú địa chỉ IP được hiển thị và nhập địa chỉ này vào thanh địa chỉ của trình duyệt web trên điện thoại thông minh hoặc PC của bạn.
- Ví dụ: http://192.168.0.2
- Bạn sẽ thấy trang chủ như hình dưới đây:
- Nhấp vào liên kết Web Slider, bạn sẽ thấy giao diện người dùng của ứng dụng Web Slider như dưới đây:
- 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-slider. Ví dụ: http://192.168.0.2/web-slider
- Hãy thử di chuyển hai thanh trượt để điều khiển các giá trị analog (0-255) và xem phản hồi thời gian thực trong Trình theo dõi Serial.
Tùy biến sáng tạo - Chỉnh sửa mã nguồn cho dự án của bạn
Thiết lập Giá trị Thanh Trượt Mặc Định
Cài đặt vị trí thanh trượt ban đầu:
// Current slider values (0-255)
int slider1Value = 64; // Default 25% (64/255)
int slider2Value = 128; // Default 50% (128/255)
Cách sử dụng các thanh trượt
Các điều khiển giao diện Web
Giao diện thanh trượt cung cấp:
- Thanh trượt 1: Thanh trượt điều khiển đầu tiên có hiển thị giá trị (0-255)
- Thanh trượt 2: Thanh trượt điều khiển thứ hai có hiển thị giá trị (0-255)
- Hiển thị giá trị: Các giá trị số theo thời gian thực cho cả hai thanh trượt
- Nút thiết lập trước: Truy cập nhanh đến các giá trị phổ biến (0%, 25%, 50%, 75%, 100%)
Điều khiển các thanh trượt
Máy tính để bàn (Điều khiển chuột)
- Nhấp chuột và kéo: Nhấp chuột vào tay nắm của thanh trượt và kéo để điều chỉnh giá trị
- Vị trí nhấp chuột: Nhấp chuột bất cứ đâu trên thanh trượt để nhảy tới giá trị đó
- Điều khiển tinh chỉnh: Sử dụng những chuyển động chuột nhỏ để điều chỉnh chính xác
Điện thoại di động / Máy tính bảng (Điều khiển cảm ứng)
- Chạm và Kéo: Chạm vào đầu kéo của thanh trượt và kéo đến vị trí mới
- Chạm Vị Trí: Chạm lên thanh trượt để thiết lập giá trị
- Điều khiển mượt mà: Việc kéo bằng ngón tay cho phép thay đổi giá trị một cách mượt mà
Khoảng giá trị
Mỗi thanh trượt cung cấp:
- Giá trị tối thiểu: 0 (0% - tắt hoàn toàn)
- Giá trị tối đa: 255 (100% - cường độ tối đa)
- Độ phân giải: 256 bước rời rạc (độ chính xác 8-bit)
- Tương thích PWM: Sử dụng trực tiếp với hàm analogWrite()
Ví dụ về Lập trình
Trình xử lý thanh trượt cơ bản
void setup() {
// Set up slider callback for value changes
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Store the received values
slider1Value = slider1;
slider2Value = slider2;
// Print slider values (0-255)
Serial.println("Slider 1: " + String(slider1) + ", Slider 2: " + String(slider2));
// Add your control logic here
});
}
Điều khiển độ sáng LED
// Pin definitions for PWM LEDs
const int LED1_PIN = 9; // PWM pin for first LED
const int LED2_PIN = 10; // PWM pin for second LED
void setup() {
// Configure LED pins as outputs
pinMode(LED1_PIN, OUTPUT);
pinMode(LED2_PIN, OUTPUT);
// Set initial brightness
analogWrite(LED1_PIN, slider1Value);
analogWrite(LED2_PIN, slider2Value);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Store values
slider1Value = slider1;
slider2Value = slider2;
// Control LED brightness directly (0-255 PWM)
analogWrite(LED1_PIN, slider1);
analogWrite(LED2_PIN, slider2);
Serial.println("LED1 Brightness: " + String(slider1) +
", LED2 Brightness: " + String(slider2));
});
}
Điều khiển vị trí của động cơ servo
#include <Servo.h>
Servo servo1, servo2;
void setup() {
// Attach servos to PWM pins
servo1.attach(9);
servo2.attach(10);
// Set initial positions
servo1.write(map(slider1Value, 0, 255, 0, 180));
servo2.write(map(slider2Value, 0, 255, 0, 180));
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Map slider values (0-255) to servo angles (0-180°)
int angle1 = map(slider1, 0, 255, 0, 180);
int angle2 = map(slider2, 0, 255, 0, 180);
// Move servos to calculated positions
servo1.write(angle1);
servo2.write(angle2);
Serial.println("Servo1: " + String(angle1) + "°, Servo2: " + String(angle2) + "°");
});
}
Điều khiển tốc độ động cơ
// Motor driver pins
const int MOTOR1_PWM = 9; // Motor 1 speed control
const int MOTOR1_DIR1 = 2; // Motor 1 direction pin 1
const int MOTOR1_DIR2 = 3; // Motor 1 direction pin 2
const int MOTOR2_PWM = 10; // Motor 2 speed control
const int MOTOR2_DIR1 = 4; // Motor 2 direction pin 1
const int MOTOR2_DIR2 = 5; // Motor 2 direction pin 2
void setup() {
// Configure motor pins
pinMode(MOTOR1_PWM, OUTPUT);
pinMode(MOTOR1_DIR1, OUTPUT);
pinMode(MOTOR1_DIR2, OUTPUT);
pinMode(MOTOR2_PWM, OUTPUT);
pinMode(MOTOR2_DIR1, OUTPUT);
pinMode(MOTOR2_DIR2, OUTPUT);
// Set initial motor directions (forward)
digitalWrite(MOTOR1_DIR1, HIGH);
digitalWrite(MOTOR1_DIR2, LOW);
digitalWrite(MOTOR2_DIR1, HIGH);
digitalWrite(MOTOR2_DIR2, LOW);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Control motor speeds directly
analogWrite(MOTOR1_PWM, slider1);
analogWrite(MOTOR2_PWM, slider2);
// Calculate percentage for display
int speed1Percent = map(slider1, 0, 255, 0, 100);
int speed2Percent = map(slider2, 0, 255, 0, 100);
Serial.println("Motor1: " + String(speed1Percent) + "%, " +
"Motor2: " + String(speed2Percent) + "%");
});
}
Điều khiển màu LED RGB
// RGB LED pins
const int RED_PIN = 9;
const int GREEN_PIN = 10;
const int BLUE_PIN = 11;
void setup() {
pinMode(RED_PIN, OUTPUT);
pinMode(GREEN_PIN, OUTPUT);
pinMode(BLUE_PIN, OUTPUT);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Use sliders to control RGB components
// Slider 1 controls red intensity
// Slider 2 controls blue intensity
// Green is calculated based on both sliders
int redValue = slider1;
int blueValue = slider2;
int greenValue = (slider1 + slider2) / 2; // Average of both sliders
analogWrite(RED_PIN, redValue);
analogWrite(GREEN_PIN, greenValue);
analogWrite(BLUE_PIN, blueValue);
Serial.println("RGB - R:" + String(redValue) +
" G:" + String(greenValue) +
" B:" + String(blueValue));
});
}
Kỹ thuật Lập trình Nâng cao
Làm mịn giá trị
class SliderSmoother {
private:
int currentValue = 0;
int targetValue = 0;
unsigned long lastUpdate = 0;
const int SMOOTH_RATE = 5; // Change per update cycle
public:
void setTarget(int target) {
targetValue = target;
}
int getCurrentValue() {
return currentValue;
}
bool update() {
if (millis() - lastUpdate > 10) { // Update every 10ms
bool changed = false;
if (currentValue < targetValue) {
currentValue = min(currentValue + SMOOTH_RATE, targetValue);
changed = true;
} else if (currentValue > targetValue) {
currentValue = max(currentValue - SMOOTH_RATE, targetValue);
changed = true;
}
lastUpdate = millis();
return changed;
}
return false;
}
};
SliderSmoother smoother1, smoother2;
void setup() {
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Set target values for smooth transition
smoother1.setTarget(slider1);
smoother2.setTarget(slider2);
});
}
void loop() {
server.loop();
// Update smoothed values
bool changed1 = smoother1.update();
bool changed2 = smoother2.update();
if (changed1 || changed2) {
// Apply smoothed values to hardware
analogWrite(9, smoother1.getCurrentValue());
analogWrite(10, smoother2.getCurrentValue());
}
}
Điều khiển dựa trên ngưỡng
void setupThresholdControl() {
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Threshold-based control for discrete outputs
const int LOW_THRESHOLD = 85; // 33%
const int MEDIUM_THRESHOLD = 170; // 66%
// Control digital outputs based on slider 1 thresholds
if (slider1 < LOW_THRESHOLD) {
// Low level: Turn off all outputs
digitalWrite(2, LOW);
digitalWrite(3, LOW);
digitalWrite(4, LOW);
} else if (slider1 < MEDIUM_THRESHOLD) {
// Medium level: Turn on first output
digitalWrite(2, HIGH);
digitalWrite(3, LOW);
digitalWrite(4, LOW);
} else {
// High level: Turn on all outputs
digitalWrite(2, HIGH);
digitalWrite(3, HIGH);
digitalWrite(4, HIGH);
}
// Use slider 2 for analog PWM control
analogWrite(9, slider2);
});
}
Hệ thống Giá trị Đặt trước
// Predefined preset values
const int PRESETS[][2] = {
{0, 0}, // Preset 0: Both off
{64, 128}, // Preset 1: Low/Medium
{128, 128}, // Preset 2: Both medium
{255, 128}, // Preset 3: High/Medium
{255, 255} // Preset 4: Both maximum
};
void applyPreset(int presetNumber) {
if (presetNumber >= 0 && presetNumber < 5) {
slider1Value = PRESETS[presetNumber][0];
slider2Value = PRESETS[presetNumber][1];
// Update hardware
analogWrite(9, slider1Value);
analogWrite(10, slider2Value);
// Send updated values to web interface
webSliderPage.sendToWebSlider(slider1Value, slider2Value);
Serial.println("Applied preset " + String(presetNumber) +
": " + String(slider1Value) + ", " + String(slider2Value));
}
}
void setupPresetSystem() {
// You could trigger presets based on other inputs
// For example, reading digital pins for preset buttons
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Your normal slider handling
analogWrite(9, slider1);
analogWrite(10, slider2);
});
}
void loop() {
server.loop();
// Check for preset trigger conditions
// Example: Read buttons connected to digital pins
static bool lastButton = false;
bool currentButton = digitalRead(7); // Preset button on pin 7
if (currentButton && !lastButton) { // Button pressed
static int currentPreset = 0;
applyPreset(currentPreset);
currentPreset = (currentPreset + 1) % 5; // Cycle through presets
}
lastButton = currentButton;
}
Các ví dụ về tích hợp phần cứng
Điều khiển dải LED
// For WS2812B or similar addressable LED strips
// (requires additional libraries like FastLED or Adafruit NeoPixel)
const int LED_STRIP_PIN = 6;
const int NUM_LEDS = 30;
void setupLEDStrip() {
// Initialize LED strip (depends on library used)
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Slider 1 controls brightness (0-255)
// Slider 2 controls color temperature or hue
uint8_t brightness = slider1;
uint8_t hue = slider2;
// Update LED strip (example with conceptual functions)
// strip.setBrightness(brightness);
// strip.fill(CHSV(hue, 255, 255));
// strip.show();
Serial.println("LED Strip - Brightness: " + String(brightness) +
", Hue: " + String(hue));
});
}
Điều khiển tốc độ quạt
const int FAN1_PIN = 9;
const int FAN2_PIN = 10;
void setupFanControl() {
pinMode(FAN1_PIN, OUTPUT);
pinMode(FAN2_PIN, OUTPUT);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Control fan speeds with minimum threshold for startup
int fan1Speed = (slider1 > 50) ? map(slider1, 50, 255, 100, 255) : 0;
int fan2Speed = (slider2 > 50) ? map(slider2, 50, 255, 100, 255) : 0;
analogWrite(FAN1_PIN, fan1Speed);
analogWrite(FAN2_PIN, fan2Speed);
Serial.println("Fan1: " + String(map(fan1Speed, 0, 255, 0, 100)) + "%, " +
"Fan2: " + String(map(fan2Speed, 0, 255, 0, 100)) + "%");
});
}
Điều khiển âm lượng
// For controlling audio amplifier or volume IC
const int VOLUME1_PIN = 9; // PWM output to volume control
const int VOLUME2_PIN = 10; // Second channel or tone control
void setupAudioControl() {
pinMode(VOLUME1_PIN, OUTPUT);
pinMode(VOLUME2_PIN, OUTPUT);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Use logarithmic scaling for better audio perception
float volume1 = pow(slider1 / 255.0, 2) * 255; // Square law
float volume2 = pow(slider2 / 255.0, 2) * 255;
analogWrite(VOLUME1_PIN, (int)volume1);
analogWrite(VOLUME2_PIN, (int)volume2);
Serial.println("Volume1: " + String((int)volume1) +
", Volume2: " + String((int)volume2));
});
}
Khắc phục sự cố
Các vấn đề phổ biến
1. Các thanh trượt không phản hồi
- Kiểm tra kết nối WebSocket trong console của trình duyệt
- Kiểm tra kết nối mạng giữa thiết bị và Arduino
- Làm mới trang trình duyệt để đặt lại kết nối
- Kiểm tra Serial Monitor để xem lỗi kết nối
2. Giá trị không đạt được phạm vi đầy đủ
- Xác nhận cài đặt phạm vi của thanh trượt trên giao diện web
- Kiểm tra các vấn đề ánh xạ giá trị trong hàm callback
- Kiểm tra với các trình duyệt hoặc thiết bị khác nhau
- Điều khiển giật cục hoặc không nhất quán
- Thực hiện làm mượt giá trị cho các thay đổi diễn ra từ từ
- Kiểm tra các vấn đề về độ trễ mạng
- Thêm cơ chế debounce cho các thay đổi giá trị nhanh
- Đầu ra PWM không hoạt động
- Xác nhận các chân có hỗ trợ PWM (kiểm tra sơ đồ chân ESP32)
- Đảm bảo hàm analogWrite() được gọi với đúng số chân
- Kiểm tra kết nối phần cứng và các yêu cầu về tải
Mẹo gỡ lỗi
Thêm gỡ lỗi toàn diện:
void debugSliderValues(int slider1, int slider2) {
Serial.println("=== Slider Debug ===");
Serial.println("Slider 1: " + String(slider1) + " (" + String(map(slider1, 0, 255, 0, 100)) + "%)");
Serial.println("Slider 2: " + String(slider2) + " (" + String(map(slider2, 0, 255, 0, 100)) + "%)");
Serial.println("PWM Pin 9: " + String(slider1));
Serial.println("PWM Pin 10: " + String(slider2));
Serial.println("===================");
}
Ý tưởng dự án
Dự án điều khiển chiếu sáng
- Điều khiển độ sáng của ánh sáng trong phòng
- Giao diện pha màu RGB
- Điều khiển tốc độ hoạt hình của dải đèn LED
- Điều khiển cường độ ánh sáng sân khấu
Các dự án điều khiển động cơ
- Điều khiển tốc độ của robot
- Điều chỉnh tốc độ quạt
- Điều khiển lưu lượng bơm
- Tốc độ băng tải
Các dự án âm thanh
- Giao diện điều chỉnh âm lượng
- Điều khiển âm sắc và bộ cân bằng âm thanh
- Cường độ hiệu ứng âm thanh
- Điều khiển trực quan hóa nhạc
Tự động hóa gia đình
- Điều khiển khí hậu (cường độ sưởi ấm/làm mát)
- Điều khiển vị trí rèm cửa sổ
- Điều khiển lưu lượng hệ thống tưới nước
- Độ sáng/âm lượng của thiết bị thông minh
Tích hợp với các ví dụ khác
Kết hợp với WebJoystick
Sử dụng thanh trượt để giới hạn tốc độ và joystick để điều khiển hướng.
// Global speed limit from sliders
int maxSpeed = 255;
// In WebSlider callback
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
maxSpeed = slider1; // Use slider 1 as global speed limit
});
// In WebJoystick callback
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Scale joystick values by slider-controlled speed limit
int scaledX = map(x, -100, 100, -maxSpeed, maxSpeed);
int scaledY = map(y, -100, 100, -maxSpeed, maxSpeed);
controlRobot(scaledX, scaledY);
});
Kết hợp với WebDigitalPins
Sử dụng thanh trượt để điều khiển PWM và các chân số để bật/tắt:
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Only apply PWM if corresponding digital pins are ON
if (webDigitalPinsPage.getPinState(2)) {
analogWrite(9, slider1);
} else {
analogWrite(9, 0);
}
if (webDigitalPinsPage.getPinState(3)) {
analogWrite(10, slider2);
} else {
analogWrite(10, 0);
}
});
Các bước tiếp theo
Sau khi thành thạo ví dụ WebSlider, hãy thử:
- WebJoystick - Để điều khiển theo hướng hai chiều (2D)
- WebDigitalPins - Để điều khiển bật/tắt rời rạc
- WebMonitor - Để gỡ lỗi giá trị của thanh trượt
- MultipleWebApps - Kết hợp thanh trượt với các điều khiển khác
Hỗ trợ
Để được hỗ trợ thêm:
- Kiểm tra tài liệu tham khảo API
- Truy cập các bài hướng dẫn DIYables: https://esp32io.com/tutorials/diyables-esp32-webapps
- Diễn đàn cộng đồng ESP32