Préambule

Que va t’on faire ? Connecter un DHT11 au NodeMCU et envoyer et récupérer directement depuis une page web, les mesures de températures et d’humidité. Ou: Comment faire de la domotique lowcost 😀

Je démarre fort pour ce tutoriel. Je pense ajouter quelques étapes intermédiaire dans d’autres articles. Je saute en tout cas quelques étapes comme:

  • Programmer les ESP8266 avec l’IDE d’Arduino
  • Installer les drivers CH340G ou CP2102 – Cliquez sur le lien “CH340G” pour obtenir le driver disponible dans le tutoriel “driver Arduino Nano”.
  • Créez un hébergement gratuit et sans pubs – Nouveau tutoriel

Dans ce tutoriel on va:

  • Connecter un DHT11 au module NodeMcu ESP12-E.
  • Envoyer les données via une requête HTTP à une page PHP
  • Enregistrer les données dans une base de donnée MYSQL
  • Acceder au données depuis une page web partout dans le monde…

Ce dont nous avons besoin



Connecter le DHT11 au NodeMCU ESP12-E

NodeMCU ESP12-E DHT11

Installer la librairie DHT

Je vous met le lien directement de la librairie pour éviter tout soucis de compatibilité.

Télécharger ici

Téléchargez-le et décompressé le dans votre dossier: Arduino\libraries

Programmez le nodeMCU ESP12-E

N’oubliez pas lors de l’upload de ce code de modifier votre SSID et PASSWORD correspondant à votre wifi.

il en sera de-même pour le lignes suivantes mais nous y reviendrons plus tard.

String url = "http://urldevotresite.com/dht/dht.php?temperature=";
String url2 = url + DHT.temperature;
String url3 = url2 + "&humidite=";
String url4 = url3 + DHT.humidity;

#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <dht.h>


const char* ssid = "NOMDEVOTRERESEAU";
const char* password = "PASSWORDWIFI";
 
dht DHT;

#define DHT11_PIN 2

void setup () {
 
  Serial.begin(115200);
  WiFi.begin(ssid, password);
 
  while (WiFi.status() != WL_CONNECTED) {
 
    delay(1000);
    Serial.print("Connecting..");
 
  }
 
}
 
void loop() {

 
  if (WiFi.status() == WL_CONNECTED) { 
 
    HTTPClient http;  
  
    int chk = DHT.read11(DHT11_PIN);
    Serial.print("Temperature = ");
    Serial.println(DHT.temperature);
    Serial.print("Humidity = ");
    Serial.println(DHT.humidity);
    delay(1);
    
    String url = "http://urldevotresite.com/dht/dht2.php?temperature=";
    String url2 = url + DHT.temperature;
    String url3 = url2 + "&humidite=";
    String url4 = url3 + DHT.humidity;
 
    http.begin(url4); 
    int httpCode = http.GET();
 
    if (httpCode > 0) {
 
      String payload = http.getString();
      Serial.println(payload);
 
    }
 
    http.end();
 
  }
 
  delay(30000);
 
}

 

Le délai final de ce code: delay (30000) correspond a l’envoi de requête http toute les 30 secondes. Modifiez-le suivant vos besoins.

Préparation de votre base de données

Entrez dans votre phpmyadmin et créer une table nommée: espdht.

Elle doit contenir 4 champs

  1. id – Type int – auto incrément primary key
  2. heure_date – timestamp
  3. temperature – Type int
  4. humidite – Type int

Base de données

Les pages PHP

Nous allons avoir besoin de deux pages PHP.

La première de ces deux pages récupérera les données envoyées afin de les stocker dans la base de donné. La seconde page nous permettra d’afficher le résultat à intervalle régulier.

Enregistrement des données:

Ouvrez votre éditeur de code préféré. Pour moi ce sera Visual Studio Code de Microsoft. Créez un fichier PHP nommé dht.php

Copiez-collez le code PHP suivant en y indiquant: Hôte de votre base de donnée, nom de la base de données, identifiants et mot de passe.

 

