#include <WiFi.h>
#include "AsyncTCP.h"
#include "ESPAsyncWebSrv.h"
#include <Wire.h>
#include "DHT.h"
// Replace with your network credentials
const char* ssid = "Wokwi-GUEST";
const char* password = "";
#define DHTPIN 25 // Digital pin connected to the DHT sensor
int ledred = 2;
int ledyellow = 26;
int ledgreen = 32;
int ledblue = 33;
// 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);
AsyncEventSource events("/events");
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#Painel{
height: 620px;
width: 420px;
border: 5px solid silver;
background-color: snow;
border-radius: 5%;
margin: auto;
}
#TempHumV{
border-radius: 50%;
font-size: 60px;
font-weight: bold;
color: white;
position: relative;
top: 55px;
}
#TempP{
border-radius: 50%;
border: 7px solid silver;
background-color: black;
position: relative;
top: 45px;
height: 180px;
width: 180px;
margin: auto;
filter: drop-shadow(5px 5px 5px black);
transition: .3s;
}
th{
color: rgb(221, 216, 216);
filter: drop-shadow(1px 1px 1px black);
}
#OnOff::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 30px;
height: 30px;
background-image: linear-gradient(white,rgb(185, 180, 180));
cursor: pointer;
scale: 0.92;
transition: .4s;
position: relative;
border-radius: 5%;
}
#OnOff {
-webkit-appearance: none;
width: 70px;
height: 35px;
border: 4px solid rgb(184, 184, 184);
background-repeat: repeat-y;
background-color: transparent;
position: relative;
filter: drop-shadow(2px 2px 2px black);
}
#OnOffD::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 30px;
height: 30px;
background-image: linear-gradient(white,rgb(185, 180, 180));
cursor: pointer;
scale: 0.92;
transition: .4s;
position: relative;
border-radius: 5%;
}
#OnOffD {
-webkit-appearance: none;
width: 70px;
height: 35px;
border: 4px solid rgb(184, 184, 184);
background-repeat: repeat-y;
background-color: transparent;
position: relative;
filter: drop-shadow(2px 2px 2px black);
}
#OnOffT::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 30px;
height: 30px;
background-image: linear-gradient(white,rgb(185, 180, 180));
cursor: pointer;
scale: 0.92;
transition: .4s;
position: relative;
border-radius: 5%;
}
#OnOffT {
-webkit-appearance: none;
width: 70px;
height: 35px;
border: 4px solid rgb(184, 184, 184);
background-repeat: repeat-y;
background-color: transparent;
position: relative;
filter: drop-shadow(2px 2px 2px black);
}
#OnOffQ::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 30px;
height: 30px;
background-image: linear-gradient(white,rgb(185, 180, 180));
cursor: pointer;
scale: 0.92;
transition: .4s;
position: relative;
border-radius: 5%;
}
#OnOffQ {
-webkit-appearance: none;
width: 70px;
height: 35px;
border: 4px solid rgb(184, 184, 184);
background-repeat: repeat-y;
background-color: transparent;
position: relative;
filter: drop-shadow(2px 2px 2px black);
}
table{
margin: auto;
position: relative;
top: 175px;
}
#OffU{
position: relative;
top: 33px;
color: red;
font-weight: bold;
font-size: 14px;
right: 8.5px;
filter: drop-shadow(2px 2px 2px black);
}
#OnU{
position: relative;
top: 33px;
color: green;
font-weight: bold;
font-size: 14px;
left: 8px;
filter: drop-shadow(2px 2px 2px black);
}
#OffD{
position: relative;
top: 33px;
color: red;
font-weight: bold;
font-size: 14px;
right: 8.5px;
filter: drop-shadow(2px 2px 2px black);
}
#OnD{
position: relative;
top: 33px;
color: green;
font-weight: bold;
font-size: 14px;
left: 8px;
filter: drop-shadow(2px 2px 2px black);
}
#OffT{
position: relative;
top: 33px;
color: red;
font-weight: bold;
font-size: 14px;
right: 8.5px;
filter: drop-shadow(2px 2px 2px black);
}
#OnT{
position: relative;
top: 33px;
color: green;
font-weight: bold;
font-size: 14px;
left: 8px;
filter: drop-shadow(2px 2px 2px black);
}
#OffQ{
position: relative;
top: 33px;
color: red;
font-weight: bold;
font-size: 14px;
right: 8.5px;
filter: drop-shadow(2px 2px 2px black);
}
#OnQ{
position: relative;
top: 33px;
color: green;
font-weight: bold;
font-size: 14px;
left: 8px;
filter: drop-shadow(2px 2px 2px black);
}
#SelectOption{
position: relative;
top: 95px;
filter: drop-shadow(2px 2px 2px black);
}
#optionV{
color: white;
position: relative;
bottom: 11px;
font-weight: bold;
}
#buttonUm{
height: 45px;
width: 35px;
filter: drop-shadow(2px 2px 2px black);
border-color: transparent;
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
position: relative;
right: 5px;
transition: .3s;
}
#buttonUm:active{
scale: 0.85;
}
#buttonDois{
height: 45px;
width: 35px;
filter: drop-shadow(2px 2px 2px black);
border-color: transparent;
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
position: relative;
left: 5px;
transition: .3s;
}
#buttonDois:active{
scale: 0.85;
}
</style>
</head>
<body >
<div id="Painel">
<div id="TempP">
<label id="TempHumV"></label>
</div>
<br>
<div id="SelectOption">
<button id="buttonUm" onpointerdown="cLess()"></button><label id="optionV">TEMPERATURA(ºC)</label><button id="buttonDois" onpointerdown="cPlus()"></button>
</div>
<br>
<div id="Disjuntores">
<table>
<tr>
<th>SALA</th><th>COZINHA</th><th>QUARTO</th><th>BANHEIRO</th>
</tr>
<tr>
<td>
<label id="OffU">OFF</label><label id="OnU">ON</label><br>
<input id="OnOff" type="range" min="0" max="1" value="0" onchange="ledum()">
</td>
<td>
<label id="OffD">OFF</label><label id="OnD">ON</label><br>
<input id="OnOffD" type="range" min="0" max="1" value="0" onchange="leddois()">
</td>
<td>
<label id="OffT">OFF</label><label id="OnT">ON</label><br>
<input id="OnOffT" type="range" min="0" max="1" value="0" onchange="ledtres()" >
</td>
<td>
<label id="OffQ">OFF</label><label id="OnQ">ON</label><br>
<input id="OnOffQ" type="range" min="0" max="1" value="0" onchange="ledquatro()">
</td>
</tr>
</table>
</div>
</div>
<script>
var change = 0;
var Temp;
var Hum;
setInterval(function ( ) {
const reqTemp = new XMLHttpRequest();
reqTemp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200 &&change%2 == 0){
Temp = reqTemp.responseText;
document.getElementById("TempHumV").innerHTML = Temp+"ºC";
if(Temp < 0){
document.getElementById("TempP").style.borderColor = "aqua";
}
if(0 <= Temp && Temp < 30 ){
document.getElementById("TempP").style.borderColor = "yellowgreen";
}
if(30 <= Temp && Temp < 60){
document.getElementById("TempP").style.borderColor = "yellow";
}
if(60 <= Temp && Temp <= 80){
document.getElementById("TempP").style.borderColor = "red";
}
}
}
reqTemp.open('GET','/t',true);
reqTemp.send();
}, 600 ) ;
setInterval(function ( ) {
const reqHum = new XMLHttpRequest();
reqHum.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200 &&change%2 != 0){
Hum = reqHum.responseText;
document.getElementById("TempHumV").innerHTML = Hum+"%";
if(0 <= Hum && Hum <= 25){
document.getElementById("TempP").style.borderColor = "aqua";
}
if(25 < Hum && Hum <= 50 ){
document.getElementById("TempP").style.borderColor = "yellowgreen";
}
if(50 < Hum && Hum <= 75){
document.getElementById("TempP").style.borderColor = "yellow";
}
if(75 < Hum && Hum <= 100){
document.getElementById("TempP").style.borderColor = "red";
}
}
}
reqHum.open('GET','/u',true);
reqHum.send();
}, 600 ) ;
function ledum(){
const ledU = new XMLHttpRequest();
if(document.getElementById("OnOff").value == 1){
ledU.open('GET','/ledumon',true);
ledU.send();
}else{
ledU.open('GET','/ledumoff',true);
ledU.send();
}
}
function leddois(){
const ledD = new XMLHttpRequest();
if(document.getElementById("OnOffD").value == 1){
ledD.open('GET','/leddoison',true);
ledD.send();
}else{
ledD.open('GET','/leddoisoff',true);
ledD.send();
}
}
function ledtres(){
const ledT = new XMLHttpRequest();
if(document.getElementById("OnOffT").value == 1){
ledT.open('GET','/ledtreson',true);
ledT.send();
}else{
ledT.open('GET','/ledtresoff',true);
ledT.send();
}
}
function ledquatro(){
const ledQ = new XMLHttpRequest();
if(document.getElementById("OnOffQ").value == 1){
ledQ.open('GET','/ledquatroon',true);
ledQ.send();
}else{
ledQ.open('GET','/ledquatrooff',true);
ledQ.send();
}
}
function cPlus(){
change++;
console.log(change);
if(change%2 == 0){
document.getElementById("optionV").innerHTML = "TEMPERATURA(ºC)";
}else{
document.getElementById("optionV").innerHTML = "UMIDADE(%)";
}
}
function cLess(){
change--;
console.log(change);
if(change == -1){
change = 0;
}
if(change%2 == 0){
document.getElementById("optionV").innerHTML = "TEMPERATURA(ºC)";
}else{
document.getElementById("optionV").innerHTML = "UMIDADE(%)";
}
}
</script>
</body>
</html>)rawliteral";
int temp ;
int hum ;
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
dht.begin();
// Connect to Wi-Fi
WiFi.mode(WIFI_STA);
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());
pinMode(ledred, OUTPUT);
pinMode(ledyellow, OUTPUT);
pinMode(ledgreen, OUTPUT);
pinMode(ledblue, OUTPUT);
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html);
});
events.onConnect([](AsyncEventSourceClient *client){
if(client->lastId()){
Serial.println("Client reconnected! Last message ID that it got is: %u\n");
}
client->send("hello!", NULL, millis(), 10000);
});
server.on("/t", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(temp).c_str());
});
server.on("/ledumon", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(ledred, HIGH);
});
server.on("/ledumoff", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(ledred, LOW);
});
server.on("/leddoison", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(ledyellow, HIGH);
});
server.on("/leddoisoff", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(ledyellow, LOW);
});
server.on("/ledtreson", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(ledgreen, HIGH);
});
server.on("/ledtresoff", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(ledgreen, LOW);
});
server.on("/ledquatroon", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(ledblue, HIGH);
});
server.on("/ledquatrooff", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(ledblue, LOW);
});
server.on("/u", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(hum).c_str());
});
// Start server
server.addHandler(&events);
server.begin();
}
void loop(){
temp = dht.readTemperature();
hum = dht.readHumidity();
}