Serveur Web ESP8266 DHT11/DHT22 Arduino IDE

Comment afficher les icônes

Pour choisir les icônes, allez dans le Site web de Font Awesome Icons.

Recherchez l’icône que vous recherchez. Par exemple, « thermomètre ».

Cliquez sur l’icône souhaitée. Ensuite, il vous suffit de copier le texte HTML fourni.

<i class="fas fa-thermometer-half">

Pour choisir la couleur, il suffit de passer le paramètre style avec la couleur en hexadécimal, comme suit :

<i class="fas fa-tint" style="color:#00add6;"></i> 

Continuer avec le texte HTML…

La ligne suivante écrit le mot « Température » ​​dans la page Web.

<span class="dht-labels">Temperature</span>

Le texte TEMPÉRATURE entre les signes % est un espace réservé pour la valeur de température.

<span id="temperature">%TEMPERATURE%</span>

Cela signifie que ce texte %TEMPERATURE% est comme une variable qui sera remplacée par la valeur de température réelle du capteur DHT. Les espaces réservés sur le texte HTML doivent être entre les signes %.

Enfin, nous ajoutons le symbole du degré.

<sup class="units">°C</sup>

Les balises placent le texte en exposant.

Nous utilisons la même approche pour le paragraphe sur l’humidité, mais il utilise une icône différente et l’espace réservé %HUMIDITY%.

<p>
  <i class="fas fa-tint" style="color:#00add6;"></i> 
  <span class="dht-labels">Humidity</span>
  <span id="humidity">%HUMIDITY%</span>
  <sup class="units">%</sup>
</p>

Mises à jour automatiques

Enfin, il y a du code JavaScript dans notre page Web qui met à jour automatiquement la température et l’humidité, toutes les 10 secondes.

Les scripts dans le texte HTML doivent être placés entre les balises .

<script>
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("temperature").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 10000 ) ;

setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("humidity").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/humidity", true);
  xhttp.send();
}, 10000 ) ;
</script>

Pour mettre à jour la température en arrière-plan, nous avons une fonction setInterval() qui s’exécute toutes les 10 secondes.

Fondamentalement, il fait une demande dans l’URL /temperature pour obtenir la dernière lecture de température.

  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 10000 ) ;

Lorsqu’il reçoit cette valeur, il met à jour l’élément HTML dont l’id est temperature.

if (this.readyState == 4 && this.status == 200) {
  document.getElementById("temperature").innerHTML = this.responseText;
}

En résumé, cette section précédente est responsable de la mise à jour de la température de manière asynchrone. Le même processus est répété pour les relevés d’humidité.

Important : étant donné que le capteur DHT est assez lent à obtenir les lectures, si vous prévoyez d’avoir plusieurs clients connectés à un ESP8266 en même temps, nous vous recommandons d’augmenter l’intervalle de demande ou de supprimer les mises à jour automatiques.

Processeur

Maintenant, nous devons créer la fonction processor(), qui remplacera les espaces réservés dans notre texte HTML par les valeurs réelles de température et d’humidité.

String processor(const String& var){
  //Serial.println(var);
  if(var == "TEMPERATURE"){
    return String
  }
  else if(var == "HUMIDITY"){
    return String(h);
  }
  return String();
}

Lorsque la page Web est demandée, nous vérifions si le code HTML contient des espaces réservés. S’il trouve l’espace réservé %TEMPERATURE%, nous renvoyons la température qui est stockée sur la variable t.

if(var == "TEMPERATURE"){
  return String
}

Si l’espace réservé est %HUMIDITY%, nous renvoyons la valeur d’humidité.

else if(var == "HUMIDITY"){
  return String(h);
}

installation()

Dans setup(), initialisez le moniteur série à des fins de débogage.

Serial.begin(115200);

Initialiser le capteur DHT.

dht.begin();

Connectez-vous à votre réseau local et imprimez l’adresse IP ESP8266.

WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.println("Connecting to WiFi..");
}

Enfin, ajoutez les lignes de code suivantes pour gérer le serveur Web.

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/html", index_html, processor);
});
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/plain", String
});
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/plain", String(h).c_str());
});

