ESP8266. Comprendre le code Arduino d’un serveur web avec interface HTML

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest
Partager sur email
Partager sur telegram

L’ESP8266 peut se programmer avec du code Arduino en C++ mais son principal intérêt reste sa connexion Wi-Fi. On pourra l’utiliser pour publier des données sur un serveur ou un Dashboard en ligne (ThingSpeak, Freeboard.io), créer facilement des objets connectés que l’on pourra piloter depuis un serveur domotique ou une application mobile (développée avec Blynk ou Cayenne par exemple).

 

Tutoriel actualisé le 28 août 2020

Dans ce tutoriel, nous allons apprendre comment ajouter un serveur web à du code Arduino pour ESP8266. Le serveur Web permettra d’afficher des données collectées ou stockée dans la mémoire flash de l’ESP8266 et d’interagir depuis une interface WEB. On pourra par exemple piloter un relai connecté au GPIO…

Installer le SDK ESP8266 sur l’IDE Arduino

Si le SDK ESP8266 est déjà installé sur votre environnement, vous pouvez passer au paragraphe suivant.

Avant de commencer, vous aurez besoin d’installer sur l’IDE Arduino le SDK ESP8266 du fabricant Espressif qui permet de développer et compiler du code Arduino pour les ESP8266.

Tout est expliqué en détail dans ce tutoriel

A LIRE AUSSI :
ESP8266. Débuter sur IDE Arduino. Librairies, GPIO, programmation Web Serveur, Client Web, drivers

Débuter avec la librairie ESP8266WiFi

La librairie ESP8266WiFi est une adaptation (un portage) complète de la librairie WiFi pour Arduino faite par Espressif.

C’est très pratique car – en principe – le portage d’un code Arduino existant vers un ESP8266 ne nécessite presque aucun changement.

On va utiliser l’exemple WiFiWebServer installé avec le SDK pour expliquer comment on met en place un serveur WEB sur un ESP8266. One ne va pas détailler ici toutes les méthodes disponibles, tout est disponible ici.

Le mieux est de prendre un exemple pour comprendre les bases de la librairie.

Créer un nouveau croquis et coller le code suivant.

Ce petit programme créé un serveur web qui sera accessible depuis n’importe quel navigateur internet en saisissant l’adresse IP du module ESP8266. On pourra modifier l’état d’une sortie (GPIO) de l’ESP8266 en saisissant directement dans la barre d’adresse un requête HTTP de cette forme pour allumer la LED

IP_ESP8266/LED=ON

ou pour éteindre la LED

IP_ESP8266/LED=OFF

Avant de téléverser, n’oubliez pas de modifier le nom du réseau WiFi (SSID) et le mot de passe.

#include <Arduino.h>
// 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);

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

