ESP32 - Steuert das Auto über das Web
Diese Anleitung zeigt Ihnen, wie Sie den ESP32 verwenden, um ein Roboterauto drahtlos über einen Webbrowser auf Ihrem Smartphone oder PC über WLAN zu steuern. Die Steuerung erfolgt über eine grafische Web-Benutzeroberfläche, die WebSocket verwendet, wodurch eine reibungslose und dynamische Steuerung des Autos ermöglicht wird.
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) |
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.
Über 2WD RC-Auto und WebSocket
Also, warum WebSocket verwenden? Hier ist die Sache:
- Ohne WebSocket müsste bei jeder Änderung der Fahrtrichtung des Autos die Seite neu geladen werden. Nicht ideal!
- Mit WebSocket wird eine spezielle Verbindung zwischen der Webseite und dem ESP32 hergestellt. Dadurch können Befehle im Hintergrund an den ESP32 gesendet werden, ohne die Seite neu laden zu müssen. Das Ergebnis? Der Roboterwagen bewegt sich nahtlos und in Echtzeit. Ganz schön cool, oder?
Kurz gesagt ermöglicht die WebSocket-Verbindung die reibungslose Echtzeitsteuerung des Roboters.
Wir haben spezifische Tutorials zu 2WD-RC-Autos und WebSocket. Jedes Tutorial enthält detaillierte Informationen und Schritt-für-Schritt-Anleitungen zur Hardware-Pinbelegung, zur Funktionsweise, zur Verkabelung des ESP32 und zum ESP32-Code... Erfahren Sie mehr dazu in den folgenden Links:
- ESP32 - 2WD RC Car tutorial
- ESP32 - WebSocket tutorial
Wie es funktioniert
Der ESP32-Code erstellt sowohl einen Webserver als auch einen WebSocket-Server. So funktioniert es:
- Wenn Sie die IP-Adresse des ESP32 in einem Webbrowser eingeben, fordert der ESP32 die Webseite (Benutzeroberfläche) vom ESP32 an.
- Der Webserver des ESP32 sendet den Inhalt der Webseite (HTML, CSS, JavaScript) zurück.
- Ihr Webbrowser zeigt dann die Webseite an.
- Der JavaScript-Code auf der Webseite baut eine WebSocket-Verbindung zum WebSocket-Server auf dem ESP32 auf.
- Sobald diese WebSocket-Verbindung hergestellt ist, sendet der JavaScript-Code, wenn Sie die Schaltflächen auf der Webseite drücken oder loslassen, die Befehle über diese WebSocket-Verbindung im Hintergrund an den ESP32.
- Der WebSocket-Server auf dem ESP32 steuert das Roboterauto entsprechend, sobald er die Befehle empfangen hat.
Die folgende Tabelle zeigt eine Befehlsliste, die die Webseite basierend auf den Aktionen des Benutzers an den ESP32 sendet:
| User's Action | Button | Command | Car Action |
|---|---|---|---|
| PRESS | UP | 1 | MOVE FORWARD |
| PRESS | DOWN | 2 | MOVE BACKWARD |
| PRESS | LEFT | 4 | TURN LEFT |
| PRESS | RIGHT | 8 | TURN RIGHT |
| PRESS | STOP | 0 | STOP |
| RELEASE | UP | 0 | STOP |
| RELEASE | DOWN | 0 | STOP |
| RELEASE | LEFT | 0 | STOP |
| RELEASE | RIGHT | 0 | STOP |
| RELEASE | STOP | 0 | STOP |
Verdrahtungsdiagramm zwischen 2WD RC-Auto und ESP32
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Wenn Sie nicht wissen, wie Sie ESP32 und andere Komponenten mit Strom versorgen, finden Sie Anleitungen im folgenden Tutorial: Wie man ESP32 mit Strom versorgt.
In der Regel benötigen Sie zwei Stromquellen:
- Eine für den Motor über das L298N-Modul.
- Eine weitere für das ESP32-Board, L298N-Modul (Motortreiber).
Aber du kannst es vereinfachen, indem du nur eine Stromquelle für alles verwendest – vier 1,5-V-Batterien (insgesamt 6 V). So geht's:
- Schließen Sie die Batterien wie im Diagramm gezeigt an das L298N-Modul an.
- Entfernen Sie zwei Jumper von den ENA- und ENB-Pins am L298N-Modul, die auf 5 V eingestellt sind.
- Fügen Sie einen Jumper hinzu, der mit 5VEN beschriftet ist (gelber Kreis im Diagramm).
- Verbinden Sie den 12V-Pin des L298N-Moduls mit dem Vin-Pin des ESP32, um den ESP32 direkt aus den Batterien zu versorgen.
Da das 2WD-RC-Auto einen Ein/Aus-Schalter hat, können Sie optional die Batterie über den Schalter anschließen, um die Stromversorgung des Autos ein- bzw. auszuschalten. Wenn Sie es einfach halten möchten, ignorieren Sie den Schalter.
ESP32-Code
Der Inhalt der Webseite (HTML, CSS, JavaScript) wird separat in einer index.h-Datei gespeichert. Daher werden wir zwei Code-Dateien in der Arduino-IDE haben:
- Eine .ino-Datei, die ESP32-Code enthält und einen Webserver sowie WebSocket-Server erstellt und das Auto steuert
- Eine .h-Datei, die den Inhalt der Webseite enthält
Schnelle Schritte
- Wenn dies das erste Mal ist, dass Sie ESP32 verwenden, sehen Sie sich wie man die Umgebung für ESP32 in der Arduino-IDE einrichtet an.
- Schließen Sie die Verkabelung wie in dem oben gezeigten Bild an.
- Schließen Sie das ESP32-Board über ein Micro-USB-Kabel an Ihren PC an.
- Öffnen Sie die Arduino IDE auf Ihrem PC.
- Wählen Sie das richtige ESP32-Board (z. B. ESP32 Dev Module) und den COM-Port aus.
- Öffnen Sie den Library Manager, indem Sie auf das Library Manager-Symbol in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie “ESPAsyncWebServer”, und finden Sie den ESPAsyncWebServer, der von lacamera erstellt wurde.
- Klicken Sie auf die Installieren-Schaltfläche, um die ESPAsyncWebServer-Bibliothek zu installieren.
- Sie werden aufgefordert, die Abhängigkeit zu installieren. Klicken Sie auf die Schaltfläche Alle installieren.
- Suche „WebSockets“, und finde dann die WebSockets, die von Markus Sattler erstellt wurden.
- Klicke auf die Schaltfläche Installieren, um die WebSockets-Bibliothek zu installieren.
- In der Arduino-IDE ein neues Sketch erstellen, ihm einen Namen geben, zum Beispiel newbiely.com.ino.
- Den untenstehenden Code kopieren und mit der Arduino-IDE öffnen.
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-controls-car-via-web
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <WebSocketsServer.h>
#include "index.h"
#define CMD_STOP 0
#define CMD_FORWARD 1
#define CMD_BACKWARD 2
#define CMD_LEFT 4
#define CMD_RIGHT 8
#define ENA_PIN 14 // The ESP32 pin GPIO14 connected to the ENA pin L298N
#define IN1_PIN 27 // The ESP32 pin GPIO27 connected to the IN1 pin L298N
#define IN2_PIN 26 // The ESP32 pin GPIO26 connected to the IN2 pin L298N
#define IN3_PIN 25 // The ESP32 pin GPIO25 connected to the IN3 pin L298N
#define IN4_PIN 33 // The ESP32 pin GPIO33 connected to the IN4 pin L298N
#define ENB_PIN 32 // The ESP32 pin GPIO32 connected to the ENB pin L298N
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
AsyncWebServer server(80);
WebSocketsServer webSocket = WebSocketsServer(81); // WebSocket server on port 81
void webSocketEvent(uint8_t num, WStype_t type, uint8_t* payload, size_t length) {
switch (type) {
case WStype_DISCONNECTED:
Serial.printf("[%u] Disconnected!\n", num);
break;
case WStype_CONNECTED:
{
IPAddress ip = webSocket.remoteIP(num);
Serial.printf("[%u] Connected from %d.%d.%d.%d\n", num, ip[0], ip[1], ip[2], ip[3]);
}
break;
case WStype_TEXT:
//Serial.printf("[%u] Received text: %s\n", num, payload);
String angle = String((char*)payload);
int command = angle.toInt();
Serial.print("command: ");
Serial.println(command);
switch (command) {
case CMD_STOP:
Serial.println("Stop");
CAR_stop();
break;
case CMD_FORWARD:
Serial.println("Move Forward");
CAR_moveForward();
break;
case CMD_BACKWARD:
Serial.println("Move Backward");
CAR_moveBackward();
break;
case CMD_LEFT:
Serial.println("Turn Left");
CAR_turnLeft();
break;
case CMD_RIGHT:
Serial.println("Turn Right");
CAR_turnRight();
break;
default:
Serial.println("Unknown command");
}
break;
}
}
void setup() {
Serial.begin(9600);
pinMode(ENA_PIN, OUTPUT);
pinMode(IN1_PIN, OUTPUT);
pinMode(IN2_PIN, OUTPUT);
pinMode(IN3_PIN, OUTPUT);
pinMode(IN4_PIN, OUTPUT);
pinMode(ENB_PIN, OUTPUT);
digitalWrite(ENA_PIN, HIGH); // set full speed
digitalWrite(ENB_PIN, HIGH); // set full speed
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Initialize WebSocket server
webSocket.begin();
webSocket.onEvent(webSocketEvent);
// Serve a basic HTML page with JavaScript to create the WebSocket connection
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("Web Server: received a web page request");
String html = HTML_CONTENT; // Use the HTML content from the servo_html.h file
request->send(200, "text/html", html);
});
server.begin();
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
webSocket.loop();
// TO DO: Your code here
}
void CAR_moveForward() {
digitalWrite(IN1_PIN, HIGH);
digitalWrite(IN2_PIN, LOW);
digitalWrite(IN3_PIN, HIGH);
digitalWrite(IN4_PIN, LOW);
}
void CAR_moveBackward() {
digitalWrite(IN1_PIN, LOW);
digitalWrite(IN2_PIN, HIGH);
digitalWrite(IN3_PIN, LOW);
digitalWrite(IN4_PIN, HIGH);
}
void CAR_turnLeft() {
digitalWrite(IN1_PIN, HIGH);
digitalWrite(IN2_PIN, LOW);
digitalWrite(IN3_PIN, LOW);
digitalWrite(IN4_PIN, LOW);
}
void CAR_turnRight() {
digitalWrite(IN1_PIN, LOW);
digitalWrite(IN2_PIN, LOW);
digitalWrite(IN3_PIN, HIGH);
digitalWrite(IN4_PIN, LOW);
}
void CAR_stop() {
digitalWrite(IN1_PIN, LOW);
digitalWrite(IN2_PIN, LOW);
digitalWrite(IN3_PIN, LOW);
digitalWrite(IN4_PIN, LOW);
}
- Ändern Sie die WLAN-Informationen (SSID und Passwort) im Code, damit sie mit Ihren eigenen Netzwerkanmeldedaten übereinstimmen.
- Erstellen Sie die index.h-Datei in der Arduino-IDE, indem Sie:
- Entweder klicken Sie auf die Schaltfläche direkt unter dem Symbol des seriellen Monitors und wählen Sie Neue Registerkarte, oder verwenden Sie die Tastenkombination Strg+Umschalt+N.
- Gib den Dateinamen index.h ein und klicke auf den OK-Button
- Kopieren Sie den untenstehenden Code und fügen Sie ihn in die index.h ein.
- Jetzt hast du den Code in zwei Dateien: newbiely.com.ino und index.h
- Klicke auf die Upload-Schaltfläche in der Arduino IDE, um den Code auf den ESP32 hochzuladen.
- Öffne den Serial Monitor
- Sieh dir das Ergebnis im Serial Monitor an.
- Notieren Sie die angezeigte IP-Adresse und geben Sie diese Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Sie sehen die Webseite wie unten dargestellt:
- Der JavaScript-Code der Webseite stellt automatisch eine WebSocket-Verbindung zum ESP32 her.
- Jetzt können Sie das Auto über die Weboberfläche nach links bzw. rechts drehen und vorwärts bzw. rückwärts bewegen.
- Wenn Sie den HTML-Inhalt in der index.h ändern und nichts in der newbiely.com.ino Datei ändern, wird die Arduino IDE beim Kompilieren und Hochladen des Codes auf den ESP32 den HTML-Inhalt nicht aktualisieren.
- Um in diesem Fall die Arduino IDE dazu zu bringen, den HTML-Inhalt zu aktualisieren, nehmen Sie eine Änderung in der newbiely.com.ino Datei vor (z. B. eine leere Zeile hinzufügen, einen Kommentar hinzufügen, ...)
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-controls-car-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Control Car via Web</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=1, user-scalable=no">
<style type="text/css">
body { text-align: center; font-size: 24px;}
button { text-align: center; font-size: 24px;}
#container {
margin-right: auto;
margin-left: auto;
width: 400px;
height: 400px;
position: relative;
margin-bottom: 10px;
}
div[class^='button'] { position: absolute; }
.button_up, .button_down { width:214px; height:104px;}
.button_left, .button_right { width:104px; height:214px;}
.button_stop { width:178px; height:178px;}
.button_up {
background: url('https://esp32io.com/images/tutorial/up_inactive.png') no-repeat;
background-size: contain;
left: 200px;
top: 0px;
transform: translateX(-50%);
}
.button_down {
background: url('https://esp32io.com/images/tutorial/down_inactive.png') no-repeat;
background-size: contain;
left:200px;
bottom: 0px;
transform: translateX(-50%);
}
.button_right {
background: url('https://esp32io.com/images/tutorial/right_inactive.png') no-repeat;
background-size: contain;
right: 0px;
top: 200px;
transform: translateY(-50%);
}
.button_left {
background: url('https://esp32io.com/images/tutorial/left_inactive.png') no-repeat;
background-size: contain;
left:0px;
top: 200px;
transform: translateY(-50%);
}
.button_stop {
background: url('https://esp32io.com/images/tutorial/stop_inactive.png') no-repeat;
background-size: contain;
left:200px;
top: 200px;
transform: translate(-50%, -50%);
}
</style>
<script>
var CMD_STOP = 0;
var CMD_FORWARD = 1;
var CMD_BACKWARD = 2;
var CMD_LEFT = 4;
var CMD_RIGHT = 8;
var img_name_lookup = {
[CMD_STOP]: "stop",
[CMD_FORWARD]: "up",
[CMD_BACKWARD]: "down",
[CMD_LEFT]: "left",
[CMD_RIGHT]: "right"
}
var ws = null;
function init()
{
var container = document.querySelector("#container");
container.addEventListener("touchstart", mouse_down);
container.addEventListener("touchend", mouse_up);
container.addEventListener("touchcancel", mouse_up);
container.addEventListener("mousedown", mouse_down);
container.addEventListener("mouseup", mouse_up);
container.addEventListener("mouseout", mouse_up);
}
function ws_onmessage(e_msg)
{
e_msg = e_msg || window.event; // MessageEvent
//alert("msg : " + e_msg.data);
}
function ws_onopen()
{
document.getElementById("ws_state").innerHTML = "OPEN";
document.getElementById("wc_conn").innerHTML = "Disconnect";
}
function ws_onclose()
{
document.getElementById("ws_state").innerHTML = "CLOSED";
document.getElementById("wc_conn").innerHTML = "Connect";
console.log("socket was closed");
ws.onopen = null;
ws.onclose = null;
ws.onmessage = null;
ws = null;
}
function wc_onclick()
{
if(ws == null)
{
ws = new WebSocket("ws://" + window.location.host + ":81");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = ws_onopen;
ws.onclose = ws_onclose;
ws.onmessage = ws_onmessage;
}
else
ws.close();
}
function mouse_down(event)
{
if (event.target !== event.currentTarget)
{
var id = event.target.id;
send_command(id);
event.target.style.backgroundImage = "url('https://esp32io.com/images/tutorial/" + img_name_lookup[id] + "_active.png')";
}
event.stopPropagation();
event.preventDefault();
}
function mouse_up(event)
{
if (event.target !== event.currentTarget)
{
var id = event.target.id;
send_command(CMD_STOP);
event.target.style.backgroundImage = "url('https://esp32io.com/images/tutorial/" + img_name_lookup[id] + "_inactive.png')";
}
event.stopPropagation();
event.preventDefault();
}
function send_command(cmd)
{
if(ws != null)
if(ws.readyState == 1)
ws.send(cmd + "\r\n");
}
window.onload = init;
</script>
</head>
<body>
<h2>ESP32 - RC Car via Web</h2>
<div id="container">
<div id="0" class="button_stop"></div>
<div id="1" class="button_up"></div>
<div id="2" class="button_down"></div>
<div id="8" class="button_right"></div>
<div id="4" class="button_left"></div>
</div>
<p>
WebSocket : <span id="ws_state" style="color:blue">closed</span><br>
</p>
<button id="wc_conn" type="button" onclick="wc_onclick();">Connect</button>
<br>
<br>
<div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div>
</body>
</html>
)=====";
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
Um den Speicher des ESP32 zu schonen, werden die Bilder der Bedienelemente NICHT im ESP32 gespeichert. Stattdessen werden sie im Internet gespeichert, sodass Ihr Smartphone oder PC eine Internetverbindung benötigt, um Bilder für die Web-Steuerungsseite zu laden.
※ Notiz:
Zeilenweise Code-Erklärung
Der obige ESP32-Code enthält eine zeilenweise Erklärung. Bitte lesen Sie die Kommentare im Code!