Serveur Web de servomoteur ESP32 avec IDE Arduino

Dans ce didacticiel, vous apprendrez à créer un serveur Web avec l’ESP32 qui contrôle la position de l’arbre d’un servomoteur à l’aide d’un curseur. Tout d’abord, nous verrons rapidement comment contrôler un servo avec l’ESP32, puis nous construireons le serveur Web.

Mis à jour le 13 juin 2024

Pièces requises

Pour suivre ce tutoriel, vous avez besoin des pièces suivantes :

Vous pouvez utiliser les liens précédents ou vous rendre directement sur MakerAdvisor.com/tools pour trouver toutes les pièces pour vos projets au meilleur prix !

Connexion du servomoteur à l’ESP32

Les servomoteurs ont trois fils : alimentation, masse et signal. L’alimentation est généralement rouge, le GND est noir ou marron et le fil de signal est généralement jaune, orange ou blanc.

Lorsque vous utilisez un petit servo comme le S0009 comme indiqué dans la figure ci-dessous, vous pouvez l’alimenter directement depuis l’ESP32.

Mais si vous utilisez plusieurs servos ou un modèle différent, vous devrez probablement alimenter vos servos à l’aide d’une alimentation externe.

Si vous utilisez un petit servo comme le S0009, vous devez connecter :

• GND -> broche ESP32 GND ;
• Alimentation -> broche VIN ESP32 ;
• Signal -> GPIO 13 (ou n’importe quelle broche PWM).

Remarque : dans ce cas, vous pouvez utiliser n’importe quel GPIO ESP32, car n’importe quel GPIO peut produire un signal PWM. Cependant, nous déconseillons l’utilisation des GPIO 9, 10 et 11 qui sont connectés au flash SPI intégré et ne sont pas recommandés pour d’autres utilisations.

Lecture recommandée : Référence de brochage ESP32 : quelles broches GPIO devez-vous utiliser ?

Schématique

Dans nos exemples, nous connecterons le fil de signal au GPIO 13. Vous pouvez donc suivre le schéma suivant pour câbler votre servomoteur.

(Ce schéma utilise la version du module ESP32 DEVKIT V1 avec 36 GPIO – si vous utilisez un autre modèle, veuillez vérifier le brochage de la carte que vous utilisez.)

Comment contrôler un servomoteur ?

Vous pouvez positionner l’arbre du servo à différents angles de 0 à 180º. Les servos sont contrôlés à l’aide d’un signal de modulation de largeur d’impulsion (PWM). Le cycle de service du signal PWM envoyé au moteur déterminera la position de l’arbre.

Pour contrôler le moteur, vous pouvez simplement utiliser les capacités PWM de l’ESP32 en envoyant un signal de 50 Hz avec la largeur d’impulsion appropriée. Ou vous pouvez utiliser une bibliothèque pour rendre cette tâche beaucoup plus simple.

Préparation de l’IDE Arduino

Avant de continuer, assurez-vous d’avoir installé les cartes ESP32 dans votre IDE Arduino et la bibliothèque ServoESP32.

ESP32 avec l’IDE Arduino

Nous allons programmer l’ESP32 à l’aide de l’IDE Arduino. Assurez-vous donc que le module complémentaire ESP32 est installé. Suivez le tutoriel suivant si ce n’est pas déjà fait :

Alternativement, vous souhaiterez peut-être également programmer l’ESP32 à l’aide de VS Code et de l’extension platformIO :

Installation de la bibliothèque ESP32Servo

La bibliothèque ESP32Servo facilite le contrôle d’un servomoteur avec votre ESP32 à l’aide de l’IDE Arduino. Suivez les étapes suivantes pour installer la bibliothèque dans l’IDE Arduino :

1. Allez dans Sketch > Inclure la bibliothèque > Gérer les bibliothèques…
2. Recherchez ESP32Servo.
3. Installez la bibliothèque.

Tester un exemple

Après avoir installé la bibliothèque, accédez à votre IDE Arduino et copiez le code suivant.

/*********
  Rui Santos & Sara Santos - Raspberryme.com
  Complete project details at https://Raspberryme.com/esp32-servo-motor-web-server-arduino-ide/
  Based on the ESP32Servo Sweep Example
*********/

#include 

static const int servoPin = 13;

Servo servo1;