Lorsque nous faisons une requête sur l’URL root, nous envoyons le texte HTML qui est stocké sur la variable index_html. Nous devons également passer la fonction processor, qui remplacera tous les espaces réservés par les bonnes valeurs.

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/html", index_html, processor);
});

Nous devons ajouter deux gestionnaires supplémentaires pour mettre à jour les relevés de température et d’humidité. Lorsque nous recevons une requête sur l’URL /temperature, nous devons simplement envoyer la valeur de température mise à jour. C’est du texte brut, et il doit être envoyé sous forme de caractère, nous utilisons donc la méthode c_str().

server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/plain", String
});

Le même processus est répété pour l’humidité.

server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/plain", String(h).c_str());
});

Enfin, nous pouvons démarrer le serveur.

server.begin();

Dans la boucle () est l’endroit où nous obtenons de nouvelles lectures de température du capteur toutes les 10 secondes.

Fondamentalement, nous vérifions s’il est temps d’obtenir de nouvelles lectures de capteur :

if (currentMillis - previousMillis >= interval) {

Si c’est le cas, nous stockons une nouvelle lecture de température sur la variable newT

float newT = dht.readTemperature();

Si la variable newT est une lecture de température valide, nous mettons à jour la variable t.

else {
  t = newT;
  Serial.println
}

Le même processus est répété pour l’humidité.

// Read Humidity
float newH = dht.readHumidity();
// if humidity read failed, don't change h value 
if (isnan(newH)) {
   Serial.println("Failed to read from DHT sensor!");
}
else {
  h = newH;
  Serial.println(h);
}

C’est à peu près comme ça que le code fonctionne.

Téléchargement du code

Après avoir modifié l’esquisse avec les modifications nécessaires, si nécessaire, téléchargez le code sur votre ESP8266 (si vous ne pouvez pas télécharger le code sur votre ESP8266, lisez ce guide de dépannage).

Assurez-vous que vous avez sélectionné la bonne carte et le bon port COM. Accédez à Outils> Carte et sélectionnez le modèle ESP8266 que vous utilisez. Dans notre cas, nous utilisons le kit ESP8266 12-E NodeMCU.

Allez dans Outils > Port et sélectionnez le port COM auquel l’ESP8266 est connecté.

Appuyez sur le bouton de téléchargement de l’IDE Arduino.

Remarque : si vous utilisez un ESP-01, vous avez besoin d’un adaptateur série ou un Programmeur FTDI pour télécharger le code.

Adresse IP ESP8266

Après avoir téléchargé le code, ouvrez le moniteur série à un débit en bauds de 115200. Appuyez sur le bouton de réinitialisation ESP8266. L’adresse IP ESP8266 sera imprimée dans le moniteur série comme indiqué dans la figure suivante.

Manifestation

Dans votre réseau local, accédez à un navigateur et tapez l’adresse IP ESP8266. Il devrait afficher la page Web suivante avec les dernières lectures de capteur.

Les relevés de température et d’humidité sont mis à jour automatiquement toutes les 10 secondes sans qu’il soit nécessaire de rafraîchir la page Web.

2. Serveur Web HTTP simple ESP8266

Dans cette section, nous allons vous montrer comment créer un serveur Web HTTP simple qui affiche la température et l’humidité dans une page HTML brute. Ce serveur Web envoie une réponse HTTP lorsque votre navigateur fait une requête sur l’adresse IP ESP8266.

Démonstration vidéo

Tout d’abord, vous pouvez regarder la vidéo de démonstration du projet de serveur Web ESP8266 ci-dessous.

Code

Nous allons programmer l’ESP8266 à l’aide de l’IDE Arduino, vous devez donc avoir le module complémentaire ESP8266 installé dans votre IDE Arduino. Si vous n’avez pas suivi le tutoriel suivant en premier.

Ouvrez votre IDE Arduino et copiez le code suivant.

/*********
  Rui Santos
  Complete project details at https://www.raspberryme.com  
*********/

// Including the ESP8266 WiFi library
#include <ESP8266WiFi.h>
#include "DHT.h"

// Uncomment one of the lines below for whatever DHT sensor type you're using!
#define DHTTYPE DHT11   // DHT 11
//#define DHTTYPE DHT21   // DHT 21 (AM2301)
//#define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321

// Replace with your network details
const char* ssid = "YOUR_NETWORK_NAME";
const char* password = "YOUR_NETWORK_PASSWORD";

// Web Server on port 80
WiFiServer server(80);

// DHT Sensor
const int DHTPin = 5;
// Initialize DHT sensor.
DHT dht(DHTPin, DHTTYPE);

// Temporary variables
static char celsiusTemp[7];
static char fahrenheitTemp[7];
static char humidityTemp[7];

// only runs once on boot
void setup() {
  // Initializing serial port for debugging purposes
  Serial.begin(115200);
  delay(10);

  dht.begin();
  
  // Connecting to WiFi network
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
  
  WiFi.begin(ssid, password);
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");
  
  // Starting the web server
  server.begin();
  Serial.println("Web server running. Waiting for the ESP IP...");
  delay(10000);
  
  // Printing the ESP IP address
  Serial.println(WiFi.localIP());
}

// runs over and over again
void loop() {
  // Listenning for new clients
  WiFiClient client = server.available();
  
  if (client) {
    Serial.println("New client");
    // bolean to locate when the http request ends
    boolean blank_line = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        
        if (c == '\n' && blank_line) {
            // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
            float h = dht.readHumidity();
            // Read temperature as Celsius (the default)
            float t = dht.readTemperature();
            // Read temperature as Fahrenheit (isFahrenheit = true)
            float f = dht.readTemperature(true);
            // Check if any reads failed and exit early (to try again).
            if (isnan(h) || isnan
              Serial.println("Failed to read from DHT sensor!");
              strcpy(celsiusTemp,"Failed");
              strcpy(fahrenheitTemp, "Failed");
              strcpy(humidityTemp, "Failed");         
            }
            else{
              // Computes temperature values in Celsius + Fahrenheit and Humidity
              float hic = dht.computeHeatIndex(t, h, false);       
              dtostrf(hic, 6, 2, celsiusTemp);             
              float hif = dht.computeHeatIndex(f, h);
              dtostrf(hif, 6, 2, fahrenheitTemp);         
              dtostrf(h, 6, 2, humidityTemp);
              // You can delete the following Serial.print's, it's just for debugging purposes
              Serial.print("Humidity: ");
              Serial.print(h);
              Serial.print(" %\t Temperature: ");
              Serial.print
              Serial.print(" *C ");
              Serial.print(f);
              Serial.print(" *F\t Heat index: ");
              Serial.print(hic);
              Serial.print(" *C ");
              Serial.print(hif);
              Serial.print(" *F");
              Serial.print("Humidity: ");
              Serial.print(h);
              Serial.print(" %\t Temperature: ");
              Serial.print
              Serial.print(" *C ");
              Serial.print(f);
              Serial.print(" *F\t Heat index: ");
              Serial.print(hic);
              Serial.print(" *C ");
              Serial.print(hif);
              Serial.println(" *F");
            }
            client.println("HTTP/1.1 200 OK");
            client.println("Content-Type: text/html");
            client.println("Connection: close");
            client.println();
            // your actual web page that displays temperature and humidity
            client.println("<!DOCTYPE HTML>");
            client.println("<html>");
            client.println("<head></head><body><h1>ESP8266 - Temperature and Humidity</h1><h3>Temperature in Celsius: ");
            client.println(celsiusTemp);
            client.println("*C</h3><h3>Temperature in Fahrenheit: ");
            client.println(fahrenheitTemp);
            client.println("*F</h3><h3>Humidity: ");
            client.println(humidityTemp);
            client.println("%</h3><h3>");
            client.println("</body></html>");     
            break;
        }
        if (c == '\n') {
          // when starts reading a new line
          blank_line = true;
        }
        else if (c != '\r') {
          // when finds a character on the current line
          blank_line = false;
        }
      }
    }  
    // closing the client connection
    delay(1);
    client.stop();
    Serial.println("Client disconnected.");
  }
}   

