top of page
Search

ESP32 Project 8 : Web Server Implementation

  • Writer: K02_Faiza Aqiela Zuma
    K02_Faiza Aqiela Zuma
  • Apr 6, 2022
  • 4 min read

Updated: Apr 23, 2022

ree

Hello, balik lagi di sini another part of simple project using ESP32. So dalam project kali ini kita akan akan melakukan percobaan implementasi ESP32 dengan dihubungkan ke Web Server. Nantinya ESP32 ini akan dihubungkan dengan WebServer melalui koneksi WIFI. Pada project kali ini kita akan melakukan percobaan ESP32 dengan dipasangi sensor DHT22 untuk fungsi input, kemudian ESP32 akan dihubungkan ke Webserver yang nantinya akan menjadi fungsi ouput yang akan menampilkan hasil yang didapat dari sensor DHT11 dan DHT22. DHT11 dan DHT22 sensor digunakan untuk keperluan pengukuran temperatur dan kelembapan. Sensor-sensor ini memiliki chip di dalamnya yang mengonversi sinyal analog menjadi digital dan sinyal digital pada temperatur dan kelembapan akan ditampilkan pada WebServer. Melalui project ini hendaknya kita dapat memahami cara membaca suatu program serta mengerti cara menggunakan dan implementasi dari WebServer pada ESP32 yang nantinya dapat memonitor rangkaian pada ESP32 melalui ponsel pintar yang telah terhubung dengan ESP32.


Introduction to DHT11 & DHT22

DHT11/DHT22 merupakan sensor yang mengukur temperatur dan kelembapan. Alat ini mengirimkan output digital dengan 1-wire protocol. Kedua sensor ini tergolong ramah ke kantong pengguna dan kedua alat ini sebenarnya tidak jauh berbeda antar satu sama lain dalam hal spesifikasi. DHT22 hampir sama dengan DHT11 namun dengan pengukuran temperatur dan kelembapan yang lebih akurat dan dengan cakupan area yang lebih luas.

Gambar di bawah ini menunjukan diagram pinout dari DHT sensor. Pada dasarnya DHT sensor memiliki four pins. Namun hanya tiga modul saja yang diperlihatkan pada pinout module dan terdapat resistor 10k ohm yang terkoneksi secara internal ke pin 2. Dibawah ini terdapat list dari sensor DHT dan keterangannya.

ree

  1. (Vc) -> 3.3V Vcc merupakan power supply pin. diimplementasikan pada rentang 3.3v to 5.0 untuk pin ini.

  2. (Data out) -> Any GPIO pins of ESP boards along with a 10k ohm pull-up resistor Data out adalah digital output pin. Alat ini mengirimkan nilai temperatur dan kelembapan yang terukur ke dalam serial data.

  3. (NC) -> Not used N/C tidak terkoneksi sehingga tidak terpakai

  4. (GND) -> Ground GND akan terkoneksi dengan GND pin pada ESP32


Rangkaian DHT11/DHT22 ESP32 with Web Server


Berikut ada beberapa yang perlu dipersiapkan:

  • ESP32

  • DHT11/DHT22

  • Bread Board

  • 330 ohm resistor

  • Jumper wires

  • Micro USB Cable

DHT11/DHT22 dikoneksikan dengan ESP32 dengan tambahan 10K resistor. Diagram koneksi dapat dilihat pada gambar di bawah ini.

ree

Pin pertama dari kedua sensor adalah power supply (Vcc) pin. Koneksikan pin tersebut dengan 3.3v pin dari ESP32. Selanjutnya, Data out adalah pin yang akan memberikan temperature dan kelembapan sample dari DHT sensor. Koneksikan pin ini dengan GPIO4 dari ESP32 dan juga koneksikan data pin dengan 10k resistor. Namun sebenarnya kita bisa menggunakan digital pin apapun pada ESP32


Installation of Library

