ESP32 WebDigitalPins-Beispiel – Tutorial zur Steuerung digitaler Pins
Übersicht
Das WebDigitalPins-Beispiel bietet eine webbasierte Schnittstelle zur Steuerung und Überwachung aller digitalen Pins deines Arduino. Für ESP32 konzipierte Bildungsplattform mit erweiterten GPIO-Funktionen, erweiterten Pin-Konfigurationen und integrierten Lernfunktionen zum Erlernen digitaler Elektronik. Du kannst Pins ein- und ausschalten, ihre Zustände in Echtzeit überwachen und über eine intuitive Weboberfläche Massenoperationen durchführen.

Funktionen
- Individuelle Pin-Steuerung: Steuern Sie jeden digitalen Pin (0–13) separat.
- Status in Echtzeit: Überwachen Sie Pin-Zustände mit visuellen Indikatoren.
- Massenoperationen: Steuern Sie alle Pins gleichzeitig (Alle AN, Alle AUS, Alle umschalten).
- Pin-Konfiguration: Pins als Eingänge oder Ausgänge über die Weboberfläche festlegen.
- Visuelles Feedback: Farbcodierte Schaltflächen zeigen Pin-Zustände (grün=AN, rot=AUS).
- Responsives Design: Funktioniert auf Desktop-, Tablet- und Mobilgeräten.
- WebSocket-Kommunikation: Sofortige Updates ohne Seitenaktualisierung.
Erforderliche Hardware
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) |
Installationsanleitung
Schnelle Schritte
Folge diesen Anweisungen Schritt für Schritt:
- Falls Sie den ESP32 zum ersten Mal verwenden, sehen Sie sich das Tutorial Einrichtung der ESP32-Umgebung in der Arduino IDE an.
- Verbinden Sie das ESP32-Board über ein USB-Kabel mit Ihrem Computer.
- Öffnen Sie die Arduino-IDE auf Ihrem Computer.
- Wählen Sie das passende ESP32-Board (z. B. ESP32-Dev-Modul) und den COM-Port aus.
- Navigieren Sie zum Bibliotheken-Symbol in der linken Leiste der Arduino IDE.
- Suchen Sie "DIYables ESP32 WebApps", und finden Sie dann die DIYables ESP32 WebApps-Bibliothek von DIYables.
- Klicken Sie auf die Install-Schaltfläche, um die Bibliothek zu installieren.

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

- In der Arduino-IDE gehen Sie zu Datei Beispiele DIYables ESP32 WebApps WebDigitalPins Beispiel, oder kopieren Sie den obigen Code und fügen ihn in den Editor der Arduino-IDE ein
- Konfigurieren Sie die WLAN-Zugangsdaten im Code, indem Sie diese Zeilen aktualisieren:
- Klicken Sie in der Arduino-IDE auf die Schaltfläche Hochladen, um den Code auf den ESP32 hochzuladen.
- Öffnen Sie den seriellen Monitor.
- Überprüfen Sie das Ergebnis im seriellen Monitor. Es sieht wie folgt aus.
- Wenn Sie nichts sehen, starten Sie das ESP32-Board neu.
- Notieren Sie sich die angezeigte IP-Adresse und geben Sie diese Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Beispiel: http://192.168.0.2
- Sie sehen die Startseite wie im folgenden Bild:

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

