Arduino UNO R4 - steuert Auto über das Web
Dieses Tutorial zeigt dir, wie du ein 2WD RC-Roboterauto über das Web mit dem Arduino Uno R4 WiFi steuern kannst. In diesem Leitfaden führen wir dich durch die Schritte, um dein Roboterauto aus der Ferne einzurichten und zu steuern, wobei die leistungsstarken Fähigkeiten des Arduino Uno R4 mit integriertem WiFi genutzt werden. Am Ende dieses Tutorials wirst du Folgendes lernen:
- Warum WebSocket benötigt wird, um das RC-Auto zu steuern
- Wie man Ihr 2WD-Roboterauto mit dem Arduino Uno R4 WiFi verbindet.
- Wie man den Arduino Uno R4 WiFi so programmiert, dass er eine Weboberfläche bietet, mit der Sie Ihr Roboterauto nach links/rechts drehen bzw. vorwärts/rückwärts bewegen können.
Dieses Tutorial ist ideal für Hobbyisten, Studierende und alle, die sich für Robotik und webbasierte Steuerungssysteme interessieren. Ganz gleich, ob Sie Anfänger sind oder bereits Erfahrung mit Arduino haben, helfen Ihnen unsere Schritt-für-Schritt-Anleitungen dabei, Ihr Ziel zu erreichen: Ihr zweiradangetriebenes RC-Roboterauto aus der Ferne zu steuern.
Lasst uns mit dieser aufregenden Reise beginnen, die Robotik und Webtechnologie miteinander verbindet!
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.
Warum wird WebSocket benötigt, um das RC-Auto zu steuern?
- Ohne WebSocket müsstest du die Seite jedes Mal neu laden, wenn du die Richtung des Autos ändern möchtest. Diese Methode ist nicht sehr effizient.
- Mit WebSocket wird eine dedizierte Verbindung zwischen der Webseite und dem Arduino UNO R4 hergestellt. Diese Einrichtung ermöglicht es dir, Befehle an den Arduino UNO R4 zu senden, ohne die Seite neu laden zu müssen. In der Folge reagiert das Roboterauto schnell und flüssig. Ist das nicht erstaunlich?
Zusammenfassend ermöglicht WebSocket Ihnen, den Roboter reibungslos und in Echtzeit zu steuern.
Wir bieten detaillierte Anleitungen zur Verwendung von WebSocket mit dem Arduino UNO R4. Erfahren Sie mehr, indem Sie die bereitgestellten Links besuchen: Arduino UNO R4 - WebSocket Tutorial
Wie es funktioniert
Der Arduino UNO R4-Code erstellt einen Webserver und einen WebSocket-Server. So funktioniert es:
- Wenn du die IP-Adresse des Arduino UNO R4 in einen Webbrowser eingibst, fordert er die Benutzeroberfläche-Webseite vom Arduino UNO R4 an. Der Webserver auf dem Arduino UNO R4 antwortet, indem er den Inhalt der Webseite zurücksendet, der aus HTML, CSS und JavaScript besteht. Dein Webbrowser zeigt diese Webseite dann an. Der JavaScript-Code auf der Webseite startet eine WebSocket-Verbindung zum WebSocket-Server des Arduino UNO R4. Wenn diese WebSocket-Verbindung funktioniert, sendet das Drücken oder Loslassen von Tasten auf der Webseite Befehle an den Arduino UNO R4 über diese Verbindung. Der WebSocket-Server auf dem Arduino UNO R4 erhält diese Befehle und steuert das Roboterauto entsprechend.
Hier ist eine Tabelle, die die von der Webseite an den Arduino UNO R4 gesendeten Befehle anzeigt, je nachdem, was der Benutzer tut:
| 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 dem 2WD RC-Car und dem Arduino UNO R4
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Siehe Der beste Weg, den Arduino Uno R4 und andere Komponenten mit Strom zu versorgen.
In der Regel benötigen Sie zwei verschiedene Energiequellen:
- Eins für den Motor.
- Ein weiteres für das Arduino UNO R4-Board und das L298N-Modul, das als Motortreiber verwendet wird.
Sie können diese Einrichtung vereinfachen, indem Sie eine Stromquelle verwenden – vier 1,5-V-Batterien, um insgesamt 6 V zu erhalten. So geht es:
- Schließen Sie die Batterien am L298N-Modul wie in der Anleitung gezeigt an.
- Entfernen Sie die zwei Jumper von den ENA- und ENB-Pins.
- Setzen Sie einen Jumper auf, der mit 5VEN gekennzeichnet ist (im Diagramm durch einen gelben Kreis angezeigt).
- Verbinden Sie den 12V-Pin des L298N-Moduls mit dem Vin-Pin des Arduino UNO R4. Dadurch wird der Arduino UNO R4 von den Batterien betrieben.
Das 2WD-RC-Auto hat einen Ein/Aus-Schalter. Damit können Sie die Batterie mit dem Schalter verbinden oder trennen und so die Stromversorgung des Autos bei Bedarf ein- oder ausschalten. Wenn Sie etwas Einfacheres bevorzugen, können Sie auch darauf verzichten, den Schalter zu verwenden.
Arduino UNO R4 Quellcode
Der Inhalt der Webseite (HTML, CSS, JavaScript) wird in einer separaten Datei namens index.h gespeichert. Daher verwenden wir zwei Code-Dateien in der Arduino-IDE.
- Eine .ino-Datei ist ein Arduino UNO R4-Code, der einen Webserver und WebSocket-Server erstellt, um das Auto zu steuern.
- Eine .h-Datei speichert den Inhalt der Webseite.
Schnelle Schritte
Folgen Sie diesen Anweisungen Schritt für Schritt:
- Falls dies Ihr erster Einsatz des Arduino Uno R4 WiFi/Minima ist, lesen Sie das Tutorial Einrichten der Umgebung für Arduino Uno R4 WiFi/Minima in der Arduino IDE.
- Verbinden Sie das Arduino Uno R4-Board über ein USB-Kabel mit Ihrem Computer.
- Starten Sie die Arduino-IDE auf Ihrem Computer.
- Wählen Sie das passende Arduino Uno R4-Board (z. B. Arduino Uno R4 WiFi) und den COM-Port aus.
- Öffnen Sie den Bibliotheks-Manager, indem Sie auf das Bibliotheks-Manager-Symbol auf der linken Seite der Arduino IDE klicken.
- Suchen Sie nach Webserver für Arduino Uno R4 WiFi und finden Sie die von DIYables erstellte Webserver-Bibliothek.
- Klicken Sie auf die Schaltfläche Installieren, um die Webserver-Bibliothek zu installieren.
- Im Arduino-IDE starte eine neue Skizze und benenne sie zum Beispiel newbiely.com.ino
- Kopiere den folgenden Code und öffne ihn mit der Arduino-IDE
/*
* Dieser Arduino UNO R4 Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO R4 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-uno-r4/arduino-uno-r4-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-Daten (SSID und Passwort) im Programm, damit sie Ihre Netzwerkinformationen verwenden.
- Erstellen Sie im Arduino IDE eine Datei mit dem Namen index.h, indem Sie eine der folgenden Optionen verwenden:
- Klicken Sie auf die Schaltfläche unter dem Seriellen Monitor-Symbol und wählen Sie New Tab aus, oder drücken Sie Ctrl+Shift+N auf Ihrer Tastatur.
- Benennen Sie die Datei index.h und drücken Sie auf die OK-Schaltfläche.
- Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei index.h ein.
- Sie haben den Code jetzt in zwei Dateien mit den Namen newbiely.com.ino und index.h.
- Klicken Sie im Arduino IDE auf die Schaltfläche Hochladen, um Ihren Code auf den Arduino UNO R4 zu laden.
- Öffnen Sie den seriellen Monitor.
- Sehen Sie sich die auf dem seriellen Monitor angezeigten Ergebnisse an.
- Schreibe die angezeigte IP-Adresse auf und tippe sie in die Adresszeile eines Webbrowsers auf deinem Smartphone oder Computer ein.
- Die Webseite wird wie folgt aussehen:
- Drücken Sie die CONNECT-Taste, um die Webseite über WebSocket mit dem Arduino UNO R4 zu verbinden.
- Sie können nun das Auto nach links oder rechts lenken und über die Weboberfläche vorwärts oder rückwärts bewegen.
/*
* Dieser Arduino UNO R4 Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO R4 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-uno-r4/arduino-uno-r4-controls-car-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Uno R4 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 Uno R4 - 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
Die Bilder der Steuertasten werden auf dem Arduino UNO R4 nicht gespeichert, um Speicher zu sparen. Stattdessen werden sie online gespeichert. Daher muss Ihr Telefon oder Computer mit dem Internet verbunden sein, um diese Bilder auf der Websteuerungsseite zu laden.
※ Notiz:
Wenn Sie die HTML in der Datei mit dem Namen index.h ändern, aber nichts in der Datei mit dem Namen newbiely.com.ino ändern, dann wird beim Kompilieren und Hochladen des Codes auf den Arduino UNO R4 die Arduino IDE den HTML-Inhalt nicht aktualisieren. Um die Arduino IDE dazu zu bringen, den HTML-Inhalt zu aktualisieren, müssen Sie eine kleine Änderung in der newbiely.com.ino-Datei vornehmen, z. B. eine leere Zeile oder einen Kommentar hinzufügen.
Zeilenweise Code-Erklärung
Der bereitgestellte Arduino UNO R4-Code enthält Erklärungen zu jeder Zeile. Stellen Sie sicher, dass Sie die Kommentare im Code lesen!
Fehlerbehebung für Arduino Uno R4
Wenn der oben genannte Code funktioniert, aktualisieren Sie bitte die neueste Version des WLAN-Moduls des Arduino UNO R4.
- Schließen Sie Ihren Arduino Uno R4 WiFi an Ihren PC an
- Öffnen Sie die Arduino IDE 2
- Gehen Sie zu Werkzeuge Firmware-Updater
- Wählen Sie das Arduino Uno R4 WiFi-Board und den Port aus.
- Klicken Sie auf die Schaltfläche CHECK UPDATES.
- Es wird eine Liste der verfügbaren Firmware-Versionen angezeigt.
- Wählen Sie die neueste Firmware-Version aus.
- Klicken Sie auf die Schaltfläche INSTALL.
- Warten Sie, bis sie fertig ist.
- Starten Sie Ihren Arduino Uno R4 WiFi neu.
- Kompiliieren Sie Ihren Code neu und laden Sie ihn auf den Arduino Uno R4 WiFi hoch.
- Überprüfen Sie das Ergebnis.