A temperature and humidity sensor that provides real-time data displayed on a webpage.

Supplies

DHT11 sensor *1

NodeMcu *1

Breadboard *1

usb cable *1

jumper wires

Step 1: Principle

The DHT11 sensor works by utilizing a digital signal protocol to communicate with a microcontroller. When initiated, it sends out a signal to start data transmission, then proceeds to send pulses encoding temperature and humidity values. These pulses are decoded by the microcontroller to obtain the actual readings. The sensor's accuracy, within ±2°C for temperature and ±5% for humidity, makes it suitable for basic sensing tasks in various projects.

Step 2: Schematic Diagram

connect - to gnd
connect + to 3v3
connect S to D2

Step 3: Source Code

#include <Adafruit_Sensor.h>
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <DHT.h>

// Replace with your network credentials
const char *ssid = "YourWifissid";
const char *password = "YourPassword";

// Replace with your static IP configuration
IPAddress staticIP(ReplacewiththeIPAdressYou want ); // like 192, 168, 4, 1,
IPAddress gateway(PutTheAdress of your router); // like 192, 168, 4, 1,
IPAddress subnet(255, 255, 255, 0);

// Create an instance of the ESP8266WebServer class
ESP8266WebServer server(80);

// Replace with your DHT sensor type and pin
#define DHTPIN D2
#define DHTTYPE DHT11

DHT dht(DHTPIN, DHTTYPE);

void setup() {
  // Start serial communication
  Serial.begin(115200);

  // Set static IP configuration
  WiFi.config(staticIP, gateway, subnet);

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");

  // Initialize the DHT sensor
  dht.begin();

  // Define web server routes
  server.on("/", HTTP_GET, handleRoot);

  // Start the server
  server.begin();
}

void loop() {
  // Handle client requests
  server.handleClient();

  // Read temperature and humidity from the sensor
  float temperature = dht.readTemperature();
  float humidity = dht.readHumidity();

  // Print temperature and humidity to the serial monitor
  Serial.print("Temperature: ");
  Serial.print(temperature);
  Serial.print(" °C | Humidity: ");
  Serial.print(humidity);
  Serial.println(" %");

  // Add a delay to prevent too frequent readings
  delay(2000);  // Delay for 2 seconds
}

// Function to handle root URL
void handleRoot() {
  float temperature = dht.readTemperature();
  float humidity = dht.readHumidity();

  // Determine background gradient based on temperature
  String bgColor = getBackgroundGradient(temperature);

  String html = "<html><head><title>Weather Monitor</title>";
  html += "<style>body {margin: 0; overflow: hidden; transition: background 0.5s ease;}";
  html += ".container {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);";
  html += "text-align: center; color: #ffffff; font-family: 'Arial', sans-serif;}";
  html += ".sensor-data {font-size: 24px; margin-top: 20px;}";
  html += "</style>";
  html += "<script>";
  html += "function updateBackground() {";
  html += "var posX = event.clientX / window.innerWidth;";
  html += "var posY = event.clientY / window.innerHeight;";
  html += "document.body.style.background = '" + bgColor + "';";
  html += "document.body.style.backgroundImage = 'radial-gradient(circle at ' + posX * 100 + '% ' + posY * 100 + '%, rgba(0, 0, 255, 0.3), transparent)';}";
  html += "document.addEventListener('mousemove', updateBackground);";
  html += "setTimeout(function() { location.reload(); }, 60000);";  // Refresh every minute
  html += "</script>";
  html += "</head><body>";
  html += "<div class='container'>";
  html += "<h1>Weather Monitor</h1>";
  html += "<div class='sensor-data'>";
  html += "<p>Temperature: " + String(temperature) + " °C</p>";
  html += "<p>Humidity: " + String(humidity) + " %</p>";
  html += "</div>";
  html += "</div>";
  html += "</body></html>";

  server.send(200, "text/html", html);
}

String getBackgroundGradient(float temperature) {
  // Example: Change background gradient based on temperature range
  if (temperature < 20) {
    return "linear-gradient(to bottom, #87CEFA, #00FA9A)"; // Light Sky Blue to Medium Sea Green
  } else if (temperature >= 20 && temperature < 25) {
    return "linear-gradient(to bottom, #4169E1, #00FF7F)"; // Royal Blue to Spring Green
  } else {
    return "linear-gradient(to bottom, #191970, #00CED1)"; // Midnight Blue to Dark Turquoise
  }
}

I have set it up to use a static IP

all you need to do is replace this part with your credentials and stuff

// Replace with your network credentials
const char *ssid = "YourWifissid";
const char *password = "YourPassword";

// Replace with your static IP configuration
IPAddress staticIP(ReplacewiththeIPAdressYou want ); // like 192, 168, 4, 1,
IPAddress gateway(PutTheAdress of your router); // like 192, 168, 4, 1,
IPAddress subnet(255, 255, 255, 0);