Serveur Web NodeMCU ESP8266 : moteur à courant continu (IDE Arduino)

Fichier CSS

Créez un fichier appelé style.css avec le contenu suivant pour styliser la page Web.

html {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
h1 {
    font-size: 1.8rem;
    color: white;
}

.topnav {
    overflow: hidden;
    background-color: #0A1128;
}

body {
    margin: 0;
}

.content {
    padding: 50px;
}

.card-grid {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.card {
    background-color: white;
    box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
}

.card-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #034078
}

.state {
    font-size: 1.2rem;
    color:#1282A2;
}

button {
    border: none;
    color: #FEFCFB;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
    width: 150px;
    border-radius: 4px;
    transition-duration: 0.4s;
}
.button-on {
    background-color:#034078;
}

.button-on:hover {
    background-color: #1282A2;
}

.button-off {
    background-color:#858585;
}
.button-off:hover {
    background-color: #252524;
}

.button-stop {
    background-color:#5e0f0f;
    width: 100%;
}
.button-stop:hover {
    background-color: #9b332c;
}

Afficher le code brut

Serveur Web ESP8266 : contrôler un moteur à courant continu – Arduino Sketch

Le code suivant crée un serveur Web qui dessert la page Web que vous avez créée précédemment pour contrôler un moteur à courant continu à distance à l’aide d’un navigateur Web sur le réseau local.

/*********
  Rui Santos & Sara Santos - Raspberryme.com
  Complete instructions at https://Raspberryme.com/esp8266-nodemcu-web-server-dc-motor-arduino/
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*********/

#include 
#include 
#include 
#include 
#include 

// Motor A pins
int motor1Pin1 = 12; 
int motor1Pin2 = 14; 
int enable1Pin = 13; 

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

// Initialize LittleFS
void initFS() {
  if (!LittleFS.begin()) {
    Serial.println("An error has occurred while mounting LittleFS");
  }
  else {
    Serial.println("LittleFS mounted successfully");
  }
}

void initWiFi() {
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("Connecting to WiFi ..");
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print('.');
    delay(1000);
  }
  Serial.println(WiFi.localIP());
}

void moveForward(){
  Serial.println("Moving Forward");
  digitalWrite(enable1Pin, HIGH);
  digitalWrite(motor1Pin1, LOW);
  digitalWrite(motor1Pin2, HIGH);
}

void moveBackward(){
  Serial.println("Moving Backward");
  digitalWrite(enable1Pin, HIGH);
  digitalWrite(motor1Pin1, HIGH);
  digitalWrite(motor1Pin2, LOW);
}

void stopMotor(){
  digitalWrite(enable1Pin, LOW);
  digitalWrite(motor1Pin1, LOW);
  digitalWrite(motor1Pin2, LOW);
}

void setup() {
  Serial.begin(115200);

  // Set motor pins as outputs
  pinMode(motor1Pin1, OUTPUT);
  pinMode(motor1Pin2, OUTPUT);
  pinMode(enable1Pin, OUTPUT);

  initWiFi();
  initFS();

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/index.html", "text/html");
  });

  server.serveStatic("/", LittleFS, "/");

  server.on("/forward", HTTP_GET, [](AsyncWebServerRequest *request) {
    moveForward();
    request->send(LittleFS, "/index.html", "text/html", false);
  }); 

  server.on("/backward", HTTP_GET, [](AsyncWebServerRequest *request) {
    moveBackward();
    request->send(LittleFS, "/index.html", "text/html", false);
  });

  server.on("/stop", HTTP_GET, [](AsyncWebServerRequest *request) {
    stopMotor();
    request->send(LittleFS, "/index.html", "text/html", false);
  });

  server.begin();
}

void loop() {
  
}

Afficher le code brut

Il vous suffit d’insérer vos informations d’identification réseau et de télécharger l’image du système de fichiers et le code fonctionnera immédiatement.

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

Comment fonctionne le code

