ESP8266 - Contrôle d'une voiture via le Web
Ce tutoriel vous explique comment utiliser l'ESP8266 pour contrôler sans fil une voiture robot depuis un navigateur Web sur votre smartphone ou PC via WiFi. Le contrôle est facilité à travers une interface utilisateur graphique web utilisant quelque chose appelé WebSocket, permettant un contrôle fluide et dynamique de la voiture.
Préparation du matériel
Or you can buy the following sensor kits:
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
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.
Concernant la voiture RC 2WD et WebSocket.
Maintenant, pourquoi opter pour WebSocket ? Voici le scoop :
- Sans WebSocket, changer la direction de la voiture nécessiterait de recharger la page à chaque fois. Pas idéal !
- Cependant, avec WebSocket, nous établissons une connexion spéciale entre la page web et l'ESP8266. Cela permet d'envoyer des commandes à l'ESP8266 en arrière-plan, sans avoir besoin de recharger la page. Le résultat ? La voiture robot se déplace de manière fluide et en temps réel. Assez cool, non ?
En résumé, la connexion WebSocket permet une commande fluide et en temps réel du robot.
Nous disposons de tutoriels spécifiques sur la voiture RC 2WD et WebSocket. Chaque tutoriel contient des informations détaillées et des instructions étape par étape sur le brochage du matériel, le principe de fonctionnement, la connexion des câblages à l'ESP8266, le code ESP8266... Pour en savoir plus sur ces éléments, consultez les liens suivants :
- ESP8266 - 2WD RC Car tutorial
- ESP8266 - WebSocket tutorial
Comment ça marche
Le code ESP8266 crée à la fois un serveur web et un serveur WebSocket. Voici comment cela fonctionne :
- Lorsque vous saisissez l'adresse IP de l'ESP8266 dans un navigateur web, il demande la page Web (Interface Utilisateur) à l'ESP8266.
- Le serveur web de l'ESP8266 répond en envoyant le contenu de la page Web (HTML, CSS, JavaScript).
- Votre navigateur web affiche alors la page Web.
- Le code JavaScript à l'intérieur de la page Web établit une connexion WebSocket avec le serveur WebSocket sur l'ESP8266.
- Une fois cette connexion WebSocket établie, si vous appuyez/relâchez les boutons sur la page Web, le code JavaScript envoie discrètement les commandes à l'ESP8266 via cette connexion WebSocket en arrière-plan.
- Le serveur WebSocket sur l'ESP8266, après avoir reçu les commandes, contrôle la voiture robot en conséquence.
Le tableau ci-dessous montre la liste des commandes que la page web envoie à l'ESP8266 en fonction des actions de 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 la voiture RC 2WD et l'ESP8266
This image is created using Fritzing. Click to enlarge image
Voir plus dans l'agencement des broches de l'ESP8266 et comment alimenter l'ESP8266 et d'autres composants.
En général, vous avez besoin de deux sources d'énergie :
- Un pour le moteur via le module L298N.
- Un autre pour la carte ESP8266, module L298N (pilote de moteur).
Mais vous pouvez simplifier cela en utilisant une seule source d'alimentation pour tout - quatre piles de 1,5V (pour un total de 6V). Voici comment :
- Connectez les batteries au module L298N comme indiqué.
- Placez deux cavaliers des broches ENA et ENB à 5 volts sur le module L298N.
- Retirez un cavalier étiqueté 5VEN (cercle jaune sur le schéma).
- Faites le câblage restant comme le schéma ci-dessus.
Étant donné que la voiture RC 2WD possède un interrupteur marche/arrêt, vous pouvez choisir de connecter la batterie via l'interrupteur pour activer ou désactiver l'alimentation de la voiture. Si vous voulez simplifier, ignorez simplement l'interrupteur.
Code ESP8266
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 sur Arduino IDE :
- Un fichier .ino contenant du code ESP8266, qui crée un serveur web et un serveur WebSocket, et contrôle une voiture.
- Un fichier .h, qui contient le contenu de la page web.
Étapes rapides
Pour commencer avec l'ESP8266 sur l'IDE Arduino, suivez ces étapes :
- Consultez le tutoriel comment configurer l'environnement pour ESP8266 sur Arduino IDE si c'est votre première utilisation de l'ESP8266.
- Câblez les composants comme indiqué sur le schéma.
- Connectez la carte ESP8266 à votre ordinateur à l'aide d'un câble USB.
- Ouvrez Arduino IDE sur votre ordinateur.
- Choisissez la bonne carte ESP8266, comme par exemple NodeMCU 1.0 (Module ESP-12E), et son port COM respectif.
- Ouvrez le Gestionnaire de bibliothèques en cliquant sur l'icône Gestionnaire de bibliothèques dans la barre de navigation gauche de l'Arduino IDE.
- Recherchez “WebSockets”, puis trouvez les WebSockets créés par Markus Sattler.
- Cliquez sur le bouton Install pour installer la bibliothèque WebSockets.
- Sur l'IDE Arduino, créez un nouveau sketch, nommez-le, par exemple, newbiely.fr.ino
- Copiez le code ci-dessous et ouvrez-le avec l'IDE Arduino
/*
* Ce code ESP8266 NodeMCU a été développé par newbiely.fr
* Ce code ESP8266 NodeMCU 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/esp8266/esp8266-controls-car-via-web
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <WebSocketsServer.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 IN1_PIN D2 // The ESP8266 pin connected to the IN1 pin L298N
#define IN2_PIN D5 // The ESP8266 pin connected to the IN2 pin L298N
#define IN3_PIN D6 // The ESP8266 pin connected to the IN3 pin L298N
#define IN4_PIN D7 // The ESP8266 pin connected to the IN4 pin L298N
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 80
WebSocketsServer webSocket = WebSocketsServer(81); // WebSocket server on port 81
void webSocketEvent(uint8_t num, WStype_t type, uint8_t* payload, size_t length) {
switch (type) {
case WStype_DISCONNECTED:
Serial.printf("[%u] Disconnected!\n", num);
break;
case WStype_CONNECTED:
{
IPAddress ip = webSocket.remoteIP(num);
Serial.printf("[%u] Connected from %d.%d.%d.%d\n", num, ip[0], ip[1], ip[2], ip[3]);
}
break;
case WStype_TEXT:
//Serial.printf("[%u] Received text: %s\n", num, payload);
String angle = String((char*)payload);
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");
}
break;
}
}
void setup() {
Serial.begin(9600);
pinMode(IN1_PIN, OUTPUT);
pinMode(IN2_PIN, OUTPUT);
pinMode(IN3_PIN, OUTPUT);
pinMode(IN4_PIN, OUTPUT);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Initialize WebSocket server
webSocket.begin();
webSocket.onEvent(webSocketEvent);
// Serve a basic HTML page with JavaScript to create the WebSocket connection
server.on("/", HTTP_GET, []() {
Serial.println("Web Server: received a web page request");
String html = HTML_CONTENT; // Use the HTML content from the servo_html.h file
server.send(200, "text/html", html);
});
server.begin();
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
// Handle client requests
server.handleClient();
// Handle WebSocket events
webSocket.loop();
// TO DO: Your code here
}
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);
}
- Créez le fichier index.h sur Arduino IDE en :
- Cliquant soit sur le bouton situé juste en dessous de l'icône du moniteur série et en choisissant Nouvel Onglet, soit en utilisant les touches Ctrl+Shift+N.
- Donnez au fichier le nom index.h et cliquez sur le bouton OK.
- Copiez le code ci-dessous et collez-le dans index.h.
- Maintenant, vous avez le code dans deux fichiers : newbiely.fr.ino et index.h
- Cliquez sur le bouton Upload dans l'IDE Arduino pour charger le code sur l'ESP8266
- Ouvrez le moniteur série
- Consultez le résultat sur le moniteur série.
- Notez l'adresse IP affichée, et saisissez cette adresse dans la barre d'adresse d'un navigateur web sur votre smartphone ou PC.
- Vous verrez la page web comme ci-dessous :
- Le code JavaScript de la page web crée automatiquement la connexion WebSocket vers l'ESP8266.
- Vous pouvez maintenant contrôler la voiture pour tourner à gauche/droite, avancer/reculer via l'interface web.
- Si vous modifiez le contenu HTML dans le index.h et que vous ne touchez à rien dans le fichier newbiely.fr.ino, lorsque vous compilez et téléchargez le code sur ESP8266, l'IDE Arduino ne mettra pas à jour le contenu HTML.
- Pour que l'IDE Arduino mette à jour le contenu HTML dans ce cas, apportez une modification dans le fichier newbiely.fr.ino (par exemple, ajouter une ligne vide, ajouter un commentaire....)
/*
* Ce code ESP8266 NodeMCU a été développé par newbiely.fr
* Ce code ESP8266 NodeMCU 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/esp8266/esp8266-controls-car-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 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://newbiely.com/images/tutorial/up_inactive.png') no-repeat;
background-size: contain;
left: 200px;
top: 0px;
transform: translateX(-50%);
}
.button_down {
background: url('https://newbiely.com/images/tutorial/down_inactive.png') no-repeat;
background-size: contain;
left:200px;
bottom: 0px;
transform: translateX(-50%);
}
.button_right {
background: url('https://newbiely.com/images/tutorial/right_inactive.png') no-repeat;
background-size: contain;
right: 0px;
top: 200px;
transform: translateY(-50%);
}
.button_left {
background: url('https://newbiely.com/images/tutorial/left_inactive.png') no-repeat;
background-size: contain;
left:0px;
top: 200px;
transform: translateY(-50%);
}
.button_stop {
background: url('https://newbiely.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://newbiely.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://newbiely.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>ESP8266 - 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
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address IP address: 192.168.0.5
Autoscroll
Clear output
9600 baud
Newline
Pour économiser la mémoire de l'ESP8266, les images des boutons de contrôle ne sont PAS stockées sur l'ESP8266. Au lieu de cela, elles sont enregistrées sur internet, donc, votre téléphone ou PC doit être connecté à internet pour charger les images pour la page de contrôle web.
※ NOTE THAT:
Explication du code ligne par ligne
Le code ESP8266 ci-dessus contient des explications ligne par ligne. Veuillez lire les commentaires dans le code !