SENSOREN/AKTOREN

INTERNET DER DINGE (IoT)

ESP32 - Ethernet

ESP32 - GPIO-Unterbrechung

ESP32 WebRotator-Beispiel – Interaktives Tutorial zur Rotationssteuerung

Überblick

Das WebRotator-Beispiel erstellt eine interaktive, rotierbare Scheibensteuerungsschnittstelle, die von jedem Webbrowser aus zugänglich ist. Entwickelt für die ESP32-Bildungsplattform mit erweiterten Motorkontrollmöglichkeiten, integrierten Servo- und Schrittmotorsteuerungsfunktionen und nahtlose Integration mit Robotik-Bildungsmodulen. Perfekt geeignet zum Steuern von Servomotoren, Schrittmotoren, Roboterarmen, Antennen oder jedem System, das eine präzise Rotationssteuerung erfordert.

Arduino WebRotator-Beispiel – Interaktives Tutorial zur Rotationssteuerung

Funktionen

Interaktive drehbare Scheibe: Touch- und mausgesteuerte Scheibenoberfläche
Zwei Betriebsmodi: Kontinuierlich (0–360°) und begrenzter Winkelbereich
Winkelrückmeldung in Echtzeit: Präzise Winkelanzeige und -steuerung
Visuelle Positionsanzeige: Klarer Positionsmarker der Scheibe mit Farbverlauf-Design
Touch- und Mausunterstützung: Funktioniert auf Desktop, Tablet und Mobilgeräten
Automatische Konfiguration: Modus und Bereich einmal im Konstruktor festlegen
WebSocket-Kommunikation: Sofortige Reaktion ohne Neuladen der Seite
Professionelle Benutzeroberfläche: Kegelförmiger Farbverlauf mit sanfter Rotation

Erforderliche Hardware

1	×	ESP32 ESP-WROOM-32 Entwicklungsmodul
1	×	USB-Kabel Typ-A zu Typ-C (für USB-A PC)
1	×	USB-Kabel Typ-C zu Typ-C (für USB-C PC)
1	×	Servo Motor (optional for testing)
1	×	Breadboard
1	×	Verbindungskabel
1	×	(Empfohlen) Schraubklemmen-Erweiterungsboard für ESP32
1	×	(Empfohlen) Breakout Expansion Board for ESP32
1	×	(Empfohlen) Stromverteiler für ESP32

Oder Sie können die folgenden Kits kaufen:

1	×	DIYables ESP32 Starter-Kit (ESP32 enthalten)
1	×	DIYables Sensor-Kit (30 Sensoren/Displays)
1	×	DIYables Sensor-Kit (18 Sensoren/Displays)

Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.

Installationsanweisungen

Schnelle Schritte

Folgen Sie diesen Anweisungen Schritt für Schritt:

Wenn dies Ihre erste Verwendung des ESP32 ist, siehe das Tutorial zum Einrichten der ESP32-Umgebung in der Arduino-IDE Einrichten der ESP32-Umgebung in der Arduino-IDE.
Schließen Sie das ESP32-Board mit einem USB-Kabel an Ihren Computer an.
Starten Sie die Arduino-IDE auf Ihrem Computer.
Wählen Sie das passende ESP32-Board (z. B. ESP32 Dev Module) und den COM-Port aus.
Gehen Sie zum Libraries-Symbol in der linken Symbolleiste der Arduino-IDE.
Suchen Sie "DIYables ESP32 WebApps", und finden Sie anschließend die DIYables ESP32 WebApps-Bibliothek von DIYables.
Klicken Sie auf die Schaltfläche Installieren, um die Bibliothek zu installieren.

Sie werden aufgefordert, weitere Bibliotheksabhängigkeiten zu installieren.
Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.

In der Arduino IDE gehen Sie zu Datei Beispiele DIYables ESP32 WebApps WebRotator Beispiel, oder kopieren Sie den obigen Code und fügen Sie ihn in den Editor der Arduino IDE ein

