Interfacing Surilli WiFi, DHT11 Web Server with Arduino IDE

In this tutorial, we will create a standalone web server with Surilli WiFi ESP8266 that displays the temperature and humidity with a DHT11 sensor using the Arduino IDE. The web server that we will build can be accessed by any device that has a browser on your local network.

Hardware Required

• Surilli WiFi
• DHT11 Temperature and Humidity Sensor
• Breadboard
• Arduino IDE
• Connecting Wires

Set Up Arduino IDE for Surilli

Make sure you have selected the right port, board and processor for the Surilli as shown in the picture below and it is programmable (compile and upload “Blink” from File>Examples>Digital>Blink onto your Surilli to check if everything is working fine).

The Circuitry

The circuitry is very simple. It's mostly the programming. Follow the figure below to set up your hardware.

Installing Library:

Download the Library from the link mentioned below:

https://github.com/surilli-io/Adafruit-Sensor

After downloading the library from the above mentioned link, go to Arduino IDE then go to Sketch --> Include Library --> Add .zip Library and add the downloaded library. Go to your Documents folder --> Arduino --> libraries. There you will see your library.

Upload and Burn Code Onto Surilli:

Now you have completed setting up your hardware and Arduino IDE. Copy and paste the Arduino sketch given below into your Arduino IDE. Replace the SSID and password with your own credentials and hit upload. The results can be viewed on the Serial Monitor.

Arduino Code:

// Including the ESP8266 WiFi library
#include <ESP8266WiFi.h>
#include "DHT.h"
// Uncomment one of the lines below for whatever DHT sensor type you're using!
#define DHTTYPE DHT11   // DHT 11
// Replace with your network details
const char* ssid = "YOUR_NETWORK_NAME";
const char* password = "YOUR_NETWORK_PASSWORD";
// Web Server on port 80
WiFiServer server(80);
// DHT Sensor
const int DHTPin = 5;
// Initialize DHT sensor.
DHT dht(DHTPin, DHTTYPE);
// Temporary variables
static char celsiusTemp[7];
static char fahrenheitTemp[7];
static char humidityTemp[7];
// only runs once on boot
void setup() {
 // Initializing serial port for debugging purposes
 Serial.begin(115200);
 delay(10);
 dht.begin();
 // Connecting to WiFi network
 Serial.println();
 Serial.print("Connecting to ");
 Serial.println(ssid);
 WiFi.begin(ssid, password);
 while (WiFi.status() != WL_CONNECTED) {
   delay(500);
   Serial.print(".");
 }
 Serial.println("");
 Serial.println("WiFi connected");
 // Starting the web server
 server.begin();
 Serial.println("Web server running. Waiting for the ESP IP...");
 delay(10000);
 // Printing the ESP IP address
 Serial.println(WiFi.localIP());
}
// runs over and over again
void loop() {
 // Listening for new clients
 WiFiClient client = server.available();
 if (client) {
   Serial.println("New client");
   // Boolean to locate when the http request ends
   boolean blank_line = true;
   while (client.connected()) {
     if (client.available()) {
       char c = client.read();
       if (c == '\n' && blank_line) {
           // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
           float h = dht.readHumidity();
           // Read temperature as Celsius (the default)
           float t = dht.readTemperature();
           // Read temperature as Fahrenheit (isFahrenheit = true)
           float f = dht.readTemperature(true);
           // Check if any reads failed and exit early (to try again).
           if (isnan(h) || isnan(t) || isnan(f)) {
             Serial.println("Failed to read from DHT sensor!");
             strcpy(celsiusTemp,"Failed");
             strcpy(fahrenheitTemp, "Failed");
             strcpy(humidityTemp, "Failed");         
           }
           else{
             // Computes temperature values in Celsius + Fahrenheit and Humidity
             float hic = dht.computeHeatIndex(t, h, false);       
             dtostrf(hic, 6, 2, celsiusTemp);             
             float hif = dht.computeHeatIndex(f, h);
             dtostrf(hif, 6, 2, fahrenheitTemp);         
             dtostrf(h, 6, 2, humidityTemp);
             // You can delete the following Serial.print's, it's just for debugging purposes
             Serial.print("Humidity: ");
             Serial.print(h);
             Serial.print(" %\t Temperature: ");
             Serial.print(t);
             Serial.print(" *C ");
             Serial.print(f);
             Serial.print(" *F\t Heat index: ");
             Serial.print(hic);
             Serial.print(" *C ");
             Serial.print(hif);
             Serial.print(" *F");
             Serial.print("Humidity: ");
             Serial.print(h);
             Serial.print(" %\t Temperature: ");
             Serial.print(t);
             Serial.print(" *C ");
             Serial.print(f);
             Serial.print(" *F\t Heat index: ");
             Serial.print(hic);
             Serial.print(" *C ");
             Serial.print(hif);
             Serial.println(" *F");
           }
           client.println("HTTP/1.1 200 OK");
           client.println("Content-Type: text/html");
           client.println("Connection: close");
           client.println();
           // your actual web page that displays temperature and humidity
           client.println("<!DOCTYPE HTML>");
           client.println("<html>");
           client.println("<head></head><body><h1>ESP8266 - Temperature and Humidity</h1><h3>Temperature in Celsius: ");
           client.println(celsiusTemp);
           client.println("*C</h3><h3>Temperature in Fahrenheit: ");
           client.println(fahrenheitTemp);
           client.println("*F</h3><h3>Humidity: ");
           client.println(humidityTemp);
           client.println("%</h3><h3>");
           client.println("</body></html>");     
           break;
       }
       if (c == '\n') {
         // when starts reading a new line
         blank_line = true;
       }
       else if (c != '\r') {
         // when finds a character on the current line
         blank_line = false;
       }
     }
   }  
   // closing the client connection
   delay(1);
   client.stop();
   Serial.println("Client disconnected.");
 }
}    

Open the Arduino IDE Serial Monitor at a baud rate of 115200. After a few seconds your IP address should appear. In my case, the IP Address was displayed as follows:

Now, simply copy the IP Address from the Serial Monitor of Arduino IDE and paste it in a web browser to see the Temperature along with the Humidity values. If you refresh the webpage then both the values of Temperature and Humidity values changes accordingly. In my case, the Temperature and Humidity values were displayed as follows:

Play with the program to see how it reacts to different values and logic.

If you make something fun and interesting, do share it with our community.

That’s all for now. If you have any queries, visit surilli.io or contact our support. Stay connected with the Surilli family for more amazing stuff. :-)