Demo 13: How to display temperature/humidity using Google Chart/Jquery and control LED through Arduino ESP32 Web Server

1. Introduction
In this tutorial,we will combine previous tutorial to make a simple project. This project combines previous tutorials:
- Turn the ESP32 into Web Server (Demo 12: How to turn the ESP32 into a Web Server)
- Load the html chart page from Sdcard and respond to web browser (Demo 7: How to use Arduino ESP32 to store data to sdcard)
- Measure temperature/humidity using DHT22 (Demo 3: How to use Arduino ESP32 to read temperature/humidity from DHT11/DHT22)
- Control LED (Demo 1: Blinky - a Hello World on Arduino ESP32)
- mDNS for HTTP service (Demo 9: How to use mDNS to resolve host names to ESP32 IP addresses)
So when browser access "http://esp32.local" a chart of temperature/humidity will occur along with a button name "LED" to control LED on/off. This button have green color when led is on and red color when led is off.
2. Hardware
You need modules below:
- A module micrSD with memory card
- A DHT22 sensor
- A LED
- ESP32 board
Connections:
Connect VCC and GND of microSD (VCC=5V), DHT22 (VCC=3.3V) to VCC (5V-3.3V) and GND of ESP32.
[ESP32 IO15 - DHT22 DATA]
[ESP32 IO2 - LED ANODE]
[ESP32 GND - LED CATHODE]
[ESP32 IO26 - microSD CS]
[ESP32 IO27 - microSD SCK]
[ESP32 IO14 - microSD MOSI]
[ESP32 IO12 - microSD MISO]

Figure: ESP32 connect to microSD, DHT22, LED

3. Software

- Create a chrt.html file in memory card at root "/" with content:

<!DOCTYPE html>
<head>
   <meta charset="utf-8" />
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart','gauge','line','imagelinechart']}]}"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
.btn {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.red {background-color: #f44336;}
</style>
</head>
<body>
<div align="center"><h1>IoTSharing.com Chart Demo</h1></div> 
<div id="htchart"></div>
<p><button id="led" class="btn red">LED</button></p>
<script>
google.charts.setOnLoadCallback(draw);
var data, chart;
var cnt = 0;
var points = 14;
var got = 0;
var led = 0;
var opt = {
    hAxis: {
        title:'Time'
    },
    vAxis: {
        title:'Temp/Hum'
    }
};    
function draw(){
    data = new google.visualization.DataTable();
    chart = new google.visualization.LineChart(document.getElementById('htchart'));
    data.addColumn('string','Time');
    data.addColumn('number','temp');
    data.addColumn('number','hum');
    data.addRows([
        [' ', 0, 0]  
    ]);
    chart.draw(data, opt);
}
$("#led").click(function() {
    if(led == 0){
        $.get("/led1", function(d, s){
            led = 1;
            $("#led").removeClass("btn red");$("#led").addClass("btn");
     });
    }else{led=0;
        $.get("/led0", function(d, s){
            led = 0; 
            $("#led").removeClass("btn");$("#led").addClass("btn red");
     });
    } 
});
function update() {
    if(got == 0){
        got = 1;
        $.get("/dht22", function(j, s){
            cnt ++;
            var cur = new Date();
            data.addRows([[cur.getMinutes() + ":" + cur.getSeconds(), j.temp, j.hum]]);
            if(cnt == points){
                for (i = 0; i < points/2; i++) {
                    data.removeRow(i);
                }
                cnt = i;
            }
            got = 0;
            chart.draw(data, opt);
     });
    }else{
        got ++;
        if(got == points/3){
            got = 0;        
        }
    }  
}
setInterval(update, 1000);
</script>
</body>
</html>

The html code using Google chart API for drawing the values of temperature/humidity under line chart style and Jquery to query the value of DHT22 (through update() function every 1 second) "setInterval(update, 1000)".In the update() function we use Jquery "$.get("/dht22", function(j, s)" to query "/dht22" temperature/humidity. We also create a "led" button and process "click" action when user press it through "$("#led").click(function()". In click processing function we check if current status of LED is 0 we create a Jquery to request the LED on through "$.get("/led1", function(d, s)" and vice versa. About Google chart code, whenever we got new data from DHT22 we add it into data table and re-draw the chart.

- In this project we use Json style to respond the dht22 request from client. So we download Json library at: https://github.com/bblanchon/ArduinoJson.git . The unzipping the downloaded folder and copy it to Arduino/libraries.

- Then we create an Arduino project and Save as esp32chart with code:

Note: I explain the code by detail comments in the code, so I will not mention more here.

#include <WiFiClient.h>
#include <ESP32WebServer.h>
#include <WiFi.h>
#include <ESPmDNS.h>
#include "DHT.h"
#include <ArduinoJson.h>
#include <SPI.h>
#include <mySD.h>

#define DHTPIN 15
#define DHTTYPE DHT22
DHT dht(DHTPIN, DHTTYPE);

const char* ssid = "dd-wrt";
const char* password = "0000000000";

ESP32WebServer server(80);

float humidity = 0;
float temperature = 0;

const int led = 2;


void handleRoot() {
  /* we load the chart.html from microSD */
  File myFile = SD.open("CHRT~1.HTM");
  if (myFile) {  
    /* respond the content of file to client by calling streamFile()*/
    size_t sent = server.streamFile(myFile, "text/html");
    /* close the file */
    myFile.close();
  } else {
    Serial.println("error opening test.txt");
  }
}
void handleLed1() {
  digitalWrite(led, 1);
  server.send(200, "text/html", "1");
}
void handleLed0() {
  digitalWrite(led, 0);
  server.send(200, "text/html", "0");
}
void handleDHT(){
  /* read the data from dht22 sensor */
  humidity = dht.readHumidity();
  temperature = dht.readTemperature();
  StaticJsonBuffer<100> jsonBuffer;
  JsonObject& root = jsonBuffer.createObject();
  /* failed to read the data then return HTTP status code 503 sensor failed */
  if (isnan(humidity) || isnan(temperature)) {
    server.send(503, "text/html", "sensor failed");
  } else {
    /* we use Json "{"hum":#value, "temp": #value}" to respond the /dht22 request */
    root["hum"] = humidity;
    root["temp"] = temperature;
    char jsonChar[100];
    root.printTo((char*)jsonChar, root.measureLength() + 1);
    /* we respond Json style so content-type is text/json */
    server.send(200, "text/json", jsonChar);
  }
}
/* cannot handle request so return 404 */
void handleNotFound(){
  digitalWrite(led, 1);
  String message = "File Not Found\n\n";
  server.send(404, "text/plain", message);
  digitalWrite(led, 0);
}

void setup(void){
  pinMode(led, OUTPUT);
  digitalWrite(led, 0);
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  if (MDNS.begin("esp32")) {
    Serial.println("MDNS responder started");
  }
  /* register the callbacks to process client request */
  /* root request we will read the memory card to get 
  the content of chrt.html and respond that content to client */
  server.on("/", handleRoot);
  /* this callback handle /dht22 request, 
  read the sensor form json string and respond*/
  server.on("/dht22", handleDHT);
  /* this callback handle /led1 request, just turn on led */
  server.on("/led1", handleLed1);
  /* this callback handle /led0 request, just turn off led */
  server.on("/led0", handleLed0);
  server.onNotFound(handleNotFound);
  server.begin();
  dht.begin();
  Serial.println("HTTP server started");
  Serial.print("Initializing SD card...");
  /* initialize microSD */
  if (!SD.begin(26, 14, 12, 27)) {
    Serial.println("initialization failed!");
    return;
  }
  Serial.println("initialization done.");
}

void loop(void){
  server.handleClient();
}

4. Result

Figure: esp32 webserver + dht22 + led + google chart + jquery

Figure: esp32 webserver + dht22 + led + google chart + jquery demo

20 Comments

Unknown said…

Do you know if it is possible to save the html file to the esp32 flash instead of sd card? I haven't found a way yet.

Until then I am using this batch file
(
echo R"!~!(
type somefile.html
echo ^)!~!"
) > somefile.html.h
called before build,

then with C++11 string literals main file it's just

String s =
#include somefile.html.h
;

I find it convenient to edit the html in a different editor and it saves a lot of escaping etc.

DB

January 6, 2018 at 5:39 PM

Tech It Yourself said…

Hi

You can do like following post:

http://www.iotsharing.com/2017/06/how-to-control-servo-via-arduino-esp32-webserver.html

RGs

January 7, 2018 at 6:26 PM

Pjort said…

This doesn't work for me. I got the correct libaries, and I am able to see the html on http://esp32.local

But the LED button doesn't work, and the there is no chart. Just "IoTSharing.com Chart Demo" and LED button.

if I go to http://esp32.local/dht22 I can see the values changin, but still no chart...

Did something change? Maybe with the api?

April 6, 2018 at 8:16 AM

Looks like the update doesn't trigger somehow, see screenshot of the network and the get metodes not getting called: https://imgur.com/ibQyrEi

April 6, 2018 at 8:24 AM

Anonymous said…

Hi I am getting the same I can see the LED button but it doesn't work and there is no chart. I can get the humidity and temperature by using esp32.local/dht22. Can you please give me some advice thanks Bob

May 20, 2018 at 12:15 PM

I have managed to alter the html file to display the graph by adding

google.charts.load('current', {packages: ['corechart']});

before line 28

Bob

May 21, 2018 at 3:20 AM

Hi friends,

Check this post;
http://www.iotsharing.com/2018/05/how-to-build-iot-dashboard-using-node-red.html

It is easy to implement :)