Continuez à lire pour savoir comment fonctionne le code ou passez à la section Démonstration.

Y compris les bibliothèques

Tout d’abord, incluez les bibliothèques requises pour vous connecter au Wi-Fi, créez le serveur Web et utilisez le système de fichiers LittleFS.

#include 
#include 
#include 
#include 
#include 

Broches du moteur

Définissez les GPIO qui contrôleront le moteur.

// Motor A pins
int motor1Pin1 = 12; 
int motor1Pin2 = 14; 
int enable1Pin = 13; 

Informations d’identification réseau

Insérez vos informations d’identification réseau sur les variables suivantes afin que l’ESP8266 se connecte à votre réseau.

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_SSID";

Création d’un objet serveur

Créez un objet AsyncWebServer appelé serveur sur le port 80.

AsyncWebServer server(80);

Initialiser LittleFS

La fonction suivante initFS() initialise le système de fichiers LittleFS. Nous l’appellerons plus tard dans setup().

void initFS() {
  if (!LittleFS.begin()) {
    Serial.println("An error has occurred while mounting LittleFS");
  }
  else {
    Serial.println("LittleFS mounted successfully");
  }
}

Initialiser le Wi-Fi

La fonction initWiFi() se connecte au Wi-Fi en utilisant le SSID et le mot de passe que vous avez définis précédemment.

void initWiFi() {
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("Connecting to WiFi ..");
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print('.');
    delay(1000);
  }
  Serial.println(WiFi.localIP());
}

Fonctions pour contrôler les moteurs à courant continu

Nous créons trois fonctions pour contrôler le moteur à courant continu.

La fonction moveForward() fera avancer le moteur.

void moveForward(){
  Serial.println("Moving Forward");
  digitalWrite(enable1Pin, HIGH);
  digitalWrite(motor1Pin1, LOW);
  digitalWrite(motor1Pin2, HIGH);
}

La fonction moveBackward() fait reculer le moteur.

void moveBackward(){
  Serial.println("Moving Backward");
  digitalWrite(enable1Pin, HIGH);
  digitalWrite(motor1Pin1, HIGH);
  digitalWrite(motor1Pin2, LOW);
}

Enfin, la fonction stopMotor() arrête le moteur en réglant toutes les broches du moteur sur LOW.

void stopMotor(){
  Serial.print("Motor Stopped")
  digitalWrite(enable1Pin, LOW);
  digitalWrite(motor1Pin1, LOW);
  digitalWrite(motor1Pin2, LOW);
}

installation()

Dans setup(), initialisez le Serial Monitor à des fins de débogage.

Serial.begin(115200);

Définissez les broches du moteur comme sorties.

// Set motor pins as outputs
pinMode(motor1Pin1, OUTPUT);
pinMode(motor1Pin2, OUTPUT);
pinMode(enable1Pin, OUTPUT);

Initialisez le Wi-Fi en appelant la fonction initWiFi().

initWiFi();

Initialisez le système de fichiers LittleFS en appelant la fonction initFS() que nous avons créée précédemment.

initFS();

Gérer les demandes

Ensuite, gérez le serveur Web. Lorsque vous recevez une requête sur l’URL root (/) (cela se produit lorsque vous accédez à l’adresse IP ESP), envoyez le texte HTML pour créer la page Web :

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(LittleFS, "/index.html", "text/html");
});

Lorsque le fichier HTML se charge sur votre navigateur, il fera une demande pour le fichier CSS. Il s’agit d’un fichier statique enregistré sur le même répertoire (LittleFS). Ainsi, nous pouvons simplement ajouter la ligne suivante pour servir les fichiers dans un répertoire lorsque l’URL root le demande. De cette façon, le fichier CSS sera servi automatiquement.

server.serveStatic("/", LittleFS, "/");

Lorsque vous cliquez sur le bouton Suivant, vous effectuez une requête sur le chemin /forward. Lorsque l’ESP8266 reçoit cette requête, il appellera la fonction moveForward() pour faire avancer le moteur.

