// Import required libraries
#include "WiFi.h"
#include "ESPAsyncWebSrv.h"
#include <Adafruit_Sensor.h>
#include <DHT.h>
#define DHTPIN 27 // Digital pin connected to the DHT sensor
#define POTENTIOPIN 34
// 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);
// Create websocket server object
AsyncWebSocket ws("/ws");
void onWsEvent(AsyncWebSocket * server, AsyncWebSocketClient * client, AwsEventType type, void * arg, uint8_t *data, size_t len){
if(type == WS_EVT_CONNECT){
Serial.println("Websocket client connection received");
client->text("Hello from ESP32 Server");
} else if(type == WS_EVT_DISCONNECT){
Serial.println("Client disconnected");
}
}
float floatMap(float x, float in_min, float in_max, float out_min, float out_max) {
return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;}
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);
}
}
// Algoritma untuk stabilisasi nilai pada potensiometer
const int numSamples = 100;
float samples[numSamples];
int sampleIndex = 0;
float potValue=0;
float readPotentiometer() {
float potentiometerValue = floatMap(analogRead(POTENTIOPIN),0,4095,0,3.3);
samples[sampleIndex] = potentiometerValue;
sampleIndex = (sampleIndex + 1) % numSamples;
float sum = 0;
for (int i = 0; i < numSamples; i++) {
sum += samples[i];
}
float average = sum / numSamples;
return average;
}
String readPot(){
return String(potValue);
}
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;
}
body{background-color: midnightblue;}
.container{background-color: rgb(206, 206, 206); padding: 50px;}
h2 { font-size: 3.0rem; color: white}
.left {
float: left;
}
.right {
float: right;
}
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }
.dht-labels{
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
#dynRectangle
{
width:0px;
height:12px;
top: 9px;
background-color: red;
z-index: -1;
</style>
</head>
<body>
<h2>ESP32 Web Server: DHT22 and Potentiometer</h2>
<div class="container">
<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>
<p>
<i class="fas fa-bolt" style="color:yellow;"></i>
<span class="dht-labels">Potentio</span>
<span id="potentio">%POTENTIO%</span>
<span class="dht-labels">V</span>
</p>
<!--Potentiometer-->
<div style=" display: flex;
justify-content: space-between;">
<h3 class="left">
0V</h3>
<h3 class="right">
3.3V</h3>
</div>
<div style="background-color: #00add6; border: 3px solid" >
<div id="dynRectangle"></div>
</div>
</div>
</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 ) ;
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("potentio").innerHTML = this.responseText;
var div = document.getElementById("dynRectangle");
var pot = (parseFloat(this.responseText)/3.3)*div.parentElement.clientWidth;
div.style.width = pot+"px";
}
};
xhttp.open("GET", "/potentio", true);
xhttp.send();
}, 1000 ) ;
</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();
}
else if(var == "POTENTIO"){
return readPot();
}
return String();
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
dht.begin();
// Connect to Wi-Fi
WiFi.begin("Wokwi-GUEST", "", 6);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP32 Local IP Address
Serial.println(WiFi.localIP());
// ws.onEvent(onWsEvent);
// server.addHandler(&ws);
// server.begin();
// 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());
});
server.on("/potentio", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readPot().c_str());
});
// Start server
server.begin();
}
void loop(){
potValue = readPotentiometer();
Serial.println(potValue);
delay(10);
}