<?php
	//req:
	//http://espdht.000webhostapp.com/dht2.php?humidite=22&temperature=22
try
{
    // /!\ ATTENTION n'oubliez pas de remplir l'adresse de la base de donnée, nom de la base donnée, identifiant et mot de passe" /!\
	 $bdd = new PDO('mysql:host=AdresseDeLaDB;dbname=Nomdelabasededonnée', 'Identifiant', 'MotDePass', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));


}
catch (Exception $e)
{
        die('Erreur : ' . $e->getMessage());
}

$humidite = $_GET['humidite'];
$temperature = $_GET['temperature'];

$req = $bdd->prepare('INSERT INTO espdht(humidite, temperature) VALUES(:humidite, :temperature)');
$req->execute(array(
	'humidite' => $humidite,
	'temperature' => $temperature
	));

echo 'Données enregistrées';
?>

 

Affichage des données

Créez une page nommée affichage.php

C’est codé en spaghetti mais ça fonctionne. Comme la précédente page n’oubliez pas de modifier le code PHP suivant en y indiquant: Hôte de votre base de donnée, nom de la base de données, identifiants et mot de passe.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>affichage</title>
</head>
<style>
.temperature{color: red; font-weight: bold}
</style>
<body>
    <?php
    try
    {
    // /!\ ATTENTION n'oubliez pas de remplir l'adresse de la base de donnée, nom de la base donnée, identifiant et mot de passe" /!\
	$bdd = new PDO('mysql:host=AdresseDeLaDB;dbname=Nomdelabasededonnée', 'Identifiant', 'MotDePass', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
    }
    catch (Exception $e)
    {
            die('Erreur : ' . $e->getMessage());
    }

    $reponse = $bdd->query('SELECT * FROM espdht ORDER BY heure_date DESC LIMIT 1'); // Va afficher le dernier résultat reçu.

    while($donnee = $reponse->fetch())
    {
    $mytemp = intval($donnee['temperature']);
    $myhumidity = intval($donnee['humidite']);
    


    echo "".$mytemp."°";   ?> <br>
    <?php echo $donnee['heure_date']; ?>
    <p><strong><?php //echo $donnee['heure_date']; ?>  Température: </strong>: <span class="temperature"><?php echo $mytemp; ?>°</span> <span style="background-color:red; width:<?php $widht = $mytemp * 10; echo $widht; ?>px; display: block;height:2rem;" class="vide">e</span> </p>
    <p><strong><?php //echo $donnee['heure_date']; ?>  Humidité: </strong>: <span class="temperature"><?php echo $myhumidity; ?>%</span> <span style="background-color:yellowgreen; width:<?php $widht = $myhumidity  * 10; echo $widht; ?>px; display: block;height:2rem;" class="vide"></span> </p>
    <br><br>
    <?php
    };
    $reponse->closeCursor(); // Termine le traitement de la requête
    ?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        setInterval(function(){ location.reload(); }, 5000); // rafraichissement de la page toute les 5 secondes
    })
</script>
</body>
</html>

 

Envoyez-le tout sur votre ftp ou via le gestionnaire de fichiers directement via 000webhost dans un dossier nommé: dht. Ensuite alimentez votre NodeMCU ESP12-E.

Si tout s’est bien passé:

Votre Module NodeMcu va envoyé toutes les 30 secondes une requête à l’url suivante:

http://urldevotresite.com/dht/dht.php?temperature=VALEUR&humidite=VALEUR

Les valeurs de température et d’humidité seront alors enregistrée directement sur votre base de données.

En ouvrant l’url: http://urldevotresite.com/dht/affichage.php

Vous devriez alors voir apparaître la dernière mesure de température et d’humidité 🙂

Si tout ne s’est pas bien passé…:

On vérifie que tout est bien enregistré et modifier dans le code Arduino.

On vérifie hôte, nom de la base de données, identifiants et mots de passes en php.

On poste un commentaire et/ou une question

J’essayerai d’éditer ce tutoriel au fur et a mesure des questions posée 🙂

 

à bientôt,

Lee

 

Pin It on Pinterest

Share This