REAL TIME TEMPERATURE AND HUMIDITY DATA LOGGER USING NODEMCU

ESP8266
Reference: Circuits4you.com

Temperature and Humidity data logger web server with real time graphs and
tables.

COMPONENT

1 x NodeMCU ESP8266
1 x DHT 11 Sensor
1 x USB Cable
Jumper Wires
Laptop

PIN CONFIGURATION

DHT 11

NodeMCU ESP8266 Board

Figure 83. Pin configuration of NodeMCU ESP8266

Power Pins: There are four power pins. VIN pin and three 3.3V pins.
• VIN can be used to directly supply the NodeMCU/ESP8266 and its peripherals.
Power delivered on VIN is regulated through the onboard regulator on the
NodeMCU module – you can also supply 5V regulated to VIN pin.
• 3.3V pins are the output of the onboard voltage regulator and can be used to supply
power to external components.

GND: are the ground pins of NODEMCU/ESP8266

I2C Pins: are used to connect I2C sensors and peripherals. Both I2C Master and I2C
Slave are supported. I2C interface functionality can be realized programmatically,
and the clock frequency is 100 kHz at a maximum. It should be noted that I2C
clock frequency should be higher than the slowest clock frequency of the slave
device.

GPIO Pins: NodeMCU/ESP8266 has 17 GPIO pins which can be assigned to functions
such as I2C, I2S, UART, PWM, IR Remote Control, LED Light and Button
programmatically. Each digital enabled GPIO can be configured to internal pull0up
or pull-down, or set to high impedance. When configured as an input, it can also
be set to edge-trigger or level-trigger to generate CPU interrupts.

ADC Channel: The NodeMCU is embedded with a 10-bet precision SAR ADC. The two
functions can be implemented using ADC. Testing power supply voltage of
VDD3P3 pin and testing input voltage of TOUT pin. However, they cannot be
implemented at the same time.

UART Pins: The NodeMCU/ESP8266 has 2 UART interfaces (UART0 and UART1) which
provide asynchronous communication (RS232 and RS485), and can communicate
at up to 4.5 Mbps. UART0 (TXD0, RXDO, RST0 & CTS0 pins) can be used for
communication. However, UART1 (TSD1 pin) features only data transmit signal
so, it is usually used for printing log.

SPI Pins: NodeMCU/ESP8266 features two SPIs (SPI and HSPI) in slave and master
mode. These SPIs also support the following general-purpose SPI features:
• 4 timing modes of the SPI format transfer
• Up to 80 MHz and the divided clocks of 80 MHz
• Up to 64-Byte FIFO
SDIO Pins: NodeMCU/ESP8266 features Secure Digital Input/Output Interface (SDIO)
which is used to directly interface SD cards. 4-bit 25 MHz SDIO v1.1 and 4-bit 50
MHz SDIO v2.0 are supported.

PWM Pins: The board has 4 channels of Pulse Width Modulation (PWM). The PWM
output can be implemented programmatically and used for driving digital motors
and LEDs. PWM frequency range is adjustable from 1000 µs to 10000 µs (100 Hz
and 1 KHz).

Control Pins: are used to control the NodeMCU/ESP8266. These pins include Chip
Enable pin (EN), Reset pin (RST) and WAKE pin.
• EN: The ESP8266 chip is enabled when EN pin is pulled HIGH. When pulled
LOW the chip works at minimum power.
• RST: RST pin is used to reset the ESP8266 chip.
• WAKE: Wake pin is used to wake the chip from deep-sleep.

Control pins are used to control the NodeMCU/ESP8266. These pins include Chip
Enable pin (EN), Reset pin (RST) and WAKE pin.
• EN: The ESP8266 chip is enabled when EN pin is pulled HIGH. When pulled
LOW the chip works at minimum power.
• RST: RST pin is used to reset the ESP8266 chip.
• WAKE: Wake pin is used to wake the chip from deep-sleep.

WIRING DIAGRAM
 PROCEDURE

1. Install CH34x_Install_Windows_v3_4. This will allow you to connect the USB cable
and read the data connected to it. (You may install and uninstall this device if error
in sending and receiving the data happens during uploading).