void setup() {

  Serial.begin(115200);
  servo1.attach(servoPin);
}

void loop() {
  for(int posDegrees = 0; posDegrees <= 180; posDegrees++) {
    servo1.write(posDegrees);
    Serial.println(posDegrees);
    delay(20);
  }

  for(int posDegrees = 180; posDegrees >= 0; posDegrees--) {
    servo1.write(posDegrees);
    Serial.println(posDegrees);
    delay(20);
  }
}

Afficher le code brut

Comprendre le code

Ce croquis fait pivoter le servo de 180 degrés d’un côté et de 180 degrés de l’autre. Voyons comment cela fonctionne.

Tout d’abord, vous devez inclure la bibliothèque Servo :

#include 

Définissez la broche connectée à la broche de données du servo. Dans ce cas, nous nous connectons au GPIO 13, mais vous pouvez utiliser n’importe quelle autre broche appropriée.

static const int servoPin = 13;

En savoir plus sur les GPIO ESP32 : Référence de brochage ESP32 : quelles broches GPIO devez-vous utiliser ?

Ensuite, vous devez créer un objet Servo. Dans ce cas, il s’appelle servo1.

Servo servo1;

installation()

Dans setup(), vous initialisez une communication série à des fins de débogage et attachez GPIO 13 à l’objet servo.

void setup() {
  Serial.begin(115200);
  servo1.attach(servoPin);
}

boucle()

Dans la boucle(), nous modifions la position de l’arbre du moteur de 0 à 180 degrés, puis de 180 à 0 degrés. Pour placer l’arbre dans une position particulière, il vous suffit d’utiliser la méthode write() sur l’objet Servo. Vous passez en argument, un nombre entier avec la position en degrés.

myservo.write(pos);

Tester l’esquisse

Téléchargez le code sur votre ESP32. Après avoir téléchargé le code, vous devriez voir l’arbre du moteur tourner d’un côté puis de l’autre.

Création du serveur Web ESP32

Maintenant que vous savez contrôler un servo avec l’ESP32, créons le serveur web pour le contrôler. Le serveur Web que nous allons construire :

• Il contient un curseur de 0 à 180, que vous pouvez régler pour contrôler la position de l’arbre du servo ;
• La valeur actuelle du curseur est automatiquement mise à jour sur la page Web sans qu’il soit nécessaire de l’actualiser. Pour cela, nous utilisons AJAX pour envoyer des requêtes HTTP à l’ESP32 en arrière-plan ;
• L’actualisation de la page Web ne modifie pas la valeur du curseur ni la position de l’arbre.

Vous aimerez peut-être aussi : Créer des serveurs Web avec le livre électronique ESP32 et ESP8266.

Création de la page HTML

Commençons par jeter un œil au texte HTML que l’ESP32 doit envoyer à votre navigateur.

Afficher le code brut

Créer un curseur

La page HTML de ce projet implique la création d’un curseur. Pour créer un slider en HTML vous utilisez la balise. La balise spécifie un champ dans lequel l’utilisateur peut saisir des données.

Il existe une grande variété de types d’entrée. Pour définir un curseur, utilisez l’attribut « type » avec la valeur « range ». Dans un slider, vous devez également définir la plage minimale et maximale à l’aide des attributs « min » et « max ».

Vous devez également définir d’autres attributs tels que :

• la classe pour styliser le curseur
• l’identifiant pour mettre à jour la position actuelle affichée sur la page web
• Et enfin, l’attribut onchange pour appeler la fonction servo pour envoyer une requête HTTP à l’ESP32 lorsque le curseur bouge.

Ajout de JavaScript au fichier HTML

Ensuite, vous devez ajouter du code JavaScript à votre fichier HTML à l’aide de « ); client.println(«  »); //GET /?value=180& HTTP/1.1 if(header.indexOf(« GET /?value=180& HTTP/1.1 if(header.indexOf(« GET /?value= » )>=0) { pos1 = header.indexOf(‘=’); pos2 = header.indexOf(‘&’); valueString = header.substring(pos1+1, pos2); valueString.toInt()); Serial.println(valueString); } // La réponse HTTP se termine par une autre ligne vide client.println(); // Sortez de la boucle while break; newline, puis clear currentLine currentLine = «  » } } else if (c != ‘\r’) { // si vous avez autre chose qu’un caractère de retour chariot, currentLine += c; the currentLine } } } // Efface la variable d’en-tête header = «  »; // Ferme la connexion client.stop(); Serial.println(« Client déconnecté. » »);