Regards

May 26, 2018 at 7:41 PM

I wonder there such a type of chart in temperature and humidity! They have different units of measurement.

https://www.engineeringtoolbox.com/humidity-measurement-d_561.html

September 3, 2018 at 7:26 PM

DedicatedHosting4u said…

It is quite interesting blog post worth of reading. I really thankful for giving an opportunity to read an informative article like this! I really appreciate this post thank you for sharing these type of posts.

Fast dedicated servers

April 16, 2019 at 1:08 AM

markson said…

Excessively nonexclusive – Sometimes the reports are excessively conventional, and not tweaked to the ventures' particular needs. Data Analytics Course in Bangalore

December 5, 2019 at 1:24 AM

vinith said…

Very Informative Article
Data Science Interview Questions

January 5, 2020 at 1:39 AM

priyanka said…

I am impressed by the information that you have on this blog. It shows how well you understand this subject.
data analytics course

April 1, 2020 at 11:58 PM

dataexpert said…

Very nice job... Thanks for sharing this amazing and educative blog post! ExcelR Data Analytics Courses

April 24, 2020 at 4:20 AM

priyash said…

wonderful article. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article. This article resolved my all queries. keep it up.
data analytics course in Bangalore

May 13, 2020 at 2:29 AM

ek said…

I will really appreciate the writer's choice for choosing this excellent article appropriate to my matter.Here is deep description about the article matter which helped me more.
Know more about Data Analytics

May 19, 2020 at 12:41 AM

May 20, 2020 at 2:46 AM

Amazing Article ! I would like to thank you for the efforts you had made for writing this awesome article. This article inspired me to read more. keep it up.
Simple Linear Regression
Correlation vs covariance
data science interview questions
KNN Algorithm
Logistic Regression explained

September 15, 2020 at 12:19 AM

September 22, 2020 at 3:21 AM

I really enjoy simply reading all of your weblogs. Simply wanted to inform you that you have people like me who appreciate your work. Definitely a great post. Hats off to you! The information that you have provided is very helpful.Data Analytics Course

December 28, 2020 at 4:20 AM