Serveur Web ESP32 : contrôle du moteur pas à pas

De plus, la balise

<form action="/" method="POST">

POST est utilisé pour envoyer des données à un serveur pour créer/mettre à jour une ressource. Les données envoyées au serveur avec POST sont stockées dans le corps de la requête HTTP.

Boutons radio

Un bouton radio est défini comme suit :

<input type="radio">

Pour notre projet, nous avons besoin de deux boutons radio, et un seul peut être sélectionné à la fois. Ainsi, nous pouvons créer un groupe de boutons radio. Pour ce faire, les boutons radio doivent partager le même nom (la valeur de l’attribut name, dans ce cas la direction).

<input type="radio" name="direction">

Enfin, nous avons également besoin de l’attribut value qui spécifie une valeur unique pour chaque bouton radio. Cette valeur n’est pas visible pour l’utilisateur, mais elle est envoyée au serveur lorsque vous cliquez sur le bouton d’envoi pour identifier le bouton qui a été sélectionné.

Dans notre exemple, nous avons créé un bouton radio avec la valeur CW (pour sélectionner dans le sens horaire) et un autre CCW (pour sélectionner dans le sens antihoraire).

<input type="radio" name="direction" value="CW">

<input type="radio" name="direction" value="CCW">

Enfin, si vous souhaitez qu’un bouton radio soit sélectionné par défaut, vous pouvez ajouter le mot-clé coché. Dans notre exemple, le sens horaire est sélectionné par défaut.

<input type="radio" name="direction" value="CW" checked>

Voici donc à quoi ressemblent les boutons radio et les étiquettes correspondantes :

<input type="radio" name="direction" value="CW" checked>
<label for="CW">Clockwise</label>

<input type="radio" name="direction" value="CCW">
<label for="CW">Counterclockwise</label><br><br><br>

Champ de saisie

Enfin, nous avons également besoin d’un champ de saisie dans lequel l’utilisateur saisit le nombre d’étapes, un champ de saisie de type nombre. L’attribut name nous permet de déterminer dans quel champ de saisie l’utilisateur a saisi les données.

<input type="number" name="steps">

Bouton de soumission

Pour remplir le formulaire, nous avons besoin d’un bouton d’envoi. Un bouton de soumission est une entrée de type submit. Lorsque vous cliquez sur ce bouton, les données du formulaire sont envoyées au serveur (les cartes ESP32 ou ESP8266). L’attribut value spécifie le texte à afficher sur le bouton.

<input type="submit" value="GO!">

Par exemple, si vous sélectionnez le sens des aiguilles d’une montre et entrez 2000 pas, le client fera la requête suivante à l’ESP :

POST /
Host: localhost
direction=CW&steps=2000

L’ESP reçoit cette demande et peut obtenir la direction et le nombre d’étapes à partir du corps de la demande.

Code

Maintenant que vous savez comment créer le formulaire HTML, passons en revue le code Arduino.

Le texte HTML peut être enregistré dans un fichier HTML enregistré sur le système de fichiers ESP32 (SPIFFS) ou il peut être enregistré dans une variable de votre croquis Arduino.

Étant donné que le texte HTML de cet exemple est relativement simple et que nous n’avons pas de fichiers CSS ou JavaScript, nous enregistrerons le texte HTML en tant que variable (index_html).

Voici le code pour créer le serveur Web (insérez vos informations d’identification réseau et le code fonctionnera immédiatement).

