Serveur Web ESP32 – IDE Arduino – Bien choisir son serveur d impression

Dans ce projet, vous allez créer un serveur Web autonome avec un ESP32 qui contrôle les sorties (deux voyants) à l’aide de l’environnement de programmation Arduino IDE. Le serveur Web est réactif pour les mobiles et peut être accédé avec n'importe quel appareil en tant que navigateur sur le réseau local. Nous allons vous montrer comment créer le serveur Web et comment le code fonctionne pas à pas.

Si vous souhaitez en savoir plus sur l'ESP32, consultez le Guide de démarrage avec ESP32. Regarder le didacticiel vidéo Ce tutoriel est disponible en format vidéo (voir ci-dessous) et en format écrit (continuez à lire cette page).

Aperçu du projet Avant de passer directement au projet, il est important de définir les tâches de notre serveur Web afin de pouvoir suivre plus facilement les étapes suivantes.

Le serveur Web que vous allez créer contrôle deux voyants connectés à l’ESP32. GPIO 26 et GPIO 27; Vous pouvez accéder au serveur Web ESP32 en saisissant l'adresse IP ESP32 dans un navigateur du réseau local. En cliquant sur les boutons de votre serveur Web, vous pouvez changer instantanément l’état de chaque voyant.

Ceci est juste un exemple simple pour illustrer comment construire un serveur Web qui contrôle les sorties. L'idée est de remplacer ces voyants par un relais ou tout autre composant électronique de votre choix. Installation de la carte ESP32 dans Arduino IDE Il existe un add-on pour l’IDE ​​Arduino qui vous permet de programmer l’ESP32 à l’aide de l’IDE ​​Arduino et de son langage de programmation. Suivez l’un des didacticiels suivants pour préparer votre IDE Arduino: Pièces requises Pour ce tutoriel, vous aurez besoin des éléments suivants:

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

Schématique Commencez par construire le circuit. Connectez deux voyants à l’ESP32 comme indiqué dans le schéma suivant: un voyant connecté à GPIO 26et l'autre à GPIO 27. Remarque: Nous utilisons la carte ESP32 DEVKIT DOIT à 36 broches. Avant d’assembler le circuit, assurez-vous de vérifier le brochage de la carte que vous utilisez.

Code serveur Web ESP32 Nous fournissons ici le code qui crée le serveur Web ESP32. Copiez le code suivant sur votre IDE Arduino, mais ne le téléchargez pas encore. Vous devez apporter des modifications pour que cela fonctionne pour vous. / *********   Rui Santos   Détails complets du projet sur https://randomnerdtutorials.com ********* /

// Charger la bibliothèque Wi-Fi #comprendre

// Remplacez par vos identifiants réseau const char * ssid = ""; const char * password = "";

// Définir le numéro de port du serveur Web sur 80 Serveur WiFiServer (80);

// Variable pour stocker la requête HTTP En-tête de chaîne;

// Variables auxiliaires pour stocker l'état actuel de la sortie String output26State = "off"; String output27State = "off";

// Assigne les variables de sortie aux broches GPIO const int output26 = 26; const int output27 = 27;

void setup()   Serial.begin (115200);   // Initialise les variables de sortie en tant que sorties   pinMode (output26, OUTPUT);   pinMode (output27, OUTPUT);   // Définir les sorties sur BAS   digitalWrite (output26, LOW);   digitalWrite (output27, LOW);

  // Se connecter au réseau Wi-Fi avec SSID et mot de passe   Serial.print ("Connexion à");   Serial.println (ssid);   WiFi.begin (ssid, mot de passe);   while (WiFi.status ()! = WL_CONNECTED)     retard (500);     Serial.print (".");      // Imprimer l'adresse IP locale et démarrer le serveur Web   Serial.println ("");   Serial.println ("WiFi connecté.");   Serial.println ("adresse IP:");   Serial.println (WiFi.localIP ());   server.begin ();

