Come creare un web server con DHT11 #9.3

Post Views: 1,222

Nell’articolo di oggi vedremo come utilizzare i PIN GPIO. Creeremo un web server con l’utilizzo del sensore di temperatura DHT11 per visualizzare via broswer dati relativi alla temperatura e umidità.

Lista componenti

ESP32-WROVER
Breadboard
dht11
3x jumper
resistore 10k ohm
GPIO extension board (falcolatitivo)

Descrizione componenti

DHT11

In che modo rileva l’umidità relativa e la temperatura? Il DHT11 è in grado di rilevare il valore percentuale dell’umidità relativa misurando la resistenza elettrica tra i due elettrodi. La conduttività tra gli elettrodi aumenta all’aumentare dell’umidità relativa. Mentre per quanto concerne la temperatura il DHT11 utilizza un sensore NTC.

Attenzione, in alcuni modelli di sensore DHT 11 i pin Vcc e Signal possono essere invertiti. Un eventuale problema per il quale il programma compilato non funzioni potrebbe consistere in questo motivo.

Il sensore DHT11 espone 3 pin denominati:

GND: piedino di massa
VCC: piedino di alimentazione
sitgnal: piedino di comunicazione dati 1-wire

Collegamenti

In seguito schema e diagramma di collegamento. Per costruire un circuito ricordati di tenere la scheda spenta.

Codice

Se questo è il tuo primo articolo ti invito di leggere prima questo per l’installazione dei driver della scheda. Ecco qui un piccolo riepilogo prima di compilare e caricare il codice.

Dobbiamo installare la libreria dht.h, dobbiamo andare su Sketch->Include library-> Manage libraries e cercare nell’apposito menù la libreria dht.h.

Installare la libreria ESPAsyncWebServer

Installa la seguente libreria ESPAsyncWebServer
Estrai la cartella
Rinomina la cartella in ESPAsyncWebServer
Spostala nella cartella di Arduino, in seguito spostala nella cartella “libraries”
Entra nella cartella, vi sarà un’altra cartella denominata “ESPAsyncWebServer-master”, una volta entrati copiate e incollate tutte le cartelle presente al suo interno al di fuori della cartella “ESPAsyncWebServer-master”. In seguito andate nella cartella “src” copiate e incollate il contenuto al di fuori della cartella “src”.

Installare la libreria Async TCP

Installa la seguente libreria AsyncTCP
Estrai la cartella
Rinomina la cartella in AsyncTCP
Spostala nella cartella di Arduino, in seguito spostala nella cartella “libraries”
Entra nella cartella, vi sarà un’altra cartella denominata “AsyncTCP-master”, una volta entrati copiate e incollate tutte le cartelle presente al suo interno al di fuori della cartella “AsyncTCP-master”. In seguito andate nella cartella “src” copiate e incollate il contenuto al di fuori della cartella “src”.

Ecco qui lo sketch:

// Import required libraries
#include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include <Adafruit_Sensor.h>
#include <DHT.h>

// Replace with your network credentials
const char* ssid = "";
const char* password = "";

#define DHTPIN 27     // Digital pin connected to the DHT sensor
#define DHTTYPE    DHT11     // DHT 11
DHT dht(DHTPIN, DHTTYPE);

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

String readDHTTemperature() {
  // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
  // Read temperature as Celsius (the default)
  float t = dht.readTemperature();
  // Read temperature as Fahrenheit (isFahrenheit = true)
  //float t = dht.readTemperature(true);
  // Check if any reads failed and exit early (to try again).
  if (isnan(t)) {    
    Serial.println("Failed to read from DHT sensor!");
    return "--";
  }
  else {
    Serial.println(t);
    return String(t);
  }
}

String readDHTHumidity() {
  // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
  float h = dht.readHumidity();
  if (isnan(h)) {
    Serial.println("Failed to read from DHT sensor!");
    return "--";
  }
  else {
    Serial.println(h);
    return String(h);
  }
}

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <style>
    html {
     font-family: Arial;
     display: inline-block;
     margin: 0px auto;
     text-align: center;
    }
    h2 { font-size: 3.0rem; }
    p { font-size: 3.0rem; }
    .units { font-size: 1.2rem; }
    .dht-labels{
      font-size: 1.5rem;
      vertical-align:middle;
      padding-bottom: 15px;
    }
  </style>
