ESP8266 : comprendre la programmation Web Server avec du code Arduino

L’ESP8266 peut se programme comme un Arduino classique mais son principal intérêt reste sa connexion Wi-Fi qui lui permet de publier des données sur un serveur ou un Dashboard en ligne (ThingSpeak, Freeboard.io), ou de 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). Dans ce tutoriel, nous allons apprendre comment programmer l’ESP8266 pour qu’il se comporte comme un serveur web. C’est à dire qu’on pourra interagir avec le programme, le GPIO… depuis une interface web accessible depuis un navigateur internet (sur le réseau local ou depuis internet en configurant le routeur).

Installer les librairies et cartes ESP8266 sur l’IDE Arduino

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

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

IDE Arduino 1.6.8 esp8266 package

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

  • Generic ESP8266 Module
  • Olimex MOD-WIFI-ESP8266(-DEV)
  • NodeMCU 0.9 (ESP-12 Module)
  • NodeMCU 1.0 (ESP-12E Module)
  • 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 (ESP-12 Module)
  • ESPino (WROOM-02 Module)
  • WifInfo
  • ESPDuino

Allez dans le gestionnaire de carte et cherchez esp8266, puis cliquez sur installer.

IDE Arduino 1.6.x ajouter carte esp8266

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

Débuter avec la librairie ESP8266WiFi

Nous allons avancer par étapes pour comprendre comment créer un serveur web sur un ESP8266. Ouvrez l’exemple WiFiWebServer.

On a besoin au minium de la librairie ESP8266WiFi.h pour créer un serveur Web. Comme toutes les librairies, il faut pas mal fouiller pour connaître les méthodes disponibles, voici un petit aperçu pour mieux appréhender ce qu’on peut faire avec. le code source de la librairie est disponible ici. Cette librairie est une adaptation de l’ensemble des librairie développées pour l’Arduino. Vous pourrez également trouver pas mal d’infos ici

  • WiFiClient
    • uint8_t status()
    • int connect(IPAddress ip, uint16_t port)
    • int connect(const char *host, uint16_t port)
    • size_t write(uint8_t)
    • size_t write(const uint8_t *buf, size_t size)
    • size_t write_P(PGM_P buf, size_t size)
    • size_t write(Stream& stream)
    • int available()
    • read(uint8_t *buf, size_t size)
    • int peek()
    • size_t peekBytes(uint8_t *buffer, size_t length)
    • size_t peekBytes(char *buffer, size_t length)
    • void flush()
    • void stop()
    • uint8_t connected()
    • IPAddress remoteIP()
    • uint16_t remotePort()
    • IPAddress localIP()
    • uint16_t localPort()
    • bool getNoDelay()
    • void setNoDelay(bool nodelay)
    • void setLocalPortStart(uint16_t port)
    • static void stopAll();
    • static void stopAllExcept(WiFiClient * c)
  • WiFiServer
    • WiFiServer(IPAddress addr, uint16_t port)
    • WiFiServer(uint16_t port)
    • WiFiClient available(uint8_t* status = NULL)
    • bool hasClient()
    • void begin()
    • void setNoDelay(bool nodelay)
    • bool getNoDelay()
    • virtual size_t write(uint8_t)
    • uint8_t status()
    • void close()
    • void stop()
  • WiFiUDP
  • WiFiClientSecure
#include <ESP8266WiFi.h>
const char* ssid = "your-ssid";
const char* password = "your-password";

On créé une instance, un objet qui contiendra le serveur web. On communiquera avec lui sur le port 80, le port classique des requêtes HTTP utilisées par les navigateurs internet.

WiFiServer server(80);

La boucle setup.

void setup() {
  // Ouverture du port serie en 115200 baud pour envoyer des messages de debug à l'ide par exemple
  Serial.begin(115200);
  delay(10);

  // prepare GPIO2 (sortie)
  pinMode(2, OUTPUT);
  digitalWrite(2, 0);
  
  // Connect to WiFi network
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
  
  // On se connecte a reseau WiFi avec le SSID et le mot de passe precedemment configure
  WiFi.begin(ssid, password);
  
  // On sort de la boucle uniquement lorsque la connexion a ete etablie.
  // Il faudrait ameliorer cette partie pour un fonctionnement sur batterie car en cas d'abscence du reseau
  // on va vider la batterie !
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");
  
  // connexion OK, on demarre le server web // Start the server
  server.begin();
  Serial.println("Server started");

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

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;
}

Lorsqu’un client se connecte, on l’indique sur le port série

Serial.println("new client");
while(!client.available()){
  delay(1);
}

On récupère la requête HTTP, ici l’URL saisie dans le navigateur tout simplement. On envoi sur le port série le contenu de la requête HTTP. On vide le tampon avec la méthode flush.

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

On recherche dans la requête HTTP ce que l’on doit faire. La méthode la plus simple est de passer les ordres à l’ESP8266 sous la forme d’une commande du type /gpio/etat_souhaite (0, 1 ou on/off). On ferra juste un test sur  une chaîne de caractères avec la commande indexOf sur la variable req. Ce type de stratégie convient pour de petits projets mais ça risque rapidement de devenir une source d’erreur avec l’empilage des if, else if.

int val;
if (req.indexOf("/gpio/0") != -1)
  val = 0;
else if (req.indexOf("/gpio/1") != -1)
  val = 1;
else {
  Serial.println("invalid request");
  client.stop();
  return;
}

On met à jour l’état du GPIO et on vide le tampon

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

On créé maintenant un page HTML qui contient l’état du GPIO. C’est une chaine texte qui contient le code HTML de la page. On intercale dans le code de la page, l’état du GPIO

String s = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n<!DOCTYPE HTML>\r\n<html>\r\nGPIO is now ";
s += (val)?"high":"low";
s += "</html>\n";

On publie cette page au client avec la commande print, très facile !

client.print(s);

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.

Ajouter un interface graphique HTML au projet 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.

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. J’ai utilisé 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

Câblage

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).

Remarque. Vous risquez de rencontrez 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> Un titre (h3, 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. La même chose pour le BMP180
<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.

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      "xx"       // WiFi SSID
#define password  "xxxxxx"  // 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.

Voilà, vous êtes prêt pour aller plus loin maintenant ! Voici d’autres tutoriels plus avancés pour aller plus loin dans vos projets DIY d’objets connectés. Amusez-vous bien !

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).

Inscrivez-vous à la newsletter hebdomadaire

Aucun spam et aucun autre usage ne sera fait de votre email. Vous pouvez vous désinscrire à tout moment.

Promos à ne pas louper

24 Commentaires
  1. 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 ?

  2. 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.

  3. 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 😉

  4. 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

  5. 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.

  6. 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

  7. 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 !

  8. 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