boucle vide () {   Client WiFiClient = server.available (); // écoute les clients entrants

  if (client) {// Si un nouveau client se connecte,     Serial.println ("Nouveau client."); // affiche un message sur le port série     String currentLine = ""; // crée une chaîne pour contenir les données entrantes du client     while (client.connected ()) {// boucle alors que le client est connecté       if (client.available ()) // s'il y a des octets à lire du client,         char c = client.read (); // lit un octet, puis         Serial.write (c); // affiche le moniteur série         en-tête + = c;         if (c == ' n') // si l'octet est un caractère de nouvelle ligne           // si la ligne en cours est vide, vous avez deux caractères de nouvelle ligne à la suite.           // c'est la fin de la requête HTTP du client, alors envoyez une réponse:           if (currentLine.length () == 0)             // Les en-têtes HTTP commencent toujours par un code de réponse (par exemple, HTTP / 1.1 200 OK)             // et un type de contenu pour que le client sache ce qui va arriver, puis une ligne vide:             client.println ("HTTP / 1.1 200 OK");             client.println ("Content-type: text / html");             client.println ("Connection: close");             client.println ();                          // allume et éteint les GPIO             if (header.indexOf ("GET / 26 / on")>> = 0)               Serial.println ("GPIO 26 sur");               output26State = "on";               digitalWrite (output26, HIGH);              else if (header.indexOf ("GET / 26 / off")> = 0)               Serial.println ("GPIO 26 off");               output26State = "off";               digitalWrite (output26, LOW);              else if (header.indexOf ("GET / 27 / on")>> 0)               Serial.println ("GPIO 27 sur");               output27State = "on";               digitalWrite (output27, HIGH);              else if (header.indexOf ("GET / 27 / off")> = 0)               Serial.println ("GPIO 27 off");               output27State = "off";               digitalWrite (output27, LOW);                                       // Afficher la page Web HTML             client.println ("");             client.println ("");             client.println ("");             // CSS pour styler les boutons on / off             // N'hésitez pas à modifier les attributs de couleur de fond et de taille de police pour les adapter à vos préférences             client.println ("");                          // En-tête de page Web             client.println ("Serveur Web ESP32");                          // Affiche l'état actuel et les boutons ON / OFF pour GPIO 26             client.println ("GPIO 26 - Etat "+ output26State +"");             // Si output26State est désactivé, il affiche le bouton ON             if (output26State == "off")               client.println ("SUR");              autre               client.println ("DE");                                          // Affiche l'état actuel et les boutons ON / OFF pour GPIO 27             client.println ("GPIO 27 - Etat "+ output27State +"");             // Si output27State est désactivé, il affiche le bouton ON             if (output27State == "off")               client.println ("SUR");              autre               client.println ("DE");                          client.println ("");                          // La réponse HTTP se termine par une autre ligne vide             client.println ();             // Sortir de la boucle while             Pause;            else // si vous avez une nouvelle ligne, alors effacez currentLine             currentLine = "";                     else if (c! = ' r') // si vous avez autre chose qu'un caractere de retour chariot,           currentLine + = c; // l'ajouter à la fin de la currentLine                     }     // Efface la variable d'en-tête     en-tête = "";     // ferme la connexion     client.stop ();     Serial.println ("Client déconnecté.");     Serial.println ("");   } }

Voir le code brut Définition de vos identifiants réseau Vous devez modifier les lignes suivantes avec vos informations d'identification réseau: SSID et mot de passe. Le code est bien commenté sur l'endroit où vous devez apporter les modifications. // Remplacez par vos identifiants réseau const char * ssid = "REPLACE_WITH_YOUR_SSID"; const char * password = "REPLACE_WITH_YOUR_PASSWORD"; Télécharger le code Maintenant, vous pouvez télécharger le code et le serveur Web fonctionnera immédiatement. Suivez les étapes suivantes pour télécharger le code sur l'ESP32: 1) Branchez votre carte ESP32 sur votre ordinateur; 2) Dans l'IDE Arduino, sélectionnez votre carte dans Outils > Planche (dans notre cas, nous utilisons la carte ESP32 DEVKIT DOIT);

3) Sélectionnez le port COM dans Outils > Port.

4) Appuyez sur le bouton Télécharger dans l’IDE ​​Arduino et attendez quelques secondes pendant que le code se compile et se télécharge sur votre forum.

5) Attendez le "Terminé le téléchargement" message.

Recherche de l'adresse IP de l'ESP Après avoir chargé le code, ouvrez le moniteur série à une vitesse de transmission de 115200 bauds.

Appuyez sur la touche ESP32 EN (réinitialisation). L'ESP32 se connecte au Wi-Fi et transmet l'adresse IP ESP sur le moniteur série. Copiez cette adresse IP, car vous en avez besoin pour accéder au serveur Web ESP32.

Accéder au serveur Web Pour accéder au serveur Web, ouvrez votre navigateur, collez l'adresse IP de l'ESP32 et la page suivante s'affichera. Dans notre cas c'est 192.168.1.135.

