ESP32 C3 Super Mini - Auto über das Web steuern
Lernen Sie, wie Sie ein Roboterauto mit dem ESP32 C3 Super Mini über einen Webbrowser fahren. Das WLAN ist bereits im ESP32 C3 Super Mini integriert, sodass Sie kein zusätzliches WLAN-Modul benötigen. Die Webseite kommuniziert über WebSocket mit dem Board, daher reagiert das Auto sofort.
In diesem Tutorial lernen Sie:
- Wie der ESP32 C3 Super Mini gleichzeitig einen Webserver und einen WebSocket-Server betreibt
- Wie Sie einen L9110S-Motortreiber und ein 2WD-RC-Auto mit dem ESP32 C3 Super Mini verdrahten
- Wie Sie den ESP32 C3 Super Mini programmieren, um das Auto vorwärts, rückwärts, nach links und nach rechts zu bewegen
- Wie Sie die Steuerseite auf Ihrem Smartphone oder PC öffnen
- Wie Sie das Board und die Motoren mit einem einzigen Batteriepack versorgen

Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Überblick über 2WD RC Car and WebSocket
Ein 2WD-RC-Auto ist ein kleines Roboterauto mit zwei DC-Motoren, und WebSocket ist die Verbindung, die es in Echtzeit bewegt.
Hauptmerkmale des 2WD-RC-Autos:
- Zwei DC-Motoren: Ein Motor für das linke Rad, einer für das rechte Rad
- Einfache Lenkung: Das Auto lenkt, indem nur ein Motor läuft
- Motortreiber erforderlich: Die Motoren benötigen ein L9110S-Modul, niemals einen GPIO-Pin
- Batteriebetrieben: Vier 1,5V-AA-Batterien liefern 6V für die Motoren und das Board
Warum WebSocket und keine normale Webseite:
- Kein Neuladen der Seite: Ohne WebSocket müssten Sie die Seite bei jeder Bewegung neu laden. Nicht schön!
- Dauerhaft offene Verbindung: WebSocket hält eine Verbindung zwischen der Webseite und dem ESP32 C3 Super Mini offen
- Befehle im Hintergrund: Die Seite sendet Befehle unauffällig, ohne neu zu laden
- Echtzeitgefühl: Das Roboterauto reagiert so schnell, wie Sie eine Schaltfläche drücken
- Bidirektional: Der ESP32 C3 Super Mini kann auch Daten an die Seite zurücksenden
Kurz gesagt: Die WebSocket-Verbindung sorgt dafür, dass sich das Auto mit dem ESP32 C3 Super Mini flüssig und unmittelbar anfühlt.
So funktioniert es
Der ESP32 C3 Super Mini Code startet gleichzeitig einen Webserver und einen WebSocket-Server. So läuft es ab:
- Sie geben die IP-Adresse des ESP32 C3 Super Mini in einen Webbrowser ein
- Der Webserver sendet den Seiteninhalt (HTML, CSS, JavaScript) zurück
- Ihr Browser zeigt die Steuerseite mit den Pfeilschaltflächen an
- Das JavaScript auf der Seite öffnet eine WebSocket-Verbindung zum ESP32 C3 Super Mini
- Wenn Sie eine Schaltfläche drücken oder loslassen, sendet das JavaScript eine kleine Befehlsnummer
- Der WebSocket-Server liest den Befehl und steuert das Auto über das L9110S-Modul
Die folgende Tabelle zeigt die Liste der Befehle, die die Webseite je nach Aktion des Benutzers an den ESP32 C3 Super Mini sendet:
| Aktion des Benutzers | Schaltfläche | Befehl | Aktion des Autos |
|---|---|---|---|
| DRÜCKEN | HOCH | 1 | VORWÄRTS FAHREN |
| DRÜCKEN | RUNTER | 2 | RÜCKWÄRTS FAHREN |
| DRÜCKEN | LINKS | 4 | LINKS ABBIEGEN |
| DRÜCKEN | RECHTS | 8 | RECHTS ABBIEGEN |
| DRÜCKEN | STOPP | 0 | STOPP |
| LOSLASSEN | HOCH | 0 | STOPP |
| LOSLASSEN | RUNTER | 0 | STOPP |
| LOSLASSEN | LINKS | 0 | STOPP |
| LOSLASSEN | RECHTS | 0 | STOPP |
| LOSLASSEN | STOPP | 0 | STOPP |
Wiring Diagram between 2WD RC Car and ESP32 C3 Super Mini
Vier GPIO-Pins gehen zum L9110S-Motortreiber, zwei Pins pro Motor.

Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
| L9110S-Pin | ESP32 C3 Super Mini Pin |
|---|---|
| A-IA | GPIO5 |
| A-IB | GPIO6 |
| B-IA | GPIO7 |
| B-IB | GPIO10 |
| GND | GND |
- Hinweis: Der ESP32 C3 Super Mini arbeitet nur mit 3,3V. Verbinden Sie niemals eine 5V- oder 6V-Leitung mit einem GPIO-Pin.
- Hinweis: Die Signalpins des L9110S kommen problemlos mit dem 3,3V-Pegel des ESP32 C3 Super Mini zurecht.
- Hinweis: Schließen Sie einen Motor nicht direkt an einen GPIO-Pin an. Der Motor benötigt viel mehr Strom, als ein Pin liefern kann.
- Hinweis: GPIO8 und GPIO9 sind Boot-Pins, und GPIO20/GPIO21 sind der UART des Serial Monitors. Lassen Sie diese frei.
Das L9110S-Modul (das als Motortreiber dient) versorgt die Motoren direkt über seine VCC- und GND-Pins und hat keinen integrierten 5V-Spannungsregler. So können Sie alles aus einer einzigen Quelle versorgen - vier 1,5V-Batterien ergeben insgesamt 6V. So gehen Sie vor:
- Verbinden Sie die 6V-Batterie mit den Pins VCC und GND des L9110S-Moduls, um die Motoren zu versorgen.
- Verbinden Sie dieselbe 6V-Batterie mit den Pins 5V und GND des ESP32 C3 Super Mini, um das Board über seinen integrierten Spannungsregler zu versorgen.
- Stellen Sie sicher, dass das L9110S-Modul und der ESP32 C3 Super Mini eine gemeinsame Masse (GND) haben.
Im Gegensatz zum L298N hat der L9110S keine ENA/ENB-Enable-Jumper und keine 12V-Schraubklemme, daher ist die Verdrahtung einfacher.
WARNING
- Versorgen Sie den ESP32 C3 Super Mini niemals gleichzeitig über die Batterie und das USB-Type-C-Kabel.
- Speisen Sie keine 6V in den 3,3V-Pin ein. Dieser Pin ist ein Ausgang des Spannungsreglers, kein Eingang.
Da das 2WD-RC-Auto einen Ein/Aus-Schalter hat, können Sie die Batterie optional über den Schalter anschließen, um die Stromversorgung des Autos ein- und ausschalten zu können. Wenn Sie es einfach halten möchten, ignorieren Sie den Schalter einfach.
ESP32 C3 Super Mini Code
Der Inhalt der Webseite (HTML, CSS, JavaScript) wird separat in einer Datei index.h gespeichert. Wir haben also zwei Codedateien in der Arduino IDE:
- Eine .ino-Datei mit dem ESP32 C3 Super Mini Code, der einen Webserver und einen WebSocket-Server erstellt und das Auto steuert
- Eine .h-Datei, die den Inhalt der Webseite enthält.
Was dieser Code macht:
- Verbindet sich mit dem WLAN: Der ESP32 C3 Super Mini tritt Ihrem WLAN-Heimnetz bei
- Stellt die Seite bereit: Er sendet die Steuerseite an jeden Browser, der sie anfordert
- Öffnet einen WebSocket: Ein WebSocket-Server lauscht auf Port 81 auf die Schaltflächenbefehle
- Steuert die Motoren: Jeder Befehl setzt die vier L9110S-Pins auf HIGH oder LOW
- Gibt die IP aus: Der Serial Monitor zeigt die Adresse an, die Sie im Browser öffnen müssen
Schnelle Schritte
Folgen Sie diesen kurzen Schritten, um das Auto zum Laufen zu bringen.
- Neu beim ESP32 C3 Super Mini? Absolvieren Sie zuerst unser Tutorial Erste Schritte mit dem ESP32 C3 Super Mini, um Ihre Entwicklungsumgebung einzurichten.
- Verdrahten: Schließen Sie die Teile wie im obigen Schaltplan gezeigt an.
- Anschließen: Verbinden Sie den ESP32 C3 Super Mini mit einem USB-Type-C-Kabel mit Ihrem Computer.
- IDE öffnen: Starten Sie die Arduino IDE auf Ihrem Computer.
- Board auswählen: Stellen Sie sicher, dass unter Tools > Board der ESP32 C3 Super Mini ausgewählt ist, und wählen Sie den richtigen COM-Port.
- Bibliotheksverwalter öffnen: Klicken Sie auf das Symbol Library Manager in der linken Navigationsleiste der Arduino IDE.
- Bibliothek finden: Suchen Sie nach “DIYables ESP32 WebServer” und finden Sie die Web-Server-Bibliothek von DIYables.
- Installieren: Klicken Sie auf die Schaltfläche Install, um die Web-Server-Bibliothek zu installieren.
- Search for DIYables ESP32 WebServer created by DIYables.io and click the Install button.
- Neuer Sketch: Erstellen Sie einen neuen Sketch und geben Sie ihm einen Namen, zum Beispiel newbiely.com.ino
- Code einfügen: Kopieren Sie den folgenden Code und öffnen Sie ihn mit der Arduino IDE.
- WLAN einstellen: Ändern Sie YOUR_WIFI_SSID und YOUR_WIFI_PASSWORD in Ihren eigenen WLAN-Namen und Ihr Passwort.
- Zweite Datei hinzufügen: Erstellen Sie die Datei index.h in der Arduino IDE wie folgt:
- Klicken Sie entweder auf die Schaltfläche direkt unter dem Serial-Monitor-Symbol und wählen Sie New Tab, oder verwenden Sie die Tasten Ctrl+Shift+N.
- Geben Sie der Datei den Namen index.h und klicken Sie auf die Schaltfläche OK
- Kopieren Sie den folgenden Code und fügen Sie ihn in die index.h ein.
- Dateien prüfen: Jetzt haben Sie den Code in zwei Dateien: newbiely.com.ino und index.h
- Hochladen: Klicken Sie auf die Schaltfläche Upload, um den Code auf den ESP32 C3 Super Mini hochzuladen.
- Serial Monitor öffnen: Stellen Sie die Baudrate auf 115200 ein.
- Ergebnis ablesen: Sehen Sie sich das Ergebnis im Serial Monitor an.
- Seite öffnen: Notieren Sie sich die angezeigte IP-Adresse und geben Sie diese Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Schaltflächen ansehen: Sie sehen die Webseite wie unten dargestellt:
- Verbinden: Der JavaScript-Code der Webseite stellt automatisch die WebSocket-Verbindung zum ESP32 C3 Super Mini her.
- Fahren: Jetzt können Sie das Auto über die Weboberfläche nach links/rechts lenken und vorwärts/rückwärts fahren.
- Profi-Tipp: Weisen Sie dem ESP32 C3 Super Mini in Ihren Router-Einstellungen eine feste IP-Adresse zu, damit das Auto immer dieselbe Webadresse hat.
- Wenn Sie den HTML-Inhalt in der index.h ändern und nichts an der Datei newbiely.com.ino ändern, aktualisiert die Arduino IDE den HTML-Inhalt beim Kompilieren und Hochladen des Codes auf den ESP32 C3 Super Mini nicht.
- Damit die Arduino IDE den HTML-Inhalt in diesem Fall aktualisiert, nehmen Sie eine Änderung an der Datei newbiely.com.ino vor (z. B. eine Leerzeile oder einen Kommentar hinzufügen ...)