Sebelum kita bisa menjalankan project ini, kita perlu meng-install beberapa library:

  • DHT dan Adafruit Unified Sensor library untuk membaca input dari sensor DHT.

  • ESPAsyncWebServer dan Async TCP library untuk membuat web server.

Untuk menginstall library cara cukup mudah cukup navigasikan kearah Sketch -> Include Library -> Manage Libraries lalu cari DHT Sensor Library dan install. Kemudian tak lupa install juga library Adafruit Unified Sensor. Setelah mengsintall library untuk sensor, kemudian dilanjutkan dengan installasi ESPAsyncWebServer library dengan cara download ESPAsyncWebServerlibrary kemudian Unzip folder .zip dan kita akan mendapatkan folder ESPAsyncWebServer-master. Lalu, Rename folder tersebut menjadi ESPAsyncWebServer. Terakhir, Pindahkan folder ESPAsyncWebServer ke folder library Arduino IDE. Selanjutnya, kita akan melanjutkan dengan melakukan installasi Async TCP Library dengan cara pertama download AsyncTCP library. Kemudian, Unzip folder .zip dan kita akan mendapatkan folder AsyncTCP-master folder. Lalu, Rename folder tersebut menjadi AsyncTCP. Terakhir, Pindahkan folder AsyncTCP ke folder library Arduino IDE. Lalu buka kembali Arduino IDE.


Create ESP32 Web Server

Sebelum kita mengunggah sketsa, kita perlu membuat mengatur sedikit supaya bisa bekerja. Kita perlu memodifikasi dua variabel berikut dengan kredensial jaringan masing-masing, sehingga ESP32 dapat membuat koneksi dengan jaringan yang ada.

const char* ssid = "YourNetworkName";  // Enter SSID hereconst char* password = "YourPassword";  //Enter Password here

Jika sudah maka langsung ke kode:

#include <WiFi.h>
#include <WebServer.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/*Put your SSID & Password*/const char* ssid = "YourNetworkName";  // Enter SSID hereconst char* password = "YourPassword";  //Enter Password here

WebServer server(80);

// DHT Sensor
uint8_t DHTPin = 4; 
               
// Initialize DHT sensor.
DHT dht(DHTPin, DHTTYPE);                

float Temperature;
float Humidity;
 
void setup() {
  Serial.begin(115200);
  delay(100);
  
  pinMode(DHTPin, INPUT);

  dht.begin();              

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

  //connect to your local wi-fi network
  WiFi.begin(ssid, password);

  //check wi-fi is connected to wi-fi networkwhile (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  server.on("/", handle_OnConnect);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");

}
void loop() {
  
  server.handleClient();
  
}