Afficher le code brut

Insérez vos informations d’identification réseau dans les variables suivantes et le code fonctionnera immédiatement.

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Comment fonctionne le code

Nous avons expliqué en détail le fonctionnement d’un serveur Web très similaire dans un didacticiel précédent. Jetez un œil au didacticiel suivant pour une explication détaillée de chaque ligne de code : Créer un serveur Web ESP8266.

Dans cette section, nous allons simplement examiner les parties pertinentes pour cet exemple.

Importation de bibliothèques

Importez les bibliothèques DHT à lire depuis le capteur DHT et la bibliothèque ESP8266WiFi pour créer le serveur Web :

#include <Adafruit_Sensor.h>
#include <DHT.h>

Type de capteur DHT

Décommentez l’une des lignes suivantes pour le type de capteur que vous utilisez. Si vous utilisez un capteur DHT22, vous n’avez rien à modifier.

//#define DHTTYPE DHT11   // DHT 11
//#define DHTTYPE DHT21   // DHT 21 (AM2301)
#define DHTTYPE DHT22     // DHT 22  (AM2302), AM2321

Définition de vos identifiants réseau

Insérez vos informations d’identification réseau dans les variables suivantes, afin que l’ESP8266 puisse se connecter à votre réseau local.

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Initialiser le capteur DHT

