ESP8266 Plot Sensor readings to Webserver in Real-Time Chart

Today we will learn how to Plot Sensor readings to Webserver in Real-Time Chart using the ESP8266. We will use an HC-SR04 Ultrasonic sensor to read (Distance in cm) on a web server. The ESP8266 will host a web page with real-time charts that have new readings added every 3 seconds. We also don’t need to keep refreshing the page to read new readings.

 

Plotting Sensor Readings to Real Time ChartProject OverviewWatch the Video DemonstrationPrerequisites1. Install ESP8266 Board in Arduino IDE2. Filesystem Uploader Plugin3. Installing LibrariesComponents RequiredSchematic DiagramUltrasonic HC-SR04 wiring to ESP8266Organizing your FilesCreating the HTML FileProgram SketchCode ExplainationUploading Code and HTML FileDemonstrationConclusion

 

Project Overview

 

To run this project, we’ll build an asynchronous web server. So we will be using the ESPAsyncWebServer library.

 

We will also design the web page using HTML. The HTML file is stored on the ESP8266 File System (SPIFFS). Here are the few tutorials based on the NodeMCU web server.

 

NodeMCU ESP8266 Monitoring DHT11/DHT22 Temperature and Humidity with Local Web ServerIoT Web Controlled Smart Notice Board using NodeMCU ESP8266

 

ESP8266 Plot Sensor readings to Webserver in Real-Time Chart

 

We’ll display distance in cm, from the HC-SR04 Ultrasonic sensor on a chart. You can modify this project to display sensor readings from any other sensor like temperature, humidity, and pressure, etc. theiotprojects.com/esp8266-plot-sensor-readings-to-webser...

Done