void handle_OnConnect() {

 Temperature = dht.readTemperature(); // Gets the values of the temperature
  Humidity = dht.readHumidity(); // Gets the values of the humidity 
  server.send(200, "text/html", SendHTML(Temperature,Humidity)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(float TempCstat,float TempFstat,float Humiditystat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600\" rel=\"stylesheet\">\n";
  ptr +="<title>ESP32 Weather Report</title>\n";
  ptr +="<style>html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #333333;}\n";
  ptr +="body{margin-top: 50px;}\n";
  ptr +="h1 {margin: 50px auto 30px;}\n";
  ptr +=".side-by-side{display: inline-block;vertical-align: middle;position: relative;}\n";
  ptr +=".humidity-icon{background-color: #3498db;width: 30px;height: 30px;border-radius: 50%;line-height: 36px;}\n";
  ptr +=".humidity-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}\n";
  ptr +=".humidity{font-weight: 300;font-size: 60px;color: #3498db;}\n";
  ptr +=".temperature-icon{background-color: #f39c12;width: 30px;height: 30px;border-radius: 50%;line-height: 40px;}\n";
  ptr +=".temperature-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}\n";
  ptr +=".temperature{font-weight: 300;font-size: 60px;color: #f39c12;}\n";
  ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;right: -20px;top: 15px;}\n";
  ptr +=".data{padding: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  
   ptr +="<div id=\"webpage\">\n";
   
   ptr +="<h1>ESP32 Weather Report</h1>\n";
   ptr +="<div class=\"data\">\n";
   ptr +="<div class=\"side-by-side temperature-icon\">\n";
   ptr +="<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n";
   ptr +="width=\"9.915px\" height=\"22px\" viewBox=\"0 0 9.915 22\" enable-background=\"new 0 0 9.915 22\" xml:space=\"preserve\">\n";
   ptr +="<path fill=\"#FFFFFF\" d=\"M3.498,0.53c0.377-0.331,0.877-0.501,1.374-0.527C5.697-0.04,6.522,0.421,6.924,1.142\n";
   ptr +="c0.237,0.399,0.315,0.871,0.311,1.33C7.229,5.856,7.245,9.24,7.227,12.625c1.019,0.539,1.855,1.424,2.301,2.491\n";
   ptr +="c0.491,1.163,0.518,2.514,0.062,3.693c-0.414,1.102-1.24,2.038-2.276,2.594c-1.056,0.583-2.331,0.743-3.501,0.463\n";
   ptr +="c-1.417-0.323-2.659-1.314-3.3-2.617C0.014,18.26-0.115,17.104,0.1,16.022c0.296-1.443,1.274-2.717,2.58-3.394\n";
   ptr +="c0.013-3.44,0-6.881,0.007-10.322C2.674,1.634,2.974,0.955,3.498,0.53z\"/>\n";
   ptr +="</svg>\n";
   ptr +="</div>\n";
   ptr +="<div class=\"side-by-side temperature-text\">Temperature</div>\n";
   ptr +="<div class=\"side-by-side temperature\">";
   ptr +=(int)TempCstat;
   ptr +="<span class=\"superscript\">°C</span></div>\n";
   ptr +="</div>\n";
   ptr +="<div class=\"data\">\n";
   ptr +="<div class=\"side-by-side humidity-icon\">\n";
   ptr +="<svg version=\"1.1\" id=\"Layer_2\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\"; width=\"12px\" height=\"17.955px\" viewBox=\"0 0 13 17.955\" enable-background=\"new 0 0 13 17.955\" xml:space=\"preserve\">\n";
   ptr +="<path fill=\"#FFFFFF\" d=\"M1.819,6.217C3.139,4.064,6.5,0,6.5,0s3.363,4.064,4.681,6.217c1.793,2.926,2.133,5.05,1.571,7.057\n";
   ptr +="c-0.438,1.574-2.264,4.681-6.252,4.681c-3.988,0-5.813-3.107-6.252-4.681C-0.313,11.267,0.026,9.143,1.819,6.217\"></path>\n";
   ptr +="</svg>\n";
   ptr +="</div>\n";
   ptr +="<div class=\"side-by-side humidity-text\">Humidity</div>\n";
   ptr +="<div class=\"side-by-side humidity\">";
   ptr +=(int)Humiditystat;
   ptr +="<span class=\"superscript\">%</span></div>\n";
   ptr +="</div>\n";

  ptr +="</div>\n";
  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

Demonstration

ree

Setelah sketsa diunggah, buka Serial Monitor dengan baud rate 115200. Dan tekan tombol RESET pada ESP32. Jika semuanya OK, itu akan menampilkan alamat IP dinamis yang diperoleh dari router Anda dan menampilkan pesan mulai server HTTP.


ree

Selanjutnya, muat browser dan arahkan ke alamat IP yang ditunjukkan pada monitor serial. ESP32 harus menyajikan halaman web yang menunjukkan suhu dan kelembaban relatif.

ree



FAIZA AQIELA ZUMA

18220059

 
 
 

Comments

Post: Blog2_Post

Subscribe Form

Thanks for submitting!

  • Facebook
  • Instagram
  • LinkedIn

©2021 by Faiz Universe. Proudly created with Wix.com

bottom of page