2. Install additional board manager. File>Preferences and paste the link and click Ok.
http://arduino.esp8266.com/stable/package_esp8266com_index.json

Now go to Tools > Click Board Manager

 Find esp8266 and install

3. Add .ZIP library (AsyncTCP-master, ESPAsyncTCP-master,

ESPAsyncWebServer-master) in Arduino IDE.

For the DHT sensor library for ESPx, you have to add it through Tools > Managing
libraries search for the word and install.
4. We have two sets of code. First is the. ino and second is html.

a. REAL_TIME_TEMPERATURE_AND_HUMIDITY_DATA_LOG
GER_USING_NODEMCU_ES.ino

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

#include "PageIndex.h" //Our HTML webpage contents with javascripts

#include "DHTesp.h" //DHT11 Library for ESP

#define LED 2 //On board LED

#define DHTpin 14 //D5 of NodeMCU is GPIO14

DHTesp dht;

//SSID and Password of your WiFi router

const char* ssid = "HOTSPOT";
const char* password = "kali2024";

ESP8266WebServer server(80); //Server on port 80

//=======================================================
========
// This routine is executed when you open its IP in browser
//=======================================================
========
void handleRoot() {
String s = MAIN_page; //Read HTML contents
server.send(200, "text/html", s); //Send web page
}

float humidity, temperature;

void handleADC() {
int a = analogRead(A0);
//Ref 1: https://circuits4you.com/2019/01/11/nodemcu-esp8266-arduino-
json-parsing-example/
//Ref 2: https://circuits4you.com/2019/01/25/arduino-how-to-put-quotation-
marks-in-a-string/
String data = "{\"ADC\":\""+String(a)+"\", \"Temperature\":\""+
String(temperature) +"\", \"Humidity\":\""+ String(humidity) +"\"}";

digitalWrite(LED,!digitalRead(LED)); //Toggle LED on data request ajax

server.send(200, "text/plane", data); //Send ADC value, temperature and
humidity JSON to client ajax request

//Get Humidity temperatue data after request is complete

//Give enough time to handle client to avoid problems
delay(dht.getMinimumSamplingPeriod());

humidity = dht.getHumidity();
temperature = dht.getTemperature();
 Serial.print(humidity, 1);
Serial.print(temperature, 1);
Serial.print(dht.toFahrenheit(temperature), 1);
}

//=======================================================
=======
// SETUP
//=======================================================
=======
void setup()
{
Serial.begin(115200);
Serial.println();

//Ref 3: https://circuits4you.com/2019/01/25/interfacing-dht11-with-
nodemcu-example/
// Autodetect is not working reliable, don't use the following line
// dht.setup(17);

// use this instead:

dht.setup(DHTpin, DHTesp::DHT11); //for DHT11 Connect DHT sensor to
GPIO 17
//dht.setup(DHTpin, DHTesp::DHT22); //for DHT22 Connect DHT sensor
to GPIO 17

WiFi.begin(ssid, password); //Connect to your WiFi router

Serial.println("");

//Onboard LED port Direction output

pinMode(LED,OUTPUT);

// Wait for connection

while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}

//If connection successful show IP address in serial monitor

Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP()); //IP address assigned to your ESP

server.on("/", handleRoot); //Which routine to handle at root location.

This is display page
server.on("/readADC", handleADC); //This page is called by java Script
AJAX

server.begin(); //Start server

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

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

b. PageIndex.h

const char MAIN_page[] PROGMEM = R"=====(

<!doctype html>
<html>

<head>
<title>Line Chart | IoT Embedded Application Project</title>
<!--For offline ESP graphs see this tutorial
https://circuits4you.com/2018/03/10/esp8266-jquery-and-ajax-web-server/
-->
<script src =
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}

/* Data Table Styling */

#dataTable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}

#dataTable td, #dataTable th {

border: 1px solid #ddd;
padding: 8px;
}

#dataTable tr:nth-child(even){background-color: #f2f2f2;}

