Php Version Check Server Failed to Respond Please Try Again

Larn how to plot sensor readings (temperature, humidity, and pressure) on a spider web server using the ESP32 or ESP8266 with Arduino IDE. The ESP will host a web page with three real time charts that have new readings added every xxx seconds.

ESP32 ESP8266 Plot Data Chart Web Server BME280 Temperautre Arduino IDE

Project Overview

In this tutorial nosotros'll build an asynchronous web server using the ESPAsyncWebServer library.

The HTML to build the spider web page volition be stored on the ESP32 or ESP8266 Filesystem (SPIFFS). To learn more virtually building a web server using SPIFFS, you lot tin refer to the next tutorials:

ESP32 Web Server using SPIFFS (SPI Flash File System)
ESP8266 Web Server using SPIFFS (SPI Wink File Organisation)

We'll display temperature, humidity and force per unit area readings from a BME280 sensor on a nautical chart, merely you can change this projection to brandish sensor readings from any other sensor. To acquire more than about the BME280, read our guides:

ESP32 with BME280 Sensor using Arduino IDE (Pressure level, Temperature, Humidity)
ESP8266 with BME280 Sensor using Arduino IDE (Pressure, Temperature, Humidity)

To build the charts, we'll utilize the Highcharts library. Nosotros'll create three charts: temperature, humidity and pressure over time. The charts brandish a maximum of 40 data points, and a new reading is added every 30 seconds, but y'all change these values in your code.

Sentry the Video Demonstration

To see how the projection works, you can watch the following video demonstration:

Prerequisites

Brand sure you lot check all the prerequisites in this section before continuing with the project in order to compile the code.

one. Install ESP Board in Arduino IDE

We'll program the ESP32 and ESP8266 using Arduino IDE. So, you must have the ESP32 or ESP8266 addition installed. Follow i of the next tutorials to install the ESP add together-on:

Installing ESP32 Board in Arduino IDE (Windows, Mac OS X, Linux)
Installing ESP8266 Board in Arduino IDE (Windows, Mac Os Ten, Linux)

2. Filesystem Uploader Plugin

To upload the HTML file to the ESP32 and ESP8266 wink retentiveness, nosotros'll utilise a plugin for Arduino IDE:Filesystem uploader. Follow i of the adjacent tutorials to install the filesystem uploader depending on the board yous're using:

ESP32: Install FileSystem Uploader Plugin in Arduino IDE
ESP8266: Install FileSystem Uploader Plugin in Arduino IDE

3. Installing Libraries

To build the asynchronous web server, you lot need to install the following libraries.

ESP32: you need to install the ESPAsyncWebServer and the AsyncTCP libraries.
ESP8266: you demand to install the ESPAsyncWebServer and the ESPAsyncTCP libraries.

These libraries aren't available to install through the Arduino Library Manager, so you need to copy the library files to the Arduino Installation folder.

To get readings from the BME280 sensor module you need to take the next libraries installed:

Adafruit BME280 library
Adafruit Unified Sensor library

You can install these libraries through the Arduino Library Manager.

Parts Required

ESP32 wit BME280 sensor module temperature humidity pressure

To follow this tutorial yous demand the following parts:

ESP32 or ESP8266 (read ESP32 vs ESP8266)
BME280 sensor
Breadboard
Jumper wires

Yous can use the preceding links or get direct to MakerAdvisor.com/tools to find all the parts for your projects at the all-time price!

Schematic Diagram

The BME280 sensor module we're using communicates via I2C communication protocol, so you need to connect information technology to the ESP32 or ESP8266 I2C pins.

BME280 wiring to ESP32

BME280	ESP32
SCK (SCL Pin)	GPIO 22
SDI (SDA pivot)	GPIO 21

So, assemble your circuit equally shown in the side by side schematic diagram.

BME280 Sensor Module wiring to ESP32 board

Recommended reading: ESP32 Pinout Reference Guide

BME280 wiring to ESP8266

BME280	ESP8266
SCK (SCL Pivot)	GPIO 5
SDI (SDA pin)	GPIO four

