Contrôle de température et d’humidité via Wifi-Tuto 2

Tutorials

: Fatima Zahra Fagroud; Hits: 17516

User Rating: 0 / 5

L’objectif de cet atelier est de créer un système qui permet le contrôle de température et d’humidité au sein des domiciles en utilisant esp8266 et dht11 et les stoker dans une base de donnée MYSQL puis les visualiser via un site web

Circuits :

Circuit 1 : permet de telverser le programme Arduino à esp8266.

Composants :

Carte Arduino uno

es8266

Câbles

Figure 1: Montage 1

Comment réaliser ce circuit: https://www.youtube.com/watch?v=-Ie33mxLekM&feature=youtu.be

Circuit 2 : permet la collecte des valeurs de température et d’humidité puis les transférer via wifi

Composants :

Carte Arduino uno

esp8266

Câbles

Résistance

dht11

Figure 2: Montage 2

Comment réaliser ce circuit: https://youtu.be/-wslrHr8xyI

Code Source:

Arduino:


// Librairies

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

#define DHTPIN 2 // what digital pin we're connected to

#define DHTTYPE DHT11 // Sensor used DHT 11

const char* ssid = ""; // Your ssid example AndroidAP

const char* password = ""; // Your Password example 12345


WiFiServer server(80);
IPAddress server_addr(*,*,*,*); // IP of the MySQL *server* here example :  server_addr(192,168,43,35)
char user[] = " "; // MySQL user login username example : root
char pass[] = " "; // MySQL user login password


WiFiClient client; // Use this for WiFi instead of EthernetClient

DHT dht(DHTPIN, DHTTYPE);

void setup() {
Serial.begin(115200);
delay(10);/ waits for a 10 ms
Serial.println();
WiFi.mode(WIFI_STA);
Serial.println();

// Connecting to network & Server
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");
server.begin();
Serial.println("Server started");
Serial.println(WiFi.localIP());

}

void loop() {
delay(2000);  // waits for a 2 s

 float h = dht.readHumidity();// Humidity

 float t = dht.readTemperature();// temperature Celsius

 float f = dht.readTemperature(true);// temperature Fahrenheit

 // isnan : is not a number
 if (isnan(h) || isnan(t) || isnan(f)) {
 return;
 } else {
float hif = dht.computeHeatIndex(f, h);// temperature Fahrenheit & Humidity
 float hic = dht.computeHeatIndex(t, h, false);// temperature Celsius & Humidity



  //code to visualize data in the serial monitor for IDE Arduino
 Serial.print("Humidity: ");
 Serial.print(h);
 Serial.print(" %\t");
 Serial.print("Temperature: ");
 Serial.print(t);
 Serial.print(" *C ");
 Serial.print(f);
 Serial.print(" *F\t");
 Serial.print("Heat index: ");
 Serial.print(hic);
 Serial.print(" *C ");
 Serial.print(hif);
 Serial.println(" *F");
 }


String data = "TEMP=";
data += t;
data += "&HUM=";
data += h;

// Send Data to database
 if(client.connect(server_addr,80)) {
 client.println("GET /projects/add.php?"+ data +" HTTP/1.1");
 client.println("Host: server_addr");
client.println("Connection: close");
 client.println();
}


}

PHP & HTML:

Insertion:

<?php
  $mysql_host = "localhost";
$mysql_database = "id6240287_arduino";
$mysql_user = "id6240287_root";
$mysql_password = "12345";


// Create connection
$conn = new mysqli($mysql_host, $mysql_user, $mysql_password,$mysql_database);
// Check connection
if ($conn->connect_error) {
 die("Connection failed: " . $conn->connect_error);
}

$temp1=$_GET["TEMP"];
 $hum1=$_GET["HUM"];

$dt = new DateTime();
$dt = $dt->format('Y/m/d/h/i/s');


$sql = "SELECT id, temperature, humidity FROM templog2 WHERE id IN (SELECT MAX(id) FROM templog2)";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
 // output data of each row
 while($row = $result->fetch_assoc()) {
 $temp= $row["temperature"];
 $hum= $row["humidity"] ;
 $id = $row["id"] ;
 }
} 

 if($temp1!=$temp || $hum1!=$hum){
$req = "INSERT INTO templog2 (temperature, humidity, DateEnreg) VALUES ('".$temp1."','".$hum1."','".$dt."')"; 
 $conn->query($req);
 }
else{
 $upt = "UPDATE templog2 SET DateEnreg='".$dt."' WHERE id='".$id."'";
 $conn->query($upt);
}
$conn->close();
?>

Visualisation:

Etat Actuel:

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
 <meta charset='UTF-8'>
<meta http-equiv='refresh' content=2>
<title>Temperature & Humidity</title>
 <link rel="stylesheet" type="text/css" href="/style.css"> 
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="/js/jquery-3.1.0.min.js"%3E%3C/script%3E'))</script>
 <script src="https://cdn3.devexpress.com/jslib/18.1.3/js/dx.all.js"></script>
 <?php