#dataTable tr:hover {background-color: #ddd;}

#dataTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
</head>

<body>
 <div style="text-align:center;"><b>IoT Embedded Application
Project</b><br>REAL TIME TEMPERATURE AND HUMIDITY DATA
LOGGER USING NODEMCU ESP8266</div>
<div class="chart-container" position: relative; height:350px;
width:100%">
<canvas id="Chart" width="400" height="400"></canvas>
</div>
<div>
<table id="dataTable">
<tr><th>Time</th><th>ADC Value</th><th>Temperaure
(&deg;C)</th><th>Humidity (%)</th></tr>
</table>
</div>
<br>
<br>

<script>
//Graphs visit: https://www.chartjs.org
var ADCvalues = [];
var Tvalues = [];
var Hvalues = [];
var timeStamp = [];
function showGraph()
{
var ctx = document.getElementById("Chart").getContext('2d');
var Chart2 = new Chart(ctx, {
type: 'line',
data: {
labels: timeStamp, //Bottom Labeling
datasets: [{
label: "Voltage 1",
fill: false, //Try with true
backgroundColor: 'rgba( 243,18, 156 , 1)', //Dot marker color
borderColor: 'rgba( 243, 18, 156 , 1)', //Graph Line Color
data: ADCvalues,
},{
label: "Temperature",
fill: false, //Try with true
backgroundColor: 'rgba( 243, 156, 18 , 1)', //Dot marker color
borderColor: 'rgba( 243, 156, 18 , 1)', //Graph Line Color
data: Tvalues,
},
{
label: "Humidity",
fill: false, //Try with true
backgroundColor: 'rgba(156, 18, 243 , 1)', //Dot marker color
borderColor: 'rgba(156, 18, 243 , 1)', //Graph Line Color
data: Hvalues,
}],
},
options: {
title: {
display: true,
text: "ADC Voltage"
},
maintainAspectRatio: false,
elements: {
 line: {
tension: 0.5 //Smoothening (Curved) of data lines
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});

//On Page load show graphs

window.onload = function() {
console.log(new Date().toLocaleTimeString());
};

//Ajax script to get ADC voltage at every 5 Seconds

//Read This tutorial https://circuits4you.com/2018/02/04/esp8266-ajax-
update-part-of-web-page-without-refreshing/

setInterval(function() {
// Call a function repetatively with 5 Second interval
getData();
}, 5000); //5000mSeconds update rate

function getData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//Push the data in array
var time = new Date().toLocaleTimeString();
var txt = this.responseText;
var obj = JSON.parse(txt); //Ref:
https://www.w3schools.com/js/js_json_parse.asp
ADCvalues.push(obj.ADC);
Tvalues.push(obj.Temperature);
Hvalues.push(obj.Humidity);
timeStamp.push(time);
showGraph(); //Update Graphs
//Update Data Table
var table = document.getElementById("dataTable");
var row = table.insertRow(1); //Add after headings
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = time;
cell2.innerHTML = obj.ADC;
cell3.innerHTML = obj.Temperature;
cell4.innerHTML = obj.Humidity;
}
};
 xhttp.open("GET", "readADC", true); //Handle readADC server on
ESP8266
xhttp.send();
}

</script>
</body>

</html>

)=====";

The format should be like in the figure below.

To add new tab for the PageIndex

Click the arrow

to show the
new tab

Write PageIndex.h and click OK.

Save As your sketch

The ino and html file should be inside in one folder.

5. Compile your code. If no error then upload the code.

6. Turn off the Wi-Fi of your laptop while uploading the code. Open the Wi-Fi when
browsing the server.
7. Turn the Wi-Fi ON connect to the internet and copy the IP address shown in the
serial monitor and paste it in your browser.
 ACTIVITY

REAL TIME TEMPERATURE AND HUMIDITY DATA LOGGER USING NODEMCU

ESP8266

1. Perform the Real Time Temperature and Humidity Data Logger using Nodemcu
esp8266.
2. Change the display in the web server (maybe color of the chart or table, font
etc.).
3. Screen shot your result and write a conclusion in a long bond paper.