Exemplo ESP32 WebRotator - Tutorial de Controle Rotacional Interativo
Visão Geral
O exemplo WebRotator cria uma interface interativa de controle com disco giratório, acessível de qualquer navegador web. Projetado para a plataforma educacional ESP32, com recursos avançados de controle de motores, controle de servo/motor de passo embutido e integração perfeita com módulos educacionais de robótica. Perfeito para controlar servo motores, motores de passo, braços robóticos, antenas ou qualquer sistema que precise de controle rotacional preciso.
Assista a este tutorial em vídeo passo a passo mostrando como usar um servo motor com o app Web Rotator:
Recursos
- Disco Giratório Interativo: Interface de disco controlada por toque e mouse
- Dois Modos de Operação: Contínuo (0-360°) e faixa de ângulo Limitada
- Feedback de Ângulo em Tempo Real: Exibição e controle precisos do ângulo
- Indicador Visual de Posição: Marcador claro da posição do disco com design em gradiente
- Suporte a Toque e Mouse: Funciona em desktop, tablet e celular
- Tratamento Automático de Configuração: Defina o modo e a faixa uma só vez no construtor
- Comunicação WebSocket: Resposta instantânea sem recarregar a página
- Interface Profissional: Design com gradiente cônico e rotação suave
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables ESP32 S3 Starter Kit (ESP32 S3 included) | |
| 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.
Buy Note: For controlling multiple servo motors, use the PCA9685 16 Channel PWM Servo Driver Module to save MCU pins and simplify wiring.
Instruções de Configuração
Passos Rápidos
Siga estas instruções passo a passo:
- Se esta é a sua primeira vez usando o ESP32, consulte o tutorial sobre como configurar o ambiente para ESP32 na Arduino IDE.
- Conecte a placa ESP32 ao seu computador usando um cabo USB.
- Abra a Arduino IDE no seu computador.
- Selecione a placa ESP32 apropriada (por exemplo, ESP32 Dev Module) e a porta COM.
- Vá até o ícone Libraries na barra lateral esquerda da Arduino IDE.
- Pesquise "DIYables ESP32 WebApps" e encontre a biblioteca DIYables ESP32 WebApps da DIYables
- Clique no botão Install para instalar a biblioteca.
- Você será solicitado a instalar algumas outras bibliotecas de dependência
- Clique no botão Install All para instalar todas as dependências da biblioteca.
- Na Arduino IDE, vá em File Examples DIYables ESP32 WebApps WebRotator, ou copie o código acima e cole no editor da Arduino IDE
/*
* DIYables WebApp Library - Web Rotator Example
*
* This example demonstrates the Web Rotator application:
* - Interactive rotatable disc control
* - Two modes: Continuous rotation and Limited angle range
* - Real-time angle feedback with WebSocket communication
* - Touch and mouse support for desktop and mobile
*
* Features:
* - Configurable rotation modes (continuous or limited)
* - Beautiful conic gradient disc with visual indicator
* - Real-time angle display and feedback
* - WebSocket communication for live updates
* - Professional responsive UI design
*
* 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-rotator 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;
// Rotator configuration constants
const int ROTATOR_MODE = ROTATOR_MODE_CONTINUOUS; // Change to ROTATOR_MODE_LIMITED for limited rotation
const float MIN_ANGLE = 0.0; // Minimum angle for limited mode
const float MAX_ANGLE = 180.0; // Maximum angle for limited mode
// Create WebRotator page with configuration
//DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS);
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, MIN_ANGLE, MAX_ANGLE);
// Variables for angle tracking
float currentAngle = 0.0;
void setup() {
Serial.begin(9600);
delay(1000);
// TODO: Initialize your hardware pins here
Serial.println("DIYables ESP32 WebApp - Web Rotator Example");
// Add pages to server
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webRotatorPage);
// Set 404 Not Found page (optional - for better user experience)
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Set callback functions for WebRotator
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
// Start server
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
if (ROTATOR_MODE == ROTATOR_MODE_LIMITED) {
Serial.println("\nRotator Mode: Limited");
Serial.print("Angle Range: ");
Serial.print(MIN_ANGLE);
Serial.print("° to ");
Serial.print(MAX_ANGLE);
Serial.println("°");
} else {
Serial.println("\nRotator Mode: Continuous Rotation");
}
Serial.println("\nTurn the disc in your web browser to control the rotator!");
}
void loop() {
// Handle web server and WebSocket connections
webAppsServer.loop();
// Simulate rotator movement or control actual hardware here
// For demonstration, we'll just echo back the received angle
delay(10);
}
/**
* Callback function called when angle is received from web interface
* This is where you would control your actual rotator hardware
*/
void onRotatorAngleReceived(float angle) {
currentAngle = angle;
Serial.print("Rotator angle received: ");
Serial.print(angle, 1);
Serial.println("°");
// TODO: Add your rotator control code here
// Examples:
// - Control servo motor: servo.write(map(angle, 0, 360, 0, 180));
// - Control stepper motor: stepper.moveTo(angle * stepsPerDegree);
// - Control DC motor with encoder feedback
// - Send commands to external rotator controller
// Note: No echo back to avoid interfering with smooth web interface rotation
}
/**
* Example function to change rotator mode at runtime
* Call this function to switch between continuous and limited modes
*/
void setRotatorMode(int mode, float minAng = 0, float maxAng = 360) {
webRotatorPage.setRotatorMode(mode, minAng, maxAng);
Serial.print("Rotator mode changed to: ");
if (mode == ROTATOR_MODE_LIMITED) {
Serial.print("Limited (");
Serial.print(minAng);
Serial.print("° to ");
Serial.print(maxAng);
Serial.println("°)");
} else {
Serial.println("Continuous");
}
}
/**
* Example function to send angle updates to web interface
* Call this function when your rotator position changes
*/
void sendAngleUpdate(float angle) {
currentAngle = angle;
webRotatorPage.sendToWebRotator(angle);
Serial.print("Angle update sent to web: ");
Serial.print(angle, 1);
Serial.println("°");
}
- Configure as credenciais de WiFi no código atualizando estas linhas:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Clique no botão Upload na Arduino IDE para carregar o código no ESP32
- Abra o Serial Monitor
- Veja o resultado no Serial Monitor. Ele será parecido com o abaixo
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')
New Line
9600 baud
DIYables WebApp - Web Rotator Example
INFO: Added app /
INFO: Added app /web-rotator
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 Rotator: http://192.168.0.2/web-rotator
==========================================
- Se você não vir nada, reinicie a placa ESP32.
- Abra um navegador web no seu PC ou celular.
- Digite no navegador o endereço IP mostrado no Serial Monitor
- Exemplo: http://192.168.1.100
- Você verá a home page como na imagem abaixo:
- Clique no link Web Rotator e você verá a interface do app Web Rotator como abaixo:
- Você também pode acessar a página diretamente pelo endereço IP seguido de /web-rotator. Por exemplo: http://192.168.1.100/web-rotator
- Você verá um disco giratório interativo que pode ser arrastado para controlar a rotação
Recursos da Interface Web
Controle de Disco Giratório
- Disco Interativo: Clique e arraste para girar o disco
- Feedback Visual: Exibição do ângulo e indicador de posição em tempo real
- Animação Suave: Rotação fluida com design profissional em gradiente
- Exibição do Ângulo: O ângulo atual é mostrado em graus
- Indicador de Modo: Mostra o modo de rotação atual e os limites
Suporte a Toque e Mouse
- Controle no Desktop: Clique e arraste com o mouse
- Controle no Celular: Gestos de toque e deslize
- Design Responsivo: Otimizado para todos os tamanhos de tela
- Dicas Visuais: Indicadores claros das áreas de interação
Configuração do Código
Configuração do Rotator
// Continuous rotation mode (full 0-360 degrees)
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS);
// Limited rotation mode with custom range
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, 0.0, 180.0);
// Set up angle callback
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
Recebendo Comandos de Ângulo
void onRotatorAngleReceived(float angle) {
Serial.print("Rotator angle received: ");
Serial.print(angle, 1);
Serial.println("°");
// Control your hardware here
}
Modos de Operação
Modo Contínuo
- Rotação Completa: De 0° a 360° e além, sem limite superior
- Sem Retorno ao Zero: Os valores de ângulo podem passar de 360° e não voltam para 0°
- Casos de Uso: Servos de rotação contínua, antenas, mesas giratórias
- Configuração: ROTATOR_MODE_CONTINUOUS
Modo Limitado
- Faixa Personalizada: Defina os ângulos mínimo e máximo
- Limites de Fronteira: Impede a rotação além dos limites definidos
- Casos de Uso: Servos padrão, braços robóticos, sistemas de direção
- Configuração: ROTATOR_MODE_LIMITED, minAngle, maxAngle
Integração de Hardware
Controle de Servo Motor
Observação: O trecho de código a seguir é um exemplo parcial e deve ser integrado ao seu sketch principal do ESP32 para funcionar corretamente.
#include <Servo.h>
Servo myServo;
// Set rotator to limited mode: 0 to 180 degrees
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, 0.0, 180.0);
void setup() {
myServo.attach(9); // Servo on pin 9
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
}
void onRotatorAngleReceived(float angle) {
// Directly write angle (0-180) to servo
myServo.write((int)angle);
}
Controle de Motor de Passo
#include <Stepper.h>
const int stepsPerRevolution = 200;
Stepper myStepper(stepsPerRevolution, 8, 9, 10, 11);
void onRotatorAngleReceived(float angle) {
// Calculate steps for desired angle
int steps = (angle / 360.0) * stepsPerRevolution;
myStepper.step(steps);
}
Opções de Personalização
Faixa de Ângulo
- Ângulo Mínimo: Defina a menor rotação permitida
- Ângulo Máximo: Defina a maior rotação permitida
- Posição Padrão: Ângulo inicial quando o sistema liga
- Resolução: Controle a precisão das atualizações de ângulo
Aparência Visual
A interface web se adapta automaticamente à sua configuração:
- Exibição da Faixa: Mostra os limites de ângulo configurados
- Indicador de Modo: Exibe o modo de operação atual
- Marcador de Posição: Indicador visual do ângulo atual
- Design em Gradiente: Aparência profissional com cores suaves
ESP32 Web Rotator com Servo Motor
Abaixo está o código completo para adaptar este web app com um servo motor:
#include <DIYablesWebApps.h>
#include <Servo.h>
Servo myServo;
const int SERVO_PIN = 26;
// 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;
// Rotator configuration constants
const int ROTATOR_MODE = ROTATOR_MODE_CONTINUOUS; // Change to ROTATOR_MODE_LIMITED for limited rotation
const float MIN_ANGLE = 0.0; // Minimum angle for limited mode
const float MAX_ANGLE = 180.0; // Maximum angle for limited mode
// Create WebRotator page with configuration
//DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS);
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, MIN_ANGLE, MAX_ANGLE);
// Variables for angle tracking
float currentAngle = 0.0;
void setup() {
Serial.begin(9600);
delay(1000);
// TODO: Initialize your hardware pins here
myServo.attach(SERVO_PIN, 500, 2400); // SG90
Serial.println("DIYables WebApp - Web Rotator Example");
// Add pages to server
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webRotatorPage);
// Set 404 Not Found page (optional - for better user experience)
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Set callback functions for WebRotator
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
// Start server
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
delay(3000);
Serial.print("WiFi Status: ");
Serial.println(WiFi.status());
Serial.print("Local IP: ");
Serial.println(WiFi.localIP());
if (ROTATOR_MODE == ROTATOR_MODE_LIMITED) {
Serial.println("\nRotator Mode: Limited");
Serial.print("Angle Range: ");
Serial.print(MIN_ANGLE);
Serial.print("° to ");
Serial.print(MAX_ANGLE);
Serial.println("°");
} else {
Serial.println("\nRotator Mode: Continuous Rotation");
}
Serial.println("\nTurn the disc in your web browser to control the rotator!");
}
void loop() {
// Handle web server and WebSocket connections
webAppsServer.loop();
// Simulate rotator movement or control actual hardware here
// For demonstration, we'll just echo back the received angle
delay(10);
}
/**
* Callback function called when angle is received from web interface
* This is where you would control your actual rotator hardware
*/
void onRotatorAngleReceived(float angle) {
currentAngle = angle;
Serial.print("Rotator angle received: ");
Serial.print(angle, 1);
Serial.println("°");
// TODO: Add your rotator control code here
// Examples:
// - Control servo motor: servo.write(map(angle, 0, 360, 0, 180));
// - Control stepper motor: stepper.moveTo(angle * stepsPerDegree);
// - Control DC motor with encoder feedback
// - Send commands to external rotator controller
// Note: No echo back to avoid interfering with smooth web interface rotation
angle = constrain(angle, 0, 180);
int servoAngle = 180 - angle;
myServo.write(servoAngle);
}
/**
* Example function to change rotator mode at runtime
* Call this function to switch between continuous and limited modes
*/
void setRotatorMode(int mode, float minAng = 0, float maxAng = 360) {
webRotatorPage.setRotatorMode(mode, minAng, maxAng);
Serial.print("Rotator mode changed to: ");
if (mode == ROTATOR_MODE_LIMITED) {
Serial.print("Limited (");
Serial.print(minAng);
Serial.print("° to ");
Serial.print(maxAng);
Serial.println("°)");
} else {
Serial.println("Continuous");
}
}
/**
* Example function to send angle updates to web interface
* Call this function when your rotator position changes
*/
void sendAngleUpdate(float angle) {
currentAngle = angle;
webRotatorPage.sendToWebRotator(angle);
Serial.print("Angle update sent to web: ");
Serial.print(angle, 1);
Serial.println("°");
}
Abaixo está um tutorial em vídeo passo a passo mostrando como usar um servo motor com o app Web Rotator:
Casos de Uso Comuns
Projetos Educacionais
- Aprendizado de Controle de Servo: Entender o PWM e o funcionamento do servo
- Educação em Robótica: Posicionamento de braços, controle de juntas
- Posicionamento de Antena: Controle de antena direcional
- Pan/Tilt de Câmera: Posicionamento remoto de câmera
Aplicações Práticas
- Automação Residencial: Persianas, aberturas de ventilação e portas automáticas
- Robótica: Juntas de braço robótico, direção de robô móvel
- Projetos IoT: Sistemas de posicionamento remoto
- Industrial: Posicionamento automatizado, controle de válvulas
Solução de Problemas
A Rotação Não Funciona
- Verifique a conexão WiFi e o status do WebSocket
- Confirme se a função de callback foi definida corretamente
- Garanta que o servo/motor esteja conectado corretamente
- Verifique a fonte de alimentação dos motores
Valores de Ângulo Incorretos
- Verifique o mapeamento de ângulo para o seu hardware específico
- Confira a biblioteca de servo e a configuração dos pinos
- Garanta o escalonamento correto na função de callback
- Teste com a saída do Serial Monitor
Problemas de Conexão
- Confira o endereço IP no navegador
- Verifique as configurações de firewall
- Garanta que a rede WiFi seja de 2.4GHz (5GHz não é suportada)
- Tente atualizar a página do navegador
Recursos Avançados
Mudanças de Modo em Tempo de Execução
Você pode mudar o modo do rotator durante a operação:
void setRotatorMode(int mode, float minAng = 0, float maxAng = 360) {
webRotatorPage.setRotatorMode(mode, minAng, maxAng);
Serial.print("Rotator mode changed to: ");
if (mode == ROTATOR_MODE_LIMITED) {
Serial.print("Limited (");
Serial.print(minAng);
Serial.print("° to ");
Serial.print(maxAng);
Serial.println("°)");
} else {
Serial.println("Continuous");
}
}
Feedback de Posição
Envie a posição atual de volta para a interface web:
void sendAngleUpdate(float angle) {
currentAngle = angle;
webRotatorPage.sendToWebRotator(angle);
Serial.print("Angle update sent to web: ");
Serial.print(angle, 1);
Serial.println("°");
}
Observação: Enviar feedback de ângulo com muita frequência para a interface web pode deixar o movimento menos suave. Use este recurso apenas se forem necessárias atualizações de posição em tempo real.
Controle Multieixo
Combine vários rotators para um posicionamento complexo:
DIYablesWebRotatorPage panRotator(ROTATOR_MODE_CONTINUOUS);
DIYablesWebRotatorPage tiltRotator(ROTATOR_MODE_LIMITED, -90.0, 90.0);
server.addApp(&panRotator);
server.addApp(&tiltRotator);
Integração Educacional
Objetivos de Aprendizagem STEM
- Controle de Motores: Entender o funcionamento de servos e motores de passo
- Sistemas de Coordenadas: Medição de ângulos e posicionamento
- Tecnologias Web: Interfaces de controle em tempo real
- Programação: Funções de callback, controle de hardware
Atividades em Sala de Aula
- Calibração de Servo: Aprenda o funcionamento do servo e os sinais PWM
- Controle de Posição: Pratique tarefas de posicionamento preciso
- Integração de Sistemas: Combine sensores com controle de motor
- Resolução de Problemas: Depure problemas de hardware e software
Este exemplo oferece uma base completa para sistemas de controle rotacional, perfeita tanto para aplicações educacionais quanto práticas de robótica.