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 de créer facilement des objets connectés qui peuvent être contrôlés à partir d'un serveur domotique ou application mobile (développé avec Blynk ou Cayenne par exemple).

Dans ce didacticiel, nous allons apprendre à programmer l'ESP8266 pour qu'il se comporte comme un serveur Web. C'est-à-dire que l'on peut interagir avec le programme, le GPIO … à partir d'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.

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

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

Vous pouvez regarder (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 ESP8266 générique
• 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
• SparkFun Thing
• SweetPea ESP-210
• WeMos D1
• WeMos D1 mini
• ESPino (module ESP-12)
• ESPino (module WROOM-02)
• WifInfo
• ESPDuino

Allez au gestionnaire de cartes et regarde esp8266, puis cliquez sur installer.

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

Nous allons aller étape par étape pour comprendre comment créer un serveur web sur un ESP8266. Ouvrez l'exemple WiFiWebServer.

Nous avons besoin au moins de la bibliothèque ESP8266WiFi.h pour créer un serveur Web. Comme toutes les librairies, il faut creuser beaucoup pour découvrir les méthodes disponibles, voici un petit aperçu pour mieux comprendre ce que vous pouvez en faire. le code source de la bibliothèque est disponible ici. Cette bibliothèque est une adaptation de toutes les bibliothèques développées pour l'Arduino. Vous pouvez également trouver beaucoup d'informations ici

• WiFiClient
  • uint8_t status ()
  • int connect (IPAddress ip, port uint16_t)
  • int connect (const char * host, uint16_t port)
  • taille_t écrire (uint8_t)
  • taille_t écrire (const uint8_t * buf, taille_t taille)
  • size_t write_P (PGM_P buf, size_t size)
  • taille_t écrire (Stream & stream)
  • int disponible ()
  • lire (uint8_t * buf, size_t size)
  • int peek ()
  • size_t peekBytes (tampon uint8_t *, taille size_t)
  • size_t peekBytes (char * buffer, size_t length)
  • 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 ();
  • vide statique stopAllExcept (WiFiClient * c)
• WiFiServer
  • WiFiServer (adresse IPAddress, port uint16_t)
  • WiFiServer (port uint16_t)
  • WiFiClient disponible (statut uint8_t * = NULL)
  • bool hasClient ()
  • void begin ()
  • void setNoDelay (bool nodelay)
  • bool getNoDelay ()
  • écriture taille_t virtuelle (uint8_t)
  • uint8_t status ()
  • void close ()
  • void stop ()
• WiFiUDP
• WiFiClientSecure

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

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

Serveur WiFiServer (80);

La boucle de configuration.

void setup () 
// Ouverture du port série en 115200 bauds pour envoyer des messages de débogage à l'IDE par exemple
Serial.begin (115200);
retard (10);

// prépare GPIO2 (sortie)
pinMode (2, SORTIE);
digitalWrite (2, 0);

// Se connecter au réseau WiFi
Serial.println ();
Serial.println ();
Serial.print ("Connexion à");
Serial.println (ssid);

// Nous nous connectons à un réseau WiFi avec le SSID et le mot de passe précédemment configurés
WiFi.begin (ssid, mot de passe);

// Nous ne quittons la boucle que lorsque la connexion a été établie.
// Cette partie doit être améliorée pour le fonctionnement sur batterie car en l'absence de réseau
// on va vider la batterie!
while (WiFi.status ()! = WL_CONNECTED) 
retard (500);
Serial.print (".");

Serial.println ("");
Serial.println ("WiFi connecté");

// connexion OK, on ​​démarre le serveur web // Démarrer le serveur
server.begin ();
Serial.println ("Serveur démarré");

// On indique sur le port série l'adresse IP de l'ESP pour la retrouver facilement / Imprimer l'adresse IP
Serial.println (WiFi.localIP ());

Que se passe-t-il dans la boucle de 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, il est indiqué sur le port série

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

On obtient la requête HTTP, ici l'URL saisie simplement dans le navigateur. Le contenu de la requête HTTP est envoyé au port série. On vide le buffer avec la méthode affleurer.

String req = client.readStringUntil (& # 39;  r & # 39;);
Serial.println (req);
client.flush ();

Nous recherchons dans la requête HTTP ce qu'il faut faire. La méthode la plus simple consiste à passer des commandes à l'ESP8266 sous la forme d'une commande du type / gpio / desire_state (0, 1 ou marche / arrêt). 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;
sinon if (req.indexOf ("/ gpio / 1")! = -1)
val = 1;
autre 
Serial.println ("demande non valide");
client.stop ();
revenir;

Nous mettons à jour l'état GPIO et vider le tampon

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

Nous créons maintenant une page HTML qui contient l'état du GPIO. Il s'agit d'une chaîne de texte qui contient le code HTML de la page. On insère dans le code de la page, l'état du GPIO

Chaîne s = "HTTP / 1.1 200 OK  r  nContenu-Type: texte / html  r  n  r  n r  n r  nGPIO est maintenant ";
s + = (val)? "haut": "bas";
s + = "ne pas";

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

client.print (s);

Voilà, vous pouvez désormais contrôler à distance tout matériel connecté au GPIO (un relais, une LED, un moteur, un servomoteur, etc.) à l'aide d'une simple requête HTTP. Vous pouvez par exemple exécuter très simplement une commande à partir d'un logiciel domotique. Voici deux exemples, le premier pour Domoticz, le second pour Jeedom.

Maintenant, vous aimeriez certainement pouvoir faire une petite interface pour vos projets ESP8266. Pour cela, nous devons connaître quelques notions de base du HTML. Nous n'irons pas très loin dans l'apprentissage du HTML, il suffit d'apprendre les éléments importants pour débuter et avoir un projet fonctionnel. Si vous avez besoin de plus d'éléments d'interface, je recommande w3schools qui est une référence dans l'apprentissage du HTML. Le site est en anglais mais il est très clair et très facile d'accès.

Dans un projet ESP8266, nous pouvons créer des pages HTML dynamiques, c'est-à-dire que nous construisons une chaîne de texte qui contient le code de la page que nous afficherons ensuite. C'est ce que nous allons faire. Mais l'ESP8266 est également capable de fonctionner comme un vrai site web, c'est-à-dire qu'on peut installer sur des pages HTML à mémoire flash, du code javascript, des feuilles de style CSS … On n'ira pas aussi loin dans ce premier tutoriel.

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

Voici un tableau de localisation et de correspondance des broches 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" // WiFi SSID
#define password "password" // mot de passe WiFi
#define DHTTYPE DHT22 // type DHT (DHT11, DHT22)
#define DHTPIN D4 // Broche DHT / Broche DHT
#define LEDPIN D3 // Led
flotteur t = 0;
flotteur h = 0;
flotteur p = 0;
String etatLed = "OFF";

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

String getPage () 
Page de chaîne = "";
page + = "";
page + = "";
page + = "
ESP8266 Demo
";
page + = "
DHT22
";
page + = "
Température : ";
page + = t;
page + = "° C
";
page + = "
Humidité : ";
page + = h;
page + = "%
BMP180
";
page + = "
Pression atmosphérique : ";
page + = p;
page + = "mbar
";
page + = "
GPIO
";
page + = "
";
page + = "
D3 (indiquer: ";
page + = etatLed;
page + = ")NOUS";
page + = "DE
";
page + = "";
page + = "

www.projetsdiy.fr
";
page + = "";
page de retour;

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

void handleSubmit () 
// Mettre à jour le GPIO / Mettre à jour le GPIO
String LEDValue;
LEDValue = server.arg ("LED");
Serial.println ("Définir 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);
// Attendre la connexion au réseau WiFi / Attendre la connexion
while (WiFi.status ()! = WL_CONNECTED) 
retard (500); Serial.print (".");

// Connexion WiFi établie / connexion WiFi OK
Serial.println ("");
Serial.print ("Connecté à"); Serial.println (ssid);
Serial.print ("adresse IP:"); Serial.println (WiFi.localIP ());

// On branche 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 ("Le serveur HTTP a démarré");

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

#comprendre 
#comprendre 
#comprendre 
#comprendre 

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

// Créer des objets / créer des objets
DHT DHT (DHTPIN, DHTTYPE);
Adafruit_BMP085 bmp;
ESP8266WebServer server (80);

String getPage () 
Page de chaîne = "";
page + = "";
page + = "";
page + = "
ESP8266 Demo
";
page + = "
DHT22
";
page + = "
Température : ";
page + = t;
page + = "° C
";
page + = "
Humidité : ";
page + = h;
page + = "%
BMP180
";
page + = "
Pression atmosphérique : ";
page + = p;
page + = "mbar
";
page + = "
GPIO
";
page + = "
";
page + = "
D3 (indiquer: ";
page + = etatLed;
page + = ")";
page + = "NOUS";
page + = "DE
";
page + = "";
page + = "

www.projetsdiy.fr
";
page + = "";
page de retour;

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



void handleSubmit () 
// Mettre à jour le GPIO / Mettre à jour le GPIO
String LEDValue;
LEDValue = server.arg ("LED");
Serial.println ("Définir 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);
// Attendre la connexion au réseau WiFi / Attendre la connexion
while (WiFi.status ()! = WL_CONNECTED) 
retard (500); Serial.print (".");

// Connexion WiFi établie / connexion WiFi OK
Serial.println ("");
Serial.print ("Connecté à"); Serial.println (ssid);
Serial.print ("adresse IP:"); Serial.println (WiFi.localIP ());

// On branche 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 ("Le serveur HTTP a démarré");



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