</head>
<body>
  <h2>ESP32 DHT Server</h2>
  <p>
    <i class="fas fa-thermometer-half" style="color:#059e8a;"></i> 
    <span class="dht-labels">Temperature</span> 
    <span id="temperature">%TEMPERATURE%</span>
    <sup class="units">&deg;C</sup>
  </p>
  <p>
    <i class="fas fa-tint" style="color:#00add6;"></i> 
    <span class="dht-labels">Humidity</span>
    <span id="humidity">%HUMIDITY%</span>
    <sup class="units">&percnt;</sup>
  </p>
</body>
<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>
</html>)rawliteral";

// Replaces placeholder with DHT values
String processor(const String& var){
  //Serial.println(var);
  if(var == "TEMPERATURE"){
    return readDHTTemperature();
  }
  else if(var == "HUMIDITY"){
    return readDHTHumidity();
  }
  return String();
}

void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);

  dht.begin();
  
  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP32 Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  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", readDHTTemperature().c_str());
  });
  server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", readDHTHumidity().c_str());
  });

  // Start server
  server.begin();
}
 
void loop(){
  
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

// Import required libraries

#include "WiFi.h"

#include "ESPAsyncWebServer.h"

#include <Adafruit_Sensor.h>

#include <DHT.h>

// Replace with your network credentials

const char* ssid = "";

const char* password = "";

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

#define DHTTYPE DHT11 // DHT 11

DHT dht(DHTPIN, DHTTYPE);

// Create AsyncWebServer object on port 80

AsyncWebServer server(80);

String readDHTTemperature() {

// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)

// Read temperature as Celsius (the default)

float t = dht.readTemperature();

// Read temperature as Fahrenheit (isFahrenheit = true)

//float t = dht.readTemperature(true);

// Check if any reads failed and exit early (to try again).

if (isnan(t)) {

Serial.println("Failed to read from DHT sensor!");

return "--";

}

else {

Serial.println(t);

return String(t);

}

String readDHTHumidity() {

// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)

float h = dht.readHumidity();

if (isnan(h)) {

Serial.println("Failed to read from DHT sensor!");

return "--";

}

else {

Serial.println(h);

return String(h);

}

const char index_html[] PROGMEM = R"rawliteral(

<!DOCTYPE HTML><html>

<head>

<style>

html {

font-family: Arial;

display: inline-block;

margin: 0px auto;

text-align: center;

}

h2 { font-size: 3.0rem; }

p { font-size: 3.0rem; }

.units { font-size: 1.2rem; }

.dht-labels{

font-size: 1.5rem;

vertical-align:middle;

padding-bottom: 15px;

}

</style>

</head>

<body>

<h2>ESP32 DHT Server</h2>

<p>

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

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

</p>

<p>

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

<span id="humidity">%HUMIDITY%</span>

<sup class="units">&percnt;</sup>

</p>

</body>

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>

</html>)rawliteral";

// Replaces placeholder with DHT values

String processor(const String& var){

//Serial.println(var);

if(var == "TEMPERATURE"){

return readDHTTemperature();

}

else if(var == "HUMIDITY"){

return readDHTHumidity();

}

return String();

}

void setup(){

// Serial port for debugging purposes

Serial.begin(115200);

dht.begin();

// Connect to Wi-Fi

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(1000);

Serial.println("Connecting to WiFi..");

}

// Print ESP32 Local IP Address

Serial.println(WiFi.localIP());

// Route for root / web page

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", readDHTTemperature().c_str());

});

server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/plain", readDHTHumidity().c_str());

});

// Start server

server.begin();

}

void loop(){

}

Compila e carica il codice sull’ESP32, ed ecco qui che potremo visualizzare l’indirizzo IP che utilizzeremo per accedere via broswer dal monitor seriale.

Accesso server web

Per accedere al server web, apri il browser, incolla l’indirizzo IP di ESP32 e vedrai la pagina seguente.

Ora puoi visualizzare i dati relativi alla temperatura e umidità nella rete locale, nel prossimo articolo vedremo come visualizzarlo anche al di fuori della rete locale.

Iscriviti ai nostri gruppi Telegram

Link utili

Seguici per non perdere le prossime novità!

Simone Candido

Simone Candido è un ragazzo appassionato del mondo tech nella sua totalità. Simone ama immedesimarsi in nuove esperienze, la sua filosofia si basa sulla irrefrenabile voglia di ampliare a 360° le sue conoscenze abbracciando tutti i campi del sapere, in quanto ritiene che il sapere umano sia il connubio perfetto tra cultura umanistica e scientifica.