server.on("/forward", HTTP_GET, [](AsyncWebServerRequest *request) {
  moveForward();
  request->send(LittleFS, "/index.html", "text/html", false);
});  

De même, lorsque vous cliquez sur le bouton Backward, l’ESP8266 reçoit une requête sur le chemin /backward. Lorsque cela se produit, appelez la fonction moveBackward() pour faire bouger le moteur dans l’autre sens.

server.on("/backward", HTTP_GET, [](AsyncWebServerRequest *request) {
  moveBackward();
  request->send(LittleFS, "/index.html", "text/html", false);
});

Lorsque vous cliquez sur le bouton Stop, l’ESP8266 reçoit une requête sur le chemin /stop et appelle la fonction stopMotor().

server.on("/stop", HTTP_GET, [](AsyncWebServerRequest *request) {
  stopMotor();
  request->send(LittleFS, "/index.html", "text/html", false);
});

Initialiser le serveur

Enfin, appelez la méthode Begin() sur l’objet serveur pour initialiser le serveur.

server.begin();

Télécharger du code et des fichiers

Après avoir inséré vos informations d’identification réseau, enregistrez le code. Accédez à Sketch > Show Sketch Folder et créez un dossier appelé data.

Dans ce dossier, vous devez enregistrer les fichiers HTML et CSS.

Télécharger des fichiers sur le système de fichiers

Avec les fichiers HTML et CSS enregistrés dans le dossier de données, vous pouvez maintenant les télécharger sur le tableau. Assurez-vous que le plug-in Filesystem Uploader est installé.

Sélectionnez la carte ESP8266 que vous utilisez (Outils > Carte) et sélectionnez le bon port COM (Outils > Port).

Ensuite, téléchargez les fichiers sur la carte ESP8266. Presse [Ctrl] + [Shift] + [P] sous Windows ou [⌘] + [Shift] + [P] sur MacOS pour ouvrir la palette de commandes. Recherchez Télécharger LittleFS vers Pico/ESP8266/ESP32 et cliquez dessus.

Important : assurez-vous que le moniteur série est fermé. Sinon, le téléchargement échouera.

Après quelques secondes, vous devriez recevoir le message « Téléchargement terminé. « . Les fichiers ont été téléchargés avec succès sur le système de fichiers ESP8266.

Téléchargez le code

Ensuite, téléchargez le code sur votre carte ESP8266 (assurez-vous d’avoir ajouté vos informations d’identification réseau dans le code).

Démonstration

Lorsque tout est téléchargé avec succès, ouvrez le moniteur série à un débit en bauds de 115 200.

Appuyez sur le bouton ESP8266 RST et il devrait imprimer l’adresse IP de l’ESP8266.

Avec le moteur connecté à l’ESP8266 via le pilote de moteur L298N et alimenté par une alimentation externe, ouvrez n’importe quel navigateur sur votre réseau local et tapez l’adresse IP de l’ESP8266. La page Web suivante se chargera.

Cliquez sur les boutons pour contrôler le moteur à courant continu.

Le serveur peut gérer plusieurs clients simultanément. Vous pouvez également contrôler le moteur DC depuis votre smartphone à condition qu’il soit connecté à votre réseau local.

Conclusion

Dans ce didacticiel, vous avez appris à créer un simple serveur Web asynchrone avec l’ESP8266 pour contrôler un moteur à courant continu à distance depuis votre ordinateur ou votre smartphone. Vous pouvez désormais étendre ce projet pour contrôler plus de moteurs ou contrôler d’autres sorties ou même afficher les lectures des capteurs. Vous pouvez consulter les tutoriels suivants :

Si vous souhaitez en savoir plus sur la création de serveurs Web avec l’ESP8266 à partir de zéro, nous vous recommandons de consulter notre eBook exclusif :

Merci d’avoir lu.

Apprenez l’histoire de Raspberry Pi à travers cette vidéo :