L’ESP8266 peut être programmé comme un Arduino classique, mais son principal intérêt est sa connexion Wi-Fi, qui lui permet de publier des données sur un serveur ou un tableau de bord en ligne. (ThingSpeak, Freeboard.io), ou pour créer facilement des objets connectés contrôlables depuis un serveur domotique ou une application mobile (développée avec Blynk ou Cayenne par exemple). Dans ce tutoriel, nous allons apprendre à programmer le ESP8266 pour qu’il se comporte comme un Serveur Web. C'est-à-dire que nous pouvons interagir avec le programme, le GPIO… depuis une interface Web accessible depuis un navigateur Web.

Avant de commencer, il est nécessaire de vérifier que toutes les bibliothèques nécessaires sont installées.

http://arduino.esp8266.com/stable/package_esp8266com_index.json

Vous pouvez afficher (par curiosité) les cartes gérées par la bibliothèque ESP8266 et coller l’URL précédente dans un navigateur. En janvier 2017 (version 2.3.0), les cartes suivantes sont gérées:

• Module générique ESP8266
• Olimex MOD-WIFI-ESP8266 (-DEV)
• NodeMCU 0.9 (module ESP-12)
• NodeMCU 1.0 (module ESP-12E)
• Adafruit HUZZAH ESP8266 (ESP-12)
• ESPresso Lite 1.0
• ESPresso Lite 2.0
• Phoenix 1.0
• Phoenix 2.0
• Chose SparkFun
• SweetPea ESP-210
• WeMos D1
• WeMos D1 mini
• ESPino (module ESP-12)
• ESPino (module WROOM-02)
• WifInfo
• ESPDuino

Aller au responsable du conseil et chercher esp8266, puis cliquez sur installer.

En même temps que les cartes, toutes les bibliothèques nécessaires et de nombreux exemples sont installés. Si les exemples ne sont pas visibles dans le menu Fichier -> Exemples -> Exemples pour WeMos D1, quittez et redémarrez l'IDE Arduino.

Nous allons suivre différentes étapes pour comprendre comment créer un serveur Web sur un ESP8266. Ouvrez l'exemple WiFiWebServer.

Il faut au moins la bibliothèque ESP8266WiFi.h pour créer un serveur Web. Comme toutes les bibliothèques, il est nécessaire de beaucoup approfondir pour connaître les méthodes disponibles. Voici un aperçu pour mieux comprendre ce qui peut être fait. Le code source de la bibliothèque est disponible ici. Cette librairie est une adaptation de toutes les librairies développées pour Arduino. Vous trouverez également des infos ici

• WiFiClient
  • uint8_t status ()
  • int connect (IPAddress ip, uint16_t port)
  • int connect (const char * host, port uint16_t)
  • size_t write (uint8_t)
  • size_t write (const uint8_t * buf, taille_t taille)
  • size_t write_P (PGM_P buf, taille_t taille)
  • size_t write (Flux et flux)
  • int disponible ()
  • read (uint8_t * buf, size_t size)
  • int peek ()
  • size_t peekBytes (uint8_t * tampon, taille size_t)
  • size_t peekBytes (char * buffer, taille_t longueur)
  • void flush ()
  • void stop ()
  • uint8_t connecté ()
  • IPAddress remoteIP ()
  • uint16_t remotePort ()
  • IPAddress localIP ()
  • uint16_t localPort ()
  • bool getNoDelay ()
  • void setNoDelay (bool nodelay)
  • void setLocalPortStart (port uint16_t)
  • statique vide stopAll ();
  • statique vide stopAllExcept (WiFiClient * c)
• WiFiServer
  • WiFiServer (adresse IPAddress, port uint16_t)
  • WiFiServer (port uint16_t)
  • WiFiClient disponible (uint8_t * status = NULL)
  • bool hasClient ()
  • void begin ()
  • void setNoDelay (bool nodelay)
  • bool getNoDelay ()
  • taille virtuelle tt write (uint8_t)
  • uint8_t status ()
  • void close ()
  • void stop ()
