Les modules WiFi ESP8266 peuvent remplacer dans beaucoup d’applications l’Arduino en ajoutant à moindre coût la connectivité Wi-Fi. Au lancement des modules ESP8266 (en 2014), la langage de programmation de prédilection était de Lua (on peut d’ailleurs toujours programmer dans ce langage !). Rapidement, la grande majorité des librairies Arduino ont été adaptées pour fonctionner sur l’ESP8266. Aujourd’hui il est aussi simple de programmer un module ESP8266 qu’un Arduino en C++. Nous allons découvrir dans ce tutoriel comment installer les librairies nécessaires sur l’IDE Arduino, et découvrir au travers d’exemples simples les bases de la programmations de l’ESP8266.

Sommaire

1 Installer les cartes et les librairies pour les modules ESP8266 sur l’IDE Arduino
2 Avant d’aller plus loin, remarque sur l’ESP-01
3 Différences entre Arduino et ESP8266, repérage des broches
4 Attention au GPIO qui fonctionne à une tension de 3.3V
5 Comment programmer l’ESP8266 avec l’IDE Arduino ?
6 Questions courantes (FAQ)
7 Quelques livres pour débuter en C/C++
- 7.1 Programmez avec le langage C++
- 7.2 Apprenez à programmer en C - 2e édition, Mathieu Nebra

Installer les cartes et les librairies pour les modules ESP8266 sur l’IDE Arduino

Lancez l’IDE Arduino et ouvrez les préférences depuis le menu Fichier. Sur macOS, allez dans le menu Arduino puis Préférences… Cliquez sur l’icône indiquée par la flèche rouge sur la photo ci-dessous.

Dans le champ de saisie, collez l’adresse internet suivante puis validez

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

1	http://arduino.esp8266.com/staging/package_esp8266com_index.json

Cela permet d’indiquer à l’IDE Arduino qu’il doit aller sur le site arduino.esp8266.com afin d’aller y récupérer d’autres cartes compatibles. Maintenant, allez dans le menu Outils puis Type de Cartes et enfin Gestionnaire de carte

Dans le champ de recherche, saisissez esp8266 pour trouver les nouvelles cartes à installer. Si les cartes n’apparaissent pas, vérifiez dans les préférences que l’URL est correcte. vérifiez également la connexion Internet. Cliquer sur Installer.

L’installation ne dure que quelques minutes. L’installation terminée, fermez le gestionnaire de carte et ouvrez de nouveau le menu Outils. Dans le sous-menu Type de Carte, vous avez maintenant une nouvelle section appelée ESP8266 Modules.

Les principaux fabricants qui contribuent le plus à la communauté (Adafruit, ESPresso, Olimex, Sparkfun, WeMos…) se trouvent dans le menu. Pour les autres modules, choisissez simplement Generic ESP8266 Module.

Pour afficher le exemples installés avec les cartes ESP826, if suffit de choisir dans la liste puis d’aller dans le Fichier -> Exemples.

Avant d’aller plus loin, remarque sur l’ESP-01

L’ESP-01 est une version plus limitée de l’ESP8266. Il ne dispose que de 2 GPIO. Le module dispose d’une mémoire flash plus petite (de 512Ko à 1MB). La programmation est identique mais “plus pénible” car il faut mettre le module dans un mode particulier avant de pouvoir téléverser le programme (Bootload mode). Ce n’est pas un module adapté pour l’apprentissage et débuter avec l’ESP8266. Si toutefois vous avez besoin d’infos, vous trouverez plusieurs tutoriels sur le blog en faisant une recherche avec le mot clé ESP-01 dans le champ de recherche situé dans le coin supérieur droit de la page.

Différences entre Arduino et ESP8266, repérage des broches

L’ESP8266 dispose de 9 E/S numériques au lieu de 14 pour l’Arduino Uno. Alors que sur l’Arduino Uno il n’y a que 6 sorties qui supportent le mode PWM (3, 5, 6, 9, 10 et 11), toutes les sorties de l’ESP8266 peuvent générer un signal PWM.

En résumé

	Arduino / Genuino 101	ESP8266 (ESP-12x)
Micro-contrôleur	Arduio Uno et la plupart des cartes compatibles : ATmel ATmega328p Le nouveau Genuino 101 : Intel Curie	Tensilica Xtensa LX106
WiFi	–
Bluetooth	LE	–
Adressage	8…32bits	32bits
Fréquence d’horloge	16 MHz	80 MHz
Mémoire flash	32ko	512…4Mo (1)
Nombre d’E/S	x14	x11 (D0…D8 + RX/TX)
Nombre de sorties PWM	Arduino Uno et clones : x6 (3, 5, 6, 9, 10, 11) Arduino 101 : x4	Toutes les sorties sont PWM
Nombre d’entrées analogiques	x6 (A0..A5), 10bits, 5V max.	x1 (A0), 10 bits, 1V max. (2)
UART (port série)	x1	x1 (3)
I2C	x1	x1
SPI	x1	x1
Documentation technique	Arduino Uno R3 Genuino 101	version 5.4

Le repérage des broches est légèrement différent sur l’ESP8266. Chaque sortie est précédée d’un D (pour Digital probablement). Dans un programme Arduino, on peut directement utiliser le repère indiqué sur la carte D1 ou l’équivalent Arduino 5.

