Arduino Nano ESP32 Web-Regler mit der DIYables ESP32 WebApps-Bibliothek
Übersicht
Dieses Tutorial behandelt die Klasse DIYablesWebRotatorPage aus der DIYables ESP32 WebApps-Bibliothek. Die Browserseite zeigt eine ziehbare Disc an, die ihren aktuellen Winkel über WebSocket an den Arduino Nano ESP32 meldet. Die Disc arbeitet entweder im kontinuierlichen Modus (0–360°) oder im begrenzten Bereichsmodus. Die Konfiguration wird im Konstruktor eingestellt und wird beim Verbinden automatisch an den Browser gesendet.
Sehen Sie sich dieses Schritt-für-Schritt-Video-Tutorial an, das zeigt, wie Sie einen Servomotor mit der Web-Regler-App verwenden:
Was dieses Tutorial behandelt
- Auswahl zwischen kontinuierlichen und begrenzten Rotationsmodi
- Empfang von Winkelwerten in einem Sketch-Callback
- Antreiben eines Servomotors aus dem gemeldeten Winkel
- Übermittlung des aktuellen Winkels an neu verbundene Browser
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 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.
Kaufhinweis: Falls Sie mehrere Servomotoren verwenden möchten, empfehlen wir die Verwendung des PCA9685 16 Channel PWM Servo Driver Module, um MCU-Pins zu sparen und die Verdrahtung zu vereinfachen.
Schritte
Befolgen Sie diese Anweisungen Schritt für Schritt:
- Wenn Sie den Arduino Nano ESP32 zum ersten Mal verwenden, beachten Sie das Tutorial zum Einrichten der Arduino Nano ESP32-Entwicklungsumgebung.
- Verbinden Sie das Arduino Nano ESP32-Board mit Ihrem Computer über ein USB-Kabel.
- Starten Sie die Arduino-IDE auf Ihrem Computer.
- Wählen Sie das entsprechende Board (z.B. Arduino Nano ESP32) und den COM-Port.
- Navigieren Sie zum Symbol Bibliotheken in der linken Leiste der Arduino-IDE.
- Suchen Sie "DIYables ESP32 WebApps", dann finden Sie die DIYables ESP32 WebApps-Bibliothek von DIYables
- Klicken Sie auf die Schaltfläche Installieren, um die Bibliothek zu installieren.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Sie werden aufgefordert, einige andere Bibliotheksabhängigkeiten zu installieren
- Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.
- Gehen Sie in der Arduino IDE 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("°");
}
- Aktualisieren Sie die WiFi-Anmeldeinformationen im Sketch:
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 den Code in den Arduino Nano ESP32 hochzuladen
- Öffnen Sie den seriellen Monitor
- Die Ausgabe des seriellen Monitors sollte wie folgt aussehen:
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
DIYables WebApp - Web Rotator Example
INFO: Added app /
INFO: Added app /web-rotator
DIYables WebApp Library
Platform: Arduino Nano 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
==========================================
- Wenn nichts angezeigt wird, drücken Sie die Reset-Taste auf dem Board.
- Geben Sie die IP-Adresse aus dem seriellen Monitor in einen Browser im gleichen Netzwerk ein.
- Beispiel: http://192.168.0.2
- Die Startseite zeigt eine Karte für die Regler-Anwendung:
- Wählen Sie die Karte Web-Regler, um die Disc-Steuerungsseite zu öffnen:
- Die Seite ist auch direkt unter http://192.168.0.2/web-rotator erreichbar.
- Ziehen Sie die Disc und beobachten Sie den im seriellen Monitor gemeldeten Winkel.
Rotationsmodi
Kontinuierlicher Modus (vollständig 0–360°)
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS);
Modus mit begrenztem Bereich
// Ermöglicht Rotation zwischen 0 und 180 Grad
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, 0.0, 180.0);
Callbacks
Empfang von Winkelaktualisierungen
Wird jedes Mal aufgerufen, wenn der Benutzer die Disc dreht:
webRotatorPage.onRotatorValueFromWeb([](float angle) {
currentAngle = angle;
Serial.println("Angle: " + String(angle));
// Apply to servo or stepper here
});
Übermittlung des Winkels an den Browser
Wird aufgerufen, wenn sich ein Browser verbindet und den aktuellen Winkel anfordert:
webRotatorPage.onRotatorValueToWeb([]() {
webRotatorPage.sendToWebRotator(currentAngle);
});
Servomotor-Beispiel
Ordnen Sie den Browser-Winkel (0–180°) einem Standard-Servomotor zu:
#include <Servo.h>
Servo myServo;
void setup() {
myServo.attach(9);
// ... server and page setup ...
webRotatorPage.onRotatorValueFromWeb([](float angle) {
myServo.write((int)angle);
Serial.println("Servo angle: " + String((int)angle));
});
}
Fehlerbehebung
Der Disc-Winkel löst den Callback nicht aus
- Bestätigen Sie, dass onRotatorValueFromWeb vor webAppsServer.begin() registriert ist
- Überprüfen Sie, ob der WebSocket-Status im Browser "verbunden" anzeigt
Servomotor bewegt sich in die falsche Position
- Überprüfen Sie, dass der Winkelbereich mit dem physischen Bereich des Servomotors übereinstimmt (normalerweise 0–180°)
- Verwenden Sie den Modus mit begrenztem Bereich, wenn der mechanische Bereich weniger als 360° beträgt
Seite nicht erreichbar
- Überprüfen Sie die IP-Adresse aus dem seriellen Monitor
- Stellen Sie sicher, dass sich Board und Browser-Gerät im gleichen 2,4-GHz-Netzwerk befinden