Web Slider com Arduino Nano ESP32 e a Biblioteca DIYables ESP32 WebApps
Visão Geral
Este tutorial aborda a classe DIYablesWebSliderPage da Biblioteca DIYables ESP32 WebApps. A página apresenta dois sliders independentes no navegador, cada um com faixa de 0 a 255. O Arduino Nano ESP32 recebe os valores dos sliders por WebSocket por meio de um callback. Os valores podem ser usados diretamente com analogWrite() para controle por PWM de LEDs, motores ou qualquer saída de 8 bits.
O Que Este Tutorial Aborda
- Receber os valores dos sliders em um callback do sketch
- Aplicar os valores do slider 1 e do slider 2 a saídas analogWrite()
- Fornecer as posições atuais dos sliders aos navegadores recém-conectados
- Definir as posições iniciais padrão dos sliders
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgação: Alguns dos links desta seção são links de afiliado da Amazon. Podemos receber uma comissão pelas compras feitas por meio desses links, sem custo adicional para você. Agradecemos o seu apoio.
Passos
Siga estas instruções passo a passo:
- Se esta é a primeira vez que você usa o Arduino Nano ESP32, consulte o tutorial sobre como configurar o ambiente de desenvolvimento do Arduino Nano ESP32.
- Conecte a placa Arduino Nano ESP32 ao seu computador usando um cabo USB.
- Abra o Arduino IDE no seu computador.
- Selecione a placa apropriada (por exemplo, Arduino Nano ESP32) e a porta COM.
- Vá até o ícone Libraries na barra à esquerda do Arduino IDE.
- Pesquise "DIYables ESP32 WebApps" e encontre a Biblioteca DIYables ESP32 WebApps da DIYables
- Clique no botão Install para instalar a biblioteca.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Você será solicitado a instalar algumas outras dependências da biblioteca
- Clique no botão Install All para instalar todas as dependências da biblioteca.
- No Arduino IDE, vá até o exemplo File Examples DIYables ESP32 WebApps WebSlider, ou copie o código acima e cole no editor do 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);
}
- Atualize as credenciais de WiFi no sketch:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Clique no botão Upload no Arduino IDE para fazer o upload do código para o Arduino Nano ESP32
- Abra o Serial Monitor
- A saída do Serial Monitor deve ser parecida com esta:
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
DIYables WebApp - Web Slider Example
INFO: Added app /
INFO: Added app /web-slider
DIYables WebApp Library
Platform: Arduino Nano 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
==========================================
- Se nada aparecer, pressione o botão de reset da placa.
- Digite o endereço IP exibido no Serial Monitor em um navegador na mesma rede.
- Exemplo: http://192.168.0.2
- A página inicial mostra um card para o aplicativo slider:
- Selecione o card Web Slider para abrir a página de controle dos sliders:
- A página também pode ser acessada diretamente em http://192.168.0.2/web-slider.
- Mova os sliders e observe os valores impressos no Serial Monitor.
Valores Padrão dos Sliders
Acompanhe as posições atuais dos sliders em variáveis de estado e defina os valores padrão antes de registrar os callbacks:
int slider1Value = 64; // 25% initial position
int slider2Value = 128; // 50% initial position
Callbacks
Recebendo Mudanças dos Sliders
Chamado cada vez que o usuário move um dos sliders:
webSliderPage.onSliderValueFromWeb([](int s1, int s2) {
slider1Value = s1;
slider2Value = s2;
Serial.println("Slider1: " + String(s1) + " Slider2: " + String(s2));
analogWrite(PWM_PIN_1, s1);
analogWrite(PWM_PIN_2, s2);
});
Fornecendo Valores ao Navegador
Chamado quando um navegador se conecta e solicita as posições atuais:
webSliderPage.onSliderValueToWeb([]() {
webSliderPage.sendToWebSlider(slider1Value, slider2Value);
});
Casos de Uso Típicos
Brilho de LED: Conecte o slider 1 a um pino com suporte a PWM e um LED. A faixa de 0–255 corresponde diretamente a 0–100% de brilho por meio de analogWrite().
Velocidade de motor: Envie os valores dos sliders para a entrada de controle de velocidade de um driver de motor. Ajuste a escala para a faixa necessária dentro do callback.
Controle de dois canais: O slider 1 e o slider 2 são totalmente independentes. Use um para velocidade e outro para direção, ou um para cada motor em um sistema de tração dupla.
Solução de Problemas
Os valores dos sliders não são recebidos
- Confirme que onSliderValueFromWeb está registrado antes de webAppsServer.begin()
- Verifique no Serial Monitor se os valores estão chegando
- Verifique se o navegador mostra a conexão WebSocket como ativa
Os sliders do navegador são redefinidos ao reconectar
- Implemente onSliderValueToWeb e chame sendToWebSlider() dentro dele para que o navegador restaure as últimas posições ao conectar
Sem saída PWM
- Confirme que o pino suporta analogWrite() no Arduino Nano ESP32
- Verifique se pinMode(pin, OUTPUT) foi definido antes de analogWrite()