(1) Mémoire externe. Aujourd’hui, presque tous les modèles disposent de 4Mo de mémoire flash. La totalité n’est pas exploitable toutefois. Une partie est réservée au stockage de données (stockage de données utilisateur, interface HTML et code javascript de l’interface…). C’est la zone SPIFFS présentée dans cet article.

(2) L’ESP8266 accepte 1V maximum sur la broche analogique. Certains modules de intègrent un pont diviseur de tension qui permet de monter la tension. Par exemple la Wemos d1 mini accepte 3,3V max.

(3) Un seul port série utilisable. L’autre broche TX est utilisée durant l’écriture de la mémoire flash

Attention. Chaque fabricant est libre d’attribuer les broches. C’est notamment le cas des broches des bus I2C et SPI. Il faudra vérifier la documentation technique de la carte. Vous pouvez également consulter cet article qui récapitule les broches des principales cartes en vente

Broches ESP8266	Remarque	Equivalent Arduino / Genuino 101	Autre utilisation
TX		1	CS1, TXD0
RX		3	RXD0
D0	PWM (1)	16	WAKE
D1	PWM	5
D2	PWM	4
D3	PWM	0	CS2
D4	PWM	2	TXD1
D5	PWM	14	CLK
D6	PWM	12	MISO
D7	PWM	13	MOSI, RXD2, CTS0
D8	PWM	15	CS, TXD2, RTS0
RST		RST
A0	3.3V max.	A0
3V3		3V
5V	800 mA maxi.
G		GND (x3)

(1) Relié à la broche GND à la mise sous tension pour mettre l’ESP en bootload mode. Ce mode permet de ré-installer le firmware d’origine ou charger un programme Arduino. Sur certaines cartes, WeMos d1 mini par exemple, cette opération est prise en charge par le gestionnaire de carte. Cette opération est donc inutile, le téléversement est transparent.

Généralement, les fabricants publient un schéma des broches (pinout) qui indique la broche équivalente sur un Arduino Uno. Ici, par exemple, les broches d’une WeMos d1 mini. Ce schéma de branchement est valable pour toutes les cartes à base de module ESP-12x.

Si vous voulez vous lancer dans la programmation en Lua, le numéro de broche à utiliser dans le code est également indiqué.

Attention au GPIO qui fonctionne à une tension de 3.3V

Particularité de l’ESP8266 par rapport à l’Arduino Uno (ce n’est plus le cas pour le Genuino 101 et les nouvelles cartes à base d’Intel Curie), le GPIO fonctionne sous une tension de 3,3V. Il faudra donc dans certain cas adapter vos montages. Pour cela, il existe des diviseurs de tension (5V vers 3.3V) ou l’inverse (3.3V vers 5V).

Comment programmer l’ESP8266 avec l’IDE Arduino ?

Matériel et circuit de test

Voici un petit montage à réaliser avec un ESP8266 (ici une WeMos d1 mini) et une Led qui vous permettra de tester les différents codes proposés dans ce tutoriel.

Pour mémoire, voici un tableau récapitulatif de la tension d’alimentation typique en fonction de la couleur et du diamètre de la Led.

Couleur	Longueur d’onde (nm)	Tension (V) pour diamètre 3mm	Tension(V) pour diamètre 5mm
Rouge	625-630	1,9-2,1	2,1-2,2
Bleu	460-470	3,0-3,2	3,2-3,4
Vert	520-525	2,0-2,2	2,0-2,2
Jaune	585-595	2,0-2,2	3,0-3,2
Blanc	460-470	3,0-3,2	1,9-2,1

Intelligent Électronique D1 mini-Mini NodeMcu 4 M octets Lua WIFI Internet de Choses...

3,15€

Acheter

aliexpress.com

La programmation classique

La première chose à savoir lorsqu’on débute avec un module ESP8266, c’est qu’on peut le programmer exactement comme un Arduino. Contrairement aux micro-contrôleurs ATTiny, moins puissants, le SoC de l’ESP8266 est capable d’exécuter toutes les commandes C++ du code Arduino. La seule condition à respecter est d’utiliser la librairie adaptée pour ce dernier dès qu’on veut utiliser le WiFi (paragraphe suivant).

Ouvrez l’IDE Arduino et collez ce code dans un nouveau projet avant de le téléverser.

Que fait ce programme ?

Une variable de type entier (int) permet d’indiquer sur quelle sortie la Led est branchée
Dans la boucle setup(), on indique que la broche (ici 16) est une sortie (OUTPUT)
La boucle loop() s’execute à l’infini. A chaque passage
- On met la sortie (16) au niveau bas (LOW), c’est à dire que la tension de sortie est nulle (pas de courant)
- On attend 1 seconde. Le délais (Delay) est indiqué en millisecondes (1000ms = 1s)
- On met la sortie (16) au niveau haut (HIGH), c’est à dire que la tension de sortie est de 5V (le courant passe)
- On attend 2 secondes
- Et ainsi de suite

int led = 16;

void setup() {
  pinMode(led, OUTPUT);     // Initialise la broche "led" comme une sortie - Initialize the "LED" pin as an output
}