Si vous jetez un coup d’œil à Serial Monitor, vous pouvez voir ce qui se passe en arrière-plan. L'ESP reçoit une requête HTTP d'un nouveau client (dans ce cas, votre navigateur).

Vous pouvez également voir d'autres informations sur la requête HTTP. Test du serveur Web Vous pouvez maintenant tester si votre serveur Web fonctionne correctement. Cliquez sur les boutons pour contrôler les voyants.

En même temps, vous pouvez jeter un coup d’œil sur le moniteur série pour voir ce qui se passe en arrière-plan. Par exemple, lorsque vous cliquez sur le bouton pour activer GPIO 26 ON, l’ESP32 reçoit une demande sur le / 26 / sur URL

Lorsque l'ESP32 reçoit cette demande, il allume le voyant attaché à GPIO 26 ON et met à jour son état sur la page Web.

Le bouton pour GPIO 27 fonctionne de manière similaire. Vérifiez qu'il fonctionne correctement. Comment fonctionne le code Dans cette section, nous examinerons le code de plus près pour voir comment cela fonctionne. La première chose à faire est d'inclure la bibliothèque WiFi. #comprendre Comme mentionné précédemment, vous devez insérer votre identifiant SSID et votre mot de passe dans les lignes suivantes, à l'intérieur des guillemets. const char * ssid = ""; const char * password = ""; Ensuite, vous configurez votre serveur Web sur le port 80. Serveur WiFiServer (80); La ligne suivante crée une variable pour stocker l'en-tête de la requête HTTP: En-tête de chaîne; Ensuite, vous créez des variables auxiliaires pour stocker l’état actuel de vos sorties. Si vous souhaitez ajouter plus de sorties et sauvegarder son état, vous devez créer plus de variables. String output26State = "off"; String output27State = "off"; Vous devez également affecter un GPIO à chacune de vos sorties. Ici nous utilisons GPIO 26 et GPIO 27. Vous pouvez utiliser n’importe quel autre GPIO approprié. const int output26 = 26; const int output27 = 27; installer() Maintenant, allons dans le installer(). Premièrement, nous commençons une communication série à un débit de 115200 bauds à des fins de débogage. Serial.begin (115200); Vous définissez également vos GPIO en tant que OUTPUT et les définissez sur LOW. // Initialise les variables de sortie en tant que sorties pinMode (output26, OUTPUT); pinMode (output27, OUTPUT);

// Définir les sorties sur BAS digitalWrite (output26, LOW); digitalWrite (output27, LOW); Les lignes suivantes commencent la connexion Wi-Fi avec WiFi.begin (ssid, mot de passe), attendez que la connexion soit établie et imprimez l’adresse IP ESP dans le moniteur série. // Se connecter au réseau Wi-Fi avec SSID et mot de passe Serial.print ("Connexion à"); Serial.println (ssid); WiFi.begin (ssid, mot de passe); while (WiFi.status ()! = WL_CONNECTED)   retard (500);   Serial.print (".");

// Imprimer l'adresse IP locale et démarrer le serveur Web Serial.println (""); Serial.println ("WiFi connecté."); Serial.println ("adresse IP:"); Serial.println (WiFi.localIP ()); server.begin (); boucle() dans le boucle() nous programmons ce qui se passe lorsqu'un nouveau client établit une connexion avec le serveur Web. L'ESP32 est toujours à l'écoute des clients entrants avec la ligne suivante: Client WiFiClient = server.available (); // écoute les clients entrants Lorsqu'une demande est reçue d'un client, nous enregistrons les données entrantes. La boucle while qui suit sera exécutée tant que le client reste connecté. Nous ne recommandons pas de changer la partie suivante du code à moins que vous ne sachiez exactement ce que vous faites. if (client) {// Si un nouveau client se connecte,   Serial.println ("Nouveau client."); // affiche un message sur le port série   String currentLine = ""; // crée une chaîne pour contenir les données entrantes du client   while (client.connected ()) {// boucle alors que le client est connecté     if (client.available ()) {// s'il y a des octets à lire du client,       char c = client.read (); // lit un octet, puis       Serial.write (c); // affiche le moniteur série       en-tête + = c;       if (c == ' n') {// si l'octet est un caractère de nouvelle ligne       // si la ligne en cours est vide, vous avez deux caractères de nouvelle ligne à la suite.       / c'est la fin de la requête HTTP du client, alors envoyez une réponse:         if (currentLine.length () == 0) {         // Les en-têtes HTTP commencent toujours par un code de réponse (par exemple, HTTP / 1.1 200 OK)         // et un type de contenu pour que le client sache ce qui va arriver, puis une ligne vide:           client.println ("HTTP / 1.1 200 OK");           client.println ("Content-type: text / html");           client.println ("Connection: close");           client.println (); La section suivante des instructions if et else vérifie quel bouton a été utilisé dans votre page Web et contrôle les sorties en conséquence. Comme nous l’avons vu précédemment, nous faisons une demande sur différentes URL en fonction du bouton enfoncé. // allume et éteint les GPIO if (header.indexOf ("GET / 26 / on")>> = 0) Serial.println ("GPIO 26 sur"); output26State = "on";   digitalWrite (output26, HIGH); else if (header.indexOf ("GET / 26 / off")> = 0)   Serial.println ("GPIO 26 off");   output26State = "off";   digitalWrite (output26, LOW); else if (header.indexOf ("GET / 27 / on")>> 0)   Serial.println ("GPIO 27 sur");   output27State = "on";   digitalWrite (output27, HIGH); else if (header.indexOf ("GET / 27 / off")> = 0)   Serial.println ("GPIO 27 off");   output27State = "off";   digitalWrite (output27, LOW);

