ESP32 WebRotator Voorbeeld - Interactieve Rotatiebesturing Tutorial
Overzicht
Het WebRotator voorbeeld maakt een interactieve, draaibare schijfbediening die vanaf elke webbrowser toegankelijk is. Ontworpen voor het ESP32 educatieve platform met uitgebreide motorbesturingsmogelijkheden, ingebouwde servo- en stappenmotorsturing, en naadloze integratie met educatieve robotica modules. Perfect voor het aansturen van servomotoren, stappenmotoren, robotarmen, antennes of elk systeem dat nauwkeurige rotatiebesturing vereist.
Kenmerken
- Interactieve draaibare schijf: Schijfinterface bestuurd via touch en muis
- Dubbele bedieningsmodi: Continue draaiing (0-360°) en Beperkte hoekbereik
- Realtime hoekterugkoppeling: Nauwkeurige hoekweergave en besturing
- Visuele positiemarker: Duidelijke schijfpositie-indicator met gradiëntontwerp
- Touch- & muisondersteuning: Werkt op desktop, tablet en mobiele apparaten
- Automatische configuratie: Instelling van modus en bereik in constructor éénmalig
- WebSocket communicatie: Directe respons zonder pagina-herlading
- Professionele UI: Conische gradiënt met soepele rotatie
Benodigde hardware
Of u kunt de volgende kits kopen:
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Installatie-instructies
Snelle stappen
Volg deze stappen één voor één:
- Als dit uw eerste keer is met de ESP32, raadpleeg dan de tutorial over de omgeving instellen voor ESP32 in de Arduino IDE.
- Verbind de ESP32-bord met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste ESP32-bord (bijvoorbeeld ESP32 Dev Module) en de juiste COM-poort.
- Navigeer in de Arduino IDE naar het Libraries-icoon in de linkerzijbalk.
- Zoek op "DIYables ESP32 WebApps" en vind vervolgens de DIYables ESP32 WebApps Library van DIYables.
- Klik op de Installeren-knop om de bibliotheek te installeren.
- Er wordt gevraagd om extra bibliotheekafhankelijkheden te installeren.
- Klik op de Alles installeren-knop om alle afhankelijkheden te installeren.
- Ga in Arduino IDE naar Bestand Voorbeelden DIYables ESP32 WebApps WebRotator voorbeeld, of kopieer bovenstaande code en plak die in de editor van de 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("°");
}
- Stel de WiFi-gegevens in de code in door onderstaande regels aan te passen:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klik op de Upload-knop in de Arduino IDE om de code naar de ESP32 te uploaden.
- Open de Seriële Monitor.
- Bekijk het resultaat in de Seriële Monitor, het ziet er ongeveer zo uit:
COM6
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
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Als u niets ziet, start dan het ESP32 bord opnieuw op.
- Open een webbrowser op uw pc of mobiele telefoon.
- Voer het IP-adres in dat in de Seriële Monitor wordt weergegeven in de adresbalk van de browser.
- Voorbeeld: http://192.168.1.100
- U ziet de startpagina zoals in onderstaande afbeelding:
- Klik op de Web Rotator-link, u ziet de gebruikersinterface van de Web Rotator app zoals hieronder:
- U kunt de pagina ook direct openen door het IP-adres te volgen met /web-rotator. Bijvoorbeeld: http://192.168.1.100/web-rotator
- U ziet een interactieve draaibare schijf die u kunt verslepen om rotatie te regelen.
Webinterface Kenmerken
Draaibare Schijfbesturing
- Interactieve schijf: Klik en sleep om de schijf te draaien
- Visuele feedback: Realtime hoekweergave en positie-indicator
- Soepel animatie: Vloeiende rotatie met professioneel gradiëntontwerp
- Hoekweergave: Huidige hoek in graden weergegeven
- Modusindicator: Geeft huidige rotatiemodus en grenzen aan
Touch- en Muisondersteuning
- Desktopbesturing: Muis klikken en slepen
- Mobiele besturing: Touch- en veeggebaren
- Responsief design: Geoptimaliseerd voor alle schermgroottes
- Visuele signalen: Duidelijke aanduidingen voor interactiegebieden
Codeconfiguratie
Instelling Rotator
// Continue rotatiemodus (volledige 0-360 graden)
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS);
// Beperkte rotatiemodus met aangepast bereik
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, 0.0, 180.0);
// Stel callback in voor hoek
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
Ontvangen van Hoekopdrachten
void onRotatorAngleReceived(float angle) {
Serial.print("Rotator angle received: ");
Serial.print(angle, 1);
Serial.println("°");
// Hier uw hardware aansturen
}
Bedieningsmodi
Continue Modus
- Volledige rotatie: 0° tot 360° en meer, zonder bovengrens
- Geen wrap-around: Hoekwaarden kunnen groter worden dan 360° en resetten niet naar 0°
- Gebruik: Continue rotatie servos, antennes, draaitafels
- Configuratie: ROTATOR_MODE_CONTINUOUS
Beperkte Modus
- Aangepast bereik: Definieer minimale en maximale hoeken
- Grensbeveiliging: Voorkomt rotatie buiten ingestelde limieten
- Gebruik: Standaard servos, robotarmen, stuursystemen
- Configuratie: ROTATOR_MODE_LIMITED, minAngle, maxAngle
Hardware Integratie
Servomotorbesturing
Let op: onderstaande code is een gedeeltelijk voorbeeld en moet worden geïntegreerd in uw hoofd ESP32 sketch om correct te functioneren.
#include <Servo.h>
Servo myServo;
// Stel rotator in op beperkte modus: 0 tot 180 graden
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, 0.0, 180.0);
void setup() {
myServo.attach(9); // Servo op pin 9
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
}
void onRotatorAngleReceived(float angle) {
// Schrijf hoek (0-180) direct naar servo
myServo.write((int)angle);
}
Stappenmotorbesturing
#include <Stepper.h>
const int stepsPerRevolution = 200;
Stepper myStepper(stepsPerRevolution, 8, 9, 10, 11);
void onRotatorAngleReceived(float angle) {
// Bereken stappen voor gewenste hoek
int steps = (angle / 360.0) * stepsPerRevolution;
myStepper.step(steps);
}
Aanpassingsopties
Hoekbereik
- Minimale hoek: Stel de laagst toegestane rotatie in
- Maximale hoek: Stel de hoogst toegestane rotatie in
- Standaardpositie: Starthoek bij het opstarten van het systeem
- Resolutie: Precisie van hoekupdates regelen
Visuele verschijning
De webinterface past zich automatisch aan uw configuratie aan:
- Bereikweergave: Toont ingestelde hoeklimieten
- Modusindicator: Toont huidige bedieningsmodus
- Positiemarker: Visuele indicator van huidige hoek
- Gradiëntontwerp: Professionele uitstraling met vloeiende kleuren
Veelvoorkomende Toepassingen
Educatieve Projecten
- Servo besturing leren: Begrip van PWM en servo werking
- Robotica educatie: Armpositionering, gewrichtsbesturing
- Antenne positionering: Richtingsbesturing antennes
- Camera Pan/Tilt: Afstandsbediening camera positionering
Praktische Toepassingen
- Domotica: Geautomatiseerde jaloezieën, ventilatie, deuren
- Robotica: Robotarm gewrichten, mobiele robotbesturing
- IoT-projecten: Afstandspositioneringssystemen
- Industrieel: Geautomatiseerde positionering, klepbediening
Problemen oplossen
Rotatie werkt niet
- Controleer WiFi-verbinding en WebSocket-status
- Verifieer of callback functie correct is ingesteld
- Controleer of servo/motor juist verbonden is
- Controleer voeding voor motoren
Foute hoekwaarden
- Controleer hoekmapping voor uw hardware
- Controleer servo bibliotheek en pinconfiguratie
- Controleer juiste schaal in callback functie
- Test met Seriële Monitor output
Verbinding niet mogelijk
- Verifieer IP-adres in de browser
- Controleer firewall-instellingen
- Gebruik 2.4 GHz WiFi netwerk (5 GHz niet ondersteund)
- Probeer browserpagina te vernieuwen
Geavanceerde functies
Wijzigen van modus tijdens runtime
U kunt tijdens gebruik de rotatormodus aanpassen:
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");
}
}
Positieterugkoppeling
Zend de huidige positie terug naar de webinterface:
void sendAngleUpdate(float angle) {
currentAngle = angle;
webRotatorPage.sendToWebRotator(angle);
Serial.print("Angle update sent to web: ");
Serial.print(angle, 1);
Serial.println("°");
}
Let op: het frequent zenden van hoekupdates kan de beweging minder soepel maken. Gebruik deze functie alleen indien realtime positie-updates noodzakelijk zijn.
Meervoudige Asbesturing
Combineer meerdere rotators voor complexe positionering:
DIYablesWebRotatorPage panRotator(ROTATOR_MODE_CONTINUOUS);
DIYablesWebRotatorPage tiltRotator(ROTATOR_MODE_LIMITED, -90.0, 90.0);
server.addApp(&panRotator);
server.addApp(&tiltRotator);
Educatieve integratie
STEM Leerdoelen
- Motorbesturing: Begrip van servo- en stappenmotorwerking
- Coördinatensystemen: Hoekmeting en positionering
- Webtechnologie: Realtime bedieningsinterfaces
- Programmeren: Callback functies, hardwarebesturing
Klassikaal gebruik
- Servo kalibratie: Leer werking van servo en PWM-signalen
- Positiebesturing: Oefen nauwkeurige positioneringsopdrachten
- Systeemintegratie: Combineer sensoren met motorbesturing
- Probleemoplossing: Debug hardware en software
Dit voorbeeld biedt een complete basis voor rotatiebesturingssystemen, ideaal voor educatieve en praktische robotica toepassingen.