// Cette boucle s'exécute à l'infini
// the loop function runs over and over again forever
void loop() {
  digitalWrite(led, LOW);   // Eteint la Led - Turn the LED OFF 
  delay(1000);              // Attendre 1 seconde - Wait for a second
  digitalWrite(led, HIGH);  // Allume la Led - Turn the LED off by making the voltage HIGH
  delay(2000);              // Pause de 2 secondes - Wait 2 secondes
}

int led = 16;

void setup() {

pinMode(led, OUTPUT); // Initialise la broche "led" comme une sortie - Initialize the "LED" pin as an output

}

// Cette boucle s'exécute à l'infini

// the loop function runs over and over again forever

void loop() {

digitalWrite(led, LOW); // Eteint la Led - Turn the LED OFF

delay(1000); // Attendre 1 seconde - Wait for a second

digitalWrite(led, HIGH); // Allume la Led - Turn the LED off by making the voltage HIGH

delay(2000); // Pause de 2 secondes - Wait 2 secondes

}

Maintenant, remplacez dans la sortie 16 par le repérage équivalent de l’ESP8266, à savoir D0, ce qui donne int led = D0;

Comme vous pouvez le constater, le programme fonctionne à l’identique.

Remarque. Même si la variable est de type int (integer), on écrit une chaine de caractère dans le code. C’est normal. Au moment de la compilation, la référence à la broche sera remplacée dans le code par la librairie ESP8266.

Programmation Web Serveur : connecter l’ESP8266 au réseau WiFi

La programmation Web Serveur permet d’ajouter une interface Web (écrite dans le langage HTML et javascript) à un projet ESP8266. C’est également possible avec un Arduino mais cela prend tout son sens avec un ESP8266 qui nativement dispose d’une connexion WiFi.

Reprenons le code précédent et ajoutons les deux librairies nécessaires

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

1 2	#include <ESP8266WiFi.h> #include <ESP8266WebServer.h>

On va créer deux variables pour définir le SSID (identifiant du réseau WiFi) et le mot de passe avant de créer un objet qui va contenir le serveur Web (objet C++)

const char* ssid = "xxxx";           // Identifiant WiFi
const char* password = "xxxxxxxxx";  // Mot de passe WiFi
ESP8266WebServer server(80);         // On instancie un serveur qui ecoute sur le port 80

const char* ssid = "xxxx"; // Identifiant WiFi

const char* password = "xxxxxxxxx"; // Mot de passe WiFi

ESP8266WebServer server(80); // On instancie un serveur qui ecoute sur le port 80

Le code de la fonction setup fait les opérations suivantes