• WiFiUDP
• WiFiClientSecure

#comprendre 
const char * ssid = "your-ssid";
const char * password = "votre-mot de passe";

Nous créons une instance, un objet qui contiendra le serveur Web. Nous communiquerons avec elle sur le port 80, le port traditionnel des requêtes HTTP utilisées par les navigateurs Internet.

Serveur WiFiServer (80);

Installer

void setup() 
  // Ouverture du port série en 115200 baud pour envoyer des messages de debug à l'ide par exemple
  // Port série ouvert
  Serial.begin (115200);
  délai (10);

  // prépare GPIO2 (sortie)
  pinMode (2, OUTPUT);
  écriture numérique (2, 0);
  
  // Connexion au réseau WiFi
  Serial.println ();
  Serial.println ();
  Serial.print ("Connexion à");
  Serial.println (ssid);
  
  // On se connecte à un réseau WiFi avec le SSID et le mot de passe precedemment configure
  // Connexion au réseau WiFi
  WiFi.begin (ssid, mot de passe);
  
  // On ne fait qu'une boucle avec la connexion etablie.
  // il faudrait améliorer la partie pour un fonctionnement sur batterie en cas d'abscence du réseau
  // on va vider la batterie!
  // Vous devez améliorer cela. Vous risquez de vider votre batterie
  while (WiFi.status ()! = WL_CONNECTED) 
    retard (500);
    Serial.print (".");
  
  Serial.println ("");
  Serial.println ("WiFi connected");
  
  // connexion OK, sur le serveur web démarré // démarrer le serveur
  server.begin ();
  Serial.println ("Serveur démarré");

  // On indique sur le port serie l'adresse IP de l'ESP pour trouver facilement / Imprimer l'adresse IP
  Serial.println (WiFi.localIP ());

Qu'est-ce qui se passe dans la boucle?

Nous ne faisons quelque chose que si un client est connecté, c'est-à-dire que nous faisons une requête HTTP sur l'ESP8266 à partir d'un navigateur Internet.

Client WiFiClient = server.available ();
si (! client) 
  revenir;

Lorsqu'un client se connecte, cela est indiqué sur le port série.

Serial.println ("nouveau client");
while (! client.available ()) 
  retarder (1);

Nous récupérons la requête HTTP, ici l'URL saisie dans le navigateur simplement. Le contenu de la requête HTTP est envoyé au port série. Le tampon est vidé en utilisant la méthode de vidage.

String req = client.readStringUntil (' r');
Serial.println (req);
client.flush ();

La requête HTTP est vérifiée pour savoir quoi faire. La méthode la plus simple consiste à transmettre des commandes à ESP8266 sous forme de / gpio / state (0, 1 ou on / off) commande. Nous allons juste faire un test sur une chaîne de caractères avec la commande indexOf sur la variable req. Ce type de stratégie convient aux petits projets, mais il peut rapidement devenir une source d'erreur avec l'empilement de if, else if.

int val;
if (req.indexOf ("/ gpio / 0")! = -1)
  val = 0;
else if (req.indexOf ("/ gpio / 1")! = -1)
  val = 1;
autre 
  Serial.println ("demande invalide");
  client.stop ();
  revenir;

Nous mettons à jour le GPIO et vidons le tampon

digitalWrite (2, val);
client.flush ();

Nous créons maintenant une page HTML contenant le statut du GPIO. Ceci est une chaîne de texte contenant le code HTML de la page. Le code de la page, le statut du GPIO

String s = "HTTP / 1.1 200 OK  r  nContenu-Type: text / html  r  n  r  n r  n r  nGPIO is now ";
s + = (val)? "haut": "bas";
s + = " n ";

Nous publions cette page au client avec la commande d'impression, très facile!

client.print (s);

Maintenant, vous pouvez contrôler à distance tout matériel connecté au GPIO (un relais, une led, un moteur, un servo…) en utilisant une simple requête HTTP. Par exemple, vous pouvez simplement exécuter une commande à partir d’un logiciel de domotique. Voici deux exemples, le premier pour Domoticz, le second pour Jeedom.

