Arduino - steuert Auto über das Web
Dieses Tutorial zeigt dir, wie du ein Roboterauto drahtlos mit einem Arduino von einem Webbrowser auf deinem Smartphone oder PC über WLAN steuern kannst. Die Steuerung erfolgt über eine grafische Web-Benutzeroberfläche, die WebSocket-Technologie verwendet und einen reibungslosen und dynamischen Betrieb des Autos ermöglicht.
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables STEM V4 IoT Starter-Kit (Arduino 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
Warum WebSocket wählen? Hier sind die Gründe:
- Ohne WebSocket müsstest du die Seite jedes Mal neu laden, wenn du die Fahrtrichtung des Autos ändern möchtest. Das ist nicht effizient!
- Mit WebSocket wird eine spezielle Verbindung zwischen der Webseite und dem Arduino hergestellt. Dadurch kannst du Befehle an den Arduino im Hintergrund senden, ohne die Seite neu laden zu müssen. Das Ergebnis? Das Roboterauto reagiert reibungslos und sofort. Ziemlich beeindruckend, oder?
Zusammenfassend ermöglicht WebSocket die reibungslose Echtzeitsteuerung des Roboters.
Wir haben spezielle Tutorials zu einem 2WD-RC-Auto und WebSocket. Jedes Tutorial enthält detaillierte Informationen und Schritt-für-Schritt-Anleitungen zur Hardware-Pinbelegung, Funktionsweise, Verkabelung zum Arduino, Arduino-Code... Mehr dazu finden Sie in den folgenden Links:
- Arduino - 2WD RC Car tutorial
- Arduino - WebSocket tutorial
Wie es funktioniert
Der Arduino-Code richtet sowohl einen Webserver als auch einen WebSocket-Server ein. So funktioniert es:
- Wenn Sie die IP-Adresse des Arduino in einen Webbrowser eingeben, sendet der Webbrowser eine Anfrage für die Webseite (Benutzeroberfläche) an den Arduino.
- Der Webserver des Arduino antwortet, indem er den Inhalt der Webseite (HTML, CSS, JavaScript) liefert.
- Ihr Webbrowser zeigt diese Webseite dann an.
- Innerhalb der Webseite initiiert der JavaScript-Code eine WebSocket-Verbindung zum WebSocket-Server auf dem Arduino.
- Sobald diese WebSocket-Verbindung aktiv ist, bewirken Betätigungen oder das Loslassen von Knöpfen auf der Webseite, dass der JavaScript-Code unauffällig Befehle an den Arduino über diese Verbindung sendet.
- Der WebSocket-Server auf dem Arduino empfängt diese Befehle und steuert entsprechend das Roboterauto.
Im Folgenden finden Sie eine Tabelle, die die Liste der Befehle zeigt, die die Webseite basierend auf den Benutzeraktionen an den Arduino 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
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Normalerweise benötigt man zwei separate Stromquellen:
- Eine für den Motor.
- Eine weitere für sowohl das Arduino-Board als auch das L298N-Modul (das als Motortreiber dient).
Sie können diese Einrichtung jedoch vereinfachen, indem Sie nur eine Stromquelle verwenden – vier 1,5-Volt-Batterien, um insgesamt 6 V zu erhalten. So geht's:
- Schließen Sie die Batterien gemäß den Anweisungen an das L298N-Modul an.
- Entfernen Sie die beiden Jumper von den ENA- und ENB-Pins zu den 5-Volt-Pins am L298N-Modul.
- Setzen Sie einen Jumper ein, der mit 5VEN beschriftet ist (im Diagramm durch einen gelben Kreis gekennzeichnet).
- Verbinden Sie den 12-V-Anschluss am L298N-Modul mit dem Vin-Pin am Arduino. Diese Verbindung versorgt den Arduino direkt aus den Batterien.
Das 2WD-RC-Auto verfügt über einen Ein/Aus-Schalter, der Ihnen die Möglichkeit bietet, die Batterie über den Schalter anzuschließen. Diese Anordnung ermöglicht es Ihnen, die Stromversorgung des Autos bei Bedarf ein- und auszuschalten. Wenn Sie eine einfachere Lösung bevorzugen, können Sie den Schalter ganz umgehen.
Arduino-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 mit Arduino-Code, die einen Webserver und einen WebSocket-Server erstellt und ein Auto steuert
- Eine .h-Datei, die den Inhalt der Webseite enthält
Schnelle Schritte
- Wenn Sie zum ersten Mal Arduino Uno R4 verwenden, sehen Sie wie man die Entwicklungsumgebung für Arduino Uno R4 in der Arduino IDE einrichtet.
- Verkabeln Sie gemäß dem obigen Bild.
- Verbinden Sie das Arduino-Board über ein Micro-USB-Kabel mit Ihrem PC.
- Öffnen Sie die Arduino IDE auf Ihrem PC.
- Wählen Sie das richtige Arduino-Board (Arduino Uno R4 WiFi) 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 nach Web Server for Arduino Uno R4 WiFi und finden Sie die von DIYables erstellte Webserver-Bibliothek.
- Klicken Sie auf die Install-Schaltfläche, um die Webserver-Bibliothek zu installieren.
- In der Arduino-IDE erstellen Sie ein neues Sketch, geben Sie ihm einen Namen, zum Beispiel ArduinoGetStarted.com.ino
- Kopieren Sie den untenstehenden Code und öffnen Sie ihn in der Arduino-IDE
/*
* Dieser Arduino Code wurde von newbiely.de entwickelt
* Dieser Arduino 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/arduino-controls-car-via-web
*/
#include <UnoR4WiFi_WebServer.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 7 // The Arduino pin connected to the ENA pin L298N
#define IN1_PIN 6 // The Arduino pin connected to the IN1 pin L298N
#define IN2_PIN 5 // The Arduino pin connected to the IN2 pin L298N
#define IN3_PIN 4 // The Arduino pin connected to the IN3 pin L298N
#define IN4_PIN 3 // The Arduino pin connected to the IN4 pin L298N
#define ENB_PIN 2 // The Arduino pin connected to the ENB pin L298N
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
UnoR4WiFi_WebServer server(80);
UnoR4WiFi_WebSocket *webSocket;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HTML_CONTENT);
}
// WebSocket event handlers
void onWebSocketOpen(net::WebSocket& ws) {
Serial.println("New WebSocket connection");
}
void onWebSocketMessage(net::WebSocket& ws, const net::WebSocket::DataType dataType, const char* message, uint16_t length) {
String cmd_str = String((char*)message);
int command = cmd_str.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");
}
}
void onWebSocketClose(net::WebSocket& ws, const net::WebSocket::CloseCode code, const char* reason, uint16_t length) {
Serial.println("WebSocket client disconnected");
}
void setup() {
Serial.begin(9600);
delay(1000);
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
Serial.println("Arduino Uno R4 WiFi - WebSocket Server");
// Configure web server routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
// Enable WebSocket functionality
webSocket = server.enableWebSocket(81);
if (webSocket != nullptr) {
// Set up WebSocket event handlers
webSocket->onOpen(onWebSocketOpen);
webSocket->onMessage(onWebSocketMessage);
webSocket->onClose(onWebSocketClose);
} else {
Serial.println("Failed to start WebSocket server");
}
}
void loop() {
// Handle HTTP requests and WebSocket connections using the library
server.handleClient();
server.handleWebSocket();
delay(10);
}
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 WiFi-Informationen (SSID und Passwort) im Code, damit sie mit Ihren eigenen Netzwerkanmeldeinformationen übereinstimmen.
- Erstellen Sie die index.h-Datei in der Arduino IDE durch:
- Entweder klicken Sie auf die Schaltfläche direkt unter dem Symbol des seriellen Monitors und wählen Sie New Tab, oder verwenden Sie die Tasten Ctrl+Shift+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-Datei ein.
- Jetzt haben Sie den Code in zwei Dateien: ArduinoGetStarted.com.ino und index.h
- Klicken Sie auf die Upload-Schaltfläche in der Arduino IDE, um den Code auf den Arduino hochzuladen.
- Öffnen Sie den seriellen Monitor.
- Schauen Sie sich das Ergebnis im seriellen Monitor an.
- Notieren Sie sich die angezeigte IP-Adresse und geben Sie diese Adresse in die Adresszeile eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Sie sehen die unten gezeigte Webseite:
- Klicken Sie auf die CONNECT-Schaltfläche, um die Webseite über WebSocket mit dem Arduino zu verbinden.
- Jetzt können Sie das Auto über die Weboberfläche nach links/rechts drehen und vorwärts/rückwärts bewegen.
- Wenn Sie den HTML-Inhalt in der index.h ändern und nichts in der ArduinoGetStarted.com.ino Datei berühren, wird die Arduino-IDE beim Kompilieren und Hochladen des Codes 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 ArduinoGetStarted.com.ino Datei vor (z. B. eine leere Zeile hinzufügen, einen Kommentar hinzufügen....)
/*
* Dieser Arduino Code wurde von newbiely.de entwickelt
* Dieser Arduino 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/arduino-controls-car-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino 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 - 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
Arduino Uno R4 WiFi - WebSocket Server
Connected! IP Address: 192.168.0.254
SSID: YOUR_WIFI_SSID
IP Address: 192.168.0.254
Signal strength (RSSI): -44 dBm
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.254:81
WebSocket server enabled successfully
Autoscroll
Clear output
9600 baud
Newline
Um den Speicher des Arduino zu schonen, werden die Bilder der Steuertasten nicht auf dem Arduino gespeichert. Stattdessen werden sie im Internet gespeichert, daher muss Ihr Telefon oder PC eine Internetverbindung haben, um die Bilder für die Web-Steuerungsseite zu laden.
※ Notiz:
Zeile für Zeile Code-Erklärung
Der obige Arduino-Code enthält eine Zeile-für-Zeile-Erklärung. Bitte lesen Sie die Kommentare im Code!