Arduino Nano ESP32 - Steuert das Auto über das Web
Dieser Leitfaden zeigt dir, wie du den Arduino Nano ESP32 verwendest, um ein Roboterauto drahtlos von einem Webbrowser auf deinem Smartphone oder PC aus über WLAN zu steuern. Die Steuerung erfolgt über eine grafische Web-Benutzeroberfläche, die WebSocket verwendet, und ermöglicht eine flüssige und dynamische Steuerung des Autos.
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 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
Und warum WebSocket verwenden? Hier ist das Wesentliche:
- Ohne WebSocket würde sich die Fahrtrichtung des Autos jedes Mal durch Neuladen der Seite ändern. Nicht ideal!
- Mit WebSocket hingegen wird eine spezielle Verbindung zwischen der Webseite und dem Arduino Nano ESP32 hergestellt. Dadurch können Befehle im Hintergrund an den Arduino Nano ESP32 gesendet werden, ohne die Seite neu laden zu müssen. Das Ergebnis? Das Roboterauto bewegt sich nahtlos und in Echtzeit. Ziemlich cool, oder?
Kurz gesagt ermöglicht die WebSocket-Verbindung die reibungslose Echtzeitsteuerung des Roboters.
Wir haben spezifische Tutorials zu 2WD RC-Car und WebSocket. Jedes Tutorial enthält detaillierte Informationen und eine Schritt-für-Schritt-Anleitung zur Hardware-Pinbelegung, zum Funktionsprinzip, zur Verdrahtung mit dem ESP32 und zum Arduino Nano ESP32-Code... Erfahren Sie mehr darüber unter den folgenden Links:
- Arduino Nano ESP32 - 2WD RC Car tutorial
- Arduino Nano ESP32 - WebSocket tutorial
Wie es funktioniert
Der Arduino Nano 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 Arduino Nano ESP32 an.
- Der Webserver des ESP32 antwortet, indem er den Inhalt der Webseite (HTML, CSS, JavaScript) sendet.
- Ihr Webbrowser zeigt anschließend die Webseite an.
- Der JavaScript-Code innerhalb der Webseite stellt eine WebSocket-Verbindung zum WebSocket-Server auf dem Arduino Nano ESP32 her.
- Sobald diese WebSocket-Verbindung hergestellt ist, sendet der JavaScript-Code die Befehle über diese WebSocket-Verbindung im Hintergrund an den Arduino Nano ESP32, wenn Sie die Tasten auf der Webseite drücken oder loslassen.
- Der WebSocket-Server auf dem ESP32 steuert entsprechend das Roboterauto, sobald er die Befehle empfängt.
Die untenstehende Tabelle zeigt eine Liste von Befehlen, die die Webseite basierend auf den Aktionen des Benutzers an den Arduino Nano 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 Arduino Nano ESP32
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Typischerweise benötigen Sie zwei Stromquellen:
- Eines für den Motor über das L298N-Modul.
- Ein weiteres für das Arduino Nano 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:
- Verbinde die Batterien wie gezeigt mit dem L298N-Modul.
- Entferne alle drei Jumper von den ENA- und ENB-Pins am 5-Volt-Anschluss des L298N-Moduls.
- Verlege die Verkabelung gemäß dem oben gezeigten Diagramm.
Da das 2WD-RC-Auto über einen Ein/Aus-Schalter verfügt, können Sie die Batterie optional über den Schalter verbinden, um das Ein- und Ausschalten der Stromzufuhr für das Auto zu ermöglichen. Wenn Sie es einfach halten möchten, ignorieren Sie einfach den Schalter.
Arduino Nano 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 Arduino Nano ESP32-Code enthält und einen Webserver und WebSocket-Server erstellt sowie ein Auto steuert
- Eine .h-Datei, die den Inhalt der Webseite enthält.
Schnelle Schritte
Um mit Arduino Nano ESP32 zu beginnen, befolgen Sie diese Schritte:
- Wenn Sie neu bei Arduino Nano ESP32 sind, lesen Sie das Tutorial zur Einrichtung der Umgebung für Arduino Nano ESP32 in der Arduino IDE.
- Verbinden Sie die Bauteile gemäß dem bereitgestellten Diagramm.
- Verbinden Sie das Arduino Nano ESP32-Board mit Ihrem Computer über ein USB-Kabel.
- Öffnen Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das Arduino Nano ESP32-Board und den entsprechenden 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 dann den ESPAsyncWebServer, der von lacamera erstellt wurde.
- Klicken Sie auf die Schaltfläche Installieren, um die ESPAsyncWebServer-Bibliothek zu installieren.
- Sie werden aufgefordert, die Abhängigkeit zu installieren. Klicken Sie auf die Schaltfläche Alle installieren.
- Suche “WebSockets”, 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 erstelle ein neues Sketch, gib ihm einen Namen, zum Beispiel newbiely.com.ino
- Kopiere den untenstehenden Code und öffne ihn mit der Arduino IDE
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-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 D7 // The Arduino Nano ESP32 pin connected to the ENA pin L298N
#define IN1_PIN D6 // The Arduino Nano ESP32 pin connected to the IN1 pin L298N
#define IN2_PIN D5 // The Arduino Nano ESP32 pin connected to the IN2 pin L298N
#define IN3_PIN D4 // The Arduino Nano ESP32 pin connected to the IN3 pin L298N
#define IN4_PIN D3 // The Arduino Nano ESP32 pin connected to the IN4 pin L298N
#define ENB_PIN D2 // The Arduino Nano ESP32 pin 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("Arduino Nano 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);
}
- Erstellen Sie die Datei index.h im Arduino IDE, indem Sie:
- Klicken Sie entweder 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.
- Geben Sie den Dateinamen index.h ein und klicken Sie auf die Schaltfläche OK.
- 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 Schaltfläche Hochladen in der Arduino IDE, um den Code auf den Arduino Nano ESP32 hochzuladen
- Öffne den seriellen Monitor
- Schau dir das Ergebnis im seriellen Monitor an.
- Notieren Sie sich 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 erstellt automatisch die WebSocket-Verbindung zum Arduino Nano ESP32.
- Jetzt können Sie das Auto über die Weboberfläche nach links/rechts lenken und vorwärts/rückwärts fahren.
- Wenn Sie den HTML-Inhalt in der index.h ändern und nichts in der newbiely.com.ino Datei anfassen, wird die Arduino IDE beim Kompilieren und Hochladen des Codes auf den ESP32 den HTML-Inhalt nicht aktualisieren.
- Um die Arduino IDE in diesem Fall 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 Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-controls-car-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Nano 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>Arduino Nano 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
Arduino Nano 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 auf dem Arduino Nano ESP32 gespeichert. Stattdessen werden sie im Internet gespeichert, daher muss Ihr Telefon oder PC eine Internetverbindung haben, um Bilder für die Websteuerungsseite zu laden.
※ Notiz:
Zeilenweise Code-Erklärung
Der obige Arduino Nano ESP32-Code enthält eine zeilenweise Erklärung. Bitte lesen Sie die Kommentare im Code!