Maintenant, vous voudrez certainement créer une petite interface pour vos projets ESP8266. Pour cela, nous devons connaître quelques bases du HTML. Nous n’allons pas aller très loin dans l’apprentissage du HTML, nous devons simplement apprendre les éléments importants pour bien démarrer et avoir un projet concret. Si vous avez besoin de plus d’éléments d’interface, je vous recommande w3scholls, qui est une référence dans l’apprentissage HTML.

Dans un projet ESP8266, nous pouvons créer des pages HTML en dynamique, autrement dit, nous construisons une chaîne de texte contenant le code de la page qui sera ensuite affichée. C’est ce que nous allons faire. Mais l'ESP8266 est aussi capable de fonctionner comme un vrai site web, c'est-à-dire que nous pouvons installer sur des pages flash HTML, du code javascript, des feuilles de style CSS… Nous n'irons pas jusqu'à présent dans ce premier tutoriel.

Je propose de créer une petite station météo pour avoir des données à mettre à jour régulièrement et créer un bouton pour activer / désactiver une sortie GPIO (juste une Led, par exemple). J'ai utilisé le matériel suivant

Câblage

Voici un tableau de marquage des broches et de correspondance entre Arduino et ESP8266.

Nous commençons par déclarer les bibliothèques nécessaires. N'oubliez pas d'installer les bibliothèques à partir du gestionnaire de bibliothèques (DHT et BMP085).

#comprendre 
#comprendre 
#comprendre 
#comprendre 
#comprendre 

#define ssid "ssid" // SSID WiFi
#define password "password" // mot de passe WiFi
#define DHTTYPE DHT22 // Type DHT (DHT11, DHT22)
#define DHTPIN D4 // Broche du DHT / Broche DHT
#define LEDPIN D3 // Led
float t = 0;
float h = 0;
float p = 0;
String etatLed = "OFF";

DHT DHT (DHTPIN, DHTTYPE);
Adafruit_BMP085 bmp;
Serveur ESP8266WebServer (80);

String getPage () 
  String page = "";
  page + = "";
  page + = "";
  page + = "
ESP8266 Demo
";
  page + = "
DHT22
";
  page + = "
Température : ";
  page + = t;
  page + = "° C
";
  page + = "
Humidite: ";
  page + = h;
  page + = "%
BMP180
";
  page + = "
Pression atmosphérique: ";
  page + = p;
  page + = "mbar
";
  page + = "
GPIO
";
  page + = "
";
  page + = "
