ESP32 Journey — “fail” Weather Station
Halo semuanyaa, balik lagi bersama saya, Ihza di ESP32 Journey. Nah, pada kali ini tuh proyeknya pengembagan dari journey sebelumnya yakni tentang web server. Tapi sesuai judul, artinya gue bakal nyoba bikin web server tentang Weather Station lewat ESP32 ini. Tanpa basi-basa ayo kita kupas tuntas!
Okee komponen yang kita butuhin di proyek kali ini tuh ini nih:
-ESP32 development board
-DHT22 or DHT11 Temperature and Humidity Sensor
-Resistor 10k ohm
-Breadboard
-Kabel jumper
Dan untuk rangkaiannya simpel banget kok, ini sama banget kaya journey pas pembacaan suhu ruangan tanpa webserver alias langsung lewat serial monitor. Kurang lebih gini nih skematiknya
Nah simpel banget kan, oiya kalian juga harus download dulu library dari Adafruit Sensor buat DHT sama library AsyncTCP buat web server, itu bisa kalian dapetin di sumber yang gue kasihin tuh di randomnerdtutorials. Terus buat kode programnya kita bisa langsung comot disana juga, karna gue baik gue bantu pindahin kesini deh kode programnya, nih:
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/// Import required libraries
#include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include <Adafruit_Sensor.h>
#include <DHT.h>// Replace with your network credentials
const char* ssid = "sesuain SSIDmu";
const char* password = "sesuain password SSIDmu";#define DHTPIN 4 // Digital pin connected to the DHT sensor// Uncomment the type of sensor in use:
#define DHTTYPE DHT11 // DHT 11
//#define DHTTYPE DHT22 // 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">°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">%</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(){
}
Oiya, jangan lupa buat ganti jenis DHTnya sesuai punyamu ya sama SSID+Password wifi nya juga. Gampang banget kan bro” bikin ini tuhh. Cuma ya ternyata DHT11 punya gue rusak :(, akhirnya punya gue tuh dia udah berhasil bikin web servernya, udah bisa diakses, cuma ya sensornya gabisa baca suhu ruangannya dan programnya jadi ngirim output kaya ginian nih di serial monitornya :(.
Nah, jadi gitu kan hasilnya, dia gamau ngeliatin besar suhu ruangan di tempat gue karena ya DHT11nya itu ternyata rusak, dan doain aja gue bisa beli lagi ya ditengah kondisi self-lockdown sekarang.
Mungkin sekian dulu ya cerita kali ini, oiya cerita ini dicatat ketika penulis sedang diterpa hujan tugas besar dan kendala dalam mengerjakannya :(, semoga kita semua bisa lewatin pekan yang cukup berat ini ya! Oiya, jangan lupa cuci tangan dan stay healthy ya bro”, Danke!