Définissez le GPIO auquel la broche de données DHT est connectée. Dans ce cas, il est connecté au GPIO5 (D1).

#define DHTPIN 5     // Digital pin connected to the DHT sensor

Instanciez un objet DHT avec le type et la broche définis précédemment.

DHT dht(DHTPIN, DHTTYPE);

installation()

Dans le setup(), initialisez le capteur DHT.

dht.begin();

boucle()

Dans la boucle(), nous vérifions si un nouveau client fait une requête :

if (client) {
    Serial.println("New client");
    // bolean to locate when the http request ends
    boolean blank_line = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

Lorsqu’un nouveau client fait une demande, nous lisons l’humidité, la température en degrés Celsius et Fahrenheit, et les enregistrons dans les variables h, t et f :

float h = dht.readHumidity();
// Read temperature as Celsius (the default)
float t = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
float f = dht.readTemperature(true);

Enfin, vous envoyez la réponse au client avec le texte HTML pour construire la page ainsi que la température et l’humidité :

client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head></head><body><h1>ESP8266 - Temperature and Humidity</h1><h3>Temperature in Celsius: ");
client.println(celsiusTemp);
client.println("*C</h3><h3>Temperature in Fahrenheit: ");
client.println(fahrenheitTemp);
client.println("*F</h3><h3>Humidity: ");
client.println(humidityTemp);
client.println("%</h3><h3>");
client.println("</body></html>");  

La température et l’humidité sont envoyées au client dans ces variables : celsiusTemp, fahrenheitTemp et humiditéTemp.

Manifestation

Après avoir apporté les modifications nécessaires, téléchargez le code sur l’ESP8266 comme décrit dans une section précédente.

Ouvrez le moniteur série Arduino IDE à un débit en bauds de 115200. Après quelques secondes, votre adresse IP devrait apparaître. Dans notre cas, c’est 192.168.1.95.

Ouvrez n’importe quel navigateur à partir d’un appareil connecté au même routeur que votre ESP. Tapez ensuite l’adresse IP et cliquez sur Entrée !

Vous devriez maintenant voir les dernières lectures de température et d’humidité. Pour mettre à jour les lectures, il vous suffit de rafraîchir la page Web.

Dépannage

Si votre capteur DHT ne parvient pas à obtenir les lectures, lisez notre Guide de dépannage DHT pour vous aider à résoudre le problème.

Conclusion

Dans ce projet, nous vous avons montré comment afficher les lectures d’un capteur DHT sur une page Web. Nous avons fourni deux exemples : un serveur Web simple et un serveur Web asynchrone avec mises à jour automatiques.

Maintenant, vous pouvez facilement modifier les exemples fournis pour afficher les lectures d’autres capteurs. Si vous aimez les projets ESP8266 et IoT, jetez un œil à certaines de nos ressources :

Vous aimerez peut-être aussi certains de nos projets les plus populaires avec l’ESP8266 :

Avez-vous des questions? Laissez un commentaire ci-dessous!

Merci d’avoir lu.

Apprenez l’histoire de Raspberry Pi à travers cette vidéo :