ESP32 - Contrôle d'un servomoteur via le Web
Ce tutoriel vous explique comment utiliser l'ESP32 pour contrôler un moteur servo via le web depuis un navigateur sur votre smartphone ou PC. Nous utiliserons quelque chose appelé WebSocket pour contrôler le moteur servo de manière fluide et dynamique à travers une interface utilisateur web graphique.
La vidéo ci-dessous est une démonstration :
Maintenant, pourquoi utiliser WebSocket ? Voici l'idée :
- Sans WebSocket, chaque fois que vous souhaitez changer l'angle du servo, vous devez recharger la page. Pas terrible !
- Mais avec WebSocket, nous établissons une connexion spéciale entre la page web et l'ESP32. Cela signifie que nous pouvons envoyer la valeur de l'angle à l'ESP32 en arrière-plan, sans recharger la page. Cela permet au servo de bouger de manière fluide et en temps réel. Plutôt cool, non ?
Commençons !
Préparation du matériel
| 1 | × | ESP-WROOM-32 Dev Module | |
| 1 | × | USB Cable Type-C | |
| 1 | × | Servo Motor | |
| 1 | × | Breadboard | |
| 1 | × | Jumper Wires | |
| 1 | × | (Optional) DC Power Jack | |
| 1 | × | (Recommended) ESP32 Screw Terminal Adapter |
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.
À propos du servomoteur et de WebSocket
Nous avons des tutoriels spécifiques sur le moteur servo et WebSocket. Chaque tutoriel contient des informations détaillées et des instructions étape par étape sur le branchement des broches, le principe de fonctionnement, la connexion de câblage à l'ESP32, le code ESP32... Pour en savoir plus sur ces sujets, consultez les liens suivants :
- ESP32 - Servo Motor tutorial
- ESP32 - WebSocket tutorial
Comment ça fonctionne
Le code ESP32 crée à la fois un serveur web et un serveur WebSocket. Voici comment cela fonctionne :
- Lorsque vous entrez l'adresse IP de l'ESP32 dans un navigateur web, celui-ci demande la page web (Interface Utilisateur) à l'ESP32.
- Le serveur web de l'ESP32 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'ESP32.
- Une fois cette connexion WebSocket établie, si vous tournez la poignée sur la page web, le code JavaScript envoie discrètement la valeur de l'angle à l'ESP32 via cette connexion WebSocket en arrière-plan.
- Le serveur WebSocket sur l'ESP32, après avoir reçu la valeur de l'angle, contrôle le moteur servo en conséquence.
En résumé, la connexion WebSocket permet le contrôle en temps réel et fluide de l'angle du moteur servo.
Schéma de câblage entre le moteur servo et l'ESP32
This image is created using Fritzing. Click to enlarge image
Si vous ne savez pas comment alimenter l'ESP32 et d'autres composants, vous pouvez trouver des conseils dans le tutoriel suivant : Comment alimenter l'ESP32.
Pour des raisons de simplicité, le schéma de câblage ci-dessus est utilisé à des fins de test ou d'apprentissage, et pour un moteur servo de faible couple. En pratique, nous recommandons fortement d'utiliser une alimentation externe pour le moteur servo. Le schéma de câblage ci-dessous montre comment connecter le moteur servo à une source d'alimentation externe.
This image is created using Fritzing. Click to enlarge image
Le schéma ci-dessous montre un câblage réel entre un moteur servo et un ESP32.
Code ESP32
Le contenu de la page web (HTML, CSS, JavaScript) est stocké séparément dans un fichier index.h. Ainsi, nous aurons deux fichiers de code sur Arduino IDE :
- Un fichier .ino qui est un code ESP32, qui crée un serveur web et un serveur WebSocket, et contrôle un moteur servo
- Un fichier .h, qui contient le contenu de la page web.
Étapes rapides
- Si c'est la première fois que vous utilisez un ESP32, consultez comment configurer l'environnement pour ESP32 sur Arduino IDE.
- Réalisez le câblage comme sur l'image ci-dessus.
- Connectez la carte ESP32 à votre PC via un câble micro USB.
- Ouvrez Arduino IDE sur votre PC.
- Sélectionnez la bonne carte ESP32 (par exemple ESP32 Dev Module) et le port COM.
- 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 “ESPAsyncWebServer”, puis trouvez ESPAsyncWebServer créé par lacamera.
- Cliquez sur le bouton Install pour installer la bibliothèque ESPAsyncWebServer.
- Vous serez invité à installer la dépendance. Cliquez sur le bouton Install All.
- Recherchez « WebSockets », puis trouvez les WebSockets créés par Markus Sattler.
- Cliquez sur le bouton Install pour installer la bibliothèque WebSockets.
- Tapez ServoESP32 dans la boîte de recherche, puis cherchez la bibliothèque servo de Jaroslav Paral. Veuillez noter que les versions 1.1.1 et 1.1.0 présentent des bugs. Veuillez choisir une version différente.
- Cliquez sur le bouton Install pour installer la bibliothèque du moteur servo pour ESP32.
- Sur l'IDE Arduino, créez un nouveau sketch, donnez-lui un nom, par exemple newbiely.fr.ino.
- Copiez le code ci-dessous et ouvrez-le avec l'IDE Arduino.
/*
* Ce code ESP32 a été développé par newbiely.fr
* Ce code ESP32 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/esp32-controls-servo-motor-via-web
*/
#include <Servo.h>
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <WebSocketsServer.h>
#include "index.h"
#define SERVO_PIN 26 // ESP32 pin GPIO26 connected to servo motor
Servo servo;
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
AsyncWebServer server(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 angle_value = angle.toInt();
Serial.println(angle_value);
servo.write(angle_value);
break;
}
}
void setup() {
Serial.begin(9600);
servo.attach(SERVO_PIN); // attaches the servo on ESP32 pin
// 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, [](AsyncWebServerRequest* request) {
Serial.println("Web Server: received a web page request");
String html = HTML_CONTENT; // Use the HTML content from the index.h file
request->send(200, "text/html", html);
});
server.begin();
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
webSocket.loop();
}
- Modifiez les informations WiFi (SSID et mot de passe) dans le code pour correspondre à vos propres identifiants de réseau.
- Créez le fichier index.h sur Arduino IDE en :
- Cliquant soit sur le bouton juste en dessous de l'icône du moniteur série et choisissez Nouvel Onglet, soit utilisez 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 téléverser le code sur l'ESP32
- Ouvrez le moniteur série
- Consultez le résultat sur le moniteur série.
- Prenez note de 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 avec l'ESP32.
- Vous pouvez maintenant contrôler l'angle du moteur servo 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 ESP32, l'IDE Arduino ne mettra pas à jour le contenu HTML.
- Pour que l'IDE Arduino mette à jour le contenu HTML dans ce cas, effectuez un changement dans le fichier newbiely.fr.ino (par exemple, ajouter une ligne vide, ajouter un commentaire...)
/*
* Ce code ESP32 a été développé par newbiely.fr
* Ce code ESP32 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/esp32-controls-servo-motor-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Controls Servo Motor via Web</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style>
body { text-align: center; }
canvas { background-color: #ffffff; }
</style>
<script>
var canvas_width = 401, canvas_height = 466;
var pivot_x = 200, pivot_y = 200;
var bracket_radius = 160, bracket_angle = 0;
var bracket_img = new Image();
var click_state = 0;
var last_angle = 0;
var mouse_xyra = {x:0, y:0, r:0.0, a:0.0};
var ws;
bracket_img.src = "https://esp32io.com/images/tutorial/servo-bracket.png";
function init()
{
var servo = document.getElementById("servo");
servo.width = canvas_width;
servo.height = canvas_height;
servo.style.backgroundImage = "url('https://esp32io.com/images/tutorial/servo-body.png')";
servo.style.backgroundPosition = "center";
servo.style.backgroundSize = "contain";
servo.addEventListener("touchstart", mouse_down);
servo.addEventListener("touchend", mouse_up);
servo.addEventListener("touchmove", mouse_move);
servo.addEventListener("mousedown", mouse_down);
servo.addEventListener("mouseup", mouse_up);
servo.addEventListener("mousemove", mouse_move);
var ctx = servo.getContext("2d");
ctx.translate(pivot_x, pivot_y);
rotate_bracket(0);
ws = new WebSocket("ws://" + window.location.host + ":81");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = function(){ document.getElementById("ws_state").innerHTML = "CONNECTED" };
ws.onclose = function(){ document.getElementById("ws_state").innerHTML = "CLOSED"};
ws.onerror = function(){ alert("websocket error " + this.url) };
ws.onmessage = ws_onmessage;
}
function ws_onmessage(e_msg)
{
e_msg = e_msg || window.event; // MessageEvent
alert("msg : " + e_msg.data);
}
function rotate_bracket(angle)
{
var servo = document.getElementById("servo");
var ctx = servo.getContext("2d");
ctx.clearRect(-pivot_x, -pivot_y, canvas_width, canvas_height);
ctx.rotate(angle / 180 * Math.PI);
ctx.drawImage(bracket_img, -pivot_x, -pivot_y);
ctx.rotate(-angle / 180 * Math.PI);
}
function check_range_xyra(event, mouse_xyra)
{
var x, y, r, a, rc_x, rc_y, radian;
var min_r, max_r, width;
if(event.touches)
{
var touches = event.touches;
x = (touches[0].pageX - touches[0].target.offsetLeft) - pivot_x;
y = pivot_y - (touches[0].pageY - touches[0].target.offsetTop);
min_r = 60;
max_r = pivot_x;
width = 40;
}
else
{
x = event.offsetX - pivot_x;
y = pivot_y - event.offsetY;
min_r = 60;
max_r = bracket_radius;
width = 20;
}
/* cartesian to polar coordinate conversion */
r = Math.sqrt(x * x + y * y);
a = Math.atan2(y, x);
mouse_xyra.x = x;
mouse_xyra.y = y;
mouse_xyra.r = r;
mouse_xyra.a = a;
radian = bracket_angle / 180 * Math.PI;
/* rotate coordinate */
rc_x = x * Math.cos(radian) - y * Math.sin(radian);
rc_y = x * Math.sin(radian) + y * Math.cos(radian);
if((r < min_r) || (r > max_r))
return false;
if((rc_y < -width) || (rc_y > width))
return false;
return true;
}
function mouse_down()
{
if(event.touches && (event.touches.length > 1))
click_state = event.touches.length;
if(click_state > 1)
return;
if(check_range_xyra(event, mouse_xyra))
{
click_state = 1;
last_angle = mouse_xyra.a / Math.PI * 180.0;
}
}
function mouse_up()
{
click_state = 0;
}
function mouse_move()
{
var angle;
if(event.touches && (event.touches.length > 1))
click_state = event.touches.length;
if(click_state > 1)
return;
if(!click_state)
return;
if(!check_range_xyra(event, mouse_xyra))
{
click_state = 0;
return;
}
angle = mouse_xyra.a / Math.PI * 180.0;
if((Math.abs(angle) > 90) && (angle * last_angle < 0))
{
if(last_angle > 0)
last_angle = -180;
else
last_angle = 180;
}
bracket_angle += (last_angle - angle);
last_angle = angle;
if(bracket_angle > 90)
bracket_angle = 90;
if(bracket_angle < -90)
bracket_angle = -90;
rotate_bracket(bracket_angle);
if(ws.readyState == 1)
ws.send(Math.floor(90 - bracket_angle) + "\r\n");
debug = document.getElementById("debug");
debug.innerHTML = Math.floor(90 - bracket_angle);
event.preventDefault();
}
window.onload = init;
</script>
</head>
<body>
<h2>
ESP32 - Servo Motor via Web<br>
<canvas id="servo"></canvas>
<p>
WebSocket : <span id="ws_state" style="color:blue">null</span><br>
Angle : <span id="debug" style="color:blue">90</span>
</p>
</h2>
<div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div>
</body>
</html>
)=====";
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
Pour économiser la mémoire de l'ESP32, les images du moteur servo ne sont PAS stockées sur l'ESP32. Au lieu de cela, elles sont stocké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 ESP32 ci-dessus contient des explications ligne par ligne. Veuillez lire les commentaires dans le code !