/*
  Rui Santos
  Complete project details at https://Raspberryme.com/stepper-motor-esp32-web-server/
  
  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 <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <Stepper.h>

// Stepper Motor Settings
const int stepsPerRevolution = 2048;  // change this to fit the number of steps per revolution
#define IN1 19
#define IN2 18
#define IN3 5
#define IN4 17
Stepper myStepper(stepsPerRevolution, IN1, IN3, IN2, IN4);

// 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);

// Search for parameters in HTTP POST request
const char* PARAM_INPUT_1 = "direction";
const char* PARAM_INPUT_2 = "steps";

// Variables to save values from HTML form
String direction;
String steps;

// Variable to detect whether a new request occurred
bool newRequest = false;

// HTML to build the web page
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
  <title>Stepper Motor</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <h1>Stepper Motor Control</h1>
    <form action="/" method="POST">
      <input type="radio" name="direction" value="CW" checked>
      <label for="CW">Clockwise</label>
      <input type="radio" name="direction" value="CCW">
      <label for="CW">Counterclockwise</label><br><br><br>
      <label for="steps">Number of steps:</label>
      <input type="number" name="steps">
      <input type="submit" value="GO!">
    </form>
</body>
</html>
)rawliteral";

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


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

  initWiFi();

  myStepper.setSpeed(5);

  // Web Server Root URL
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/html", index_html);
  });
  
  // Handle request (form)
  server.on("/", HTTP_POST, [](AsyncWebServerRequest *request) {
    int params = request->params();
    for(int i=0;i<params;i++){
      AsyncWebParameter* p = request->getParam(i);
      if(p->isPost()){
        // HTTP POST input1 value (direction)
        if (p->name() == PARAM_INPUT_1) {
          direction = p->value().c_str();
          Serial.print("Direction set to: ");
          Serial.println(direction);
        }
        // HTTP POST input2 value (steps)
        if (p->name() == PARAM_INPUT_2) {
          steps = p->value().c_str();
          Serial.print("Number of steps set to: ");
          Serial.println(steps);
        }
      }
    }
    request->send(200, "text/html", index_html);
    newRequest = true;
  });

  server.begin();
}

void loop() {
  // Check if there was a new request and move the stepper accordingly
  if (newRequest){
    if (direction == "CW"){
      // Spin the stepper clockwise direction
      myStepper.step(steps.toInt());
    }
    else{
      // Spin the stepper counterclockwise direction
      myStepper.step(-steps.toInt());
    }
    newRequest = false;
  }
}

Afficher le code brut

Comment fonctionne le code

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

Inclure les bibliothèques

Tout d’abord, incluez les bibliothèques requises. Le WiFi, AsyncTCP et ESPAsyncWebServer pour créer le serveur Web et la bibliothèque Stepper pour contrôler le moteur pas à pas.

#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <Stepper.h>

Broches du moteur pas à pas et pas par révolution

Définissez les pas par tour de votre moteur pas à pas – dans notre cas, c’est 2048 :

const int stepsPerRevolution = 2048;  // change this to fit the number of steps per revolution

Définissez les broches d’entrée du moteur. Dans cet exemple, nous nous connectons aux GPIO 19, 18, 5 et 17, mais vous pouvez utiliser tout autre GPIO approprié.

#define IN1 19
#define IN2 18
#define IN3 5
#define IN4 17

Initialisez une instance de la bibliothèque stepper appelée myStepper. Passez en arguments les pas par tour et les broches d’entrée. Dans le cas du moteur pas à pas 28BYJ-48, l’ordre des broches est IN1, IN3, IN2, IN4—il peut être différent pour votre moteur.

Stepper myStepper(stepsPerRevolution, IN1, IN3, IN2, IN4);

Informations d’identification réseau

Insérez vos informations d’identification réseau dans les lignes suivantes.

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

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

AsyncWebServer server(80);

Initialisation des variables

Les variables PARAM_INPUT_1 et PARAM_INPUT_2 seront utilisées pour rechercher des paramètres dans la requête HTTP POST. N’oubliez pas qu’il contient la direction et le nombre de pas.

// Search for parameters in HTTP POST request
const char* PARAM_INPUT_1 = "direction";
const char* PARAM_INPUT_2 = "steps";

Les variables suivantes enregistreront la direction et le nombre de pas.

String direction;
String steps;

La variable newRequest sera utilisée pour vérifier si une nouvelle requête a eu lieu. Ensuite, dans la boucle (), nous allons faire tourner le moteur lorsqu’une nouvelle requête est reçue, lorsque la variable newRequest est vraie.

bool newRequest = false;

Formulaire HTML

La variable index_html enregistre le texte HTML pour construire la page Web – nous avons vu précédemment comment fonctionne le HTML pour construire la page Web avec le formulaire.

// HTML to build the web page
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
  <title>Stepper Motor</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <h1>Stepper Motor Control</h1>
    <form action="/" method="POST">
      <input type="radio" name="direction" value="CW" checked>
      <label for="CW">Clockwise</label>
      <input type="radio" name="direction" value="CCW">
      <label for="CW">Counterclockwise</label><br><br><br>
      <label for="steps">Number of steps:</label>
      <input type="number" name="steps">
      <input type="submit" value="GO!">
    </form>
</body>
</html>
)rawliteral";

initWiFi()

La fonction initWiFi() initialise le WiFi.

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

Dans cet exemple, l’ESP est défini comme une station Wi-Fi (il se connecte à votre routeur). Si vous n’avez pas de routeur à proximité, vous pouvez définir votre carte comme point d’accès. Vous pouvez lire le didacticiel suivant pour savoir comment configurer la carte en tant que point d’accès :

installation()

Dans setup(), initialisez le Serial Monitor.

Serial.begin(115200);

Appelez la fonction initWiFi() pour initialiser le WiFi.

initWiFi();

Et réglez la vitesse du moteur pas à pas en tr/min.

myStepper.setSpeed(5);

Traiter 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(200, "text/html", index_html);
});

Ensuite, vous devez gérer ce qui se passe lorsque l’ESP reçoit une demande POST avec les détails du formulaire.

server.on("/", HTTP_POST, [](AsyncWebServerRequest *request) {

Tout d’abord, nous recherchons des paramètres dans la requête HTTP POST :

int params = request->params();
for(int i=0;i<params;i++){
  AsyncWebParameter* p = request->getParam(i);
  if(p->isPost()){

Si l’un des paramètres est égal à PARAM_INPUT_1, on sait que sa valeur contient le sens du moteur. Si tel est le cas, nous obtenons la valeur de ce paramètre et l’enregistrons dans la variable de direction.

if (p->name() == PARAM_INPUT_1) {
  direction = p->value().c_str();
  Serial.print("Direction set to: ");
  Serial.println(direction);
}

Nous suivons une procédure similaire pour PARAM_INPUT_2, mais nous sauvegardons la valeur dans la variable étapes.

if (p->name() == PARAM_INPUT_2) {
  steps = p->value().c_str();
  Serial.print("Number of steps set to: ");
  Serial.println(steps);
}

Enfin, nous répondons avec le contenu de la page HTML — cela rechargera la page.

request->send(200, "text/html", index_html);

Après cela, nous définissons la variable newRequest sur true, afin qu’elle fasse tourner le moteur dans la boucle().

newRequest = true;

boucle()

Jetons un coup d’œil à la section loop().

Si la variable newRequest est vraie, nous vérifierons quel est le sens de rotation : CW ou CCW. Si c’est CW, nous déplaçons le moteur du nombre de pas enregistrés dans la variable steps en utilisant la méthode step() sur l’objet myStepper.

Pour déplacer le moteur dans le sens inverse des aiguilles d’une montre, il suffit de passer le nombre de pas mais avec un signe moins.

if (direction == "CW"){
  // Spin the stepper clockwise direction
  myStepper.step(steps.toInt());
}
else{
  // Spin the stepper counterclockwise direction
  myStepper.step(-steps.toInt());
}

Après avoir fait tourner le moteur, définissez la variable newRequest sur false, afin qu’elle puisse à nouveau détecter de nouvelles requêtes.

newRequest = false;

Remarque : étant donné que Stepper.h n’est pas une bibliothèque asynchrone, il ne fera rien d’autre tant que le moteur n’aura pas cessé de tourner. Ainsi, si vous essayez de faire de nouvelles requêtes pendant que le moteur tourne, cela ne fonctionnera pas. Nous allons construire un exemple en utilisant le protocole WebSocket qui nous permettra de savoir sur l’interface Web si le moteur tourne ou non – vous pouvez consulter ce tutoriel ici.

Manifestation

Après avoir inséré vos informations d’identification réseau, vous pouvez télécharger le code sur votre carte.

Après le téléchargement, ouvrez le moniteur série à un débit en bauds de 115200 et appuyez sur le bouton RESET intégré. L’adresse IP ESP sera affichée.

Ouvrez un navigateur sur votre réseau local et insérez l’adresse IP ESP. Vous aurez accès au formulaire HTML pour contrôler le moteur pas à pas.

Sélectionnez la direction et entrez un nombre de pas déterminé. Appuyez ensuite sur GO!. Le moteur pas à pas commencera à tourner.

En même temps, vous pouvez voir les valeurs des variables de direction et de pas sur le moniteur série.

2. Styliser le formulaire avec CSS

Dans la section précédente, nous avons créé un formulaire simple sans aucune mise en forme. En ajoutant du CSS à votre projet, votre page HTML aura une bien meilleure apparence.

Lorsque votre code HTML comprend également du CSS, il est plus facile de travailler si vous avez séparé les fichiers HTML et CSS (à part le fichier de croquis Arduino). Ainsi, au lieu d’écrire HTML et CSS dans l’esquisse Arduino, nous allons créer des fichiers HTML et CSS séparés.

Ces fichiers seront ensuite téléchargés sur le système de fichiers ESP32 (SPIFFS) à l’aide du plugin SPIFFS Filesystem Uploader.

Organisation de vos fichiers

Les fichiers que vous souhaitez télécharger sur le système de fichiers ESP doivent être placés dans un dossier appelé data sous le dossier du projet. Nous allons déplacer deux fichiers dans ce dossier :

• index.html pour construire la page Web
• style.css pour styliser la page Web

Vous devez enregistrer les fichiers HTML, CSS et JavaScript dans un dossier appelé data dans le dossier d’esquisse Arduino, comme indiqué dans le diagramme précédent. Nous allons télécharger ces fichiers sur le système de fichiers ESP32 (SPIFFS).

Vous pouvez télécharger tous les fichiers du projet :

Présentation de la page

Pour mieux comprendre le fonctionnement du style de la page Web, examinons de plus près la page Web que nous allons créer.

Fichier HTML

Nous devons apporter quelques modifications au fichier HTML pour faciliter le formatage à l’aide de CSS. Créez un fichier appelé index.html et copiez ce qui suit dans ce fichier.

<!DOCTYPE html>
<html>
<head>
  <title>Stepper Motor</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="https://www.raspberryme.com/stepper-motor-esp32-web-server/style.css">
  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
  <div class="topnav">
    <h1>Stepper Motor Control <i class="fas fa-cogs"></i></h1>
  </div>
  <div class="content">
    <form action="/" method="POST">
      <input type="radio" name="direction" value="CW" checked>
      <label for="CW">Clockwise</label>
      <input type="radio" name="direction" value="CCW">
      <label for="CW">Counterclockwise</label><br><br><br>
      <label for="steps">Number of steps:</label>
      <input type="number" name="steps">
      <input type="submit" value="GO!">
    </form>
  </div>
</body>
</html>

Afficher le code brut

Pour utiliser un fichier CSS pour styliser la page HTML, vous devez référencer la feuille de style dans votre document HTML. Vous devez donc ajouter ce qui suit entre les balises de votre document :

<link rel="stylesheet" type="text/css" href="https://www.raspberryme.com/stepper-motor-esp32-web-server/stylesheet.css">

Cette balise indique au fichier HTML que vous utilisez une feuille de style externe pour formater l’apparence de la page. L’attribut rel spécifie la nature du fichier externe. Dans ce cas, c’est une feuille de style – le fichier CSS – qui sera utilisée pour modifier l’apparence de la page.

L’attribut type est défini sur « text/css » pour indiquer que vous utilisez un fichier CSS pour les styles. L’attribut href indique l’emplacement du fichier ; puisque le fichier est dans le même dossier que le fichier HTML, il vous suffit de référencer le nom du fichier. Sinon, vous devez référencer son chemin de fichier.

Vous avez maintenant votre feuille de style connectée à votre document HTML.

Pour utiliser les icônes fontawesome dans la page Web comme les rouages, nous devons ajouter la ligne suivante.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Nous avons créé une balise

avec la classe topnav pour faciliter le formatage du premier titre.

<div class="topnav">
  <h1>Stepper Motor Control <i class="fas fa-cogs"></i></h1>
</div>

Ensuite, nous incluons le formulaire dans une balise

avec le contenu de la classe. Cela facilitera le formatage de la zone occupée par le formulaire.

<div class="content">

Fichier CSS

Créez un fichier appelé style.css avec le contenu suivant pour formater le formulaire.

html {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 1.8rem;
  color: white;
}

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

body {
  margin: 0;
}

.content {
  padding: 20px;
  max-width: max-content;
  margin: 0 auto;
}

form{
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

input[type=number], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #034078;
  border: none;
  padding: 14px 20px;
  text-align: center;
  font-size: 20px;
  border-radius: 4px;
  transition-duration: 0.4s;
  width: 100%;
  color: white;
  cursor: pointer;
}

input[type=submit]:hover {
    background-color: #1282A2;
}

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid #999;
  transition: 0.2s all linear;
  margin-right: 5px;
  position: relative;
  top: 4px;
}

input[type="radio"]:checked{
  border: 6px solid #1282A2;
}

Afficher le code brut

Le sélecteur html inclut les styles qui s’appliquent à l’ensemble de la page HTML. Dans ce cas, nous définissons la police.

html {
  font-family: Arial, Helvetica, sans-serif;
}

Le sélecteur h1 inclut les styles pour l’en-tête 1. Dans notre cas, l’en-tête 1 inclut le texte « Stepper Motor Control ». Cela définit la taille et la couleur de la police du texte.

h1 {
  font-size: 1.8rem;
  color: white;
}

Pour sélectionner le

avec la classe topnav, utilisez un point (.) avant le nom de la classe, comme ceci :

.topnav {

Définissez la couleur d’arrière-plan .topnav à l’aide de la propriété background-color. Vous pouvez choisir n’importe quelle couleur de fond. Nous utilisons #0A1128. Le texte est aligné au centre. De plus, définissez la propriété overflow sur hidden comme ceci :

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

Il est un peu difficile d’expliquer ce que fait la propriété overflow. La meilleure façon de le comprendre est de rendre votre page Web avec et sans cette propriété pour repérer les différences.

La marge du (le conteneur qui inclut toute la page HTML) est définie sur 0 afin qu’elle occupe tout l’espace de la fenêtre du navigateur.

body {
  margin: 0;
}

Les lignes suivantes stylisent la div de contenu (qui contient le formulaire) : padding et margin. De plus, définissez sa max-width sur la largeur maximale de son contenu (le formulaire lui-même).

.content {
  padding: 20px;
  max-width: max-content;
  margin: 0 auto;
}

Le formulaire est un conteneur avec des bordures rondes (propriété border-radius) et une couleur de fond gris clair (propriété background-color). Nous ajoutons également du rembourrage.

form{
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

Ensuite, nous devons styliser chaque élément individuel du formulaire. Pour sélectionner le numéro d’entrée, nous utilisons l’entrée[type=number] sélecteur.

input[type=number], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

Noter la [attribute=value] selector sélectionne les éléments avec l’attribut et la valeur spécifiés. Dans ce cas, nous sélectionnons les éléments d’entrée de type numéro.

Pour styliser le bouton d’envoi, utilisez l’entrée[type=submit] sélecteur.

input[type=submit] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #034078;
  border: none;
  padding: 14px 20px;
  text-align: center;
  font-size: 20px;
  border-radius: 4px;
  transition-duration: 0.4s;
  width: 100%;
  color: white;
  cursor: pointer;
}

Pour que le bouton change de couleur lorsque vous passez votre souris dessus, vous pouvez utiliser le sélecteur :hover.

input[type=submit]:hover {
  background-color: #1282A2;
}

Enfin, pour sélectionner les boutons radio, utilisez l’entrée[type=”radio”] sélecteur.

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid #999;
  transition: 0.2s all linear;
  margin-right: 5px;
  position: relative;
  top: 4px;
 }

Pour styliser le bouton radio sélectionné, vous pouvez utiliser le sélecteur :checked.

input[type="radio"]:checked{
  border: 6px solid #1282A2;
}

Les éléments de formulaire ont été stylisés sur la base d’un exemple fourni par le site Web W3Schools. Si vous souhaitez mieux comprendre son fonctionnement, Tu peux le vérifier ici.

Esquisse Arduino

Dans ce projet, les fichiers HTML et CSS sont enregistrés dans le système de fichiers ESP32 (SPIFFS). Nous devons donc apporter quelques modifications au croquis.

/*
  Rui Santos
  Complete project details at https://Raspberryme.com/stepper-motor-esp32-web-server/
  
  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 <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include "SPIFFS.h"
#include <Arduino_JSON.h>
#include <Stepper.h>

const int stepsPerRevolution = 2048;  // change this to fit the number of steps per revolution
#define IN1 19
#define IN2 18
#define IN3 5
#define IN4 17
Stepper myStepper(stepsPerRevolution, IN1, IN3, IN2, IN4);

// 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);

// Search for parameter in HTTP POST request
const char* PARAM_INPUT_1 = "direction";
const char* PARAM_INPUT_2 = "steps";

//Variables to save values from HTML form
String direction;
String steps;

bool newRequest = false;

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

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

void setup() {
  // Serial port for debugging purposes

  Serial.begin(115200);
  initWiFi();
  initSPIFFS();
  myStepper.setSpeed(5);


  // Web Server Root URL
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/index.html", "text/html");
  });
  
  server.serveStatic("/", SPIFFS, "/");

  server.on("/", HTTP_POST, [](AsyncWebServerRequest *request) {
    int params = request->params();
    for(int i=0;i<params;i++){
      AsyncWebParameter* p = request->getParam(i);
      if(p->isPost()){
        // HTTP POST input1 value
        if (p->name() == PARAM_INPUT_1) {
          direction = p->value().c_str();
          Serial.print("Direction set to: ");
          Serial.println(direction);
        }
        // HTTP POST input2 value
        if (p->name() == PARAM_INPUT_2) {
          steps = p->value().c_str();
          Serial.print("Number of steps set to: ");
          Serial.println(steps);
          // Write file to save value
        }
        newRequest = true;
        //Serial.printf("POST[%s]: %s\n", p->name().c_str(), p->value().c_str());
      }
    }
    request->send(SPIFFS, "/index.html", "text/html");
  });

  server.begin();
}

void loop() {
  if (newRequest){
    if (direction == "CW"){
      myStepper.step(steps.toInt());
      Serial.print("CW");
    }
    else{
      myStepper.step(-steps.toInt());
    }
    newRequest = false;
  }
}

Afficher le code brut

Voyons ensemble les modifications que vous devez apporter.

Tout d’abord, vous devez inclure la bibliothèque SPIFFS.h.

#include "SPIFFS.h"

Ensuite, vous devez initialiser SPIFFS. Nous avons créé une fonction appelée initSPIFFS() pour cela.

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

Ensuite, vous devez appeler cette fonction dans setup() avant d’initialiser le serveur Web.

initSPIFFS();

Ensuite, pour traiter les requêtes, vous devez indiquer que votre fichier HTML est enregistré dans SPIFFS, comme suit :

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(SPIFFS, "/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é dans le même répertoire (SPIFFS). Ainsi, nous pouvons simplement ajouter la ligne suivante pour servir des fichiers statiques dans un répertoire à la demande de l’URL root. Il servira le fichier CSS automatiquement.

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

Télécharger le code et les fichiers

Avant de télécharger, vous pouvez utiliser le lien suivant pour :

Téléchargez tous les fichiers du projet Arduino

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.

Ensuite, téléchargez le code sur votre carte ESP32. Assurez-vous d’avoir sélectionné la bonne carte et le bon port COM. Assurez-vous également d’avoir ajouté vos informations d’identification réseau.

Après avoir téléchargé le code, vous devez télécharger les fichiers. Accédez à Outils> ESP32 Data Sketch Upload et attendez que les fichiers soient téléchargés.

Lorsque tout est téléchargé avec succès, ouvrez le moniteur série à un débit en bauds de 115200. Appuyez sur le bouton ESP32 EN/RST, et il devrait imprimer l’adresse IP ESP32.

Manifestation

Ouvrez un navigateur sur votre réseau local et collez l’adresse IP ESP32. Vous aurez accès au formulaire HTML pour contrôler le moteur pas à pas. Cela fonctionne de la même manière que l’exemple de la section précédente, mais avec une meilleure apparence.

Conclusion

Ce tutoriel est déjà assez long. Nous inclurons donc la troisième partie de ce tutoriel dans une publication séparée. Dans cette troisième partie, l’ESP32 et le client communiquent à l’aide du protocole WebSocket et la page Web indique si le moteur tourne ou s’arrête. Nous avons également inclus une animation avec des engrenages tournant dans le même sens que le moteur.

Passez à la PARTIE 3 Serveur Web ESP32 : contrôle du moteur pas à pas (WebSocket). Aperçu de la troisième partie dans la vidéo ci-dessous.

Si vous souhaitez en savoir plus sur les protocoles de communication HTML, CSS, JavaScript et client-serveur pour créer vos serveurs Web ESP32 et ESP8266 à partir de zéro, assurez-vous de consulter notre eBook :

Merci d’avoir lu.

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

• 
  Carte D'extension de Développement ESP32-IO, Carte de Test de Programmation de Téléchargement de Code D'apprentissage de Module pour les Techniciens D'ingénieurs

  Les développeurs peuvent connecter des périphériques en fonction de leurs besoins, ce qui est pratique et rapide. Lorsque vous utilisez la carte de développement pour le développement et le débogage, les en-têtes standard des deux côtés peuvent rendre votre opération plus concise et pratique. La carte d'extension est également livrée avec un interrupteur à cadran pour contrôler l'interrupteur d'alimentation. Fabriqué à partir d'un matériau PCB de haute qualité, ce qui le rend durable et très fiable. Il convient au fonctionnement, à l'apprentissage et au développement des étudiants, ingénieurs, techniciens, ouvriers d'usine, bricoleurs, passionnés d'électronique, etc. Nous nous efforçons de vous fournir un produit de la plus haute qualité et la meilleure expérience client, si vous n'êtes pas entièrement satisfait, n'hésitez pas à nous contacter.
  9,99 €