ESP32 C3 Super Mini - Contrôler une Voiture via le Web
Apprenez à piloter une voiture robot depuis un navigateur web avec l'ESP32 C3 Super Mini. Le WiFi est déjà intégré à l'ESP32 C3 Super Mini, vous n'avez donc besoin d'aucun module WiFi supplémentaire. La page web communique avec la carte via WebSocket, ce qui fait réagir la voiture instantanément.
Dans ce tutoriel, vous apprendrez :
- Comment l'ESP32 C3 Super Mini fait tourner un serveur web et un serveur WebSocket en même temps
- Comment câbler un pilote de moteur L9110S et une voiture RC 2WD à l'ESP32 C3 Super Mini
- Comment programmer l'ESP32 C3 Super Mini pour faire avancer, reculer, tourner à gauche et à droite la voiture
- Comment ouvrir la page de contrôle sur votre téléphone ou votre PC
- Comment alimenter la carte et les moteurs à partir d'un seul bloc de piles
Matériel Requis
Ou vous pouvez acheter les kits suivants:
| 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.
À Propos de la Voiture RC 2WD et du WebSocket
Une voiture RC 2WD est une petite voiture robot équipée de deux moteurs DC, et le WebSocket est le lien qui la fait bouger en temps réel.
Caractéristiques principales de la voiture RC 2WD :
- Deux moteurs DC : Un moteur pour la roue gauche, un pour la roue droite
- Direction simple : La voiture tourne en faisant fonctionner un seul moteur
- Pilote de moteur nécessaire : Les moteurs ont besoin d'un module L9110S, jamais d'une broche GPIO
- Alimentation par piles : Quatre piles AA de 1,5V fournissent 6V pour les moteurs et la carte
Pourquoi le WebSocket et pas une page web normale :
- Pas de rechargement de page : Sans WebSocket, vous devriez recharger la page à chaque mouvement. Pas pratique !
- Lien toujours ouvert : Le WebSocket garde une connexion ouverte entre la page web et l'ESP32 C3 Super Mini
- Commandes en arrière-plan : La page envoie les commandes discrètement, sans rechargement
- Sensation de temps réel : La voiture robot répond aussi vite que vous appuyez sur un bouton
- Bidirectionnel : L'ESP32 C3 Super Mini peut aussi renvoyer des données à la page
En bref, c'est la connexion WebSocket qui rend la voiture ESP32 C3 Super Mini fluide et instantanée.
Comment Ça Fonctionne
Le code de l'ESP32 C3 Super Mini démarre ensemble un serveur web et un serveur WebSocket. Voici le déroulement :
- Vous tapez l'adresse IP de l'ESP32 C3 Super Mini dans un navigateur web
- Le serveur web renvoie le contenu de la page (HTML, CSS, JavaScript)
- Votre navigateur affiche la page de contrôle avec les boutons fléchés
- Le JavaScript de la page ouvre une connexion WebSocket vers l'ESP32 C3 Super Mini
- Lorsque vous appuyez sur un bouton ou le relâchez, le JavaScript envoie un petit numéro de commande
- Le serveur WebSocket lit la commande et pilote la voiture via le module L9110S
Le tableau ci-dessous montre la liste des commandes que la page web envoie à l'ESP32 C3 Super Mini selon les actions de l'utilisateur :
| Action de l'utilisateur | Bouton | Commande | Action de la voiture |
|---|---|---|---|
| APPUI | HAUT | 1 | AVANCER |
| APPUI | BAS | 2 | RECULER |
| APPUI | GAUCHE | 4 | TOURNER À GAUCHE |
| APPUI | DROITE | 8 | TOURNER À DROITE |
| APPUI | STOP | 0 | ARRÊT |
| RELÂCHEMENT | HAUT | 0 | ARRÊT |
| RELÂCHEMENT | BAS | 0 | ARRÊT |
| RELÂCHEMENT | GAUCHE | 0 | ARRÊT |
| RELÂCHEMENT | DROITE | 0 | ARRÊT |
| RELÂCHEMENT | STOP | 0 | ARRÊT |
Schéma de Câblage entre la Voiture RC 2WD et l'ESP32 C3 Super Mini
Quatre broches GPIO vont au pilote de moteur L9110S, deux broches par moteur.
Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.
| Broche du L9110S | Broche de l'ESP32 C3 Super Mini |
|---|---|
| A-IA | GPIO5 |
| A-IB | GPIO6 |
| B-IA | GPIO7 |
| B-IB | GPIO10 |
| GND | GND |
- Remarque : L'ESP32 C3 Super Mini fonctionne uniquement en 3,3V. Ne connectez jamais un fil 5V ou 6V à une broche GPIO.
- Remarque : Les broches de signal du L9110S acceptent sans problème le niveau 3,3V de l'ESP32 C3 Super Mini.
- Remarque : Ne connectez pas un moteur directement à une broche GPIO. Le moteur a besoin de beaucoup plus de courant qu'une broche ne peut en fournir.
- Remarque : GPIO8 et GPIO9 sont des broches de démarrage, et GPIO20/GPIO21 sont l'UART du Moniteur Série. Laissez-les libres.
Le module L9110S (qui sert de pilote de moteur) alimente les moteurs directement depuis ses broches VCC et GND et ne possède pas de régulateur 5V intégré. Cela vous permet de tout alimenter à partir d'une seule source - quatre piles de 1,5V pour un total de 6V. Voici comment procéder :
- Connectez la batterie 6V aux broches VCC et GND du module L9110S pour alimenter les moteurs.
- Connectez la même batterie 6V aux broches 5V et GND de l'ESP32 C3 Super Mini pour alimenter la carte via son régulateur intégré.
- Assurez-vous que le module L9110S et l'ESP32 C3 Super Mini partagent une masse (GND) commune.
Contrairement au L298N, le L9110S n'a ni cavaliers d'activation ENA/ENB ni bornier à vis 12V, le câblage est donc plus simple.
WARNING
- N'alimentez jamais l'ESP32 C3 Super Mini à la fois par la batterie et par le câble USB Type-C.
- N'appliquez pas 6V sur la broche 3,3V. Cette broche est une sortie du régulateur, pas une entrée.
Comme la voiture RC 2WD possède un interrupteur marche/arrêt, vous pouvez éventuellement connecter la batterie via cet interrupteur pour pouvoir allumer et éteindre l'alimentation de la voiture. Si vous voulez faire simple, ignorez simplement l'interrupteur.
Code ESP32 C3 Super Mini
Le contenu de la page web (HTML, CSS, JavaScript) est stocké séparément dans un fichier index.h. Nous aurons donc deux fichiers de code dans Arduino IDE :
- Un fichier .ino qui est le code de l'ESP32 C3 Super Mini, qui crée un serveur web et un serveur WebSocket, et contrôle la voiture
- Un fichier .h, qui contient le contenu de la page web.
Ce que fait ce code :
- Se connecte au WiFi : L'ESP32 C3 Super Mini rejoint votre réseau WiFi domestique
- Fournit la page : Il envoie la page de contrôle à tout navigateur qui la demande
- Ouvre un WebSocket : Un serveur WebSocket écoute sur le port 81 les commandes des boutons
- Pilote les moteurs : Chaque commande met les quatre broches du L9110S à HIGH ou LOW
- Affiche l'IP : Le Moniteur Série affiche l'adresse que vous devez ouvrir dans le navigateur
Étapes Rapides
Suivez ces quelques étapes pour faire rouler la voiture.
- Nouveau sur l'ESP32 C3 Super Mini ? Suivez d'abord notre tutoriel ESP32 C3 Super Mini - Premiers pas pour configurer votre environnement de développement.
- Câblez : Connectez les composants comme indiqué sur le schéma de câblage ci-dessus.
- Branchez : Connectez l'ESP32 C3 Super Mini à votre ordinateur avec un câble USB Type-C.
- Ouvrez l'IDE : Lancez Arduino IDE sur votre ordinateur.
- Choisissez la carte : Assurez-vous que ESP32 C3 Super Mini est sélectionnée dans Tools > Board, et choisissez le bon port COM.
- Ouvrez le gestionnaire de bibliothèques : Cliquez sur l'icône Library Manager dans la barre de navigation à gauche d'Arduino IDE.
- Trouvez la bibliothèque : Recherchez “DIYables ESP32 WebServer”, puis trouvez la bibliothèque Web Server créée par DIYables.
- Installez-la : Cliquez sur le bouton Install pour installer la bibliothèque Web Server.
- Search for DIYables ESP32 WebServer created by DIYables.io and click the Install button.
1
void setup() {
- Nouveau sketch : Créez un nouveau sketch et donnez-lui un nom, par exemple newbiely.com.ino
- Collez le code : Copiez le code ci-dessous et ouvrez-le avec Arduino IDE.
/*
* Ce code ESP32 C3 Super Mini a été développé par newbiely.fr
* Ce code ESP32 C3 Super Mini 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/esp32-c3/esp32-c3-super-mini-controls-car-via-web
*/
#include <DIYables_ESP32_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 MOTOR_A_IA_PIN 5 // The ESP32 C3 SuperMini pin connected to the A-IA pin of the L9110S (Motor A)
#define MOTOR_A_IB_PIN 6 // The ESP32 C3 SuperMini pin connected to the A-IB pin of the L9110S (Motor A)
#define MOTOR_B_IA_PIN 7 // The ESP32 C3 SuperMini pin connected to the B-IA pin of the L9110S (Motor B)
#define MOTOR_B_IB_PIN 10 // The ESP32 C3 SuperMini pin connected to the B-IB pin of the L9110S (Motor B)
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
DIYables_ESP32_WebSocket* webSocket;
// Web Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HTML_CONTENT); // HTML_CONTENT is from index.h
}
// WebSocket event handlers
void onWebSocketOpen(net::WebSocket& ws) {
Serial.println("New WebSocket connection");
// Send welcome message
const char welcome[] = "Connected to ESP32 WebSocket Server!";
}
void onWebSocketMessage(net::WebSocket& ws, const net::WebSocket::DataType dataType, const char* message, uint16_t length) {
String angle = String(message);
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");
}
}
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(115200);
delay(1000);
pinMode(MOTOR_A_IA_PIN, OUTPUT);
pinMode(MOTOR_A_IB_PIN, OUTPUT);
pinMode(MOTOR_B_IA_PIN, OUTPUT);
pinMode(MOTOR_B_IB_PIN, OUTPUT);
Serial.println("ESP32 C3 SuperMini Web Server and 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() {
// Then handle HTTP requests
server.handleClient();
// Handle WebSocket
server.handleWebSocket();
}
void CAR_moveForward() {
digitalWrite(MOTOR_A_IA_PIN, HIGH);
digitalWrite(MOTOR_A_IB_PIN, LOW);
digitalWrite(MOTOR_B_IA_PIN, HIGH);
digitalWrite(MOTOR_B_IB_PIN, LOW);
}
void CAR_moveBackward() {
digitalWrite(MOTOR_A_IA_PIN, LOW);
digitalWrite(MOTOR_A_IB_PIN, HIGH);
digitalWrite(MOTOR_B_IA_PIN, LOW);
digitalWrite(MOTOR_B_IB_PIN, HIGH);
}
void CAR_turnLeft() {
digitalWrite(MOTOR_A_IA_PIN, HIGH);
digitalWrite(MOTOR_A_IB_PIN, LOW);
digitalWrite(MOTOR_B_IA_PIN, LOW);
digitalWrite(MOTOR_B_IB_PIN, LOW);
}
void CAR_turnRight() {
digitalWrite(MOTOR_A_IA_PIN, LOW);
digitalWrite(MOTOR_A_IB_PIN, LOW);
digitalWrite(MOTOR_B_IA_PIN, HIGH);
digitalWrite(MOTOR_B_IB_PIN, LOW);
}
void CAR_stop() {
digitalWrite(MOTOR_A_IA_PIN, LOW);
digitalWrite(MOTOR_A_IB_PIN, LOW);
digitalWrite(MOTOR_B_IA_PIN, LOW);
digitalWrite(MOTOR_B_IB_PIN, LOW);
}
- Configurez votre WiFi : Remplacez YOUR_WIFI_SSID et YOUR_WIFI_PASSWORD par le nom et le mot de passe de votre propre réseau WiFi.
- Ajoutez le second fichier : Créez le fichier index.h dans Arduino IDE :
- Soit en cliquant sur le bouton juste sous l'icône du moniteur série et en choisissant New Tab, soit en utilisant les touches Ctrl+Shift+N.
- Nommez le fichier index.h et cliquez sur le bouton OK
- Copiez le code ci-dessous et collez-le dans index.h.
- Vérifiez les fichiers : Vous avez maintenant le code dans deux fichiers : newbiely.com.ino et index.h
- Téléversez : Cliquez sur le bouton Téléverser pour téléverser le code vers l'ESP32 C3 Super Mini.
- Ouvrez le Moniteur Série : Réglez le débit en bauds sur 115200.
- Lisez le résultat : Consultez le résultat dans le Moniteur Série.
- Ouvrez la page : Notez l'adresse IP affichée, puis saisissez-la dans la barre d'adresse d'un navigateur web sur votre smartphone ou votre PC.
- Voyez les boutons : Vous verrez la page web comme ci-dessous :
- Connectez-vous : Le code JavaScript de la page web crée automatiquement la connexion WebSocket vers l'ESP32 C3 Super Mini.
- Pilotez-la : Vous pouvez maintenant contrôler la voiture pour tourner à gauche/droite, avancer/reculer via l'interface web.
- Astuce Pro : Attribuez une adresse IP fixe à l'ESP32 C3 Super Mini dans les paramètres de votre routeur, afin que la voiture ait toujours la même adresse web.
- Si vous modifiez le contenu HTML dans le fichier index.h sans rien toucher dans le fichier newbiely.com.ino, lorsque vous compilerez et téléverserez le code vers l'ESP32 C3 Super Mini, Arduino IDE ne mettra pas à jour le contenu HTML.
- Pour qu'Arduino IDE mette à jour le contenu HTML dans ce cas, apportez une modification au fichier newbiely.com.ino (par exemple, ajouter une ligne vide, ajouter un commentaire....)
/*
* Ce code ESP32 C3 Super Mini a été développé par newbiely.fr
* Ce code ESP32 C3 Super Mini 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/esp32-c3/esp32-c3-super-mini-controls-car-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 C3 Super Mini 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>ESP32 C3 Super Mini - 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>
)=====";
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32C3 Dev Module' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
ESP32 C3 Super Mini Web Server's IP address: 192.168.0.2
New WebSocket connection
command: 1
Move Forward
command: 0
Stop
command: 8
Turn Right
command: 0
Stop
Pour économiser la mémoire de l'ESP32 C3 Super Mini, les images des boutons de contrôle ne sont PAS stockées sur la carte. Elles sont stockées sur Internet, votre téléphone ou votre PC doit donc disposer d'une connexion Internet pour charger les images de la page de contrôle web.
※ Note:
Explication du Code Ligne par Ligne
Le code ESP32 C3 Super Mini ci-dessus contient une explication ligne par ligne. Veuillez lire les commentaires dans le code !
Dépannage
Quelques solutions rapides si la voiture ne bouge pas.
- Aucune adresse IP affichée : Vérifiez le nom et le mot de passe WiFi. L'ESP32 C3 Super Mini ne se connecte qu'aux réseaux 2,4GHz, pas 5GHz.
- La page ne s'ouvre pas : Votre téléphone et l'ESP32 C3 Super Mini doivent être sur le même réseau WiFi.
- Les boutons n'ont pas d'images : Votre téléphone ou votre PC n'a pas accès à Internet. Les images des boutons sont chargées depuis le web.
- La voiture va dans le mauvais sens : Inversez les deux fils du moteur sur le bornier à vis de sortie du L9110S.
- La voiture s'arrête quand les moteurs démarrent : Les piles sont faibles. Mettez des piles AA neuves.
Applications
Voici quelques projets amusants que vous pouvez réaliser avec une voiture ESP32 C3 Super Mini contrôlée via le web.
- Voiture RC WiFi : Pilotez la voiture robot dans votre maison depuis le navigateur de votre téléphone
- Rover avec caméra : Ajoutez une petite caméra et regardez où va la voiture
- Suiveur de ligne avec reprise en main : Laissez la voiture suivre une ligne, et reprenez le contrôle depuis le web si nécessaire
- Voiture évitant les obstacles : Ajoutez un capteur à ultrasons qui arrête la voiture avant qu'elle ne heurte un mur
- Mini robot d'entrepôt : Déplacez de petits objets d'un endroit à un autre sur une table
- Voiture jouet pour animaux : Faites rouler un jouet dans la pièce pour jouer avec votre chat ou votre chien
Relevez le Défi
Essayez ces idées pour développer vos compétences avec la voiture robot ESP32 C3 Super Mini.
- Facile : Remplacez les messages du Moniteur Série par vos propres mots
- Facile : Ajoutez un bouton "rotation" qui fait tourner la voiture sur place
- Moyen : Ajoutez un contrôle de vitesse avec analogWrite() et un curseur sur la page web
- Moyen : Affichez la tension de la batterie de la voiture sur la page web grâce à une lecture analogique sur GPIO4
- Avancé : Ajoutez un capteur à ultrasons et arrêtez automatiquement la voiture près d'un obstacle
- Avancé : Ajoutez un contrôle au clavier façon manette de jeu pour que les touches fléchées pilotent la voiture