/* * 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("°"); }

Konfigurieren Sie die WiFi-Zugangsdaten im Code, indem Sie diese Zeilen aktualisieren:

const char WIFI_SSID[] = "YOUR_WIFI_NETWORK"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";

Klicken Sie auf die Hochladen-Schaltfläche in der Arduino-IDE, um den Code auf den ESP32 hochzuladen
Öffnen Sie den Serial Monitor
Schauen Sie sich das Ergebnis im Serial Monitor an. Es sieht unten so aus

COM6

Send

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 Show timestamp

Clear output

9600 baud

Newline

Wenn Sie nichts sehen, starten Sie das ESP32-Board neu.
Öffnen Sie einen Webbrowser auf Ihrem PC oder Mobiltelefon.
Geben Sie die im Serial Monitor angezeigte IP-Adresse in den Webbrowser ein.
Beispiel: http://192.168.1.100
Sie sehen die Startseite wie im folgenden Bild:

ESP32 DIYables WebApp-Startseite mit Web-Rotator-App

Klicken Sie auf den Web Rotator-Link, dann sehen Sie die Benutzeroberfläche der Web Rotator-App wie unten:

Oder können Sie die Seite auch direkt über die IP-Adresse aufrufen, gefolgt von /web-rotator. Zum Beispiel: http://192.168.1.100/web-rotator
Sie sehen eine interaktive, rotierbare Scheibe, die Sie ziehen können, um die Drehung zu steuern.

Funktionen der Weboberfläche

Drehbare Scheibensteuerung

Interaktive Scheibe: Klicken und ziehen, um die Scheibe zu drehen
Visuelles Feedback: Winkelanzeige in Echtzeit und Positionsanzeige
Flüssige Drehung: Sanfte Rotation mit professionellem Farbverlauf-Design
Winkelanzeige: Der aktuelle Winkel wird in Grad angezeigt
Modusanzeige: Zeigt aktuellen Rotationsmodus und Begrenzungen

Touch- und Mausunterstützung

Desktopsteuerung: Mausklick und Ziehen
Mobile-Steuerung: Berührungs- und Wischgesten
Responsives Design: Für alle Bildschirmgrößen optimiert
Visuelle Hinweise: Klare Indikatoren für Interaktionsbereiche

Code-Konfiguration

Rotator-Einrichtung

// 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);

Winkelbefehle empfangen

void onRotatorAngleReceived(float angle) { Serial.print("Rotator angle received: "); Serial.print(angle, 1); Serial.println("°"); // Control your hardware here }

Betriebsmodi

Kontinuierlicher Modus

Vollrotation: 0° bis 360° und darüber hinaus, ohne obere Grenze
Kein Zurücksetzen auf 0°: Winkelwerte können über 360° hinaus ansteigen und werden nicht auf 0° zurückgesetzt
Anwendungsfälle: Servos mit kontinuierlicher Rotation, Antennen, Drehtische
Konfiguration: ROTATOR_MODE_CONTINUOUS

Begrenzter Modus

Benutzerdefinierter Bereich: Definiert minimale und maximale Winkel
Grenzwerte: Verhindert Rotationen jenseits der festgelegten Grenzen
Anwendungsfälle: Standard-Servos, Roboterarme, Lenksysteme
Konfiguration: ROTATOR_MODE_LIMITED, minAngle, maxAngle

Hardware-Integration

Servomotorsteuerung

Hinweis: Das folgende Code-Snippet ist ein Teilbeispiel und muss in Ihren Haupt-ESP32-Sketch integriert werden, damit es korrekt funktioniert.

#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); }

Schrittmotorsteuerung

#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); }

Anpassungsoptionen

Winkelbereich

Mindestwinkel: Setze die niedrigste zulässige Rotation fest
Maximalwinkel: Setze die höchst zulässige Rotation fest
Standardposition: Startwinkel beim Systemstart
Auflösung: Stelle die Präzision der Winkelaktualisierungen ein

Visuelles Erscheinungsbild

Die Weboberfläche passt sich automatisch an Ihre Konfiguration an:

Bereichanzeige: Zeigt konfigurierte Winkelgrenzen an
Modusanzeige: Zeigt aktuellen Betriebsmodus an
Positionsanzeige: Visuelle Anzeige des aktuellen Winkels
Gradient-Design: Professionelles Erscheinungsbild mit sanften Farben

Häufige Anwendungsfälle

Bildungsprojekte

Servo-Steuerung lernen: Verständnis von Pulsweitenmodulation (PWM) und Servo-Betrieb
Robotik-Ausbildung: Armpositionierung, Gelenksteuerung
Antennenpositionierung: Steuerung einer Richtantenne
Kamera-Schwenken/Neigen: Fernbedienbare Kamerapositionierung

Praktische Anwendungen

Heimautomatisierung: Automatisierte Jalousien, Lüftungen, Türen
Robotik: Roboterarm-Gelenke, Lenkung eines mobilen Roboters
IoT-Projekte: Fernpositionierungssysteme
Industrie: Automatisierte Positionierung, Ventilsteuerung

Fehlerbehebung

Rotation funktioniert nicht

Überprüfen Sie die WiFi-Verbindung und den WebSocket-Status
Vergewissern Sie sich, dass die Callback-Funktion korrekt eingestellt ist
Stellen Sie sicher, dass Servo/Motor ordnungsgemäß verbunden ist
Überprüfen Sie die Stromversorgung der Motoren

Falsche Winkelwerte

Überprüfen Sie die Winkelzuordnung für Ihre spezifische Hardware
Überprüfen Sie die Servo-Bibliothek und die Pin-Konfiguration
Stellen Sie sicher, dass die Skalierung in der Callback-Funktion korrekt ist
Testen Sie mit der Ausgabe des seriellen Monitors

Verbindungsprobleme

IP-Adresse im Browser überprüfen
Firewall-Einstellungen überprüfen
Stellen Sie sicher, dass das 2,4-GHz-WLAN-Netzwerk verwendet wird (5-GHz wird nicht unterstützt)
Versuchen Sie, die Browser-Seite zu aktualisieren

Erweiterte Funktionen

Änderungen des Laufzeitmodus

Sie können den Rotator-Modus während des Betriebs ändern:

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"); } }

Positionsrückmeldung

Sende die aktuelle Position an die Weboberfläche zurück:

void sendAngleUpdate(float angle) { currentAngle = angle; webRotatorPage.sendToWebRotator(angle); Serial.print("Angle update sent to web: "); Serial.print(angle, 1); Serial.println("°"); }

Hinweis: Häufige Winkelrückmeldungen an die Weboberfläche können zu weniger flüssigen Bewegungen führen. Verwenden Sie diese Funktion nur, wenn Echtzeit-Positionsaktualisierungen erforderlich sind.

Mehrachsensteuerung

Kombinieren Sie mehrere Rotatoren für eine komplexe Positionierung:

DIYablesWebRotatorPage panRotator(ROTATOR_MODE_CONTINUOUS); DIYablesWebRotatorPage tiltRotator(ROTATOR_MODE_LIMITED, -90.0, 90.0); server.addApp(&panRotator); server.addApp(&tiltRotator);

Bildungsintegration

STEM-Lernziele

Motorsteuerung: Verständnis des Betriebs von Servomotoren und Schrittmotoren
Koordinatensysteme: Winkelmessung und Positionierung
Webtechnologien: Schnittstellen zur Echtzeitsteuerung
Programmierung: Callback-Funktionen, Hardwaresteuerung

Unterrichtsaktivitäten

Servo-Kalibrierung: Lernen Sie den Betrieb von Servos und PWM-Signalen
Positionsregelung: Üben Sie präzises Positionieren
Systemintegration: Sensoren in die Motorsteuerung integrieren
Problemlösung: Hardware- und Softwareprobleme debuggen

Dieses Beispiel bietet eine umfassende Grundlage für Rotationssteuerungssysteme, geeignet sowohl für Bildungs- als auch für praktische Robotik-Anwendungen.