Arduino WebRotator-Beispiel - Interaktives Tutorial zur Rotationssteuerung
WebRotator-Beispiel - Setup-Anleitung
Überblick
Das WebRotator-Beispiel erstellt eine interaktive, drehbare Scheibensteueroberfläche, die von jedem Webbrowser aus zugänglich ist. Entworfen für Arduino Uno R4 WiFi und DIYables STEM V4 IoT Bildungsplattform mit erweiterten Motorsteuerungsmöglichkeiten, integrierten Servo-/Schrittmotorsteuerungsfunktionen und nahtloser Integration mit robotikbezogenen Bildungsmodulen. Perfekt geeignet zur Steuerung von Servomotoren, Schrittmotoren, Roboterarmen, Antennen oder jedem System, das eine präzise Rotationssteuerung erfordert.
Funktionen
- Interaktive drehbare Scheibe: Touch- und mausgesteuerte Scheibenoberfläche
- Duale 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
- Automatisches Konfigurationshandling: Modus und Bereich einmal im Konstruktor festlegen
- WebSocket-Kommunikation: Sofortige Reaktion ohne Seitenaktualisierung
- Professionelle Benutzeroberfläche: Design mit konischem Verlauf und sanfter Rotation
- Plattform-Erweiterbarkeit: Derzeit für Arduino Uno R4 WiFi implementiert, kann auf andere Hardware-Plattformen erweitert werden. Siehe DIYables_WebApps_ESP32
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables STEM V4 IoT Starter-Kit (Arduino 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.
Installationsanleitung
Schnelle Schritte
Folgen Sie diesen Anweisungen Schritt für Schritt:
- Wenn dies das erste Mal ist, dass Sie das Arduino Uno R4 WiFi/DIYables STEM V4 IoT verwenden, lesen Sie das Tutorial zur Einrichtung der Umgebung für das Arduino Uno R4 WiFi/DIYables STEM V4 IoT in der Arduino IDE.
- Schließen Sie das Arduino Uno R4/DIYables STEM V4 IoT-Board mit einem USB-Kabel an Ihren Computer an.
- Öffnen Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das passende Arduino Uno R4-Board (z. B. Arduino Uno R4 WiFi) und den COM-Port aus.
- Gehen Sie zum Bibliotheken-Symbol in der linken Symbolleiste der Arduino IDE.
- Suchen Sie "DIYables WebApps", und finden Sie dann die DIYables WebApps-Bibliothek von DIYables.
- Klicken Sie auf die Schaltfläche Installieren, um die Bibliothek zu installieren.
- Sie werden aufgefordert, einige weitere Bibliotheksabhängigkeiten zu installieren.
- Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.
- Im Arduino-IDE, gehe zu Datei Beispiele DIYables WebApps WebRotator Beispiel, oder kopiere den obigen Code und füge 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: 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("°");
}
- Konfigurieren Sie die WLAN-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 Schaltfläche Hochladen in der Arduino-IDE, um Code auf den Arduino UNO R4/DIYables STEM V4 IoT hochzuladen
- Öffnen Sie den Serial Monitor
- Schauen Sie sich das Ergebnis im Serial Monitor an. Es sieht unten wie folgt aus
COM6
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
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Wenn Sie nichts sehen, starten Sie das Arduino-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 untenstehenden Bild.
- Klicken Sie auf den Web-Rotator-Link; Sie sehen 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 durch Ziehen drehen können, um die Rotation 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
- Fließende Animation: Flüssige Drehung mit professionellem Farbverlauf
- Winkelanzeige: Aktueller Winkel wird in Grad angezeigt
- Modusanzeige: Zeigt den aktuellen Rotationsmodus und die Grenzwerte
Touch- und Mausunterstützung
- Desktop-Steuerung: Mausklick und Ziehen
- Mobile-Steuerung: Tippen und Wischgesten
- Responsives Design: Optimiert für alle Bildschirmgrößen
- Visuelle Hinweise: Klare Indikatoren für Interaktionsbereiche
Code-Konfiguration
Rotator-Aufbau
// 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
}
Betriebsarten
Kontinuierlicher Modus
- Vollständige Rotation: 0° bis 360° und darüber hinaus, ohne Obergrenze
- Kein Wrap-Around: Winkelwerte können über 360° hinaussteigen und werden nicht auf 0° zurückgesetzt
- Anwendungsfälle: Kontinuierliche Rotationsservos, Antennen, Drehteller
- Konfiguration: ROTATOR_MODE_CONTINUOUS
Begrenzter Modus
- Benutzerdefinierter Bereich: Definiere minimale und maximale Winkel
- Begrenzungen: Verhindert Rotationen außerhalb der festgelegten Grenzen
- Anwendungsfälle: Standard-Servos, Roboterarme, Lenksysteme
- Konfiguration: ROTATOR_MODE_LIMITED, minAngle, maxAngle
Hardware-Integration
Servomotorsteuerung
Hinweis: Der folgende Codeabschnitt ist ein Teilbeispiel und muss in Ihren Haupt-Arduino-Sketch integriert werden, damit er 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
- Mindestdrehwinkel: Legen Sie den niedrigsten zulässigen Drehwinkel fest
- Maximaldrehwinkel: Legen Sie den höchsten zulässigen Drehwinkel fest
- Standardposition: Startwinkel beim Systemstart
- Auflösung: Bestimmt die Genauigkeit der Winkelaktualisierungen
Visuelles Erscheinungsbild
Die Weboberfläche passt sich automatisch Ihrer Konfiguration an:
- Bereichsanzeige: Zeigt die konfigurierten Winkelgrenzen an
- Modusanzeige: Zeigt den aktuellen Betriebsmodus an
- Positionsmarkierung: Visuelle Anzeige des aktuellen Winkels
- Gradientendesign: Professionelles Erscheinungsbild mit sanften Farben
Gängige Anwendungsfälle
Bildungsprojekte
- Lernen der Servosteuerung: Verständnis von PWM und Servobetrieb
- Robotik-Unterricht: Armpositionierung, Gelenksteuerung
- Antennenpositionierung: Richtantenne-Steuerung
- Kamera-Schwenken/Neigen: Fernsteuerung der Kameraposition
Praktische Anwendungen
- Hausautomation: Automatisierte Rollläden, Lüftungsgitter, Türen
- Robotik: Gelenke des Roboterarms, Lenkung eines mobilen Roboters
- IoT-Projekte: Fernpositionsbestimmungssysteme
- Industrie: Automatisierte Positionierung, Ventilsteuerung
Fehlerbehebung
Rotation funktioniert nicht
- Überprüfe die WLAN-Verbindung und den WebSocket-Status
- Stelle sicher, dass die Callback-Funktion korrekt gesetzt ist
- Stelle sicher, dass Servo oder Motor ordnungsgemäß verbunden ist
- Überprüfe die Stromversorgung für Motoren
Ungültige 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 Serial Monitor-Ausgabe
Verbindungsprobleme
- Überprüfen Sie die IP-Adresse im Browser
- Überprüfen Sie die Firewall-Einstellungen
- 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
Laufzeitmodus-Änderungen
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 einer weniger flüssigen Bewegung führen. Verwenden Sie diese Funktion nur, wenn Echtzeit-Positionsaktualisierungen erforderlich sind.
Mehrachsensteuerung
Mehrere Rotatoren zur komplexen Positionierung kombinieren:
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 der Funktionsweise von Servos und Schrittmotoren
- Koordinatensysteme: Winkelmessung und Positionierung
- Webtechnologien: Echtzeit-Steuerungsschnittstellen
- Programmierung: Callback-Funktionen, Hardwaresteuerung
Unterrichtsaktivitäten
- Servo-Kalibrierung: Lernen Sie den Betrieb von Servos und PWM-Signalen
- Positionssteuerung: Üben Sie präzise Positionsaufgaben
- Systemintegration: Sensoren mit der Motorsteuerung kombinieren
- Problemlösung: Hardware- und Softwareprobleme debuggen
Dieses Beispiel bietet eine umfassende Grundlage für Drehregelungssysteme und ist sowohl für Bildungs- als auch für praktische Robotikanwendungen ideal.