- Oder Sie können die Seite auch direkt über die IP-Adresse aufrufen, gefolgt von /web-digital-pins. Zum Beispiel: http://192.168.0.2/web-digital-pins
- Versuchen Sie, die digitalen Pins zu steuern, indem Sie auf die Pin-Schaltflächen klicken, um sie EIN/AUS zu schalten, und beobachten Sie, wie die integrierte LED (Pin 13) auf Ihre Befehle reagiert.
Kreative Anpassung – Passen Sie den Code an Ihr Projekt an
Das Beispiel zeigt verschiedene Möglichkeiten, Pins so zu konfigurieren, dass sie den Anforderungen Ihres kreativen Projekts entsprechen:
2. PIN-Einstellungen konfigurieren
Das Beispiel zeigt verschiedene Möglichkeiten, Pins zu konfigurieren:
Methode 1: Bestimmte Pins aktivieren
Methode 2: PIN-Bereiche aktivieren
Methode 3: Alle Pins aktivieren
4. Skizze hochladen
- Wähle dein ESP32-Board aus: Tools → Board → ESP32
- Wähle den richtigen Port aus: Tools → Port → [Dein ESP32-Port]
- Klicke auf die Upload-Schaltfläche
5. Die IP-Adresse abrufen
- Öffne Werkzeuge → Serienmonitor
- Stelle die Baudrate auf 9600 ein
- Warte, bis sich der ESP32 mit dem WLAN verbindet
- Notiere die angezeigte IP-Adresse (z. B. 192.168.1.100)
Zugriff auf die Schnittstelle der digitalen Pins
Öffnen Sie Ihren Webbrowser und navigieren Sie zu:
Beispiel: http://192.168.1.100/digital-pins
So verwenden Sie es
Pin-Steuerungsschnittstelle
Die Weboberfläche zeigt alle konfigurierten Pins mit:
- Pin-Nummer: Zeigt, welcher ESP32-Pin (0-13) verwendet wird
- Aktueller Zustand: AN (grün) oder AUS (rot) Indikator
- Bedienknopf: Klicken, um den Pinzustand umzuschalten
- Pin-Typ: Gibt an, ob als Eingabe oder Ausgabe konfiguriert ist
Individuelle Pinsteuerung
- Pin einschalten: Klicken Sie auf die Pin-Taste, wenn sie "AUS" anzeigt
- Pin ausschalten: Klicken Sie auf die Pin-Taste, wenn sie "EIN" anzeigt
- Monitorstatus: Die Pin-Schaltflächen aktualisieren sich automatisch, um den aktuellen Zustand anzuzeigen
Massenoperationen
Verwenden Sie die Tasten zur Mehrfachsteuerung, um mehrere Pins gleichzeitig zu steuern:
Alles AN
- Alle konfigurierten Ausgangspins auf HIGH setzen
- Eingangspins bleiben unberührt
- Nützlich zum Testen aller angeschlossenen Geräte
Alle AUS
- Schaltet alle konfigurierten Ausgabepins auf LOW
- Eingangs-Pins bleiben unberührt
- Sichere Methode, alle Ausgänge zu deaktivieren
Alle auswählen
- Invertiert den Zustand aller Ausgangspins
- AN-Pins werden zu AUS-Pins, AUS-Pins werden zu AN-Pins
- Erzeugt interessante Beleuchtungseffekte
Echtzeitüberwachung
- Pin-Zustände werden automatisch über WebSocket aktualisiert
- Änderungen im Code werden in der Weboberfläche angezeigt
- Mehrere Benutzer können denselben ESP32 gleichzeitig überwachen
Hardware-Verbindungen
Beispiele für Ausgangspins
LED-Steuerung
Relaissteuerung
Motorsteuerung (über Motortreiber)
Eingangs-Pin-Beispiele
Eingabe wechseln
Sensor-Eingang
Code-Anpassung
Hinzufügen von Pin-Change-Callback-Funktionen
Überwache, wenn Pins ihren Zustand ändern:
Benutzerdefinierte PIN-Initialisierung
Stelle bestimmte Pins beim Start auf die gewünschten Zustände ein:
Eingangs-Pins lesen
Überwachen Sie Eingangs-Pins in Ihrer Hauptschleife:
Erweiterte Funktionen
Pin-Gruppen
Erstelle logische Gruppen von Pins für verwandte Funktionen:
Mustergenerierung
Lichtmuster oder Sequenzen erstellen:
PWM-Steuerungsintegration
Mit analoger Steuerung für erweiterte Funktionen:
Sicherheitsüberlegungen
PIN-Nutzungsrichtlinien
Pins 0 und 1 (TX/RX)
- Wird für die serielle Kommunikation verwendet
- Verwenden Sie es nur, wenn absolut notwendig
- Kann die Programmierung und das Debugging beeinträchtigen
Pin 13 (eingebaute LED)
- Sicher zum Testen
- Integrierte LED liefert visuelles Feedback
- Gut für erste Tests geeignet
Pins 2–12
- Sicher für allgemeine digitale Ein-/Ausgabe
- Empfohlen für die meisten Anwendungen
- Keine besonderen Überlegungen
Aktuelle Einschränkungen
Maximale Stromstärke pro Pin: 40 mA
- Verwenden Sie Strombegrenzungswiderstände mit LEDs
- Verwenden Sie Transistoren oder Relais für Lasten mit hohem Strom
- Berücksichtigen Sie den Gesamtstromverbrauch
Spannungspegel: 3,3-V-Logik
- ESP32 verwendet 3,3-V-Logik
- Stellen Sie sicher, dass die angeschlossenen Geräte kompatibel sind
- Verwenden Sie 5-V-Pegelwandler, falls erforderlich
Fehlerbehebung
Häufige Probleme
1. PIN reagiert nicht
- Prüfe, ob der Pin im Code aktiviert ist.
- Überprüfe die Hardwareverbindungen.
- Überprüfe auf Kurzschlüsse.
- Bestätige den Pin-Modus (Eingang/Ausgang).
- Weboberfläche aktualisiert sich nicht
- WebSocket-Verbindungsstatus überprüfen
- Seite im Browser aktualisieren
- Netzwerkverbindung überprüfen
- Serial Monitor auf Fehler prüfen
3. Massenoperationen funktionieren nicht
- Stellen Sie sicher, dass die Pins als Ausgänge konfiguriert sind
- Überprüfen Sie Hardwarebeschränkungen
- Überprüfen Sie die Leistungsfähigkeit der Stromversorgung
- Überwachen Sie Überstrombedingungen
4. Eingangspins zeigen falsche Zustände
- Überprüfen Sie geeignete Pull-up- und Pull-down-Widerstände.
- Überprüfen Sie die Pegel des Eingangssignals.
- Auf elektromagnetische Störungen prüfen.
- Bestätigen Sie die Pinbelegung.
Tipps zum Debuggen
Debug-Ausgabe aktivieren:
Projektideen
Hausautomation
- Kontrollraumbeleuchtung
- Jalousien bedienen
- Heizungs- und Kühlsysteme steuern
- Sicherheitssystem-Integration
Gartenautomatisierung
- Bewässerungssystemsteuerung
- Beleuchtungsmanagement
- Temperaturregelung
- Feuchtigkeitsregelung
Steuerung des Workshops
- Werkzeugleistungssteuerung
- Beleuchtungssteuerung
- Lüftungssystem
- Sicherheitsverriegelungen
Bildungsprojekte
- Logikgatter-Demonstrationen
- Ampelsimulation
- Alarmsystemprojekte
- Experimente mit Fernbedienungen
Integrationsbeispiele
Bewegungsgesteuerte Beleuchtung
Temperaturgesteuerter Lüfter
Nächste Schritte
Nachdem Sie das WebDigitalPins-Beispiel gemeistert haben, versuchen Sie:
- WebSlider - Für PWM- und analoge Steuerung
- WebJoystick - Für Richtungssteuerung
- WebMonitor - Für Fehlersuche und Überwachung
- MultipleWebApps - Alle Funktionen vereinen