void setup() {
  Serial.begin(115200);
  // Initialize the output and set it to LOW
  pinMode(output, OUTPUT);
  digitalWrite(output, 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 
  Serial.println("");
  Serial.println("WiFi connected at IP address:");
  Serial.println(WiFi.localIP());

  // Start Web Server
  server.begin();
}

// Main loop
void loop(){
  // Create a client and listen for incoming clients
  WiFiClient client = server.available();   
  
  // Do nothing if server is not available
  if (!client) {
     return;
  }
  
  // Wait a client 
  while(!client.available()){}
  
  // A new client is connected, get the request
  String request = client.readStringUntil('\r');
  Serial.println(request);
  client.flush();

  int value = LOW;
  if (request.indexOf("/LED=ON") != -1) 
  {
    digitalWrite(output, HIGH);
    value = HIGH;
  } 
  if (request.indexOf("/LED=OFF") != -1)
  {
    digitalWrite(output, LOW);
    value = LOW;
  }
  
  // Display GPIO status
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println(""); 

  client.println("<!DOCTYPE HTML>");
  client.println("<html>");
  client.print("GPIO status: "); 

  if(value == HIGH) {
    client.print("ON");  
  } else {
    client.print("OFF");
  }

  client.println("<br><br>");
  client.println("Switch manually GPIO state");
  client.println("<br><br>");
  client.println("Turn <a href=\"/LED=ON\">ON</a><br>");
  client.println("Turn <a href=\"/LED=OFF\">OFF</a><br>");
  client.println("</html>");

  Serial.println("");
  
}

Comment fonctionne ce code ?

Pour créer un serveur Web, on déclare la librairie ESP8266WiFi

#include <ESP8266WiFi.h>

On créé une instance (un objet C++) qui contiendra le serveur web sur le port 80. Le port 80 est le port standard des pages internet.

WiFiServer server(80);

Vous pouvez connecter une LED sur une sortie de l’ESP8266 pour confirmer le fonctionnement des commandes.

const int output = D4;

Le démarrage du serveur web se fait lors de l’exécution après que l’ESP8266 soit connecté au réseau WiFi

WiFi.begin(SSID, PASSWORD); 
while (WiFi.status() != WL_CONNECTED) { 
   delay(500); 
   Serial.print("."); 
} 
server.begin();

Maintenant, dans la boucle loop, il suffit d’attendre la connexion d’un utilisateur depuis un navigateur Web

Pour cela, on vérifie que le serveur soit bien démarré. Si ce n’est pas le cas, on ne fait rien de plus.

WiFiClient client = server.available();
if (!client) {
  return;
}

Que se passe-t-il dans la boucle loop ?

On fait quelque chose uniquement si un client est connecté, c’est à dire qu’on réalise une requête HTTP sur l’ESP8266 depuis un navigateur internet

WiFiClient client = server.available();
if (!client) {
  return;
}

Dès qu’un client se connecte au serveur web – en saisissant l’adresse IP de l’ESP8266 dans la barre d’adresse du navigateur – on récupère la requête HTTP dans une variable de type String (chaîne)

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

Ouvrez le moniteur série et saisissez cette commande dans la barre d’adresse du navigateur en remplaçant par l’adresse IP de l’ESP8266

IP_ESP8266/LED=ON

Vous devriez obtenir un message de ce type sur le moniteur série, c’est la requête que l’on vient de récupérer sur l’ESP8266

GET /LED=OFF HTTP/1.1

Comme c’est une simple chaîne de caractère, il suffira de tester les différents cas avec la commande indexOf sur la variable req.

if (request.indexOf("/LED=ON") != -1) { 
   digitalWrite(output, HIGH); 
   value = HIGH; 
} if (request.indexOf("/LED=OFF") != -1) { 
   digitalWrite(output, LOW); 
   value = LOW; 
}

Il ne reste plus qu’à créer un affichage en retour. Les méthodes client.println() et client.print() permettent d’envoyer sur le navigateur du texte comme on le ferait sur le moniteur série

client.println("HTTP/1.1 200 OK"); 
client.println("Content-Type: text/html"); 
client.println(""); 
client.println("<!DOCTYPE HTML>"); 
client.println("<html>"); 
client.print("GPIO status: "); 
if(value == HIGH) { 
  client.print("ON"); 
} else { 
  client.print("OFF"); 
}

Voilà, vous pouvez maintenant piloter à distance tout matériel relié au GPIO (un relai, une led, un moteur, un servomoteur….) à laide d’une simple requête HTTP. Vous pouvez par exemple très simplement exécuter une commande depuis un logiciel domotique. Voici deux exemples, le premier pour Domoticz, le second pour Jeedom.

A LIRE AUSSI :
ESP Easy R120. Ecran d'affichage OLED SSD1306 pour Jeedom actualisé par requête HTTP
A LIRE AUSSI :
Capteur et matériel virtuel Domoticz. Test avec ESP Easy et ESP8266

Astuce, comment ajouter une favicon

Il est très facile d’ajouter une favicon, la petite icône affichée à coté du titre de la page Web sur le navigateur internet

Tout d’abord, il faut récupérer l’image que l’on souhaite afficher sous la forme d’une chaine de caractère encodée en base64. Depuis votre moteur de recherche, trouvez un convertisseur d’image vers une chaîne en base64. Par exemple png to base64 converter pour convertir une image au format PNG.

Vous pouvez par exemple utiliser base64-image.de qui supporte de nombreux formats d’images. Il suffit de déposer l’image à convertir en base64 dans le champ drag & drop images anywhere.

 

image converter online esp8266

Il suffit de coller l’image pour la récupérer sous la forme d’une chaine encodée en base64.

image base64 favico esp8266

Il suffit ensuite d’ajouter une section head en collant. Remplacer base64_image_string par la chaine base64. Modifiez le type de l’image (jpg, png…)

client.println("<!DOCTYPE HTML>");
  client.println("<head>");
  client.println("<link rel='icon' href='base64_image_string' type='image/x-png' />");
  client.println("</head>");
  client.println("<html>");

Et voilà, la page possède maintenant une favicon dans la barre d’adresse

esp8266 favico webserver

Ajouter un interface HTML au projet ESP8266 avec du code Arduino

Maintenant, vous voudriez certainement pouvoir réaliser une petite interface pour vos projets ESP8266. Pour cela, nous avons besoin de connaître quelques rudiments d’HTML. Nous n’allons pas aller très loin dans l’apprentissage de l’HTML, juste apprendre les éléments importants pour démarrer et avoir un projet fonctionnel. Si vous avez besoin de plus d’éléments d’interface, je vous conseille w3schools qui est une référence dans l’apprentissage de l’HTML. Le site est en anglais mais il est très clair et très simple d’accès.

Dans un projet ESP8266, on peut créer des pages HTML en dynamique, c’est à dire qu’on construit une chaine texte qui contient le code de la page qu’on va ensuite afficher. C’est ce que nous allons faire. Mais l’ESP8266 est capable également de fonctionner comme un vrai site internet, c’est à dire qu’on peut installer sur la mémoire flash les pages HTML, du code javascript, les feuilles de style CSS… Nous n’irons pas jusque là dans ce premier tutoriel.

Mini station météo (DHT22 + BMP180) pour tester

Je vous propose de créer une petite station météo pour avoir des données à actualiser régulièrement et créer un bouton pour activer / désactiver une sortie GPIO (juste une Led, pour l’exemple). Vous pouvez utiliser le matériel suivant

esp8266 Wemos D1 mini Module ESP8266 ESP-12 ou Wemos D1 Mini
BMP180 Capteur de pression atmosphérique

BMP180

Broches DHT22 Capteur de température et d’humidité

DHT11 ou DHT22

jumper dupont Jumper Dupont
breadboard Breadboard

Circuit

Voici un tableau de repérage et de correspondance des broches entre Arduino et ESP8266.

Composant Broches Equivalence ESP8266 (Wemos D1 mini)
DHT22 VCC 5V
GND G
Data G5
BMP180 VCC 5V
GND G
SDA D2

On commence par déclarer les librairies nécessaires. N’oubliez pas d’installer les librairies depuis le gestionnaire de bibliothèques (DHT et BMP085).

Vous risquez de rencontrer une erreur à la compilation adafruit_Sensor.h : No such file or directory.

Dans ce cas téléchargez et décompressez la librairie manuellement depuis GitHub dans le dossier Arduino -> Librairie, puis relancez l’IDE pour quelle soit prise en compte.

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <DHT.h>
#include <Adafruit_BMP085.h>

On définit les variables du programme. Modifiez le réseau WiFi sur lequel vous allez vous connecter et le mot de passe de ce dernier.

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

On créé les objets dht, bmp et server

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

Cette première fonction permet de construire le code HTML de la page principale du programme. C’est une simple chaine de caractère. C’est un assemblage de chaînes. On peut facilement y inclure la valeur ou l’état d’une variable (par exemple l’état d’une sortie). En retour, la fonction renvoie une chaine contenant le code HTML de la page.

String getPage(){
  String page = "<html lang=fr-FR><head><meta http-equiv='refresh' content='10'/>";
  page += "<title>ESP8266 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 Demo</h1>";
  page += "<h3>DHT22</h3>";
  page += "<ul><li>Temperature : ";
  page += t;
  page += "°C</li>";
  page += "<li>Humidite : ";
  page += h;
  page += "%</li></ul><h3>BMP180</h3>";
  page += "<ul><li>Pression atmospherique : ";
  page += p;
  page += " mbar</li></ul>";
  page += "<h3>GPIO</h3>";
  page += "<form action='/' method='POST'>";
  page += "<ul><li>D3 (etat: ";
  page += etatLed;
  page += ")<INPUT type='radio' name='LED' value='1'>ON";
  page += "<INPUT type='radio' name='LED' 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;
}

Voyons un peu mieux comment est construit le code

Code HTML Explication
<html lang=fr-FR>
  <head>
  <meta http-equiv='refresh' content='10'/>
  <title>ESP8266 Demo - www.projetsdiy.fr</title>
  <style> body { background-color: #fffff; 
  font-family: Arial, Helvetica, Sans-Serif; 
  Color: #000088; }</style>
</head>
lang permet de définir la langue de la page

head c’est l’entête de la page. Il contient différentes meta (paramètres)

  • http-equiv=’refresh’ c’est une page que le navigateur devra rafraichir. Pour plus de types, allez ici
  • content=’10’ toutes les 10 secondes

title le titre de la page affiché dans la barre du navigateur

style un style pour la page (couleur de fond, font à utiliser, couleur du texte

<body>
C’est le contenu de la page affiché
<h1>ESP8266 Demo</h1>
Un titre affiché en haut de la page
<h3>DHT22</h3>
h3 balise HTML pour afficher un titre plus petit pour le capteur DHT22
<ul>
  <li>Température : xx°C</li>
  <li>Humidité : xx%</li>
</ul>
Le bloc ul permet d’afficher sous forme de liste les informations.
<form action='/' method='POST'>
<ul>
  <li>D3 (etat: xx)
    <INPUT type='radio' name='LED' value='1'>ON
    <INPUT type='radio' name='LED' value='0'>OFF
  </li>
</ul>
<INPUT type='submit' value='Actualiser'>
</form>
Pour actualiser le GPIO, on utilise un formulaire form.

On utilise ici un bouton radio pour changer l’état (On/Off) puis on envoi submit le contenu du formulaire avec un bouton.

L’option name permet de nommer la variable qui contiendra l’état que l’on souhaite récupérer dans le code Arduino. Ici LED.

</body>
Toute balise ouverte doit être refermée (c’est mieux !)

La fonction handleRoot permet de surveiller si on reçoit un demande d’actualisation du GPIO en surveillant si l’argument LED est renvoyé par la page. Si c’est le cas, on exécute la fonction handleSubmit. A nous de créer

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

La fonction handleSubmit traite l’actualisation du GPIO. On récupère l’état de la variable LED. Attention, c’est une chaine de caractère, on doit donc tester “1” et non pas 1. On en profite pour affecter l’état du GPIO dans la variable etatLed sous la forme d’une chaine, c’est plus sympa à lire. Enfin on actualise l’affichage de la page HTML avec server.send. On récupère la page actualisée en appelant la fonction getPage().

void handleSubmit() {
  // Actualise le GPIO / Update 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() );
  } else {
    Serial.println("Err Led Value");
  }
}

Maintenant que toutes les fonctions sont créées, on peut appeler la fonction setup(). Elle initialise le BMP180, la connexion WiFi, branche la fonction qui s’occupe de la page principale et enfin on lance le serveur web

void setup() {
  Serial.begin ( 115200 );
  // Initialisation du BMP180 / Init BMP180
  if ( !bmp.begin() ) {
    Serial.println("BMP180 KO!");
    while(1);
  } else {
    Serial.println("BMP180 OK");
  }
  
  WiFi.begin ( ssid, password );
  // Attente de la connexion au réseau WiFi / Wait for connection
  while ( WiFi.status() != WL_CONNECTED ) {
    delay ( 500 ); Serial.print ( "." );
  }
  // Connexion WiFi établie / WiFi connexion is OK
  Serial.println ( "" ); 
  Serial.print ( "Connected to " ); Serial.println ( ssid );
  Serial.print ( "IP address: " ); Serial.println ( WiFi.localIP() );

  // On branche la fonction qui gère la premiere page / link to the function that manage launch page 
  server.on ( "/", handleRoot );

  server.begin();
  Serial.println ( "HTTP server started" );
  
}

Il ne reste plus qu’à exécuter la fonction loop() pour relever régulièrement les mesures sur les capteurs. Contrairement à l’exemple précédent basé sur la librairie ESP8266WiFi, ici la librairie ESP8266WebServer nécessite de brancher la fonction callback server.handleClient() qui surveille la présence d’un client et délivre la page HTML demandée.

void loop() {
  server.handleClient();
  t = dht.readTemperature();
  h = dht.readHumidity();
  p = bmp.readPressure() / 100.0F;
  delay(1000);
}

Voici le code source assemblé du projet qu’il vous suffit de coller dans un nouveau projet puis le téléverser

#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <DHT.h>
#include <Adafruit_BMP085.h>

#define ssid      "****"      // WiFi SSID
#define password  "****"      // WiFi password
#define DHTTYPE   DHT22       // DHT type (DHT11, DHT22)
#define DHTPIN    D4          // Broche du DHT / DHT Pin
#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;
ESP8266WebServer server ( 80 );

String getPage(){
  String page = "<html lang=fr-FR><head><meta http-equiv='refresh' content='10'/>";
  page += "<title>ESP8266 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 Demo</h1>";
  page += "<h3>DHT22</h3>";
  page += "<ul><li>Temperature : ";
  page += t;
  page += "°C</li>";
  page += "<li>Humidite : ";
  page += h;
  page += "%</li></ul><h3>BMP180</h3>";
  page += "<ul><li>Pression atmospherique : ";
  page += p;
  page += " mbar</li></ul>";
  page += "<h3>GPIO</h3>";
  page += "<form action='/' method='POST'>";
  page += "<ul><li>D3 (etat: ";
  page += etatLed;
  page += ")";
  page += "<INPUT type='radio' name='LED' value='1'>ON";
  page += "<INPUT type='radio' name='LED' 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;
}
void handleRoot(){ 
  if ( server.hasArg("LED") ) {
    handleSubmit();
  } else {
    server.send ( 200, "text/html", getPage() );
  }  
}

void handleSubmit() {
  // Actualise le GPIO / Update 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() );
  } else {
    Serial.println("Err Led Value");
  }
}

void setup() {
  Serial.begin ( 115200 );
  // Initialisation du BMP180 / Init BMP180
  if ( !bmp.begin() ) {
    Serial.println("BMP180 KO!");
    while(1);
  } else {
    Serial.println("BMP180 OK");
  }
  
  WiFi.begin ( ssid, password );
  // Attente de la connexion au réseau WiFi / Wait for connection
  while ( WiFi.status() != WL_CONNECTED ) {
    delay ( 500 ); Serial.print ( "." );
  }
  // Connexion WiFi établie / WiFi connexion is OK
  Serial.println ( "" ); 
  Serial.print ( "Connected to " ); Serial.println ( ssid );
  Serial.print ( "IP address: " ); Serial.println ( WiFi.localIP() );

  // On branche la fonction qui gère la premiere page / link to the function that manage launch page 
  server.on ( "/", handleRoot );

  server.begin();
  Serial.println ( "HTTP server started" );
  
}

void loop() {
  server.handleClient();
  t = dht.readTemperature();
  h = dht.readHumidity();
  p = bmp.readPressure() / 100.0F;
  delay(1000);
}

Récupérez l’adresse IP de la Wemos en ouvrant le moniteur série puis connectez vous à celle-ci depuis un navigateur internet pour accéder à l’interface de la mini station météo.

 esp8266 wemos d1 mini serveur server web dht22 bmp180 gpio

Voilà, nous savons maintenant comment créer un serveur web à l’aide d’un ESP8266, piloter le GPIO et afficher des mesures en provenance de capteurs. Nous n’avons vu ici que les principaux rudiment pour débuter mais il couvrent déjà une grande partie de ce que l’on a besoin pour développer de petits objets connectés. Dans le prochain tutoriel, nous verrons comment avoir une plus belle interface graphique en utilisant Bootstrap, un framework développé par un développeur travaillant chez Tweeter qui permet de créer de plus belles interfaces graphiques en HTML.

Remarque. Tout le tutoriel a été développé sur l’IDE Arduino 1.8.1 installé sur un Orange Pi Plus 2e (présenté ici) fonctionnant sous Armbian (Ubuntu 16.04 LTS). Suivez ce tutoriel pour savoir comment installer l’IDE Arduino sur Linux (ARM ou x86).

D’autres projets pour aller plus loin

L’interface obtenue avec du code HTML standard est assez basique. Heureusement, il est possible d’utiliser des frameworks pour avoir une interface beaucoup plus moderne. Bootstrap (développé par Twetter) est super simple à utiliser. Vous trouvez dans ces projets tout ce qu’il vous faut pour aller plus loin.

A LIRE AUSSI :
Interface HTML pour ESP8266. Améliorer le design avec Bootstrap
A LIRE AUSSI :
Interface HTML pour ESP8266. Améliorer le design avec Bootstrap

Mises à jour

28/08/2020 Ré-écriture de la présentation de la librairie ESP8266WiFi. Comment ajouter une favicon.

Avez-vous aimé cet article ?
[Total: 1 Moyenne: 5]
Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest
Partager sur email
Partager sur telegram

Vous avez aimé ce projet ? Ne manquez plus aucun projet en vous abonnant à notre lettre d’information hebdomadaire!

quel modèle esp8266 choisir
Quel modèle d'ESP8266EX choisir en 2020 ?
guide choix esp32 development board
Quel ESP32 choisir en 2020 ?

Vous rencontrez un problème avec ce sujet ?

Peut-être que quelqu’un a déjà trouvé la solution, visitez le forum avant de poser votre question

36 Commentaires
  1. Merci et félicitations pour cet excellent tutoriel

  2. Bonjour,
    Merci pour votre travail pédagogique, j’ai enfin compris quelque chose et j’essaie de pratiquer.
    Avec ce programme, la console me remonte des erreur 404 favicon .
    j’ai consulté le web et inséré dans le head html une ligne pour spécifier l’endroit ou se trouve ce fameux favicon.ico mais l’IDE Arduino refuse cette ligne.
    Quelle est la solution ?

    • Merci beaucoup Georges, j’ai pris le temps d’actualiser et clarifier le début de l’article. J’ai aussi indiqué comment ajouter une favicon 🙂 Bon week end

  3. bonjour,
    super tuto,j’ai réussi.
    j’ai un bouton fin de course dans mon montage, j’ai réussi à récupérer l’activité mais la réponse est lente.
    voilà se que j’ai rajouté, peux ton faire mieux? merci de votre aide
    en fin de page

    page += “ON”;
    page += “OFF”;
    page += “”;
    page += “BOUTON”;
    page += “”;
    page += “D0 (etat: “;
    page += etatBtn;
    page += “)”;

    puis dans la boucle:

    //**********************************************************
    switchState = digitalRead(BUTTON); // read the pushButton State
    // Serial.print(” switchState “);
    //Serial.println( switchState );
    if (switchState != oldSwitchState) // catch change
    {
    oldSwitchState = switchState;

    if (switchState == HIGH)
    {
    // toggle

    lightsOn = !lightsOn;
    }
    } // +++++++++++++++++++ end of if ( switchState != ….
    // move this bracket to the end

    // ++++++++++++++++++ new if() statement – runs every loops = problem
    if(lightsOn){
    digitalWrite(LED, HIGH); // set the LED on
    Serial.println(“LED Turned ON”);
    etatBtn =”ON”;
    }

    else {
    digitalWrite(LED, LOW); // set the LED off
    Serial.println(“LED Turned OFF”);
    etatBtn=3OFF”;
    }
    server.send ( 200, “text/html”, getPage() );
    delay (200);
    }

    merci.

    • Bonjour et merci beaucoup. C’est le délai d’actualisation de la page (rechargement) qui est long, pour aller plus vite, il faudrait faire de l’ajax mais je n’ai pas les compétences requises pour le moment.

  4. Bonjour super tuto, j’ai réussi à la faire fonctionner. j’ai besoin de lire un bouton de fin de course.
    j’ai réussi à le mettre en action ( lecture sur le port série, affichage sur la page) mais c’est très lent .
    j’ai fais comme cela:
    page += “ON”;
    page += “OFF”;
    page += “”;
    page += “BOUTON”;
    page += “”;
    page += “D0 (etat: “;
    page += etatBtn;
    page += “)”;

    ensuite j’ai ajouté dans la boucle :

    //**********************************************************
    switchState = digitalRead(BUTTON); // read the pushButton State
    // Serial.print(” switchState “);
    //Serial.println( switchState );
    if (switchState != oldSwitchState) // catch change
    {
    oldSwitchState = switchState;

    if (switchState == HIGH)
    {
    // toggle

    lightsOn = !lightsOn;
    }
    } // +++++++++++++++++++ end of if ( switchState != ….
    // move this bracket to the end

    // ++++++++++++++++++ new if() statement – runs every loops = problem
    if(lightsOn){
    digitalWrite(LED, HIGH); // set the LED on
    Serial.println(“LED Turned ON”);
    etatBtn =”ON”;
    }

    else {
    digitalWrite(LED, LOW); // set the LED off
    Serial.println(“LED Turned OFF”);
    etatBtn=3OFF”;
    }
    server.send ( 200, “text/html”, getPage() );
    delay (200);

    il existe surement un autre moyen? je débute.
    merci de votre lecture

  5. Re et encore merci pour tous ce que vous faite, mais à force de chercher, j’ai trouvé comment activer la LED. j’ai ajouté dans VoidSetup :
    {
    pinMode(LEDPIN, OUTPUT); // met la broche utilisée avec la LED en SORTIE
    }

    Et maintenant cela fonctionne.

    Merci encore pour tout votre travail.

  6. Bonjour,
    Super tuto, moi qui suis nul, grâce à vous j’ai réussi a combiner votre serveur WEB avec l’envoie des informations au serveur DOMOTICZ (Cela m’a pris 2 jours, mais ça marche !!).
    Mon seul soucis est que le changement d’état e la LED ne fonctionne pas. Le l’ai brancher en D7 et bien évidement j’ai renommé aussi D7 dans le sktech. J’ai vérifié le fonctionnement de la led, la polarité mais ça ne vient pas de là. Ci-dessous le sktech que j’ai rentré :
    #include
    #include
    #include
    #include
    #include
    #include

    #define ssid “xxxx” // WiFi SSID
    #define password “xxxx” // WiFi password
    #define DHTTYPE DHT11 // DHT type (DHT11, DHT22)
    #define DHTPIN D4 // Broche du DHT / DHT Pin
    #define LEDPIN D7 // Led
    const char* host = “192.168.000.043”;
    const int port = 8080;
    const int watchdog = 60000; // Fréquence d’envoi des données à Domoticz – Frequency of sending data to Domoticz
    unsigned long previousMillis = millis();
    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;
    HTTPClient http;
    ESP8266WebServer server ( 80 );

    String getPage(){
    String page = “”;
    page += “TEST DU 24/03/2020 By ECOTAXE”;
    page += ” body { background-color: #fffff; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }”;
    page += “TEST DU 24/03/2020 By ECOTAXE”;
    page += “DHT11”;
    page += “Temperature : “;
    page += t;
    page += “°C”;
    page += “Humidite : “;
    page += h;
    page += “%BMP180”;
    page += “Pression atmospherique : “;
    page += p;
    page += ” mbar”;
    page += “GPIO”;
    page += “”;
    page += “D7 (etat: “;
    page += etatLed;
    page += “)”;
    page += “ON”;
    page += “OFF”;
    page += “”;
    page += “https://www.projetsdiy.fr“;
    page += “”;
    return page;
    }
    void handleRoot(){
    if ( server.hasArg(“LED”) ) {
    handleSubmit();
    } else {
    server.send ( 200, “text/html”, getPage() );
    }
    }

    void handleSubmit() {
    // Actualise le GPIO / Update 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() );
    } else {
    Serial.println(“Err Led Value”);
    }
    }

    void setup() {
    Serial.begin ( 115200 );
    // Initialisation du BMP180 / Init BMP180
    if ( !bmp.begin() ) {
    Serial.println(“BMP180 KO!”);
    while(0);
    } else {
    Serial.println(“BMP180 OK”);
    }

    WiFi.begin ( ssid, password );
    // Attente de la connexion au réseau WiFi / Wait for connection
    while ( WiFi.status() != WL_CONNECTED ) {
    delay ( 500 ); Serial.print ( “.” );
    }
    // Connexion WiFi établie / WiFi connexion is OK
    Serial.println ( “” );
    Serial.print ( “Connected to ” ); Serial.println ( ssid );
    Serial.print ( “IP address: ” ); Serial.println ( WiFi.localIP() );

    // On branche la fonction qui gère la premiere page / link to the function that manage launch page
    server.on ( “/”, handleRoot );

    server.begin();
    Serial.println ( “HTTP server started” );

    }

    void loop() {
    server.handleClient();
    t = dht.readTemperature();
    h = dht.readHumidity();
    p = bmp.readPressure() / 100.0F;
    delay(1000);

    unsigned long currentMillis = millis();

    if ( currentMillis – previousMillis > watchdog ) {
    previousMillis = currentMillis;

    if(WiFi.status() != WL_CONNECTED) {
    Serial.println(“WiFi not connected !”);
    } else {
    Serial.println(“Send data to Domoticz”);

    float t = dht.readTemperature();
    float h = dht.readHumidity();
    float pa = bmp.readPressure() / 100.0F;

    if ( isnan(t) || isnan(h) ) {
    Serial.println(“DHT KO”);
    } else {
    int hum_stat;
    int bar_for = 0;
    if ( h > 70 ) {
    hum_stat = 3;
    } else if ( h = 30 & h 45 & h 1030 ) {
    bar_for = 1;
    } else if ( pa > 1010 & pa 990 & pa 970 & pa < 990 ) {
    bar_for = 4;
    }

    String url = "/json.htm?type=command&param=udevice&idx=4&nvalue=0&svalue=";
    url += String(t); url += ";";
    url += String(h); url += ";";
    url += String(hum_stat); url += ";";
    url += String(pa);url += ";";
    url += String(bar_for);

    sendDomoticz(url);
    }
    }
    }
    }

    void sendDomoticz(String url){
    Serial.print("connecting to ");
    Serial.println(host);
    Serial.print("Requesting URL: ");
    Serial.println(url);
    http.begin(host,port,url);
    int httpCode = http.GET();
    if (httpCode) {
    if (httpCode == 200) {
    String payload = http.getString();
    Serial.println("Domoticz response ");
    Serial.println(payload);
    }
    }
    Serial.println("closing connection");
    http.end();
    }

    Si vous avez une idée de pourquoi le changement d'état de la LED ne fonctionne pas je suis preneur.

    D'avance merci et encore bravo pour vos tutos et aide que vous nous apportée

  7. Salut
    tuto sympa
    mail il n explique pas vraiment ou j ai pas totu compris
    comment recupérer le contenu de ca
    je precise que le contenu est sans fioriture juste une ligne en et le chiffre
    http://www.starenda.info/extrac_res.php?esp=2
    ma carte marche tres bien vers le web, car j arrive a joindre la page http://www.starenda.info/ecrireso.php?nom=esp2&value=3

    si j ai bien tout compris, on stocke comme ceci ?
    ValeurRecu=client.read(r);

    et apres j ai plus qu a analyser la chose ?
    seral.print(ValeurRecu);

    c est va ?

  8. Dans le premier exemple j’ai comme erreur :exit status 1 – expected unqualified-id before ‘if’
    ici : if (req.indexOf(“/gpio/0”) != -1)

  9. Bonjour,
    Merci pour ce (ces) tutos,
    Mais j’ai le même problème que Jasmine avec un site inaccessible.
    j’utilise un wemos D1 R2.
    J’ai vérifié un connexion wifi en téléversant un autre programme et ça marche parfaitement bien.
    Peux-tu me dire si c’est un problème de carte ?

  10. bonjour merci bqp pour ce tutoriel , j’ai un problème quand je copie l’adresse IP et je me connecte a elle , on me dit Ce site est inaccessible

    • Bonjour Jasmine. Probablement que le serveur Web n’est pas démarré sur l’ESP8266. Avez vous essayé de vous envoyer des messages de debogage sur le port série afin de déterminer si le programme démarre comme prévu ? Ca vous aidera à déterminer s’il y a une erreur dans le code qui empêche le démarrage du serveur web. Autre piste, vérifiez que le module est correctement connecté au réseau WiFi.

  11. superbe site, une mine d’info

    par contre au niveau du code je pense qu’il serait pas mal d’utiliser les librairies de l’esp du coup
    #include
    #include
    #include

    remplacer les lignes 11-12 par
    float t ;
    float h ;
    sinon ça peut poser des problèmes

    remplacer la ligne 17 par : DHTesp dht;

    mettre dht.setup(DHTPIN); dans la zone setup

    et rajouter un delay(dht.getMinimumSamplingPeriod());
    en zone loop.
    ( et j’ai rajouté un
    Serial.print ( “temperature: ” ); Serial.println ( t );
    Serial.print ( “humidité: ” ); Serial.println ( h );
    ) pour le débug 😉

  12. Parfait travail très bien, félicitations.
    Je voudrais envoyer un nombre pour créer un champ et envoyer une valeur de page à esp8266 et utiliser comme numéro entier?
    Je ne peux pas

    Merci

  13. Bonjour,
    je trouve ces tuto vraiment interessante, je voulais vous demande j ai un projet sur wemos avec le gy-521 mais je doit utilise prometheus et grafana je n’est pas su comment recupere les donné sur docker pour les envoyer a prometheus ? merci de bien vouloire m’aide

    • Bonjour Adel et merci beaucoup. Il est assez difficile de se connecter à une machine Docker car il me semble qu’elle n’est pas sur le même réseau que la machine hôte. Il faut regarder dans cette direction. Une fois ce problème résolu, tout devrait rouler. Je vais prochainement faire un tuto pour installer Grafana sur Raspberry Pi, j’ai enfin trouvé comment faire :D. Bon week end

      • Bonsoir; voila l’intituler de mon thème :

        Le
        but du projet est de mettre en œuvre la carte WeMos (qui possède un carte WIFI
        intégrée) pour l’envoi de séries de données marquées temporellement sur un
        serveur utilisant l’application web Prometheus
        Pour simplifier les choses on pourra utiliser docker pour l’installation de prometheus.

  14. Bonjour et merci beaucoup de ces nombreux tutos !

    J’utilise un ESP8266 embarqué dans ma tondeuse (robot) depuis plusieurs semaines.
    En simplifiant : soft sous Windows (qui envoie des commandes sur un port COM) -> émulation de port COM TCP TruePort -> WIFI -> ESP en mode transparent. Nickel.

    J’utilise donc, dans mon sketch, un serveur TCP (porte xxx) qui tourne sur l’ESP.

    Je voudrais démarrer petit en intégrant une page web qui me permettrait d’afficher les données principales.
    Mais…pour cela il faut démarrer un 2ième serveur web… sur le port 80 ?!

    Est-il possible de faire coéxister ces 2 serveurs ???
    Ou….quel serait le moyen de détourner cette limitation ?

    Merci d’avance !

    • Bonjour Philippe et merci beaucoup. Très beau projet ! vous devriez nous en dire plus et partager quelques photos, je suis certain que d’autres Makers vont adorer. Pour en revenir à la question je pense qu’il serait plus facile de modifier la communication entre le PC et l’ESP. Vous pouvez commencer par cet article qui explique comment faire très rapidement en javascript avec Nodejs https://projetsdiy.fr/esp8266-client-web-exemples-communication-tcp-ip-esp8266wifi-esp8266httpclient/ En faisant une recherche dans le champ de recherche sur le mot clé HTTP, vous trouverez d’autres exemples. Peut etre encore plus simple, communiquer avec des messages MQTT (50 fois plus rapide que le HTTP). Très facile de faire un dashboard sur Windows avec Node-RED https://projetsdiy.fr/node-red-dashboard-interface-partie1/. A très bientot

      • Merci de ces réponses hyper rapides !

        Mais je pense ne pas comprendre vos propositions:
        – dans le cadre du soft que j’utilise, il envoie et reçoit des commandes/résultats en hexadécimal et les interprète. En principe cela se fait en se branchant au robot. Dans mon cas j’ai transformé ce branchement cablé (port COM) par un lien WIFI via un serveur TCP sur l’ESP. Est-ce cette partie que vous me proposez de modifier ?
        – en // c’est un peu mon “nouveau projet” : être capable d’offir un autre moyen que le soft+PC pour visualiser ces données. Une page web ou, et c’est peut-être ce à quoi vous pensiez, par messages MQTT ?

        Existe-t-il une sorte de forum sur ce site afin de discuter plus “librement” ?

        Merci

        • De rien Philippe. Ah d’accord. Oui discuter de sujets techniques pointus via des commentaires, ce n’est pas toujours facile. Donc voici ce que j’ai compris. La tondeuse dispose d’une sortie série. Vous utilisez le port série de l’ESP8266 pour récupérer les trames. Ensuite, vous voudriez pouvoir afficher les infos récupérées sur une page web qui tourne sur l’ESP et éventuellement les envoyer vers un autre ordinateur. C’est bien ça ? Désolé, je préfère vérifier avant de rentrer dans les solutions possibles.
          Non, j’hésite encore à mettre en place un forum. Vous pensez que ce serait utilise pour Projets DIY ? Il y a déjà beaucoup de forums très actifs (surtout en domotique).

        • Philippe de la Croix 1 juillet 2017 à 18 h 16 min

          En effet il y a beaucoup de forums. Dans ce cas précis je “saute” sur vous car je sens que vous me termineriez ce projet en 2h 🙂 mais, si un forum existait, peut-être d’autres personnes actives se feraient elles connaître ?

          Donc, vous avez en effet compris le principe.

          1) le soft que j’utilise (via COM->WIFI/TCP->ESP) me permet d’envoyer des commandes de statut en hexa puis de recevoir et interpréter les réponses (t°, mode, tension….le tout envoyé par le port série du robot).
          Mais aussi d’envoyer des commandes : arrêt, maison, tonte, etc…
          Ca, ça fonctionne. Et c’est TRES complet et me permet de modifier des paramètres très ciblés.
          Mais il faut toujours un PC pour faire tourner ce soft ET j’utilise un serveur wifi TCP sur l’ESP.

          2) donc, dans le but de pouvoir faire la même chose mais en plus léger/portable quand je ne suis pas chez moi je tente maintenant de créer un moyen minimaliste de :
          – vérifier l’état du robot : mêmes commandes hexa (mais limitées à 4 ou 5 paramètres), mêmes réponses
          – lui intimer l’ordre de tondre ou de rentrer à la maison.
          Pas plus…pas besoin de reconfigurer tout le système lorsque je suis loin. Ca ca reste pour le soft PC.

          Une petite page web ou une appli simple, 2 graphiques de t° et tension et hop….je suis heureux.
          C’est pour cette seconde partie que je bloque car l’usage du serveur web sur l’ESP est proscit car je l’utilise déjà pour la 1ère partie.

        • Oui c’est exactement ça. Il faut beaucoup de monde pour qu’un forum soit vraiment utile. Je doit encore trouver comment structurer un tel forum. Par technologie, par theme…
          Revenons à votre projet. L’architecture est un très bon cas d’école. Par contre je n’avais pas compris que vous vouliez conserver le soft actuel sur le PC
          1. On ne touche à rien
          2. Il n’est pas nécessaire de démarrer un autre serveur sur l’ESP. Un serveur peut avoir plusieurs clients. J’image que les commandes envoyées depuis le PC sont de la forme http://IP-ESP/ordre?id=xx&etat=xx. Donc dans votre code Arduino, vous devez avoir dans le setup les branchements vers les fonctions
          void setupt(){
          server.on(“/ordre”, traitementOrdre);
          }
          La page web principale (/) est affichée à chaque rafraichissement de la boucle loop
          void loop(){
          server.handleClient();
          }
          Lisez l’exemple de cet série d’article qui va (beaucoup) plus loin que celui-ci https://projetsdiy.fr/esp8266-web-serveur-partie2-interaction-arduino-interface-html/
          Voilà, j’espère que c’est plus claire. Désolé pour les échanges, fallait que je me remette dans la programmation TCP/IP. Quand je passe d’une techno à l’autre, ça me demande un petit moment. A très bientôt.

        • Philippe de la Croix 1 juillet 2017 à 19 h 06 min

          Merci mais …. (il y a toujours un “mais”).
          L’ESP est configuré en mode transparent. Il reçoit les commandes vers/depuis le robot sous format hexadécimal uniquement 🙁
          Se parquer se dit : 0F 81 2C 00 03

          J’ai remarqué qu’avoir plusieurs clients TCP était compliqué. Souvent cela plante et il s’emmêle les pinceaux.

          Merci

        • Bonjour Philippe. Je suis en train de mettre en place un forum. Le forum ESP8266 se trouve ici https://projetsdiy.fr/forums/forum/arduino-esp8266-esp32/esp8266/. Vous pouvez dès maintenant poser vos questions à la communauté. Le forum est totalement intégré au site. J’espère que la forum va vous aider à trouver rapidement une solution. A très bientôt

  15. Salut,

    Merci beaucoup pour ce tuto.

    J aimerais savoir comment recevoir des donnees provenant d un accelerometre assez rapidement via wifi, d une carte Wemos (esp8266) vers un server Node.js (en utilisant express.js).

    Merci !

  16. Hello,

    Bravo !! très bon tuto expliquer très clairement. Petite faute au W3scholls ^^

    Je te suis depuis un bon moment et je n’utilise pratiquement que tes tutos 😉

    A + tard 😀

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Domotique et objets connectés à faire soi-même
Vous avez aimé ce tutoriel

Ne manquez plus les prochains projets

Recevez chaque semaine le récapitulatif des tutoriels et projets.

Vous pouvez vous désabonner à tout moment.