Construire un serveur Web ESP8266 – Code et schémas (NodeMCU)

Construire un serveur Web ESP8266 - Code et schémas (NodeMCU)

Ce didacticiel est un guide étape par étape qui montre comment créer un serveur Web ESP8266 autonome qui contrôle deux sorties (deux LED). Ce serveur Web ESP8266 NodeMCU est réactif pour les mobiles et il est accessible avec n’importe quel appareil doté d’un navigateur sur votre réseau local.

Construire un serveur Web ESP8266 - Code et schémas (NodeMCU)

Si vous souhaitez en savoir plus sur le module ESP8266, lisez d’abord mon guide de démarrage pour le module WiFi ESP8266.

Ce didacticiel couvre deux méthodes différentes pour créer le serveur Web :

  • Partie 1 : Créer un serveur Web à l’aide de l’IDE Arduino
  • Partie 2 : Créer un serveur Web à l’aide du micrologiciel NodeMCU

PARTIE 1 : CRÉER UN SERVEUR WEB À L’AIDE D’ARDUINO IDE

Cette partie vous montre comment créer un serveur Web pour contrôler deux sorties à l’aide de l’IDE Arduino. Vous pouvez utiliser cette méthode pour créer un serveur Web différent pour répondre à vos besoins.

Ce tutoriel est disponible en format vidéo (voir ci-dessous) et en format écrit (continuez à lire cette page).

YouTube video

Préparer l’IDE Arduino

1. Téléchargez et installer l’IDE Arduino sur votre système d’exploitation (certaines anciennes versions ne fonctionneront pas).

2. Ensuite, vous devez installer le module complémentaire ESP8266 pour l’IDE Arduino. Pour cela, allez dans Fichier > Préférences.

3. Entrez http://arduino.esp8266.com/stable/package_esp8266com_index.json dans le champ « Additional Board Manager URLs » comme indiqué dans la figure ci-dessous. Ensuite, cliquez sur le bouton « OK ».

Installer les URL du gestionnaire de cartes supplémentaires ESP8266 Boards Arduino IDE

4. Allez dans Outils > Tableau > Gestionnaire de tableaux…

Installer les cartes ESP8266 Gestionnaire de cartes IDE Arduino

5. Faites défiler vers le bas, sélectionnez le menu de la carte ESP8266 et installez « esp8266 by ESP8266 Community », comme indiqué dans la figure ci-dessous.

Installer les cartes ESP8266 Arduino IDE

6. Allez dans Outils > Carte et choisissez votre carte ESP8266. Ensuite, rouvrez votre IDE Arduino.

Code

Copiez le code suivant dans votre IDE Arduino, mais ne le téléchargez pas encore. Vous devez apporter quelques modifications pour que cela fonctionne pour vous.

/*********
  Rui Santos
  Complete project details at https://www.raspberryme.com  
*********/

// Load Wi-Fi library
#include <ESP8266WiFi.h>

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

// Set web server port number to 80
WiFiServer server(80);

// Variable to store the HTTP request
String header;

// Auxiliar variables to store the current output state
String output5State = "off";
String output4State = "off";

// Assign output variables to GPIO pins
const int output5 = 5;
const int output4 = 4;

// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0; 
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;

