Exemplo Arduino 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 Arduino Uno R4 WiFi e DIYables STEM V4 IoT, com recursos avançados de controle de motores, controle de servo/motor de passo integrado 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 que mostra como usar o app Web Rotator com o controle de um servo motor:
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
- Retorno do Â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 da Configuração: Defina o modo e a faixa uma 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
- Plataforma Extensível: Atualmente implementada para o Arduino Uno R4 WiFi, mas pode ser estendida para outras plataformas de hardware. Veja DIYables_WebApps_ESP32
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables STEM V4B IoT Starter Kit (Arduino 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 Arduino Uno R4 WiFi/DIYables STEM V4 IoT, consulte o tutorial sobre como configurar o ambiente para o Arduino Uno R4 WiFi/DIYables STEM V4 IoT no Arduino IDE.
- Conecte a placa Arduino Uno R4/DIYables STEM V4 IoT ao seu computador usando um cabo USB.
- Abra o Arduino IDE no seu computador.
- Selecione a placa Arduino Uno R4 apropriada (por exemplo, Arduino Uno R4 WiFi) e a porta COM.
- Navegue até o ícone Libraries na barra esquerda do Arduino IDE.
- Pesquise "DIYables WebApps" e encontre a biblioteca DIYables WebApps, da DIYables
- Clique no botão Install para instalar a biblioteca.
- Você será perguntado se quer instalar outras bibliotecas das quais ela depende
- Clique no botão Install All para instalar todas as dependências da biblioteca.
- No Arduino IDE, vá em File Examples DIYables WebApps WebRotator para abrir o exemplo, ou copie o código acima e cole no editor do 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: 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-rotator 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;
// 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 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 do 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 no Arduino IDE para carregar o código no Arduino UNO R4/DIYables STEM V4 IoT
- Abra o Serial Monitor
- Veja o resultado no Serial Monitor. Ele deve ficar parecido com o abaixo
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno R4 WiFi' on 'COM15')
New Line
9600 baud
DIYables WebApp - Web Rotator Example
INFO: Added app /
INFO: Added app /web-rotator
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 Rotator: http://192.168.0.2/web-rotator
==========================================
- Se você não vir nada, reinicie a placa Arduino.
- 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 do Disco Giratório
- Disco Interativo: Clique e arraste para girar o disco
- Retorno 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
- Indicações 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 a 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
Nota: O trecho de código a seguir é um exemplo parcial e precisa ser integrado ao seu sketch Arduino principal 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
Arduino Uno R4 Web Rotator com Servo Motor
Abaixo está o código completo para adaptar este web app a um servo motor:
#include <DIYablesWebApps.h>
#include <Servo.h>
Servo myServo;
const int SERVO_PIN = 9;
// 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 que mostra como usar um servo motor com o app Web Rotator:
Casos de Uso Comuns
Projetos Educacionais
- Aprendizado de Controle de Servo: Entender PWM e a operação de servos
- Educação em Robótica: Posicionamento de braços, controle de juntas
- Posicionamento de Antena: Controle direcional de antena
- Pan/Tilt de Câmera: Posicionamento remoto de câmera
Aplicações Práticas
- Automação Residencial: Persianas, ventilações e portas automáticas
- Robótica: Juntas de braços robóticos, direção de robôs móveis
- 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 está configurada corretamente
- Garanta que o servo/motor esteja conectado corretamente
- Verifique a fonte de alimentação dos motores
Valores de Ângulo Incorretos
- Confirme o mapeamento de ângulo para o seu hardware específico
- Verifique 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
- Confirme o endereço IP no navegador
- Verifique as configurações do firewall
- Garanta uma rede WiFi 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");
}
}
Retorno 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("°");
}
Nota: Enviar retorno de ângulo com muita frequência para a interface web pode deixar o movimento menos suave. Use este recurso somente se as atualizações de posição em tempo real forem necessárias.
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 a operação 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 a operação do servo e os sinais PWM
- Controle de Posição: Pratique tarefas de posicionamento preciso
- Integração de Sistemas: Combine sensores com controle de motores
- 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.