Assemble your circuit every bit in the side by side schematic diagram if you're using an ESP8266 board.

BME280 Sensor Module wiring to ESP8266 board

Recommended reading: ESP8266 Pinout Reference Guide

Organizing your Files

To build the spider web server you demand 2 different files. The Arduino sketch and the HTML file. The HTML file should be saved inside a binder calleddata inside the Arduino sketch folder, as shown below:

SPIFFS Web Server to Display Charts File Organization

Creating the HTML File

Create anindex.html file with the following content ordownload all project files here:

          <!DOCTYPE HTML><html> <!-- Rui Santos - Complete project details at https://RandomNerdTutorials.com  Permission is hereby granted, free of accuse, to any person obtaining a copy of this software and associated documentation files. The to a higher place copyright discover and this permission observe shall exist included in all copies or substantial portions of the Software. --> <caput>   <meta name="viewport" content="width=device-width, initial-calibration=1">   <script src="https://lawmaking.highcharts.com/highcharts.js"></script>   <style>     torso {       min-width: 310px;     	max-width: 800px;     	height: 400px;       margin: 0 auto;     }     h2 {       font-family unit: Arial;       font-size: 2.5rem;       text-marshal: center;     }   </style> </head> <body>   <h2>ESP Weather Station</h2>   <div id="chart-temperature" class="container"></div>   <div id="nautical chart-humidity" class="container"></div>   <div id="nautical chart-pressure" class="container"></div> </body> <script> var chartT = new Highcharts.Chart({   chart:{ renderTo : 'chart-temperature' },   championship: { text: 'BME280 Temperature' },   series: [{     showInLegend: faux,     data: []   }],   plotOptions: {     line: { animation: imitation,       dataLabels: { enabled: true }     },     serial: { color: '#059e8a' }   },   xAxis: { type: 'datetime',     dateTimeLabelFormats: { second: '%H:%Yard:%S' }   },   yAxis: {     title: { text: 'Temperature (Celsius)' }     //championship: { text: 'Temperature (Fahrenheit)' }   },   credits: { enabled: false } }); setInterval(function ( ) {   var xhttp = new XMLHttpRequest();   xhttp.onreadystatechange = function() {     if (this.readyState == 4 && this.status == 200) {       var x = (new Date()).getTime(),           y = parseFloat(this.responseText);       //console.log(this.responseText);       if(chartT.series[0].information.length > 40) {         chartT.series[0].addPoint([x, y], true, truthful, true);       } else {         chartT.serial[0].addPoint([ten, y], truthful, fake, true);       }     }   };   xhttp.open up("GET", "/temperature", true);   xhttp.send(); }, 30000 ) ;  var chartH = new Highcharts.Chart({   chart:{ renderTo:'nautical chart-humidity' },   championship: { text: 'BME280 Humidity' },   series: [{     showInLegend: false,     data: []   }],   plotOptions: {     line: { animation: false,       dataLabels: { enabled: truthful }     }   },   xAxis: {     blazon: 'datetime',     dateTimeLabelFormats: { second: '%H:%M:%S' }   },   yAxis: {     title: { text: 'Humidity (%)' }   },   credits: { enabled: faux } }); setInterval(office ( ) {   var xhttp = new XMLHttpRequest();   xhttp.onreadystatechange = office() {     if (this.readyState == 4 && this.status == 200) {       var x = (new Date()).getTime(),           y = parseFloat(this.responseText);       //console.log(this.responseText);       if(chartH.series[0].data.length > 40) {         chartH.series[0].addPoint([x, y], true, true, true);       } else {         chartH.series[0].addPoint([x, y], true, false, true);       }     }   };   xhttp.open("Go", "/humidity", true);   xhttp.send(); }, 30000 ) ;  var chartP = new Highcharts.Chart({   chart:{ renderTo:'nautical chart-force per unit area' },   title: { text: 'BME280 Pressure' },   series: [{     showInLegend: false,     data: []   }],   plotOptions: {     line: { animation: false,       dataLabels: { enabled: true }     },     series: { color: '#18009c' }   },   xAxis: {     type: 'datetime',     dateTimeLabelFormats: { 2nd: '%H:%M:%South' }   },   yAxis: {     championship: { text: 'Pressure level (hPa)' }   },   credits: { enabled: simulated } }); setInterval(office ( ) {   var xhttp = new XMLHttpRequest();   xhttp.onreadystatechange = function() {     if (this.readyState == iv && this.condition == 200) {       var x = (new Appointment()).getTime(),           y = parseFloat(this.responseText);       //panel.log(this.responseText);       if(chartP.series[0].data.length > 40) {         chartP.serial[0].addPoint([ten, y], true, true, truthful);       } else {         chartP.series[0].addPoint([x, y], true, imitation, true);       }     }   };   xhttp.open up("Go", "/pressure", true);   xhttp.send(); }, 30000 ) ; </script> </html>

