ESP8266 - Steuert das Auto über das Web
Dieses Tutorial zeigt Ihnen, wie Sie den ESP8266 verwenden, um ein Roboterauto drahtlos von einem Webbrowser auf Ihrem Smartphone oder PC aus über WLAN zu steuern. Die Steuerung erfolgt über eine grafische Web-Benutzeroberfläche mit dem sogenannten WebSocket, die eine reibungslose und dynamische Steuerung des Autos ermöglicht.
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
Warum also WebSocket verwenden? Hier ist die Sache:
- Ohne WebSocket müsste jedes Mal die Seite neu geladen werden, um die Fahrtrichtung des Autos zu ändern. Nicht ideal!
- Allerdings wird durch WebSocket eine spezielle Verbindung zwischen der Webseite und dem ESP8266 hergestellt. Dadurch können Befehle an den ESP8266 im Hintergrund 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 spezielle Tutorials zu 2WD RC-Car und WebSocket. Jedes Tutorial enthält detaillierte Informationen und Schritt-für-Schritt-Anleitungen zur Hardware-Pinbelegung, zum Funktionsprinzip, zur Verkabelung mit dem ESP8266 und zum ESP8266-Code... Weitere Informationen dazu finden Sie unter den folgenden Links:
- ESP8266 - 2WD RC Car tutorial
- ESP8266 - WebSocket tutorial
Wie es funktioniert
Der ESP8266-Code erstellt sowohl einen Webserver als auch einen WebSocket-Server. So funktioniert es:
- Wenn Sie die IP-Adresse des ESP8266 in einem Webbrowser eingeben, fordert der Webbrowser die Webseite (Benutzeroberfläche) vom ESP8266 an.
- Der Webserver des ESP8266 sendet daraufhin den Inhalt der Webseite (HTML, CSS, JavaScript).
- Ihr Webbrowser zeigt daraufhin die Webseite an.
- Der JavaScript-Code auf der Webseite stellt eine WebSocket-Verbindung zum WebSocket-Server auf dem ESP8266 her.
- Sobald diese WebSocket-Verbindung hergestellt ist, sendet der JavaScript-Code die Befehle über diese WebSocket-Verbindung im Hintergrund an den ESP8266, sobald Sie die Tasten auf der Webseite drücken oder loslassen.
- Der WebSocket-Server auf dem ESP8266 steuert daraufhin das Roboterauto entsprechend der empfangenen Befehle.
Die folgende Tabelle zeigt eine Liste von Befehlen, die die Webseite dem ESP8266 entsprechend den Handlungen des Benutzers 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 ESP8266
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Weitere Informationen finden Sie unter ESP8266-Pinbelegung und wie man ESP8266 und andere Komponenten 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 ESP8266-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 gezeigt an das L298N-Modul an.
- Setzen Sie zwei Jumper von den ENA- und ENB-Pins auf 5 V am L298N-Modul.
- Entfernen Sie einen Jumper mit der Beschriftung 5VEN (gelber Kreis im Diagramm).
- Befolgen Sie die restliche Verdrahtung gemäß dem obigen Diagramm.
Da das 2WD-RC-Car einen Ein-/Aus-Schalter hat, können Sie optional die Batterie über den Schalter anschließen, um das Ein- und Ausschalten der Stromzufuhr zum Auto zu ermöglichen. Wenn Sie es einfach halten möchten, ignorieren Sie einfach den Schalter.
ESP8266-Quellcode
Der Inhalt der Webseite (HTML, CSS, JavaScript) wird getrennt in einer index.h-Datei gespeichert. Daher werden wir zwei Code-Dateien in der Arduino-IDE haben:
- Eine .ino-Datei, die ESP8266-Code enthält, einen Webserver sowie einen WebSocket-Server erstellt und ein Auto steuert
- Eine .h-Datei, die den Inhalt der Webseite enthält
Schnelle Schritte
Um mit dem ESP8266 in der Arduino-IDE zu beginnen, befolgen Sie diese Schritte:
- Schauen Sie sich die Anleitung zur Einrichtung der ESP8266-Umgebung in der Arduino IDE an, falls Sie ESP8266 zum ersten Mal verwenden.
- Schließen Sie die Komponenten wie im Diagramm gezeigt.
- Verbinden Sie das ESP8266-Board mit Ihrem Computer über ein USB-Kabel.
- Öffnen Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das richtige ESP8266-Board aus, z. B. NodeMCU 1.0 (ESP-12E Module), und den entsprechenden COM-Port.
- Öffnen Sie den Bibliotheks-Manager, indem Sie auf das Library Manager-Symbol in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie „WebSockets“, und finden Sie die von Markus Sattler erstellte WebSockets-Bibliothek.
- Klicken Sie auf die Schaltfläche Install, 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 ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-controls-car-via-web
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.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 IN1_PIN D2 // The ESP8266 pin connected to the IN1 pin L298N
#define IN2_PIN D5 // The ESP8266 pin connected to the IN2 pin L298N
#define IN3_PIN D6 // The ESP8266 pin connected to the IN3 pin L298N
#define IN4_PIN D7 // The ESP8266 pin connected to the IN4 pin L298N
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 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(IN1_PIN, OUTPUT);
pinMode(IN2_PIN, OUTPUT);
pinMode(IN3_PIN, OUTPUT);
pinMode(IN4_PIN, OUTPUT);
// 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, []() {
Serial.println("Web Server: received a web page request");
String html = HTML_CONTENT; // Use the HTML content from the servo_html.h file
server.send(200, "text/html", html);
});
server.begin();
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
// Handle client requests
server.handleClient();
// Handle WebSocket events
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 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 Strg+Umschalt+N.
- Geben Sie den Dateinamen index.h ein und klicken Sie auf die OK-Schaltfläche
- 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 Upload in der Arduino-IDE, um den Code auf den ESP8266 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 ESP8266.
- Jetzt kannst du das Auto über die Weboberfläche nach links/rechts drehen, vorwärts/rückwärts fahren.
- Wenn Sie den HTML-Inhalt in der index.h-Datei ändern und in der newbiely.com.ino-Datei nichts ändern, wird die Arduino IDE beim Kompilieren und Hochladen des Codes auf den ESP8266 den HTML-Inhalt nicht aktualisieren.
- Um die Arduino IDE in diesem Fall dazu zu bringen, den HTML-Inhalt zu aktualisieren, nehmen Sie in der newbiely.com.ino-Datei eine Änderung vor (z. B. eine leere Zeile hinzufügen, einen Kommentar hinzufügen ...)
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-controls-car-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 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://newbiely.com/images/tutorial/up_inactive.png') no-repeat;
background-size: contain;
left: 200px;
top: 0px;
transform: translateX(-50%);
}
.button_down {
background: url('https://newbiely.com/images/tutorial/down_inactive.png') no-repeat;
background-size: contain;
left:200px;
bottom: 0px;
transform: translateX(-50%);
}
.button_right {
background: url('https://newbiely.com/images/tutorial/right_inactive.png') no-repeat;
background-size: contain;
right: 0px;
top: 200px;
transform: translateY(-50%);
}
.button_left {
background: url('https://newbiely.com/images/tutorial/left_inactive.png') no-repeat;
background-size: contain;
left:0px;
top: 200px;
transform: translateY(-50%);
}
.button_stop {
background: url('https://newbiely.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://newbiely.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://newbiely.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>ESP8266 - 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
ESP8266 Web Server's IP address IP address: 192.168.0.5
Autoscroll
Clear output
9600 baud
Newline
Um Speicherplatz des ESP8266 zu sparen, werden die Bilder der Bedienelemente NICHT auf dem ESP8266 gespeichert. Stattdessen befinden sie sich im Internet, sodass Ihr Smartphone oder PC eine Internetverbindung benötigt, um die Bilder für die Web-Steuerungsseite zu laden.
※ Notiz:
Zeilenweise Code-Erklärung
Der obige ESP8266-Code enthält eine zeilenweise Erklärung. Bitte lesen Sie die Kommentare im Code!