Wokwi - Online ESP32, STM32, Arduino Simulator

#include <WiFi.h>
#include <WebServer.h>
#include <DHT.h>
#include <time.h>

#define DHTPIN 4     // Sensor DHT11 conectado à porta G4
#define DHTTYPE DHT11

const char* ssid = "Eletronica";
const char* password = "12345678";

DHT dht(DHTPIN, DHTTYPE);
WebServer server(80);

float temperature = 0.0;
float humidity = 0.0;
String lastUpdate = "";

const char* ntpServer = "pool.ntp.org";
const long  gmtOffset_sec = -3 * 3600;  // Fuso horário de Brasília (UTC-3)
const int   daylightOffset_sec = 0;

void setup() {
  Serial.begin(115200);
  dht.begin();

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Conectando ao WiFi...");
  }
  Serial.println("Conectado ao WiFi");

  configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);

  server.on("/", handleRoot);
  server.on("/data", handleData);
  server.begin();
}

void loop() {
  server.handleClient();
  
  static unsigned long lastSecondUpdate = 0;
  static unsigned long lastMinuteUpdate = 0;
  
  if (millis() - lastSecondUpdate >= 1000) {
    updateSensorData();
    lastSecondUpdate = millis();
  }
  
  if (millis() - lastMinuteUpdate >= 60000) {
    logData();
    lastMinuteUpdate = millis();
  }
}

void updateSensorData() {
  temperature = dht.readTemperature();
  humidity = dht.readHumidity();
  
  if (isnan(temperature) || isnan(humidity)) {
    Serial.println("Falha na leitura do sensor DHT11!");
    return;
  }
  
  struct tm timeinfo;
  if(!getLocalTime(&timeinfo)){
    Serial.println("Falha ao obter o horário");
    return;
  }
  
  char timeString[20];
  strftime(timeString, sizeof(timeString), "%d/%m/%Y %H:%M:%S", &timeinfo);
  lastUpdate = String(timeString);
}

void logData() {
  Serial.printf("Temperatura: %.2f°C, Umidade: %.2f%%, Horário: %s\n", temperature, humidity, lastUpdate.c_str());
}

void handleRoot() {
  String html = R"=====(
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Monitoramento DHT11 - Araruna, PB</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            padding: 20px;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
        }
        .data-container {
            display: flex;
            justify-content: space-around;
            margin-bottom: 30px;
        }
        .data-box {
            text-align: center;
            padding: 20px;
            background-color: #3498db;
            color: #fff;
            border-radius: 10px;
            width: 40%;
        }
        .data-box h2 {
            margin: 0;
            font-size: 2.5em;
        }
        .data-box p {
            margin: 5px 0 0;
            font-size: 1.2em;
        }
        #lastUpdate {
            text-align: center;
            font-style: italic;
            color: #7f8c8d;
        }
        #log {
            background-color: #ecf0f1;
            border-radius: 5px;
            padding: 10px;
            height: 200px;
            overflow-y: scroll;
            font-family: monospace;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Monitoramento DHT11 - Araruna, PB</h1>
        <div class="data-container">
            <div class="data-box">
                <h2 id="temperature">--.-</h2>
                <p>Temperatura (°C)</p>
            </div>
            <div class="data-box">
                <h2 id="humidity">--.-</h2>
                <p>Umidade (%)</p>
            </div>
        </div>
        <p id="lastUpdate">Última atualização: --/--/---- --:--:--</p>
        <h3>Registro de Dados (a cada minuto)</h3>
        <div id="log"></div>
    </div>
    <script>
        function updateData() {
            fetch('/data')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('temperature').textContent = data.temperature.toFixed(1);
                    document.getElementById('humidity').textContent = data.humidity.toFixed(1);
                    document.getElementById('lastUpdate').textContent = 'Última atualização: ' + data.lastUpdate;
                });
        }

        function updateLog() {
            const log = document.getElementById('log');
            const now = new Date();
            const timeString = now.toLocaleString('pt-BR', { timeZone: 'America/Sao_Paulo' });
            const temperature = document.getElementById('temperature').textContent;
            const humidity = document.getElementById('humidity').textContent;
            log.innerHTML += `${timeString} - Temperatura: ${temperature}°C, Umidade: ${humidity}%<br>`;
            log.scrollTop = log.scrollHeight;
        }

        setInterval(updateData, 1000);
        setInterval(updateLog, 60000);
        updateData();
    </script>
</body>
</html>
)=====";
  server.send(200, "text/html", html);
}

void handleData() {
  String json = "{";
  json += "\"temperature\":" + String(temperature, 2) + ",";
  json += "\"humidity\":" + String(humidity, 2) + ",";
  json += "\"lastUpdate\":\"" + lastUpdate + "\"";
  json += "}";
  server.send(200, "application/json", json);
}