$mysql_host = "localhost";
$mysql_database = "id6240287_arduino";
$mysql_user = "id6240287_root";
$mysql_password = "12345";

// Create connection
$conn = new mysqli($mysql_host, $mysql_user, $mysql_password,$mysql_database);
// Check connection
if ($conn->connect_error) {
 die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT temperature, humidity FROM templog2 WHERE id IN (SELECT MAX(id) FROM templog2)";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
 // output data of each row
 while($row = $result->fetch_assoc()) {
 echo " <script type='text/javascript'>
 google.charts.load('current', {'packages':['gauge']});
 google.charts.setOnLoadCallback(drawChart);

function drawChart() {var data = google.visualization.arrayToDataTable([
 ['Label', 'Value1'],
 ['Humidity', " . $row["humidity"]. "]
 ]);
 
 var options = {
 width: 800, height: 300,
 From:0, To: 100,
 majorTicks: ['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
 minorTicks: 10
 };



 var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
 chart.draw(data, options);
 }
 
 </script>";
 echo "<script>
 $(function(){
 var options = {
 scale: {
 startValue: -70,
 endValue: 70,
 tickInterval: 10,
 label: {
 customizeText: function (arg) {
 return arg.valueText + ' °C';
 }
 }
 },
 title: {
 text: 'Temperature',
 font: { size: 20 }
 }
 };
 
 $('#textCloud').dxCircularGauge($.extend(true, {}, options, {
 value: ". $row["temperature"].",
 valueIndicator: {
 type: 'textCloud',
 color: '#483D8B'
 }
 }));
 
});</script>";
 }
} else {
 echo "0 results";
}
$conn->close();
?>
</head>
<body>

<nav><ul>
 <li><a href="#" class="active"> Actuel</a></li>
<li> <a href="/histo.php" >Historique </a></li>
 </ul> </nav><br>
 <div class="ft"> 
 <H1>ESP8266 v1 & DHT11 Sensor</H1><br></div>
 
 <div id="textCloud"></div><br><br>
 <div id="chart_div" class="absolute"></div>
 
 </body>

</html>

Historique:

<?php
 $mysql_host = "localhost";
$mysql_database = "id6240287_arduino";
$mysql_user = "id6240287_root";
$mysql_password = "12345";
// Create connection
$conn = new mysqli($mysql_host, $mysql_user, $mysql_password,$mysql_database);
// Check connection
if ($conn->connect_error) {
 die("Connection failed: " . $conn->connect_error);
}

$sql= "select humidity, temperature, DateEnreg from templog2 WHERE id NOT IN (SELECT MIN(id) FROM templog2) ORDER BY id";
$result = $conn->query($sql);
$outp = array();
$outp1 = array();
while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
 $outp[] = array("y" => $row["temperature"], "label" =>$row["DateEnreg"]);
 $outp1[] = array("y" => $row["humidity"], "label" =>$row["DateEnreg"]);
}

?>
<!DOCTYPE HTML>
<html>
<head>
 <meta charset='UTF-8'>
<meta http-equiv='refresh' content=2>
<title>Temperature & Humidity</title>
 <link rel="stylesheet" type="text/css" href="/style.css">

<script>
window.onload = function () {
 
var chart = new CanvasJS.Chart("chartContainer", {
 animationEnabled: true,
 title:{
 text: "Temperature"
 },
 data: [{
 type: "spline",
 dataPoints: <?php echo json_encode($outp, JSON_NUMERIC_CHECK); ?>
 }]
});
 
chart.render();

var chart1 = new CanvasJS.Chart("chartContainer1", {
 animationEnabled: true,
 title:{
 text: "Humidity"
 },
 data: [{
 type: "line",
 dataPoints: <?php echo json_encode($outp1, JSON_NUMERIC_CHECK); ?>
 }]
});
 
chart1.render(); 
}
</script>
</head>
<body>
 <nav><ul>
 <li><a href="/index.php" > Actuel</a></li>
<li> <a href="#" class="active">Historique </a></li>
 </ul> </nav><br>
 <div class="ft"> 
 <H1>ESP8266 v1 & DHT11 Sensor</H1><br></div>
<div id="chartContainer" style="height: 350px; width: 100%;"></div><br><br>
 <div id="chartContainer1" style="height: 350px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

CSS:

body{
 background-color: aliceblue;
}
ul {
 float:right;
}

li {
 display: inline; 
}

a { 
 color: darkgrey;
 font-size:20px;
 text-align: center;
 padding:16px;
 text-decoration: none;
 font-style:italic;
 
}
.active {
 color: gold;
 font-weight: bold;
}
a:hover {
 color: gold;
}

.ft{
 margin: auto; 
 padding: 20px; 
 font-family: Impact, Charcoal, sans-serif; 
 color: darkblue;
 text-align: center;
}
#chart-demo {
 width: 100%;
}

#textCloud {
 width: 65%;
 vertical-align: bottom;
}

.absolute {
 position: absolute;
 top:180px;
 right: 10%;
}