View raw lawmaking

Let's take a quick look at the relevant parts to build a chart.

First, you demand to include the highcharts library:

          <script src="https://code.highcharts.com/highcharts.js"></script>

You need to create a <div> section for each graphic with a unique id. In this instance: nautical chart-temperature, chart-humidity and chart-pressure.

          <div id="chart-temperature" form="container"></div> <div id="chart-humidity" class="container"></div> <div id="chart-pressure" form="container"></div>

To create the charts and add data to the charts, we use javascript code. Information technology should go inside the <script> and </script> tags.

The post-obit spinet creates the temperature chart. You define the nautical chart id, y'all can set the championship, the axis labels, etc…

          var chartT = new Highcharts.Chart({   chart:{ renderTo : 'nautical chart-temperature' },   title: { text: 'BME280 Temperature' },   series: [{     showInLegend: imitation,     data: []   }],   plotOptions: {     line: { animation: faux,       dataLabels: { enabled: true }     },     serial: { color: '#059e8a' }   },   xAxis: { type: 'datetime',     dateTimeLabelFormats: { second: '%H:%Thousand:%S' }   },   yAxis: {     title: { text: 'Temperature (Celsius)' }     //title: { text: 'Temperature (Fahrenheit)' }   },   credits: { enabled: false } });

Then, the setInvertal() role adds points to the charts. Every 30 seconds it makes a request to the /temperature URL to get the temperature readings from your ESP32 or ESP8266.

          setInterval(function ( ) {   var xhttp = new XMLHttpRequest();   xhttp.onreadystatechange = function() {     if (this.readyState == 4 && this.status == 200) {       var 10 = (new Appointment()).getTime(),           y = parseFloat(this.responseText);       //panel.log(this.responseText);       if(chartT.serial[0].data.length > 40) {         chartT.serial[0].addPoint([x, y], true, true, true);       } else {         chartT.series[0].addPoint([10, y], true, faux, true);       }     }   };   xhttp.open("GET", "/temperature", true);   xhttp.send(); }, 30000 ) ;

The other graphics are created in a similar way. Nosotros make a asking on the /humidity and /pressure URLs to get the humidity and pressure readings, respectively.

In the Arduino sketch, nosotros should handle what happens when nosotros receive those requests: we should send the corresponding sensor readings.

Arduino Sketch

Copy the following code to the Arduino IDE ordownload all project files here. So, you demand to type your network credentials (SSID and countersign) to make it work.

          /*********   Rui Santos   Complete project details at https://RandomNerdTutorials.com      Permission is hereby granted, free of accuse, to any person obtaining a copy   of this software and associated documentation files.      The above copyright find and this permission detect shall be included in all   copies or substantial portions of the Software. *********/  // Import required libraries #ifdef ESP32   #include <WiFi.h>   #include <ESPAsyncWebServer.h>   #include <SPIFFS.h> #else   #include <Arduino.h>   #include <ESP8266WiFi.h>   #include <Hash.h>   #include <ESPAsyncTCP.h>   #include <ESPAsyncWebServer.h>   #include <FS.h>





Share this post