TUTORIAL DHT11 MENGGUNAKAN ESP32 WEB SERVER

MENGINSTAL LIBRARY

Menginstal DHT Sensor Library 

Untuk membaca dari sensor DHT menggunakan Arduino IDE, Anda perlu menginstal library
sensor DHT. Ikuti langkah selanjutnya untuk menginstal library.
1. Klik di sini untuk mengunduh library Sensor DHT . Anda harus memiliki folder .zip di folder Unduhan Anda
2. Buka folder zip .zip dan Anda akan mendapatkan folder DHT -sensor-librarymaster
3.  Ganti nama folder Anda DHT-sensor-library ke DHT_sensor
4. Pindahkan folder DHT_sensor ke folder library instalasi Arduino IDE Anda
5. Terakhir, buka kembali IDE Arduino Anda 

 

Menginstal Adafruit Unified Sensor Driver 

Anda juga perlu menginstal library Adafruit Unified Sensor Driver agar dapat bekerja dengan
sensor DHT. Ikuti langkah selanjutnya untuk menginstal perpustakaan.
1. Klik di sini untuk mengunduh library Adafruit Unified Sensor . Anda harus memiliki folder .zip di folder Unduhan Anda
2. Buka folder zip .zip dan Anda akan mendapatkan folder Adafruit_sensormaster
3.  Ganti nama folder Anda ke Adafruit_sensor
4. Pindahkan folder Adafruit_sensor ke folder library instalasi Arduino IDE Anda
5. Terakhir, buka kembali IDE Arduino Anda

Catatan: Lewati langkah-langkah di bawah ini jika Anda telah menginstal perpustakaan
ESPAsyncWebServer dan Async TCP sebelumnya.

 

Menginstal Library ESPAsyncWebServer 

Ikuti langkah-langkah selanjutnya untuk menginstal ESPAsyncWebServer library:
5. Klik di sini untuk mengunduh library ESPAsyncWebServer. Anda harus memiliki folder .zip di folder Unduhan Anda
6. Buka folder zip .zip dan Anda akan mendapatkan master folder  ESPAsyncWebServer
7. Ganti nama folder Anda dari ESPAsyncWebServermaster  ESPAsyncWebServer-master  ke  ESPAsyncWebServer
8.  Pindahkan folder ESPAsyncWebServer ke folder library instalasi Arduino atau, di Arduino IDE Anda, Anda bisa pergi ke Sketch > Include Library > Add .ZIP library… dan pilih library yang baru saja Anda unduh.

 

Menginstal Library Async TCP untuk ESP32

Ikuti langkah-langkah selanjutnya untuk menginstal perpustakaan Async TCP :
5. Klik di sini untuk mengunduh perpustakaan Async TCP . Anda harus memiliki  folder .zip di folder Unduhan Anda
6. Buka folder zip .zip dan Anda akan mendapatkan folder master  ESPAsyncWebServer
7. Ganti nama folder Anda dari ESPAsyncWebServer - masterESPAsyncWebServermaster  ke  ESPAsyncWebServer
8.  Pindahkan folder ESPAsyncWebServer ke folder library instalasi Arduino IDE Anda atau, di Arduino IDE Anda, Anda bisa pergi ke Sketch > Include Library > Add .ZIP library… dan pilih library yang baru saja Anda unduh.
 

PROGRAM 

Kami akan memprogram ESP32 menggunakan Arduino IDE, jadi pastikan Anda telah menginstal add-on ESP32 sebelum melanjutkan: 

Buka Arduino IDE Anda dan salin kode berikut. 
COK

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

// Replace with your network credentials
const char* ssid = "GANTI DENGAN NAMA WIFI YANG AKAN DIHUBUNGKAN";
const char* password = "MASUKKAN SANDI WIFI";

#define DHTPIN 18     // Digital pin connected to the DHT sensor, jika tidak terbaca
pindahkan pada pin 27 

// Uncomment the type of sensor in use:
#define DHTTYPE    DHT11     // DHT 11
//#define DHTTYPE    DHT21   // DHT 22 (AM2302)
//#define DHTTYPE    DHT21   // DHT 21 (AM2301)

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(){
  
}

UPLOAD PROGRAM

Sekarang, unggah program ke ESP32 Anda. Pastikan Anda memilih board dan port COM yang tepat. Setelah mengunggah, buka Serial Monitor dengan baud rate 115200. Tekan tombol reset ESP32. Alamat IP ESP32 harus dicetak di monitor serial. 

Demonstrasi Server Web 

Buka browser dan ketik alamat IP ESP32. Server web Anda akan menampilkan pembacaan sensor terbaru.
Perhatikan bahwa membaca suhu dan kelembaban secara otomatis tanpa perlu me-refresh halaman web. 

  Tutorial by: Riki & Bagas

esp32 espdht espserver espweb espnow dhtserver dhtweb dhtwebserver dhtesp32 kontrolesp32 kontroldht dht11 dht22 dht21 tutorialdht tutorialesp  programdht programesp porgramdhtesp