Serial.begin(115200) on ouvre le port série à 115200 bauds
WiFi.begin(ssid, password) l’ESP8266 se connecte au réseau WiFi
La boucle while écrit un point sur le port série toute les 500ms jusqu’à ce que l’ESP8266 soit connecté au WiFi WiFi.status() != WL_CONNECTED (très mauvaise idée lorsqu’on fonctionne sur batterie d’ailleurs, mais c’est juste pour comprendre le fonctionnement)
Serial.println(WiFi.localIP()) écrit sur le port série l’adresse IP attribuée par la box internet ou le routeur à l’ESP8266
server.on("/", [](){ server.send(200, "text/plain", "Page d'accueil"); // Ajoute un point d'entree, une page web });

1
2
3

server.on("/", [](){
server.send(200, "text/plain", "Page d'accueil"); // Ajoute un point d'entree, une page web
});

On ajoute un point d’entrée, c’est à dire une adresse internet (URL) sur laquelle on affichera pour le moment un simple texte
server.on("/parametres", [](){ server.send(200, "text/plain", "Une page de parametres"); });

1
2
3

server.on("/parametres", [](){
server.send(200, "text/plain", "Une page de parametres");
});

Une seconde page qui pourrait être une page de paramètres
server.begin() enfin, on démarre le serveur web

Il ne reste plus qu’à demander à l’ESP8266 d’écouter les demandes et d’afficher les pages correspondantes. Pour cela on ajoute la commande server.handleClient() dans la fonction loop().

Collez le code complet dans un nouveau projet et téléversez le sur la WeMos.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
const char* ssid = "XXXX";           // Identifiant WiFi
const char* password = "XXXXXXXXX";  // Mot de passe WiFi
ESP8266WebServer server(80);         // On instancie un serveur qui ecoute sur le port 80

int led = D0;

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.println("");
  // on attend d'etre connecte au WiFi avant de continuer
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // on affiche l'adresse IP attribuee pour le serveur DSN
  Serial.println("");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
  
  // on definit les points d'entree (les URL a saisir dans le navigateur web) et on affiche un simple texte 
  server.on("/", [](){
    server.send(200, "text/plain", "Page d'accueil");
  });
  server.on("/parametres", [](){
    server.send(200, "text/plain", "Une page de parametres");
  });
  // on demarre le serveur web 
  server.begin();
  pinMode(led, OUTPUT);     // Initialise la broche "led" comme une sortie - Initialize the "LED" pin as an output
}

// Cette boucle s'exécute à l'infini - the loop function runs over and over again forever
void loop() {
  // a chaque iteration, la fonction handleClient traite les requetes 
  server.handleClient();
  
  digitalWrite(led, LOW);   // Eteint la Led - Turn the LED OFF 
  delay(1000);              // Attendre 1 seconde - Wait for a second
  digitalWrite(led, HIGH);  // Allume la Led - Turn the LED off by making the voltage HIGH
  delay(1000);              // Pause de 2 secondes - Wait 2 secondes
}

#include <ESP8266WiFi.h>

#include <ESP8266WebServer.h>

const char* ssid = "XXXX"; // Identifiant WiFi

const char* password = "XXXXXXXXX"; // Mot de passe WiFi

ESP8266WebServer server(80); // On instancie un serveur qui ecoute sur le port 80

int led = D0;

void setup() {

Serial.begin(115200);

WiFi.begin(ssid, password);

Serial.println("");

// on attend d'etre connecte au WiFi avant de continuer

while (WiFi.status() != WL_CONNECTED) {

delay(500);

Serial.print(".");

}

// on affiche l'adresse IP attribuee pour le serveur DSN

Serial.println("");

Serial.print("IP address: ");

Serial.println(WiFi.localIP());

// on definit les points d'entree (les URL a saisir dans le navigateur web) et on affiche un simple texte

server.on("/", [](){

server.send(200, "text/plain", "Page d'accueil");

});

server.on("/parametres", [](){

server.send(200, "text/plain", "Une page de parametres");

});

// on demarre le serveur web

server.begin();

pinMode(led, OUTPUT); // Initialise la broche "led" comme une sortie - Initialize the "LED" pin as an output

}

// Cette boucle s'exécute à l'infini - the loop function runs over and over again forever

void loop() {

// a chaque iteration, la fonction handleClient traite les requetes

server.handleClient();

digitalWrite(led, LOW); // Eteint la Led - Turn the LED OFF

delay(1000); // Attendre 1 seconde - Wait for a second

digitalWrite(led, HIGH); // Allume la Led - Turn the LED off by making the voltage HIGH

delay(1000); // Pause de 2 secondes - Wait 2 secondes

}

Ouvrez le moniteur série pour récupérer l’adresse IP de l’ESP8266 sur le réseau local.

Ouvrez maintenant un navigateur internet er saisissez l’adresse IP ou IP_ESP8266/parametres.

Et voilà, en quelques lignes de code, vous venez de connecter l’ESP8266 au réseau local (et internet par la même occasion). Vous pouvez accéder à une interface WEB depuis n’importe quel ordinateur ou smartphone. En faisant une redirection de port sur votre box internet ou routeur, vous pouvez même accéder à l’interface hors de chez vous avec une connexion 3G/4G.

Attention. La connexion n’est pas chiffrée. Elle n’est pas protégée. Tout le monde peut avoir accès aux commandes de votre interface. Il faudra ajouter des protections (mot de passe…)

Programmation Web Serveur : piloter le GPIO depuis internet !

Nous allons maintenant voir comment ajouter des commandes pour piloter le GPIO depuis une interface. Il existe plusieurs méthodes pour générer le code HTML de l’interface qui sera envoyée au navigateur internet. Ici, on va simplement créer une chaine (String) qui va contenir le code HTML. Tout est expliqué en détail dans ce tutoriel. Chaque ligne est expliquée dans le code. Ce qu’il faut retenir :

Le code HTML est construit en assemblant des chaines de caractères
Il est possible d’intégrer le contenu de variable. Ici l’état de la sortie D0contenu dans la chaine etatD0.
Chaque changement d’état est envoyé au serveur web qui tourne sur l’ESP8266 à l’aide d’un formulaire sous la forme d’une requête HTTP de type POST.
Ici, l’actualisation est déclenchée manuellement en appuyant sur un bouton (submit)

String getPage(){
  String page = "<html lang=fr-FR><head><meta http-equiv='refresh' content='10'/>";
  page += "<title>ESP8266 Web Server Demo - www.projetsdiy.fr</title>";
  page += "<style> body { background-color: #fffff; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }</style>";
  page += "</head><body><h1>ESP8266 Web Server Demo</h1>";
  page += "<h3>GPIO</h3>";
  page += "<form action='/' method='POST'>";
  page += "<ul><li>D0 (etat: ";
  page += etatD0;
  page += ") ";
  page += "<INPUT type='radio' name='D0' value='1'>ON";
  page += "<INPUT type='radio' name='D0' value='0'>OFF</li></ul>";
  page += "<INPUT type='submit' value='Actualiser'>";
  page += "<br><br><p><a hrf='https://www.projetsdiy.fr'>www.projetsdiy.fr</p>";
  page += "</body></html>";
  return page;
}

String getPage(){

String page = "<html lang=fr-FR><head><meta http-equiv='refresh' content='10'/>";

page += "<title>ESP8266 Web Server Demo - www.projetsdiy.fr</title>";

page += "<style> body { background-color: #fffff; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }</style>";

page += "</head><body><h1>ESP8266 Web Server Demo</h1>";

page += "<h3>GPIO</h3>";

page += "<form action='/' method='POST'>";

page += "<ul><li>D0 (etat: ";

page += etatD0;

page += ") ";

page += "<INPUT type='radio' name='D0' value='1'>ON";

page += "<INPUT type='radio' name='D0' value='0'>OFF</li></ul>";

page += "<INPUT type='submit' value='Actualiser'>";

page += "<br><br><p><a hrf='https://www.projetsdiy.fr'>www.projetsdiy.fr</p>";

page += "</body></html>";

return page;

}

Maintenant, on modifie dans le setup le point d’entrée vers la page d’accueil. On branche le point d’entrée “/” vers la fonction handleRoot.

server.on ( "/", handleRoot );

1	server.on ( "/", handleRoot );

Lorsqu’on affiche la page principale (“/”) ou que le serveur web reçoit une requête POST (actualisation du GPIO), la fonction handleRoot est appelée. La fonction server.hasArg permet brancher des actions. Ici, si la requête contient l’argument (hasArg), alors c’est qu’on doit changer l’état du GPIO. On exécute la fonction handleSubmit, sinon on actualise la page.

void handleRoot(){ 
  if ( server.hasArg("D0") ) {
    handleSubmit();
  } else {
    server.send ( 200, "text/html", getPage() );
  }  
}

void handleRoot(){

if ( server.hasArg("D0") ) {

handleSubmit();

} else {

server.send ( 200, "text/html", getPage() );

}

La fonction handleSubmit récupère la valeur de l’argument “D0” avec la fonction server.arg puis il suffit de tester la valeur de celle-ci pour réaliser le bon traitement. Attention, c’est une chaine de caractère. Il faut donc tester comme ceci == “1” et non pas == 1. On en profite pour stocker l’état de la sortie dans la variable etatD0.

void handleSubmit() {
  // Actualise le GPIO / Update GPIO 
  String LEDValue;
  LEDValue = server.arg("D0");
  Serial.print("Set GPIO to "); Serial.println(LEDValue);
  if ( LEDValue == "1" ) {
    digitalWrite(D0, 1);
    etatD0 = "On";
    server.send ( 200, "text/html", getPage() );
  } else if ( LEDValue == "0" ) {
    digitalWrite(D0, 0);
    etatD0 = "Off";
    server.send ( 200, "text/html", getPage() );
  } else {
    Serial.println("Err Led Value");
  }
}

void handleSubmit() {

// Actualise le GPIO / Update GPIO

String LEDValue;

LEDValue = server.arg("D0");

Serial.print("Set GPIO to "); Serial.println(LEDValue);

if ( LEDValue == "1" ) {

digitalWrite(D0, 1);

etatD0 = "On";

server.send ( 200, "text/html", getPage() );

} else if ( LEDValue == "0" ) {

digitalWrite(D0, 0);

etatD0 = "Off";

server.send ( 200, "text/html", getPage() );

} else {

Serial.println("Err Led Value");

}

Collez le code complet suivant en modifiant identifiant et mot de passe WiFi.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
const char* ssid = "XXXX";          // Identifiant WiFi
const char* password = "XXXXXXXX";  // Mot de passe WiFi
ESP8266WebServer server(80);        // On instancie un serveur qui ecoute sur le port 80

int led = D0;
String  etatD0 = "Off";

String getPage(){
  String page = "<html lang=fr-FR><head><meta http-equiv='refresh' content='10'/>";   // C'est du code HTML, la page s'auto-actualise    
  page += "<title>ESP8266 Web Server Demo - www.projetsdiy.fr</title>";               // Titre de la barre du navigateur
  page += "<style> body { background-color: #fffff; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }</style>"; // style de la page
  page += "</head><body><h1>ESP8266 Web Server Demo</h1>";  // Titre de la page (H1)
  page += "<h3>GPIO</h3>";                                  // Sous-titre (H3)
  page += "<form action='/' method='POST'>";                // Le formulaire sera envoye avec une requete de type POST 
  page += "<ul><li>D0 (etat: ";                             // Premiere ligne de la liste (ul) avec D0
  page += etatD0;                                           // on concatene la chaine contenant l'etat de la sortie
  page += ") ";
  page += "<INPUT type='radio' name='D0' value='1'>ON";     // Bouton pour activer D0
  page += "<INPUT type='radio' name='D0' value='0'>OFF</li></ul>"; // et le desactiver
  page += "<INPUT type='submit' value='Actualiser'>";       // Bouton d'actualisation
  page += "<br><br><p><a hrf='https://www.projetsdiy.fr'>www.projetsdiy.fr</p>";
  page += "</body></html>";
  return page;
}
void handleRoot(){ 
  if ( server.hasArg("D0") ) {
    handleSubmit();
  } else {
    server.send ( 200, "text/html", getPage() );
  }  
}

void handleSubmit() {
  // Actualise le GPIO / Update GPIO 
  String LEDValue;
  LEDValue = server.arg("D0");
  Serial.print("Set GPIO to "); Serial.println(LEDValue);
  if ( LEDValue == "1" ) {
    digitalWrite(D0, 1);
    etatD0 = "On";
    server.send ( 200, "text/html", getPage() );
  } else if ( LEDValue == "0" ) {
    digitalWrite(D0, 0);
    etatD0 = "Off";
    server.send ( 200, "text/html", getPage() );
  } else {
    Serial.println("Err Led Value");
  }
}

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.println("");
  // on attend d'etre connecte au WiFi avant de continuer
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // on affiche l'adresse IP qui nous a ete attribuee
  Serial.println("");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  // on definit les points d'entree (les URL a saisir dans le navigateur web) et on affiche un simple texte
  server.on ( "/", handleRoot );

  // on demarre le serveur web
  server.begin();
  pinMode(led, OUTPUT);     // Initialise la broche "led" comme une sortie - Initialize the "LED" pin as an output
}

// Cette boucle s'exécute à l'infini - the loop function runs over and over again forever
void loop() {
    // a chaque iteration, on appelle handleClient pour que les requetes soient traitees
  server.handleClient();
}

#include <ESP8266WiFi.h>

#include <ESP8266WebServer.h>

const char* ssid = "XXXX"; // Identifiant WiFi

const char* password = "XXXXXXXX"; // Mot de passe WiFi

ESP8266WebServer server(80); // On instancie un serveur qui ecoute sur le port 80

int led = D0;

String etatD0 = "Off";

String getPage(){

String page = "<html lang=fr-FR><head><meta http-equiv='refresh' content='10'/>"; // C'est du code HTML, la page s'auto-actualise

page += "<title>ESP8266 Web Server Demo - www.projetsdiy.fr</title>"; // Titre de la barre du navigateur

page += "<style> body { background-color: #fffff; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }</style>"; // style de la page

page += "</head><body><h1>ESP8266 Web Server Demo</h1>"; // Titre de la page (H1)

page += "<h3>GPIO</h3>"; // Sous-titre (H3)

page += "<form action='/' method='POST'>"; // Le formulaire sera envoye avec une requete de type POST

page += "<ul><li>D0 (etat: "; // Premiere ligne de la liste (ul) avec D0

page += etatD0; // on concatene la chaine contenant l'etat de la sortie

page += ") ";

page += "<INPUT type='radio' name='D0' value='1'>ON"; // Bouton pour activer D0

page += "<INPUT type='radio' name='D0' value='0'>OFF</li></ul>"; // et le desactiver

page += "<INPUT type='submit' value='Actualiser'>"; // Bouton d'actualisation

page += "<br><br><p><a hrf='https://www.projetsdiy.fr'>www.projetsdiy.fr</p>";

page += "</body></html>";

return page;

}

void handleRoot(){

if ( server.hasArg("D0") ) {

handleSubmit();

} else {

server.send ( 200, "text/html", getPage() );

}

void handleSubmit() {

// Actualise le GPIO / Update GPIO

String LEDValue;

LEDValue = server.arg("D0");

Serial.print("Set GPIO to "); Serial.println(LEDValue);

if ( LEDValue == "1" ) {

digitalWrite(D0, 1);

etatD0 = "On";

server.send ( 200, "text/html", getPage() );

} else if ( LEDValue == "0" ) {

digitalWrite(D0, 0);

etatD0 = "Off";

server.send ( 200, "text/html", getPage() );

} else {

Serial.println("Err Led Value");

}

void setup() {

Serial.begin(115200);

WiFi.begin(ssid, password);

Serial.println("");

// on attend d'etre connecte au WiFi avant de continuer

while (WiFi.status() != WL_CONNECTED) {

delay(500);

Serial.print(".");

}

// on affiche l'adresse IP qui nous a ete attribuee

Serial.println("");

Serial.print("IP address: ");

Serial.println(WiFi.localIP());

// on definit les points d'entree (les URL a saisir dans le navigateur web) et on affiche un simple texte

server.on ( "/", handleRoot );

// on demarre le serveur web

server.begin();

pinMode(led, OUTPUT); // Initialise la broche "led" comme une sortie - Initialize the "LED" pin as an output

}

// Cette boucle s'exécute à l'infini - the loop function runs over and over again forever

void loop() {

// a chaque iteration, on appelle handleClient pour que les requetes soient traitees

server.handleClient();

}

Voici l’interface obtenue

Maintenant que c’est plus clair, vous pouvez aller encore un peu plus loin dans les détails de la programmation Web Serveur de l’ESP8266 en lisant cet article. Vous pourrez réaliser ce type d’interface en suivant ce projet de station météo en 5 étapes.

Tous les tutoriels sur la programmation Web Server des ESP8266

Serveur Web (Interface)

Librairie WiFiManager : gérer facilement la connexion Wi-Fi des projets ESP8266 26 juin 2017
Piloter le GPIO de l’ESP8266 (Serveur Web) depuis Jeedom en TCP/IP sans fil – Partie 2 14 avril 2017
Piloter le GPIO de l’ESP8266 (Serveur Web) depuis Domoticz en TCP/IP sans fil – Partie 2 31 mars 2017
ESP8266 (Web Serveur – Partie 5) : gauges et graphiques Google Charts 20 mars 2017
ESP8266 (Web Serveur) : développement rapide du code HTML+js avec Node.js et Pug 15 mars 2017
ESP8266 (Web Serveur – Partie 4) : ArduinoJson, charger, enregistrer des fichiers (SPIFFS) 13 mars 2017
ESP8266 (Web Serveur – Partie 3) : Récupérer l’heure sur un serveur de temps (NTP) 6 mars 2017
ESP8266 (Web Serveur – Partie 2) : Interaction entre le code Arduino et l’interface HTML 27 février 2017
ESP8266 (Web Serveur – Partie 1) : stocker l’interface Web dans la zone SPIFFS (HTML, CSS, JS) 22 février 2017
Bootstrap (Serveur Web ESP8266) : utiliser les thèmes Bootswatch (code Arduino) 15 février 2017
Bootstrap : donner un aspect moderne à l’interface Web de vos projets ESP8266 13 février 2017
ESP8266 : comprendre la programmation Web Server avec du code Arduino 10 février 2017

Programmation Client Web :

La programmation Client Web permet de faire communiquer un module ESP8266 avec un autre serveur, un autre ESP8266, une application mobile… Voici quelques exemples d’application :

Transmettre des mesures (température, humidité, taux de particules, pression atmosphérique, luminosité, bruit…)
Transmettre des états (détecteur d’ouverture de porte ou fenêtre, contacteur…)

Voici plusieurs articles sur le sujet avec des exemples d’application pour faire communiquer l’ESP8266 avec Jeedom ou Domoticz (affichage déporté)

Client Web (communication)

Questions courantes (FAQ)

Sur quelles plateformes l’IDE Arduino est-il disponible ?

L’IDE Arduino est disponible sur tous les systèmes d’exploitation (Windows, macOS, Linux, Linux ARM). Quelque soit votre environnement, vous pouvez donc développer vos projets ESP8266 avec l’IDE Arduino. Allez sur le site de la fonction Arduino pour récupérer l’installeur qui convient à votre ordinateur ou mini-PC.

Peut-on programmer un ESP8266 sur un Mac ?

Oui, l’IDE Arduino est disponible sur macOS également. Le kit de développement (SDK) d’Espressif étant écrit en python, il est possible de programmer les modules ESP8266 comme sur un PC Windows.

Peut-on programmer l’ESP8266 depuis Linux ARM ?

Oui, si vous possédez un Raspberry Pi ou un mini-PC équivalent fonctionnant sous Linux ARM (un Orange Pi par exemple), il est tout à fait possible d’utiliser l’IDE Arduino.

Comment développer sans programmation avec le Firmware ESP Easy

Si vous débutez avec les micro-contrôleurs et que tout ce que vous avez lu précédemment vous a un peu effrayé, pas de problème. Le projet ESP Easy est fait pour vous ! ESP Easy est une interface qui permet de développer des sondes ou des actionneurs par simple configuration. L’interface est en anglais mais tout est expliqué dans ces tutoriels en français.

Quel modèle d’ESP8266 choisir pour débuter ?

Les cartes de développement à base d’ESP-12x (WeMos d1 Mini, Geekcreit…) sont les mieux pour débuter. Le téléversement est géré de façon totalement transparente par le SDK ESP8266 depuis l’IDE Arduino. Vous pouvez utiliser le comparateur de prix pour trouver la meilleure offre sur Internet.

Peut-on utiliser des cartes NodeMCU ou micropython ?

Oui absolument. Ce sont d’autres firmwares. NodeMCU permet d’exécuter du code Lua. Dès le premier téléversement, le firmware sera remplacé par le code Arduino. Vous pourrez ré-installer le firmware NodeMCU (suivez ce tutoriel pour cela) ou micropython ultérieurement.

C’est quoi le modèle ESP-WROOM-32 ?

LoLin32 Lite de Wemos.cc

Le module ESP-WROOM-32 est le nom de code du successeur de l’ESP8266, l’ESP32. Il est plus puissant, moins gourmand, plus sécurisé, plus pro (bus CAN), il apporte également le support du Bluetooth en plus du WiFi. Le prix des cartes de développement ESP32 à fortement chuté ces derniers mois. Elles sont maintenant quasiment au même prix. Pour en savoir plus, rendez-vous sur la catégorie ESP32 de Projets DIY. Ici, la Lolin32 Lite de Wemos.cc

Quelques livres pour débuter en C/C++

La programmation Arduino fait appel à des notions de programmation objet du C/C++. Il existe de très bons livres d’initiation ainsi que des tutoriels sur le Web pour aller plus loin que les notions abordées ici

Programmez avec le langage C++

★★★★★

32,00€

Buy This Item

amazon.fr

Apprenez à programmer en C - 2e édition, Mathieu Nebra

★★★★★

26,00€

Buy This Item

amazon.fr

Migui Pda

Lorsque vous écrivez :

“La boucle while écrit un point sur le port série toute les 500ms jusqu’à ce que l’ESP8266 soit connecté au WiFi WiFi.status() != WL_CONNECTED (très mauvaise idée lorsqu’on fonctionne sur batterie d’ailleurs, mais c’est juste pour comprendre le fonctionnement)”
Quelle est alors la meilleure solution/recommendation q dans le cas d’une connexion batterie ?
Merci.
- Projets DIY
  
  Bonjour Migui. Merci beaucoup ! Pour éviter de drainer la batterie, le mieux est de mettre un compteur en place. Au bout de n tentatives deux solutions :
  – On attend un long moment mais ce n’est pas ce qu’il y a de plus économe en énergie
  – On met le module en sommeil (deep sleep) avec la commande ESP.deepSleep(durée). La durée doit être indiquée en ms. Pour que ça fonctionne, il faut relier la broche D0 à la broche RST. Par contre, Il faudra débrancher avant de téléverser, cette broche est aussi utilisée pour passer le module en “flash mode”.
  D’ailleurs, rien n’interdit de mettre le module en deep sleep dans la bouche loop() après les traitements. Par contre dans ce mode, impossible de joindre le module pour lui demander de faire quelque chose (niveau de batterie, actionner un relais…). Voilà. Bonne journée
  - Migui Pda
    
    Merci de ta réponse.
    J’avais en effet repéré à droite ou gauche des sujets traitant dudit “deep sleep”. Ce qui me faisait forcément envie en envisageant d’utiliser un (ou des) Wemos D1 Mini connecté à une batterie de recharge solaire.
    Ceci étant la solution la plus simple à mettre en oeuvre puisque ladite batterie solaire s’achète pour une quinzaine d’euros et se chargeant (auto-contrôle de charge) toute seule, elle est alors facile à remplacer si nécessaire (sans besoin de souder/désouder quoique ce soit).
    Et vu les besoins de recharge (après décharge éventuelle), la faiblesse du soleil de nos belges régions nécessiterait cet usage du “deep sleep”.
    Quant à la disponibilité de l’info, je la vois traitée comme ceci :
    1) quand il est hors “deep sleep” mode, le Wemos envoi l’info en MQTT vers un RPi (broker) et attend l’info en retour d’action à prendre
    2) le RPi (broker) décide ce que doit faire le Wemos suivant l’info reçue et retourne donc sa réponse
    3) le Wemos suit donc la décision du RPi (broker) d’action à effectuer avant d’entrer d’office en “deep sleep” (action = valve d’arrosage, relais d’allumage, son contre nuisible (animaux, jeunes (mosquitto), …)
  - Migui Pda
    
    Sur cet ancien article, un besoin rejoint les nouveaux articles.
    1) RPi sur lequel fonctionne l’assistant vocal Jarvis () nécessite un MQTT Broker (tel Mosquitto) léger
    
    2) je viens de découvrir ce Gateway qui pourrait être le pont entre les senseurs (tels Wemos D1 avec DHT22 et autre utilisant MQTT client) : https://github.com/1technop…
    
    3) il faut juste trouver un Dashboard qui permet alors de ne pas alourdir le RPi (puisque Jarvis tourne dessus) et juste disposer des données reçues des senseurs dans du JSON :
    http://crouton.mybluemix.ne…
    https://github.com/edfungus…
    
    4) permettant alors de suivre la situation du jardin avec du 433 mHz ou du WiFi (via MQTT) suivant que l’un ou l’autre consommerait moins (voir article du “deep sleep” de ce jour 😉 ) :https://1technophile.blogsp…
    
    A plus pour un nouvel article montrant alors ledit RPi broker avec son Dashboard Crouton (utilisant les données JSON reçues via MQTT des clients Wemos D1 DHT22 😉 et lui renvoyant une commande d’activation d’un relais (arrosage, ventiler la pièce trop humide, …)
    - Projets DIY
      
      Très bonne idée. A tester !
Migui Pda

Magnifique article. Merci.

ChristianM merci pour votre patience et vos soutiens. Là j'arrête ! J'ai essayé avec 2 ca... ESP Easy: firmware ESP8266 pour créer des objets connectés et domotique sans programmation

Projets DIY Merci. 115200 bauds est la bonne vitesse. Donc le réseau WiFi n'est pas config... ESP Easy: firmware ESP8266 pour créer des objets connectés et domotique sans programmation

ChristianM Bonjour et merci. à 74880 bauds, le message est le suivant : ets Jan 8 201... ESP Easy: firmware ESP8266 pour créer des objets connectés et domotique sans programmation

Projets DIY Bonjour Christian. Le message d'erreur se produit lorsque l'IDE Arduino n'arri... ESP Easy: firmware ESP8266 pour créer des objets connectés et domotique sans programmation

ChristianM Merci de ton aide, mais je n'y arive pas. Alors, EEPROM Clear me génère une e... ESP Easy: firmware ESP8266 pour créer des objets connectés et domotique sans programmation

Box Domotique

Serveurs Open Source

Interfaces

Equipements

Protocoles

Objets Connectés

Firmware Arduino/ESP8266

Dashboard, programmation, bases de données

Arduino

ESP8266 et ESP32

Firmwares

Programmer l’ESP8266 avec l’IDE Arduino : librairies, GPIO, Web Serveur, Client Web

Installer les cartes et les librairies pour les modules ESP8266 sur l’IDE Arduino

Avant d’aller plus loin, remarque sur l’ESP-01

Différences entre Arduino et ESP8266, repérage des broches

Attention au GPIO qui fonctionne à une tension de 3.3V

Comment programmer l’ESP8266 avec l’IDE Arduino ?

Matériel et circuit de test

La programmation classique

Que fait ce programme ?

Programmation Web Serveur : connecter l’ESP8266 au réseau WiFi

Programmation Web Serveur : piloter le GPIO depuis internet !

Programmation Client Web :

Questions courantes (FAQ)

Sur quelles plateformes l’IDE Arduino est-il disponible ?

Peut-on programmer un ESP8266 sur un Mac ?

Peut-on programmer l’ESP8266 depuis Linux ARM ?

Comment développer sans programmation avec le Firmware ESP Easy

Quel modèle d’ESP8266 choisir pour débuter ?

Peut-on utiliser des cartes NodeMCU ou micropython ?

C’est quoi le modèle ESP-WROOM-32 ?

Quelques livres pour débuter en C/C++

Programmez avec le langage C++

Apprenez à programmer en C - 2e édition, Mathieu Nebra

Inscrivez-vous à la newsletter hebdomadaire

#Guide : matériel nécessaire pour fabriquer une box domotique 100% DIY à base de Raspberry Pi 3

Plus que 3 jours de promos chez Amazon et Sonoff sur les équipements domotiques