Local Web Server With ESP8266 | DHT11 | Measuring Temperature & Humidity
by AndronikosKostas in Circuits > Arduino
876 Views, 6 Favorites, 0 Comments
Local Web Server With ESP8266 | DHT11 | Measuring Temperature & Humidity
In this project we will build a site that will show us the temperature, humidity and heat index (feels like/human-perceived equivalent temperature) with the help of DHT11. As you may understand from the title, the local server will be supported by ESP8266 which is a Wi-Fi module.
Components
We will need:
1x DHT11 sensor
1x 5mm LED
1x 220 Ohm Resistor
1x 10k Ohm Resistor
1x Breadboard
1x ESP8266 Wi-Fi Module
6 or 8 x Wires male-to-male
Wiring
Programming in Arduino IDE
First of all, for, ESP8266WiFi.h and DHT.h libraries to be included properly, you have to go to files and click on the preference in the Arduino IDE. Add the following link to the Additional Manager URLS section :
"http://arduino.esp8266.com/stable/package_esp8266com_index.json". Now go to Tools > Board > Board Manager... and search for esp8266 and install the one that is implemented by ESP8266 Community.Then plug the USB into your PC and go to Tools > Board > ESP8266 Boards > "NodeMCU 1.0 (ESP-12E Module)" and click it. Also, press Ctrl + shift + I and install the "Adafruit Unified Sensor".Finally, search for the "DHT sensor library", that is implemented by Adafruit and install it. Finally copy the following code.
#include <ESP8266WiFi.h>
#include <DHT.h>
#define DHTPIN 5 // GeneralPurposeInput/Output 5 ( GPIO5 or D1)
#define DHTTYPE DHT11
#define LED 15 // GPIO15 or D8 on the module.
DHT dht(DHTPIN,DHTTYPE); // DHT object creation .
String temp;
String hum ;
String hindex ;
String html = "";
// Replace with your network credentials
const char* ssid = "" ;
const char* password = "";
// Set web server port number to 80
WiFiServer server(80);
void setup() {
pinMode(LED,OUTPUT);
Serial.begin(115200);
// Initialize the output variables as outputs
dht.begin();
// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
server.begin();
Serial.println("Web server running. Waiting for the ESP IP...");
delay(2000);
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
}
void loop(){
WiFiClient client = server.available(); // Listen for incoming clients
//taking the temperature humidity and heat index from DHT11
int h = dht.readHumidity();
delay(1000);
Serial.print("Humidity : ");
Serial.println(h);
float t = dht.readTemperature();
delay(1000);
Serial.print("Temperature : ");
Serial.println(t);
float hidx = dht.computeHeatIndex(t,h);
Serial.println(hidx);
if(isnan(t)|| isnan(h) || isnan(hidx))
{
Serial.println("Failed to read from DHT sensor");
return; // go back to read again.
}
else
{
// We convert them to Strings to display them in the web page.
temp = String(t);
hum = String(h);
hindex = String(hidx);
}
if (client) { // If a new client connects,
Serial.println("New Client."); // print a message out in the serial port
digitalWrite(LED,HIGH); // We turn on the LED.
boolean blank_line = true; // bolean to locate when the http request ends
while(client.connected())
{
if (client.available())
{
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
if(c == '\n' && blank_line)
{
//The following lines are essential for the server to function appropriately.
client.println("HTTP/1.1 200 OK"); // OK means that the HTTP request succeded.
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
// Html code to see the results when we type the IP address in a browser.
html ="<!DOCTYPE HTML>";
html+="<html>";
html+="<head>";
//The following line is for the html code to work in all browsers.
html+="<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
//This line gave us access to all icons from the website fontawesome.com
html+= "<script src=\"https://kit.fontawesome.com/7336f141e3.js\" crossorigin=\"anonymous\"></script>";
html+="<body>";
html+="<style>"; // Coding in CSS for styling the web page .
html+="body{text-align:center;font-size:120%;}";
html+="</style>";
html+="<br>"; // We change line in web page .
html+="</br>";
html+="<br>";
html+="</br>";
// <i class=\"fas fa-temperature-low\"></i> : this code loads the temperature icon.<br> // You can find it here : <a href="https://fontawesome.com/icons/temperature-low?style=solid"> <a href="https://fontawesome.com/icons/temperature-low?sty..." rel="nofollow"> https://fontawesome.com/icons/temperature-low?sty...>>
// Then you just copy the html code and you put it here.That's how I did it.
html+="<h1><i class=\"fas fa-temperature-low\"></i> ";
html+=temp;
html+="<span>℃</span>"; //code to display the degree icon
html+="</h1>";
html+="<p><h1><i class=\"fas fa-tint\"></i> ";
html+=hum;
html+="%</h1></p>";
html+="<p><h1>Feels like: ";
html+=hindex ;
html+="<span>℃</span></h1></p>";
html+="</body></html>";
client.println(html);
break;
}
if(c == '\n')
{
blank_line = true ;
}
else if(c != '\r')
{
blank_line = false ;
}
}
}
// Close the connection
client.stop();
Serial.println("Client disconnected.");
delay(2000);
digitalWrite(LED,LOW); // We turn off the LED.
Serial.println("");
}
}The Outcome
.png)
Now upload the code to ESP8266. Then open the serial monitor to see your IP address. When you get the IP address, type it in any browser to see what we made.