D3 (etat: ";
  page + = etatLed;
  page + = ")SUR";
  page + = "DE
";
  page + = "";
  page + = "

diyprojects.io
";
  page + = "";
  retourner la page;

void handleRoot () 
  if (server.hasArg ("LED")) 
    handleSubmit ();
   autre 
    server.send (200, "text / html", getPage ());
  

void handleSubmit () 
  // Actualiser le GPIO / Mettre à jour le GPIO
  String LEDValue;
  LEDValue = server.arg ("LED");
  Serial.println ("Set GPIO"); Serial.print (LEDValue);
  if (LEDValue == "1") 
    digitalWrite (LEDPIN, 1);
    etatLed = "On";
    server.send (200, "text / html", getPage ());
   else if (LEDValue == "0") 
    digitalWrite (LEDPIN, 0);
    etatLed = "Off";
    server.send (200, "text / html", getPage ());
   autre 
    Serial.println ("Err Led Value");
  

void setup() 
  Serial.begin (115200);
  // Initialisation du BMP180 / Init BMP180
  if (! bmp.begin ()) 
    Serial.println ("BMP180 KO!");
    tandis que (1);
   autre 
    Serial.println ("BMP180 OK");
  
  
  WiFi.begin (ssid, mot de passe);
  // Attente de connexion au réseau WiFi / Attente de connexion
  while (WiFi.status ()! = WL_CONNECTED) 
    retard (500); Serial.print (".");
  
  // Connexion WiFi établie / La connexion WiFi est OK
  Serial.println ("");
  Serial.print ("Connecté à"); Serial.println (ssid);
  Serial.print ("adresse IP:"); Serial.println (WiFi.localIP ());

  // Sur la fonction qui gère la première page / lien vers la fonction qui gère la page de lancement
  server.on ("/", handleRoot);

  server.begin ();
  Serial.println ("serveur HTTP démarré");

boucle vide () 
  server.handleClient ();
  t = dht.readTemperature ();
  h = dht.readHumidity ();
  p = bmp.readPressure () / 100.0F;
  délai (1000);

#comprendre 
#comprendre 
#comprendre 
#comprendre 
#comprendre 

#define ssid "xx" // SSID WiFi
#define password "xxxxxx" // mot de passe WiFi
#define DHTTYPE DHT22 // Type DHT (DHT11, DHT22)
#define DHTPIN D4 // Broche du DHT / Broche DHT
#define LEDPIN D3 // Led
float t = 0;
float h = 0;
float p = 0;
String etatLed = "OFF";

// Création des objets / create Objects
DHT DHT (DHTPIN, DHTTYPE);
Adafruit_BMP085 bmp;
Serveur ESP8266WebServer (80);

String getPage () 
  String page = "";
  page + = "";
  page + = "";
  page + = "
ESP8266 Demo
";
  page + = "
DHT22
";
  page + = "
Température : ";
  page + = t;
  page + = "° C
";
  page + = "
Humidite: ";
  page + = h;
  page + = "%
BMP180
";
  page + = "
Pression atmosphérique: ";
  page + = p;
  page + = "mbar
";
  page + = "
GPIO
";
  page + = "
";
  page + = "
D3 (etat: ";
  page + = etatLed;
  page + = ")";
  page + = "SUR";
  page + = "DE
";
  page + = "";
  page + = "

diyprojects.io
";
  page + = "";
  retourner la page;

void handleRoot () 
  if (server.hasArg ("LED")) 
    handleSubmit ();
   autre 
    server.send (200, "text / html", getPage ());
  


void handleSubmit () 
  // Actualiser le GPIO / Mettre à jour le GPIO
  String LEDValue;
  LEDValue = server.arg ("LED");
  Serial.println ("Set GPIO"); Serial.print (LEDValue);
  if (LEDValue == "1") 
    digitalWrite (LEDPIN, 1);
    etatLed = "On";
    server.send (200, "text / html", getPage ());
   else if (LEDValue == "0") 
    digitalWrite (LEDPIN, 0);
    etatLed = "Off";
    server.send (200, "text / html", getPage ());
   autre 
    Serial.println ("Err Led Value");
  


void setup() 
  Serial.begin (115200);
  // Initialisation du BMP180 / Init BMP180
  if (! bmp.begin ()) 
    Serial.println ("BMP180 KO!");
    tandis que (1);
   autre 
    Serial.println ("BMP180 OK");
  
  
  pinMode (LEDPIN, OUTPUT);
  WiFi.begin (ssid, mot de passe);
  // Attente de connexion au réseau WiFi / Attente de connexion
  while (WiFi.status ()! = WL_CONNECTED) 
    retard (500); Serial.print (".");
  
  // Connexion WiFi établie / La connexion WiFi est OK
  Serial.println ("");
  Serial.print ("Connecté à"); Serial.println (ssid);
  Serial.print ("adresse IP:"); Serial.println (WiFi.localIP ());

  // Sur la fonction qui gère la première page / lien vers la fonction qui gère la page de lancement
  server.on ("/", handleRoot);

  server.begin ();
  Serial.println ("serveur HTTP démarré");
  


boucle vide () 
  server.handleClient ();
  t = dht.readTemperature ();
  h = dht.readHumidity ();
  p = bmp.readPressure () / 100.0F;
  délai (1000);