Par exemple, si vous appuyez sur le bouton GPIO 26 ON, l’ESP32 reçoit une demande sur le / 26 / ON URL (nous pouvons voir que cette information sur l'en-tête HTTP sur le moniteur de série). Donc, nous pouvons vérifier si l'en-tête contient l'expression GET / 26 / on. Si elle contient, on change le état de sortie26 variable sur ON et l’ESP32 allume le voyant. Cela fonctionne de la même manière pour les autres boutons. Donc, si vous voulez ajouter plus de sorties, vous devez modifier cette partie du code pour les inclure. Affichage de la page Web HTML La prochaine chose que vous devez faire est de créer la page Web. L'ESP32 enverra une réponse à votre navigateur avec du code HTML pour créer la page Web. La page Web est envoyée au client en utilisant cette expression client.println (). Vous devez entrer ce que vous voulez envoyer au client sous forme d'argument. La première chose à envoyer est toujours la ligne suivante, qui indique que nous envoyons du HTML.

Ensuite, la ligne suivante rend la page Web réactive dans n’importe quel navigateur Web. client.println (""); Et ce qui suit est utilisé pour empêcher les requêtes sur le favicon. – Vous n’avez pas à vous soucier de cette ligne. client.println (""); Styliser la page Web Ensuite, nous avons du texte CSS pour styliser les boutons et l’apparence de la page Web. Nous choisissons la police Helvetica, définissons le contenu à afficher sous forme de bloc et aligné au centre. client.println (""); Définition du premier titre de la page Web Dans la ligne suivante, vous pouvez définir le premier en-tête de votre page Web. Ici nous avons "Serveur Web ESP32”, Mais vous pouvez changer ce texte comme bon vous semble. // En-tête de page Web client.println ("Serveur Web ESP32"); Affichage des boutons et de l'état correspondant Ensuite, vous écrivez un paragraphe pour afficher le GPIO 26 état actuel. Comme vous pouvez le voir, nous utilisons le état de sortie26 variable, de sorte que l’état se mette à jour instantanément lorsque cette variable change. client.println ("GPIO 26 - Etat "+ output26State +""); Ensuite, nous affichons le bouton d'activation ou de désactivation, en fonction de l'état actuel du GPIO. Si l'état actuel du GPIO est désactivé, nous affichons le bouton ON, sinon nous affichons le bouton OFF. if (output26State == "off")   client.println ("SUR"); autre   client.println ("DE");

Nous utilisons la même procédure pour GPIO 27. Fermer la connexion Enfin, lorsque la réponse se termine, nous effaçons la entête variable, et arrêter la connexion avec le client avec client.stop (). // Efface la variable d'en-tête en-tête = ""; // ferme la connexion client.stop (); Emballer Dans ce tutoriel, nous vous avons montré comment créer un serveur Web avec l’ESP32. Nous vous avons montré un exemple simple permettant de contrôler deux voyants, mais l’idée est de remplacer ces voyants par un relais ou toute autre sortie que vous souhaitez contrôler. Pour plus de projets avec ESP32, consultez les tutoriels suivants: Voici un extrait de notre cours: Apprenez l’ESP32 avec Arduino IDE. Si vous aimez ESP32 et que vous souhaitez en savoir plus, nous vous recommandons de vous inscrire au cours Learn ESP32 with Arduino IDE.

Click to rate this post! [Total: 0 Average: 0]