Arduino UNO R4 - contrôle la voiture via le Web
Ce tutoriel vous explique comment contrôler une voiture-robot RC à deux roues motrices via le web en utilisant l'Arduino Uno R4 WiFi. Dans ce guide, nous vous guiderons à travers les étapes pour configurer et contrôler votre voiture-robot à distance, en utilisant les puissantes capacités de l'Arduino Uno R4 avec WiFi intégré. À la fin de ce tutoriel, vous apprendrez :
- Pourquoi WebSocket est nécessaire pour contrôler la voiture RC.
- Comment connecter votre voiture robotisée à deux roues motrices (2WD) à l'Arduino Uno R4 WiFi.
- Comment programmer l'Arduino Uno R4 WiFi pour fournir une interface Web qui vous permet de faire tourner votre voiture robotisée vers la gauche ou la droite, et de la faire avancer ou reculer.
Ce tutoriel est parfait pour les amateurs, les étudiants et toute personne intéressée par la robotique et les systèmes de contrôle basés sur le web. Que vous soyez débutant ou que vous ayez une certaine expérience avec Arduino, nos instructions étape par étape vous aideront à atteindre votre objectif de contrôler à distance votre voiture RC à deux roues motrices.
Commençons ce voyage passionnant qui associe la robotique et la technologie web !
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables STEM V4 IoT (Arduino inclus) | |
| 1 | × | Kit de Capteurs DIYables (30 capteurs/écrans) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
Pourquoi faut-il WebSocket pour contrôler la voiture RC ?
- Sans WebSocket, vous devrez actualiser la page à chaque fois que vous voudrez changer la direction de la voiture. Cette méthode n'est pas très efficace.
- Avec WebSocket, une connexion dédiée est créée entre la page Web et l'Arduino UNO R4. Cette configuration vous permet d'envoyer des commandes à l'Arduino UNO R4 sans avoir à actualiser la page. En conséquence, la voiture-robot répond rapidement et avec fluidité. N'est-ce pas incroyable ?
Pour résumer, WebSocket vous permet de contrôler le robot de manière fluide et en temps réel.
Nous proposons des guides détaillés sur l'utilisation de WebSocket avec l'Arduino UNO R4. Pour en savoir plus, consultez les liens fournis : Arduino UNO R4 - WebSocket. tutoriel
Comment cela fonctionne
Le code Arduino UNO R4 crée un serveur Web et un serveur WebSocket. Voici comment cela fonctionne :
- Lorsque vous saisissez l'adresse IP de l'Arduino UNO R4 dans un navigateur, il demande la page Web de l'interface utilisateur à partir de l'Arduino UNO R4. Le serveur Web sur l'Arduino UNO R4 répond en renvoyant le contenu de la page composé de HTML, CSS et JavaScript. Votre navigateur affiche ensuite cette page. Le code JavaScript de la page démarre une connexion WebSocket avec le serveur WebSocket de l'Arduino UNO R4. Lorsque cette connexion WebSocket est opérationnelle, toute pression ou relâchement de boutons sur la page envoie des commandes à l'Arduino UNO R4 via cette connexion. Le serveur WebSocket sur l'Arduino UNO R4 reçoit ces commandes et contrôle la voiture robotisée comme indiqué.
Voici un tableau qui affiche les commandes envoyées depuis la page Web vers l'Arduino UNO R4, en fonction de ce que fait l'utilisateur :
| 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 |
Schéma de câblage entre une voiture RC à deux roues motrices et Arduino UNO R4
Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.
Voir Comment alimenter l'Arduino UNO R4..
Normalement, vous auriez besoin de deux sources d'alimentation différentes:
- Un pour le moteur.
- Un autre pour la carte Arduino UNO R4 et le module L298N, qui est utilisé comme pilote de moteur.
Vous pouvez simplifier ce montage en utilisant une seule source d'alimentation - quatre piles de 1,5 V pour obtenir un total de 6 V. Voici comment faire :
- Branchez les batteries sur le module L298N comme indiqué dans les instructions.
- Retirez les deux cavaliers des broches ENA et ENB.
- Placez un cavalier marqué 5VEN (indiqué par un cercle jaune sur le schéma).
- Connectez la broche 12V du module L298N à la broche Vin de l'Arduino UNO R4. Cela alimentera l'Arduino UNO R4 à partir des batteries.
La voiture RC à deux roues motrices dispose d'un interrupteur marche/arrêt. Cela permet de connecter ou déconnecter la batterie à l'aide de l'interrupteur, ce qui met l'alimentation de la voiture sous tension ou hors tension lorsque cela est nécessaire. Si vous préférez quelque chose de plus simple, vous pouvez éviter d'utiliser l'interrupteur.
Arduino UNO R4 Code
Le contenu de la page web (HTML, CSS, JavaScript) est enregistré dans un fichier séparé appelé index.h. Par conséquent, nous utiliserons deux fichiers de code dans l'IDE Arduino.
- Un fichier .ino est un code Arduino UNO R4 qui crée un serveur Web et un serveur WebSocket pour contrôler la voiture.
- Un fichier .h contient le contenu de la page Web.
Étapes rapides
Suivez ces instructions étape par étape :
- Si c'est la première fois que vous utilisez l'Arduino Uno R4 WiFi/Minima, consultez le tutoriel sur Arduino UNO R4 - Installation du logiciel..
- Connectez la carte Arduino Uno R4 à votre ordinateur à l'aide d'un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte Arduino Uno R4 appropriée (par exemple, Arduino Uno R4 WiFi) et le port COM.
- Ouvrez le Gestionnaire de bibliothèques en cliquant sur l'icône Gestionnaire de bibliothèques sur le côté gauche de l'IDE Arduino.
- Recherchez Web Server for Arduino Uno R4 WiFi et localisez la bibliothèque Web Server créée par DIYables.
- Cliquez sur le bouton Install pour installer la bibliothèque Web Server.
- Dans l'IDE Arduino, créez un nouveau sketch et nommez-le, par exemple, newbiely.com.ino
- Copiez le code suivant et ouvrez-le avec l’IDE Arduino
/*
* Ce code Arduino UNO R4 a été développé par newbiely.fr
* Ce code Arduino UNO R4 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/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);
}
- Modifiez les paramètres WiFi (SSID et mot de passe) dans le programme pour utiliser les informations de votre réseau.
- Créez le fichier nommé index.h dans l'IDE Arduino en effectuant l'une des actions suivantes :
- Cliquez sur le bouton situé sous l'icône du moniteur série et sélectionnez Nouvel onglet, ou appuyez sur Ctrl+Shift+N sur votre clavier.
- Nommez le fichier index.h et appuyez sur le bouton OK.
- Copiez le code suivant et collez-le dans le fichier index.h.
/*
* Ce code Arduino UNO R4 a été développé par newbiely.fr
* Ce code Arduino UNO R4 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/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>
)=====";
- Vous avez désormais le code dans deux fichiers nommés newbiely.com.ino et index.h.
- Cliquez sur le bouton Upload dans l'IDE Arduino pour charger votre code sur l'Arduino UNO R4.
- Ouvrez le Moniteur série.
- Regardez les résultats affichés sur le Moniteur série.
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
- Notez l'adresse IP affichée et saisissez-la dans la barre d'adresse d'un navigateur sur votre smartphone ou votre ordinateur.
- La page Web apparaîtra comme suit :
- Appuyez sur le bouton CONNECT pour établir la liaison entre la page Web et l'Arduino UNO R4 via WebSocket.
- Vous pouvez désormais diriger la voiture pour tourner à gauche ou à droite, et avancer ou reculer en utilisant l'interface Web.
Les images des boutons de contrôle ne sont pas enregistrées sur l'Arduino UNO R4 afin d'économiser sa mémoire. Au lieu de cela, elles sont stockées en ligne. Par conséquent, votre téléphone ou votre ordinateur doit être connecté à Internet pour charger ces images sur la page de contrôle Web.
※ Note:
Si vous modifiez le HTML dans le fichier nommé index.h mais ne modifiez rien dans le fichier nommé newbiely.com.ino, alors lorsque vous compilez et téléversez le code vers l'Arduino UNO R4, l'IDE Arduino ne mettra pas à jour le contenu HTML. Pour que l'IDE Arduino mette à jour le contenu HTML, vous devez apporter un petit changement dans le fichier newbiely.com.ino, comme ajouter une ligne vide ou un commentaire.
Explication du code ligne par ligne
Le code Arduino UNO R4 fourni comprend des explications pour chaque ligne. Assurez-vous de lire les commentaires dans le code !
Dépannage pour Arduino Uno R4
Si le code ci-dessus fonctionne, veuillez mettre à jour la version la plus récente du module WiFi de l'Arduino UNO R4.
- Connectez votre Arduino Uno R4 WiFi à votre PC
- Ouvrez Arduino IDE 2
- Accédez à Outils Mise à jour du micrologiciel
- Sélectionnez la carte Arduino Uno R4 WiFi et le port
- Cliquez sur le bouton VÉRIFIER LES MISES À JOUR
- Une liste des versions du firmware disponibles apparaîtra
- Sélectionnez la version la plus récente du firmware
- Cliquez sur le bouton INSTALLER
- Attendez que ce soit terminé
- Redémarrez votre Arduino Uno R4 WiFi
- Recompilez et téléversez votre code sur l'Arduino Uno R4 WiFi
- Vérifiez le résultat