Scribd
Upload
19 views

Experiment No. 11

This document outlines an experiment to design and implement an HTTP-based IoT web server that displays temperature and humidity sensor values using a DHT11 sensor connected to an ESP32 development board. The server is configured to allow access to sensor data via a web browser, with code provided for setup and handling HTTP requests. The document includes details on connecting to Wi-Fi, reading sensor data, and generating an HTML response to display the information.

Uploaded by

S. O. D FLIPS
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

Experiment No. 11

This document outlines an experiment to design and implement an HTTP-based IoT web server that displays temperature and humidity sensor values using a DHT11 sensor connected to an ESP32 development board. The server is configured to allow access to sensor data via a web browser, with code provided for setup and handling HTTP requests. The document includes details on connecting to Wi-Fi, reading sensor data, and generating an HTML response to display the information.

Uploaded by

S. O. D FLIPS
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Experiment -11

Design and Implementation of HTTP based IoT Web Server to display sensor value

The goal of this experiment is to integrate the HTTP webserver with Sensor. As we know, most
IoT Nodes are equipped with sensors and the IoT systems should provide these sensor data to
users. In this experiment, we used DHT11 Temperature and Humidity sensor connected to an
IoT Node/ ESP32 development board. The IoT Node is configured as a Webserver and the
sensor data can be accessed via a web browser.
CODE:
#include <WiFi.h>
#include <WebServer.h>
#include "DHT.h"

// Uncomment one of the lines below for whatever DHT sensor type you're using!
#define DHTTYPE DHT11 // DHT 11
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
//#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321

/*Put your SSID & Password*/


const char* ssid = " REPLACE_WITH_YOUR_SSID "; // Enter SSID here
const char* password = " REPLACE_WITH_YOUR_PASSWORD"; //Enter Password here

WebServer server(80);

// DHT Sensor
uint8_t DHTPin = 4;

// Initialize DHT sensor.


DHT dht(DHTPin, DHTTYPE);

float Temperature;
float Humidity;

void setup() {
Serial.begin(115200);
delay(100);

pinMode(DHTPin, INPUT);

dht.begin();

Serial.println("Connecting to ");
Serial.println(ssid);

//connect to your local wi-fi network


WiFi.begin(ssid, password);

//check wi-fi is connected to wi-fi network


while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: "); Serial.println(WiFi.localIP());
server.on("/", handle_OnConnect);
server.onNotFound(handle_NotFound);

server.begin();
Serial.println("HTTP server started");

}
void loop() {

server.handleClient();

void handle_OnConnect() {

Temperature = dht.readTemperature(); // Gets the values of the temperature


Humidity = dht.readHumidity(); // Gets the values of the humidity
server.send(200, "text/html", SendHTML(Temperature,Humidity));
}

void handle_NotFound(){
server.send(404, "text/plain", "Not found");
}

String SendHTML(float Temperaturestat,float Humiditystat){


String ptr = "<!DOCTYPE html> <html>\n";
ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-
scalable=no\">\n";
ptr +="<title>ESP32 Weather Report</title>\n";
ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align:
center;}\n";
ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}\n";
ptr +="p {font-size: 24px;color: #444444;margin-bottom: 10px;}\n";
ptr +="</style>\n";
ptr +="</head>\n";
ptr +="<body>\n";
ptr +="<div id=\"webpage\">\n";
ptr +="<h1>ESP32 Weather Report</h1>\n";
ptr +="<p>Temperature: ";
ptr +=(int)Temperaturestat;
ptr +="\xC2\xB0 C</p>";
ptr +="<p>Humidity: ";
ptr +=(int)Humiditystat;
ptr +="%</p>";
ptr +="</div>\n";
ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}
RESULT:

On Web browser/Web Client:

You might also like