Arduino UNO R4 - Auto besturen via Web
Deze tutorial legt u uit hoe u een 2WD RC robot auto via het web kunt besturen met de Arduino Uno R4 WiFi. In deze gids zullen we u door de stappen leiden om uw robot auto op afstand in te stellen en te besturen, waarbij we gebruik maken van de krachtige mogelijkheden van de Arduino Uno R4 met ingebouwde WiFi. Aan het einde van deze tutorial zult u leren:
- Waarom WebSocket nodig is om de RC auto te besturen
- Hoe u uw 2WD robot auto verbindt met de Arduino Uno R4 WiFi.
- Hoe u de Arduino Uno R4 WiFi programmeert om een webinterface te bieden waarmee u uw robot auto links/rechts kunt laten draaien en vooruit/achteruit kunt laten bewegen.
Deze tutorial is perfect voor hobbyisten, studenten en iedereen die geïnteresseerd is in robotica en web-gebaseerde besturingssystemen. Of u nu een beginner bent of al wat ervaring heeft met Arduino, onze stap-voor-stap instructies zullen u helpen uw doel te bereiken om uw 2WD RC robot auto op afstand te besturen.
Laten we beginnen aan deze spannende reis waarbij robotica en webtechnologie worden gecombineerd!
Hardware Vereist
Of u kunt de volgende kits kopen:
| 1 | × | DIYables STEM V4 IoT Starterskit (Arduino inbegrepen) | |
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Waarom is WebSocket nodig om de RC auto te besturen?
- Zonder WebSocket zou u elke keer dat u de richting van de auto wilt veranderen de pagina moeten verversen. Deze methode is niet erg efficiënt.
- Met WebSocket wordt er een speciale verbinding gemaakt tussen de webpagina en de Arduino UNO R4. Deze opstelling stelt u in staat om commando's naar de Arduino UNO R4 te verzenden zonder de pagina te hoeven verversen. Als gevolg hiervan reageert de robot auto snel en soepel. Is dat niet geweldig?
Samengevat, WebSocket stelt u in staat om de robot soepel en in real-time te besturen.
We bieden gedetailleerde gidsen voor het gebruik van WebSocket met Arduino UNO R4. Meer informatie vindt u door de verstrekte links te bezoeken: Arduino UNO R4 - WebSocket tutorial
Hoe het werkt
De Arduino UNO R4 code creëert een webserver en een WebSocket server. Zo werkt het:
- Wanneer u het IP-adres van de Arduino UNO R4 invoert in een webbrowser, vraagt deze de User Interface webpagina aan van de Arduino UNO R4. De webserver op de Arduino UNO R4 reageert door de inhoud van de webpagina terug te sturen, bestaande uit HTML, CSS en JavaScript. Uw webbrowser toont vervolgens deze webpagina. De JavaScript code op de webpagina start een WebSocket verbinding met de WebSocket server van de Arduino UNO R4. Wanneer deze WebSocket verbinding werkt, stuurt elke druk op of loslating van knoppen op de webpagina commando's naar de Arduino UNO R4 via deze verbinding. De WebSocket server op de Arduino UNO R4 ontvangt deze commando's en bestuurt de robot auto zoals opdracht gegeven.
Hier is een tabel die de commando's toont die van de webpagina naar de Arduino UNO R4 worden verzonden, gebaseerd op wat de gebruiker doet:
| Gebruikersactie | Knop | Commando | Auto Actie |
|---|---|---|---|
| INDRUKKEN | OP | 1 | VOORUIT BEWEGEN |
| INDRUKKEN | NEER | 2 | ACHTERUIT BEWEGEN |
| INDRUKKEN | LINKS | 4 | LINKS DRAAIEN |
| INDRUKKEN | RECHTS | 8 | RECHTS DRAAIEN |
| INDRUKKEN | STOP | 0 | STOPPEN |
| LOSLATEN | OP | 0 | STOPPEN |
| LOSLATEN | NEER | 0 | STOPPEN |
| LOSLATEN | LINKS | 0 | STOPPEN |
| LOSLATEN | RECHTS | 0 | STOPPEN |
| LOSLATEN | STOP | 0 | STOPPEN |
Bedradingsschema tussen 2WD RC Auto en Arduino UNO R4
This image is created using Fritzing. Click to enlarge image
Zie De beste manier om Arduino Uno R4 en andere componenten van stroom te voorzien.
Normaal gesproken zou u twee verschillende voedingsbronnen nodig hebben:
- Eén voor de motor.
- Een andere voor het Arduino UNO R4 board en de L298N module, die gebruikt wordt als motor driver.
U kunt deze opstelling vereenvoudigen door één voedingsbron te gebruiken - vier 1.5V batterijen voor een totaal van 6V. Zo doet u dit:
- Bevestig de batterijen aan de L298N module zoals getoond in de instructies.
- Verwijder de twee jumpers van de ENA en ENB pinnen
- Plaats een jumper gemarkeerd 5VEN (getoond met een gele cirkel in het diagram).
- Verbind de 12V pin van de L298N module met de Vin pin op de Arduino UNO R4. Dit zal de Arduino UNO R4 voeden met de batterijen.
De 2WD RC auto heeft een aan/uit schakelaar. Hiermee kunt u de batterij verbinden of loskoppelen met de schakelaar, om de stroom van de auto aan of uit te zetten wanneer nodig. Als u iets eenvoudigers wilt, kunt u het gebruik van de schakelaar overslaan.
Arduino UNO R4 Code
De inhoud van de webpagina (HTML, CSS, JavaScript) is opgeslagen in een apart bestand genaamd index.h. Daarom zullen we twee code bestanden gebruiken in de Arduino IDE.
- Een .ino bestand is Arduino UNO R4 code die een webserver en WebSocket Server creëert om de auto te besturen.
- Een .h bestand slaat de inhoud van de webpagina op.
Snelle Stappen
Volg deze instructies stap voor stap:
- Als dit uw eerste keer is met de Arduino Uno R4 WiFi/Minima, raadpleeg dan de tutorial over het opzetten van de omgeving voor Arduino Uno R4 WiFi/Minima in de Arduino IDE.
- Verbind het Arduino Uno R4 board met uw computer via een USB kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste Arduino Uno R4 board (bijv., Arduino Uno R4 WiFi) en COM poort.
- Open de Library Manager door te klikken op het Library Manager icoon aan de linkerkant van de Arduino IDE.
- Zoek naar Web Server for Arduino Uno R4 WiFi en vind de Web Server library gemaakt door DIYables.
- Klik op de Install knop om de Web Server library te installeren.
- Start in de Arduino IDE een nieuwe sketch en geef deze een naam, bijvoorbeeld newbiely.com.ino
- Kopieer de volgende code en open deze met de Arduino IDE
/*
* Deze Arduino UNO R4 code is ontwikkeld door newbiely.nl
* Deze Arduino UNO R4 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/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);
}
- Wijzig de WiFi details (SSID en wachtwoord) in het programma om uw netwerk informatie te gebruiken.
- Maak het bestand genaamd index.h in Arduino IDE door een van het volgende te doen:
- Klik op de knop onder het serial monitor icoon en selecteer New Tab, of druk Ctrl+Shift+N op uw toetsenbord.
- Geef het bestand de naam index.h en druk op de OK knop.
- Kopieer de volgende code en plak deze in het index.h bestand.
- U heeft nu de code in twee bestanden genaamd newbiely.com.ino en index.h.
- Klik op de Upload knop in de Arduino IDE om uw code naar de Arduino UNO R4 te laden.
- Open de Serial Monitor.
- Bekijk de resultaten die worden weergegeven in de Serial Monitor.
- Noteer het getoonde IP-adres en typ het in de adresbalk van een webbrowser op uw smartphone of computer.
- De webpagina zal er als volgt uitzien:
- Druk op de CONNECT knop om de webpagina met Arduino UNO R4 te verbinden via WebSocket.
- U kunt nu de auto naar links of rechts laten draaien, en vooruit of achteruit laten bewegen met de webinterface.
/*
* Deze Arduino UNO R4 code is ontwikkeld door newbiely.nl
* Deze Arduino UNO R4 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/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
De besturingsknoppen afbeeldingen zijn niet opgeslagen op de Arduino UNO R4 om het geheugen te besparen. In plaats daarvan zijn ze online opgeslagen. Daarom moet uw telefoon of computer verbonden zijn met internet om deze afbeeldingen op de web besturingspagina te laden.
※ Notiz:
Als u de HTML in het bestand genaamd index.h wijzigt maar niets verandert in het bestand genaamd newbiely.com.ino, dan zal de Arduino IDE de HTML inhoud niet bijwerken wanneer u de code compileert en uploadt naar de Arduino UNO R4. Om de Arduino IDE de HTML inhoud te laten bijwerken, moet u een kleine wijziging maken in het newbiely.com.ino bestand, zoals het toevoegen van een lege regel of een opmerking.
Regel-voor-regel Code Uitleg
De verstrekte Arduino UNO R4 code bevat uitleg voor elke regel. Lees zeker de opmerkingen in de code!
Probleemoplossing Voor Arduino Uno R4
Als de bovenstaande code niet werkt, werk dan de nieuwste versie bij voor de WiFi module van Arduino UNO R4
- Verbind uw Arduino Uno R4 WiFi met uw PC
- Open Arduino IDE 2
- Ga naar Tools Firmware Updater
- Selecteer het Arduino Uno R4 WiFi board en poort
- Klik op de CHECK UPDATES knop
- Een lijst met beschikbare firmware versies zal verschijnen
- Selecteer de nieuwste versie van de firmware
- Klik op de INSTALL knop
- Wacht tot het klaar is
- Herstart uw Arduino Uno R4 WiFi
- Hercompileer en upload uw code naar Arduino Uno R4 WiFi
- Controleer het resultaat