Um den Speicher des ESP32 C3 Super Mini zu schonen, werden die Bilder der Steuerschaltflächen NICHT auf dem Board gespeichert. Stattdessen liegen sie im Internet, daher benötigt Ihr Smartphone oder PC eine Internetverbindung, um die Bilder für die Web-Steuerseite zu laden.
※ Notiz:
Zeile-für-Zeile-Erklärung des Codes
Der obige ESP32 C3 Super Mini Code enthält eine Zeile-für-Zeile-Erklärung. Bitte lesen Sie die Kommentare im Code!
Fehlerbehebung
Einige schnelle Lösungen, falls sich das Auto nicht bewegt.
- Keine IP-Adresse ausgegeben: Überprüfen Sie WLAN-Name und Passwort. Der ESP32 C3 Super Mini verbindet sich nur mit 2,4-GHz-Netzen, nicht mit 5 GHz.
- Seite öffnet sich nicht: Ihr Smartphone und der ESP32 C3 Super Mini müssen sich im selben WLAN-Netz befinden.
- Schaltflächen haben keine Bilder: Ihr Smartphone oder PC hat kein Internet. Die Schaltflächenbilder werden aus dem Web geladen.
- Auto fährt in die falsche Richtung: Vertauschen Sie die beiden Motorkabel an der Ausgangsschraubklemme des L9110S.
- Auto stoppt, wenn die Motoren anlaufen: Die Batterien sind schwach. Setzen Sie neue AA-Batterien ein.
Anwendungen
Hier sind einige unterhaltsame Projekte, die Sie mit einem über das Web gesteuerten Auto mit dem ESP32 C3 Super Mini bauen können.
- WLAN-RC-Auto: Fahren Sie das Roboterauto über den Browser Ihres Smartphones durch Ihr Haus
- Kamera-Rover: Fügen Sie eine kleine Kamera hinzu und sehen Sie, wohin das Auto fährt
- Linienfolger mit manueller Übersteuerung: Lassen Sie das Auto einer Linie folgen und übernehmen Sie bei Bedarf die Steuerung über das Web
- Hindernisvermeidendes Auto: Fügen Sie einen Ultraschallsensor hinzu, der das Auto stoppt, bevor es gegen eine Wand fährt
- Mini-Lagerroboter: Transportieren Sie kleine Gegenstände von einer Stelle des Tisches zu einer anderen
- Spielzeugauto für Haustiere: Fahren Sie ein Spielzeug durch den Raum, um mit Ihrer Katze oder Ihrem Hund zu spielen
Fordern Sie sich heraus
Probieren Sie diese Ideen aus, um Ihre Kenntnisse zum Roboterauto mit dem ESP32 C3 Super Mini zu erweitern.
- Einfach: Ändern Sie die Meldungen im Serial Monitor in Ihre eigenen Worte
- Einfach: Fügen Sie eine "Dreh"-Schaltfläche hinzu, die das Auto auf der Stelle drehen lässt
- Mittel: Fügen Sie eine Geschwindigkeitsregelung mit analogWrite() und einem Schieberegler auf der Webseite hinzu
- Mittel: Zeigen Sie die Batteriespannung des Autos auf der Webseite an, indem Sie an GPIO4 einen Analogwert auslesen
- Fortgeschritten: Fügen Sie einen Ultraschallsensor hinzu und stoppen Sie das Auto automatisch in der Nähe eines Hindernisses
- Fortgeschritten: Fügen Sie eine Tastatursteuerung im Gamepad-Stil hinzu, sodass die Pfeiltasten das Auto steuern