Afficher le code brut

Comment fonctionne le code

Tout d’abord, nous incluons la bibliothèque Servo et créons un objet Servo appelé myservo.

#include  
Servo myservo; // create servo object to control a servo

Nous créons également une variable pour contenir le numéro GPIO auquel le servo est connecté. Dans ce cas, GPIO13.

const int servoPin = 13;

N’oubliez pas que vous devez modifier les deux lignes suivantes pour inclure vos informations d’identification réseau.

const char* ssid     = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Créez ensuite des variables qui seront utilisées pour extraire la position du curseur de la requête HTTP.

// Decode HTTP GET value 
String valueString = String(5); 
int pos1 = 0; 
int pos2 = 0;

installation()

Dans setup(), vous devez attacher le servo au GPIO auquel il est connecté, avec myservo.attach().

myservo.attach(servoPin); // attaches the servo on the servoPin to the servo object

boucle()

La première partie de loop() crée le serveur Web et envoie le texte HTML pour afficher la page Web. Nous utilisons la même méthode que celle utilisée dans ce projet de serveur Web.

La partie suivante du code récupère la valeur du curseur de la requête HTTP.

//GET /?value=180& HTTP/1.1
if(header.indexOf("GET /?value=")>=0) {
  pos1 = header.indexOf('=');
  pos2 = header.indexOf('&');
  valueString = header.substring(pos1+1, pos2);

Lorsque vous déplacez le curseur, vous effectuez une requête HTTP sur l’URL suivante, qui contient la position du curseur entre les signes = et &.

http://your-esp-ip-address/?value=[SLIDER_POSITION]&

La valeur de position du curseur est enregistrée dans la variable valueString.

Ensuite, nous définissons le servo sur cette position spécifique en utilisant myservo.write() avec la variable valueString comme argument. La variable valueString est une chaîne, nous devons donc utiliser la méthode toInt() pour la convertir en un nombre entier – le type de données accepté par la méthode write().

myservo.write(valueString.toInt());

Test du serveur Web

Vous pouvez maintenant télécharger le code sur votre ESP32 – assurez-vous d’avoir sélectionné la bonne carte et le bon port COM. N’oubliez pas non plus de modifier le code pour inclure vos informations d’identification réseau.

Après avoir téléchargé le code, ouvrez le moniteur série à un débit en bauds de 115 200. Appuyez sur le bouton ESP32 EN/RST pour redémarrer la carte et copiez l’adresse IP ESP32 qui apparaît sur le moniteur série.

Ouvrez votre navigateur, collez l’adresse IP ESP et vous devriez voir la page Web que vous avez créée précédemment. Déplacez le curseur pour contrôler le servomoteur.

Dans Serial Monitor, vous pouvez également voir les requêtes HTTP que vous envoyez à l’ESP32 lorsque vous déplacez le curseur.

Expérimentez avec votre serveur Web pendant un moment pour voir s’il fonctionne correctement.

Regardez le didacticiel vidéo et la démo du projet

Ce guide est disponible en format vidéo (regarder ci-dessous) et en format écrit (continuer la lecture).

Conclusion

En résumé, dans ce tutoriel, vous avez appris comment contrôler un servomoteur avec l’ESP32 et comment créer un serveur web avec un curseur pour contrôler sa position.

Ceci n’est qu’un exemple de la façon de contrôler un servomoteur. Au lieu d’un curseur, vous pouvez utiliser un champ de saisie de texte, plusieurs boutons avec des angles prédéfinis ou tout autre champ de saisie approprié.

Ceci est un extrait de notre cours : Apprenez l’ESP32 avec l’IDE Arduino. Si vous aimez l’ESP32 et souhaitez en savoir plus, nous vous recommandons de vous inscrire au cours Apprendre l’ESP32 avec l’IDE Arduino.

Nous avons des tutoriels sur la façon d’interfacer d’autres moteurs avec l’ESP32 :

Apprenez-en davantage sur l’ESP32 et sur la création de serveurs Web avec nos ressources :

Nous espérons que vous avez trouvé ce tutoriel utile.

Merci d’avoir lu.

Cette vidéo vous emmène dans l’histoire de Raspberry Pi :