void setup() {
  Serial.begin(115200);
  // Initialize the output variables as outputs
  pinMode(output5, OUTPUT);
  pinMode(output4, OUTPUT);
  // Set outputs to LOW
  digitalWrite(output5, LOW);
  digitalWrite(output4, LOW);

  // Connect to Wi-Fi network with SSID and password
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  if (client) {                             // If a new client connects,
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    currentTime = millis();
    previousTime = currentTime;
    while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
      currentTime = millis();         
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        header += c;
        if (c == '\n') {                    // if the byte is a newline character
          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();
            
            // turns the GPIOs on and off
            if (header.indexOf("GET /5/on") >= 0) {
              Serial.println("GPIO 5 on");
              output5State = "on";
              digitalWrite(output5, HIGH);
            } else if (header.indexOf("GET /5/off") >= 0) {
              Serial.println("GPIO 5 off");
              output5State = "off";
              digitalWrite(output5, LOW);
            } else if (header.indexOf("GET /4/on") >= 0) {
              Serial.println("GPIO 4 on");
              output4State = "on";
              digitalWrite(output4, HIGH);
            } else if (header.indexOf("GET /4/off") >= 0) {
              Serial.println("GPIO 4 off");
              output4State = "off";
              digitalWrite(output4, LOW);
            }
            
            // Display the HTML web page
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #77878A;}</style></head>");
            
            // Web Page Heading
            client.println("<body><h1>ESP8266 Web Server</h1>");
            
            // Display current state, and ON/OFF buttons for GPIO 5  
            client.println("<p>GPIO 5 - State " + output5State + "</p>");
            // If the output5State is off, it displays the ON button       
            if (output5State=="off") {
              client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/5/off\"><button class=\"button button2\">OFF</button></a></p>");
            } 
               
            // Display current state, and ON/OFF buttons for GPIO 4  
            client.println("<p>GPIO 4 - State " + output4State + "</p>");
            // If the output4State is off, it displays the ON button       
            if (output4State=="off") {
              client.println("<p><a href=\"/4/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/4/off\"><button class=\"button button2\">OFF</button></a></p>");
            }
            client.println("</body></html>");
            
            // The HTTP response ends with another blank line
            client.println();
            // Break out of the while loop
            break;
          } else { // if you got a newline, then clear currentLine
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

Afficher le code brut

Vous devez modifier les deux variables suivantes avec vos informations d’identification réseau, afin que votre ESP8266 puisse établir une connexion avec votre routeur.

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

Télécharger le croquis

Téléchargement de l’esquisse sur l’ESP-12E

Si vous utilisez un kit ESP-12E NodeMCU, le téléchargement de l’esquisse est très simple, car il dispose d’un programmeur intégré. Branchez votre carte à votre ordinateur. Assurez-vous d’avoir sélectionné la bonne carte et le bon port COM.

Ensuite, cliquez sur le bouton Télécharger dans l’IDE Arduino et attendez quelques secondes jusqu’à ce que le message « Téléchargement terminé » s’affiche. dans le coin inférieur gauche.

Télécharger le code du serveur Web Sketch Arduino IDE ESP8266 NodeMCU

Téléchargement de l’esquisse sur l’ESP-01

Le téléchargement de code sur l’ESP-01 nécessite l’établissement d’une communication série entre votre ESP8266 et un programmeur FTDI, comme indiqué dans le schéma ci-dessous.

ESP8266 ESP-01 Programmateur FTDI Flashing Firmware Circuit

Remarque : vous pouvez également utiliser un Adaptateur série ESP8266-01qui est plus facile à utiliser et moins sujet aux erreurs.

Le tableau suivant montre les connexions que vous devez établir entre l’ESP8266 et le programmateur FTDI.

ESP8266 Programmeur FTDI
RX TX
TX RX
CH_PD 3.3V
GPIO 0 Terre
VCC 3.3V
Terre Terre

Si vous avez un tout nouveau programmeur FTDI, vous devrez probablement installer les pilotes FTDI sur votre PC Windows. Visite ce site pour les pilotes officiels. (Si le port COM est grisé dans votre IDE Arduino, c’est probablement parce que vous n’avez pas installé les pilotes).

Ensuite, il vous suffit de connecter le programmeur FTDI à votre ordinateur et de télécharger le code sur l’ESP8266.

Schémas

Pour construire le circuit de ce tutoriel, vous avez besoin des pièces suivantes :

Pièces requises :

Si vous utilisez ESP-01vous avez également besoin d’un Programmeur FTDI ou un Adaptateur série.

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

1680567976 244 Construire un serveur Web ESP8266 Code et schemas NodeMCU

Connectez deux LED à votre ESP8266 comme indiqué dans le diagramme schématique suivant – avec une LED connectée au GPIO 4 (D2) et une autre au GPIO 5 (D1).

ESP8266 NodeMCU Schematic Control LED Serveur Web

Si vous utilisez ESP-01…

Si vous utilisez l’ESP8266-01, utilisez le diagramme schématique suivant comme référence, mais vous devez modifier l’affectation des GPIO dans le code (en GPIO 2 et GPIO 0).

Serveur Web ESP-01 Schema Control LEDs

Test du serveur Web

Maintenant, vous pouvez télécharger le code et cela fonctionnera immédiatement. N’oubliez pas de vérifier si vous avez sélectionné la bonne carte et le bon port COM, sinon vous obtiendrez une erreur lors de la tentative de téléchargement. Ouvrez le moniteur série à un débit en bauds de 115 200.

Trouver l’adresse IP ESP

Appuyez sur le bouton ESP8266 RESET, et il affichera l’adresse IP ESP sur le moniteur série

ESP8266 NodeMCU Web Server LED Contrôle GPIOs Arduino IDE Adresse IP Moniteur série

Copiez cette adresse IP, car vous en avez besoin pour accéder au serveur Web.

Accéder au serveur Web

Ouvrez votre navigateur, tapez l’adresse IP ESP et vous verrez la page suivante. Cette page est envoyée par l’ESP8266 lorsque vous faites une requête sur l’adresse IP de l’ESP.

ESP8266 NodeMCU Web Server LED Control GPIOs Arduino IDE

Si vous regardez le moniteur série, 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 – ces champs sont appelés champs d’en-tête HTTP et définissent les paramètres de fonctionnement d’une transaction HTTP.

ESP8266 NodeMCU Web Server LED Control GPIOs Serial Monitor Arduino IDE IP Address

Test du serveur Web

Testons le serveur Web. Cliquez sur le bouton pour activer GPIO 5. L’ESP reçoit une requête sur l’URL /5/on et allume la LED 5.

ESP8266 NodeMCU Web Server LED Control GPIOs Serial Monitor Arduino IDE

L’état du voyant est également mis à jour sur la page Web.

ESP8266 NodeMCU Serveur Web LED Control GPIOs

Testez le bouton GPIO 4 et vérifiez qu’il fonctionne de la même manière.

Comment fonctionne le code

Maintenant, regardons de plus près le code pour voir comment il fonctionne, afin que vous puissiez le modifier pour répondre à vos besoins.

La première chose que vous devez faire est d’inclure la bibliothèque ESP8266WiFi.

// Load Wi-Fi library
#include <ESP8266WiFi.h>

Comme mentionné précédemment, vous devez insérer votre ssid et votre mot de passe dans les lignes suivantes à l’intérieur des guillemets doubles.

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

Ensuite, vous configurez votre serveur Web sur le port 80.

// Set web server port number to 80
WiFiServer server(80);

La ligne suivante crée une variable pour stocker l’en-tête de la requête HTTP :

String header;

Ensuite, vous créez des variables auxiliaires pour stocker l’état actuel de vos sorties. Si vous souhaitez ajouter plus de sorties et enregistrer son état, vous devez créer plus de variables.

// Auxiliar variables to store the current output state
String output5State = "off";
String output4State = "off";

Vous devez également affecter un GPIO à chacune de vos sorties. Ici, nous utilisons GPIO 4 et GPIO 5. Vous pouvez utiliser tout autre GPIO approprié.

// Assign output variables to GPIO pins
const int output5 = 5;
const int output4 = 4;

installation()

Passons maintenant au setup(). La fonction setup() ne s’exécute qu’une seule fois lors du premier démarrage de votre ESP. Tout d’abord, nous commençons une communication série à un débit en bauds de 115200 à des fins de débogage.

Serial.begin(115200);

Vous définissez également vos GPIO comme OUTPUT et les réglez sur LOW.

// Initialize the output variables as outputs
pinMode(output5, OUTPUT);
pinMode(output4, OUTPUT);
// Set outputs to LOW
digitalWrite(output5, LOW);
digitalWrite(output4, LOW);

Les lignes suivantes commencent la connexion Wi-Fi avec WiFi.begin (ssid, mot de passe), attendez une connexion réussie et imprimez l’adresse IP ESP dans le moniteur série.

// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
 delay(500);
 Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();

boucle()

Dans la boucle (), nous programmons ce qui se passe lorsqu’un nouveau client établit une connexion avec le serveur Web.

L’ESP écoute toujours les clients entrants avec cette ligne :

WiFiClient client = server.available(); // Listen for incoming clients

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 restera connecté. Nous vous déconseillons de modifier la partie suivante du code à moins que vous ne sachiez exactement ce que vous faites.

if (client) { // If a new client connects,
 Serial.println("New Client."); // print a message out in the serial port
 String currentLine = ""; // make a String to hold incoming data from the client
 while (client.connected()) { // loop while the client's connected
 if (client.available()) { // if there's bytes to read from the client,
  char c = client.read(); // read a byte, then
  Serial.write(c); // print it out the serial monitor
  header += c;
  if (c == '\n') { // if the byte is a newline character
   // if the current line is blank, you got two newline characters in a row.
   // that's the end of the client HTTP request, so send a response:
   if (currentLine.length() == 0) {
    // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
    // and a content-type so the client knows what's coming, then a blank line:
    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é enfoncé dans votre page Web et contrôle les sorties en conséquence. Comme nous l’avons vu précédemment, nous faisons une requête sur différentes URL en fonction du bouton sur lequel nous appuyons.

// turns the GPIOs on and off
if (header.indexOf("GET /5/on") >= 0) {
  Serial.println("GPIO 5 on");
  output5State = "on";
  digitalWrite(output5, HIGH);
} else if (header.indexOf("GET /5/off") >= 0) {
  Serial.println("GPIO 5 off");
  output5State = "off";
  digitalWrite(output5, LOW);
} else if (header.indexOf("GET /4/on") >= 0) {
  Serial.println("GPIO 4 on");
  output4State = "on";
  digitalWrite(output4, HIGH);
} else if (header.indexOf("GET /4/off") >= 0) {
  Serial.println("GPIO 4 off");
  output4State = "off";
  digitalWrite(output4, LOW);
}

Par exemple, si vous avez appuyé sur le bouton GPIO 5 ON, l’URL devient l’adresse IP ESP suivie de /5/ON, et nous recevons ces informations sur l’en-tête HTTP. Ainsi, nous pouvons vérifier si l’en-tête contient l’expression GET /5/on.

S’il contient, le code imprime un message sur le moniteur série, change la variable output5State sur on et allume la LED.

Cela fonctionne de la même manière pour les autres boutons. Donc, si vous souhaitez 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 générer la page Web. L’ESP8266 enverra une réponse à votre navigateur avec du texte HTML pour afficher la page Web.

La page Web est envoyée au client à l’aide de la fonction client.println(). Vous devez entrer ce que vous voulez envoyer au client comme argument.

Le premier texte que vous devez toujours envoyer est la ligne suivante, qui indique que nous envoyons du HTML.

<!DOCTYPE html><html>

Ensuite, la ligne suivante rend la page Web réactive dans n’importe quel navigateur Web.

client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");

Le suivant est utilisé pour empêcher les requêtes liées au favicon – Vous n’avez pas à vous soucier de cette ligne.

client.println("<link rel=\"icon\" href=\"data:,\">");

Styliser la page Web

Ensuite, nous avons quelques CSS pour styliser les boutons et l’apparence de la page Web. Nous choisissons la police Helvetica, définissons le contenu à afficher en bloc et aligné au centre.

client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");

Nous stylisons nos boutons avec certaines propriétés pour définir la couleur, la taille, la bordure, etc…

client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");

Ensuite, nous définissons le style d’un deuxième bouton, avec toutes les propriétés du bouton que nous avons définies précédemment, mais avec une couleur différente. Ce sera le style du bouton d’arrêt.

client.println(".button2 {background-color: #77878A;}</style></head>");

Définition du premier titre de la page Web

Dans la ligne suivante, vous définissez le premier titre de votre page Web, vous pouvez modifier ce texte en ce que vous voulez.

// Web Page Title
client.println("<h1>ESP8266 Web Server</h1>");

Affichage des boutons et de l’état correspondant

Ensuite, vous écrivez un paragraphe pour afficher l’état actuel du GPIO 5. Comme vous pouvez le voir, nous utilisons la variable output5State, de sorte que l’état se met à jour instantanément lorsque cette variable change.

client.println("<p>GPIO 5 - State " + output5State + "</p>");

Ensuite, on affiche le bouton marche ou arrêt, selon l’état actuel du GPIO.

if (output5State=="off") {
 client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>");
} else {
 client.println("<p><a href=\"/5/off\"><button class=\"button button2\">OFF</button></a></p>");
}

Nous utilisons la même procédure pour GPIO 4.

Fermeture de la connexion

Enfin, lorsque la réponse se termine, nous effaçons la variable d’en-tête et arrêtons la connexion avec le client avec client.stop().

// Clear the header variable
header = "";
// Close the connection
client.stop();

Aller plus loin

Maintenant que vous savez comment fonctionne le code, vous pouvez modifier le code pour ajouter plus de sorties ou modifier votre page Web. Pour modifier votre page Web, vous devrez peut-être connaître le HTML et le CSS.

Au lieu de contrôler deux LED, vous pouvez contrôler un relais pour contrôler pratiquement tous les appareils électroniques.

Pour créer un serveur Web pour afficher les lectures des capteurs, vous pouvez lire les didacticiels suivants :

Alternativement, si vous souhaitez programmer votre ESP8266 en MicroPython, vous pouvez lire ce tutoriel : ESP32/ESP8266 MicroPython Web Server – Control Outputs

Si vous aimez l’ESP8266, assurez-vous de consulter notre cours sur la domotique avec l’ESP8266.

PARTIE 2 : CRÉER UN SERVEUR WEB À L’AIDE DU FIRMWARE NODEMCU

Cette partie vous montre comment créer un serveur Web pour contrôler deux sorties à l’aide du micrologiciel NodeMCU et du langage de programmation LUA. Vous pouvez utiliser cette méthode pour créer un serveur Web différent pour répondre à vos besoins.

ESP8266 Créer un serveur Web à l'aide du micrologiciel NodeMCU

Tout d’abord, regardez la vidéo de démonstration ci-dessous

YouTube video

Pourquoi flasher votre module ESP8266 avec NodeMCU ?

NodeMCU est un firmware qui permet de programmer les modules ESP8266 avec le script LUA. La programmation de l’ESP8266 avec LUA à l’aide du firmware NodeMCU est très similaire à la façon dont vous programmez votre Arduino. Avec seulement quelques lignes de code, vous pouvez établir une connexion WiFi, contrôler les GPIO ESP8266, transformer votre ESP8266 en serveur Web et bien plus encore.

Téléchargement de NodeMCU Flasher pour Windows

Après avoir câblé votre circuit, vous devez télécharger le clignotant NodeMCU. Il s’agit d’un fichier .exe que vous pouvez télécharger en utilisant l’un des liens suivants :

Vous pouvez cliquer ici pour trouver toutes les informations sur le clignotant NodeMCU.

Flasher votre ESP8266

Si vous utilisez un ESP8266-12, il vous suffit de brancher l’ESP sur votre ordinateur. Si vous utilisez un ESP-01, vous avez besoin d’un programmateur FTDI pour le connecter à votre ordinateur. Pour établir une communication série entre votre ESP8266 et un programmeur FTDI comme indiqué dans le schéma ci-dessous.

ESP8266 ESP-01 Programmateur FTDI Flashing Firmware Circuit

Ouvrez le clignotant que vous venez de télécharger et une fenêtre devrait apparaître (comme illustré dans la figure suivante).

Logiciel de clignotant ESP8266 NodeMCU

Appuyez sur le bouton « Flash » et le processus de clignotement devrait démarrer immédiatement (vous devrez peut-être modifier certains paramètres de l’onglet Avancé). Une fois ce processus terminé, un cercle vert avec une icône de vérification devrait apparaître.

Schémas

Pour construire le circuit, vous avez besoin des pièces suivantes :

Pièces requises :

Si vous utilisez ESP-01vous avez également besoin d’un Programmeur FTDI.

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

1680567976 244 Construire un serveur Web ESP8266 Code et schemas NodeMCU

Si vous utilisez ESP-01…

Si vous utilisez l’ESP8266-01, utilisez le diagramme schématique suivant comme référence.

Serveur Web ESP-01 Schema Control LEDs

Télécharger le code

Je recommande d’utiliser le programme ESPlorer créé par 4refr0nt pour créer et enregistrer des fichiers LUA dans votre ESP8266. Suivez ces instructions pour télécharger et installer ESPlorer :

  1. Cliquez ici pour télécharger ESPlorer
  2. Décompressez ce dossier
  3. Allez dans le dossier dist (voici le chemin : ESPlorer-master\ESPlorer\dist)
  4. Exécutez ESPlorer.jar. C’est un programme JAVA, vous avez donc besoin que JAVA soit installé sur votre ordinateur.
  5. Ouvrez ESPlorer
ESPlorer ESP8266 NodeMCU Mise en route

Vous devriez voir une fenêtre similaire à la figure précédente, suivez ces instructions pour télécharger un fichier LUA :

  1. Connectez votre programmateur FTDI à votre ordinateur
  2. Sélectionnez votre port de programmation FTDI
  3. Appuyez sur Ouvrir/Fermer
  4. Sélectionnez l’onglet NodeMCU+MicroPtyhon
  5. Créez un nouveau fichier appelé init.lua
  6. Appuyez sur Enregistrer dans ESP

Tout ce dont vous devez vous soucier ou modifier est mis en surbrillance dans la zone rouge.

Code de téléchargement ESPlorer sur la carte ESP8266 NodeMCU

Code

Téléchargez le code suivant dans votre ESP8266 à l’aide du logiciel précédent. Votre fichier doit s’appeler « init.lua ». Vous pouvez cliquer ici pour télécharger le fichier.

wifi.setmode(wifi.STATION)
wifi.sta.config("YOUR_NETWORK_NAME","YOUR_NETWORK_PASSWORD")
print(wifi.sta.getip())
led1 = 3
led2 = 4
gpio.mode(led1, gpio.OUTPUT)
gpio.mode(led2, gpio.OUTPUT)
srv=net.createServer(net.TCP)
srv:listen(80,function(conn)
    conn:on("receive", function(client,request)
        local buf = "";
        local _, _, method, path, vars = string.find(request, "([A-Z]+) (.+)?(.+) HTTP");
        if(method == nil)then
            _, _, method, path = string.find(request, "([A-Z]+) (.+) HTTP");
        end
        local _GET = {}
        if (vars ~= nil)then
            for k, v in string.gmatch(vars, "(%w+)=(%w+)&*") do
                _GET[k] = v
            end
        end
        buf = buf.."<h1> ESP8266 Web Server</h1>";
        buf = buf.."<p>GPIO0 <a href=\"?pin=ON1\"><button>ON</button></a>&nbsp;<a href=\"?pin=OFF1\"><button>OFF</button></a></p>";
        buf = buf.."<p>GPIO2 <a href=\"?pin=ON2\"><button>ON</button></a>&nbsp;<a href=\"?pin=OFF2\"><button>OFF</button></a></p>";
        local _on,_off = "",""
        if(_GET.pin == "ON1")then
              gpio.write(led1, gpio.HIGH);
        elseif(_GET.pin == "OFF1")then
              gpio.write(led1, gpio.LOW);
        elseif(_GET.pin == "ON2")then
              gpio.write(led2, gpio.HIGH);
        elseif(_GET.pin == "OFF2")then
              gpio.write(led2, gpio.LOW);
        end
        client:send(buf);
        client:close();
        collectgarbage();
    end)
end)

Afficher le code brut

N’oubliez pas de remplacer les détails de votre Station WiFi dans ce code ci-dessus (Nom de réseau et Mot de passe).

Accéder à votre serveur Web

Lorsque votre ESP8266 redémarre, il imprime dans votre moniteur série l’adresse IP de votre ESP8266. Si vous tapez votre adresse IP ESP8266 dans votre navigateur Web, vous pouvez accéder à votre serveur Web.

LED de sorties de contrôle du serveur Web ESP8266 NodeMCU

Nos projets ESP8266 les plus populaires

Si vous aimez l’ESP8266, vous aimerez aussi :

Avez-vous des questions? Laissez un commentaire ci-dessous!

Merci d’avoir lu. Si vous aimez cet article, vous aimerez probablement mes prochains, alors s’il vous plaît, soutenez-moi en vous abonnant à mon blog.

Mis à jour le 6 août 2019

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

YouTube video