ESP32 Web Server: Display Sensor Readings in Gauges

Learn how to build a web server with the ESP32 to display sensor readings in gauges. As an example, we’ll display temperature and humidity from a BME280 sensor in two different gauges: linear and radial. You can easily modify the project to plot any other data. To build the gauges, we’ll use the canvas-gauges JavaScript library.
We have a similar tutorial for the ESP8266 board:
Web Server – Display Sensor Readings in Gauges
Project Overview
This project will build a web server with the ESP32 that displays temperature and humidity readings from a
BME280 sensor
. We’ll create a linear gauge that looks like a thermometer to display the temperature, and a radial gauge to display the humidity.
Server-Sent Events
The readings are updated automatically on the web page using Server-Sent Events (SSE).
To learn more about SSE, you can read:
ESP32 Web Server using Server-Sent Events (Update Sensor Readings Automatically)
Files Saved on the Filesystem
To keep our project better organized and easier to understand, we’ll save the HTML, CSS, and JavaScript files to build the web page on the board’s filesystem (LittleFS).
Prerequisites
Make sure you check all the prerequisites in this section before continuing with the project.
1. Install ESP32 Board in Arduino IDE
We’ll program the ESP32 using Arduino IDE. So, you must have the ESP32 add-on installed. Follow the next tutorial if you haven’t already:
Installing ESP32 Board in Arduino IDE (Windows, Mac OS X, Linux)
If you want to use VS Code with the PlatformIO extension, follow the next tutorial instead to learn how to program the ESP32:
Getting Started with VS Code and PlatformIO IDE for ESP32 and ESP8266 (Windows, Mac OS X, Linux Ubuntu)
2. Filesystem Uploader Plugin
To upload the HTML, CSS, and JavaScript files to the ESP32 flash memory (LittleFS), we’ll use a plugin for Arduino IDE:
LittleFS
Filesystem uploader
. Follow the next tutorial to install the filesystem uploader plugin:
Arduino IDE 2: Install ESP32 LittleFS Uploader (Upload Files to the Filesystem)
If you’re using VS Code with the PlatformIO extension, read the following tutorial to learn how to upload files to the filesystem:
ESP32 with VS Code and PlatformIO: Upload Files to LittleFS Filesystem
3. Installing Libraries
To build this project, you need to install the following libraries:
Adafruit_BME280
Adafruit_Sensor library
Arduino_JSON library by Arduino version 0.1.0
ESPAsyncWebServer
by ESP32Async
AsyncTCP
by ESP32Async
You can install the first three libraries using the Arduino Library Manager. Go to
Sketch
>
Include Library
>
Manage Libraries
and search for the libraries’ names.
Parts Required
To follow this tutorial you need the following parts:
ESP32
(read
Best ESP32 development boards
)
BME280 Sensor
Jumper wires
Breadboard
You can use any other sensor that is useful for your project. If you don’t have the sensor, you can also experiment with random values to learn how the project works.
You can use the preceding links or go directly to
MakerAdvisor.com/tools
to find all the parts for your projects at the best price!
Schematic Diagram
We’ll send temperature and humidity readings from a BME280 sensor. We’re going to use I2C communication with the BME280 sensor module. For that, wire the sensor to the default ESP32 SCL (
GPIO 22
) and SDA (
GPIO 21
) pins, as shown in the following schematic diagram.
Recommended reading:
ESP32 Pinout Reference: Which GPIO pins should you use?
Organizing Your Files
To keep the project organized and make it easier to understand, we’ll create four files to build the web server:
Arduino sketch
that handles the web server;
index.html
: to define the content of the web page;
sytle.css
: to style the web page;
script.js
: to program the behavior of the web page—handle web server responses, events, create the gauges, etc.
You should save the HTML, CSS, and JavaScript files inside a folder called
data
inside the Arduino sketch folder, as shown in the previous diagram. We’ll upload these files to the ESP32 filesystem (LittleFS).
You can download all project files:
Download All the Arduino Project Files
HTML File
Copy the following to the
index.html
file.
<!DOCTYPE html>
<html>
<head>
<title>ESP IOT DASHBOARD</title>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<link rel=\"icon\" type=\"image/png\" href=\"favicon.png\">
<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">
<script src=\"http://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.7/all/gauge.min.js\"></script>
</head>
<body>
<div class=\"topnav\">
ESP WEB SERVER GAUGES</h1>
</div>
<div class=\"content\">
<div class=\"card-grid\">
<div class=\"card\">
<p class=\"card-title\">Temperature</p>
<canvas id=\"gauge-temperature\"></canvas>
</div>
<div class=\"card\">
<p class=\"card-title\">Humidity</p>
<canvas id=\"gauge-humidity\"></canvas>
</div>
</div>
</div>
<script src=\"script.js\"></script>
</body>
</html>
The HTML file for this project is very simple. It includes the
JavaScript canvas-gauges library
in the head of the HTML file:
<script src=\"https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.7/all/gauge.min.js\"></script>
There is a
<canvas>
tag with the id
gauge-temperature
where we’ll render the temperature gauge later on.
<canvas id=\"gauge-temperature\"></canvas>
There is also another
<canvas>
tag with the id
gauge-humidity
, where we’ll render the humidity gauge later on.
<canvas id=\"gauge-humidity\"></canvas>
CSS File
Copy the following styles to your
style.css
file. It styles the web page with simple colors and styles.
html {
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
text-align: center;
}
h1 {
font-size: 1.8rem;
color: white;
}
p {
font-size: 1.4rem;
}
.topnav {
overflow: hidden;
background-color: #0A1128;
}
body {
margin: 0;
}
.content {
padding: 5%;
}
.card-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.card {
background-color: white;
box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
}
.card-title {
font-size: 1.2rem;
font-weight: bold;
color: #034078
}
JavaScript File (creating the gauges)
Copy the following to the
script.js
file.
// Get current sensor readings when the page loads
window.addEventListener('load', getReadings);

// Create Temperature Gauge
var gaugeTemp = new LinearGauge({
renderTo: 'gauge-temperature',
width: 120,
height: 400,
units: \"Temperature C\",
minValue: 0,
startAngle: 90,
ticksAngle: 180,
maxValue: 40,
colorValueBoxRect: \"#049faa\",
colorValueBoxRectEnd: \"#049faa\",
colorValueBoxBackground: \"#f1fbfc\",
valueDec: 2,
valueInt: 2,
majorTicks: [
\"0\",
\"5\",
\"10\",
\"15\",
\"20\",
\"25\",
\"30\",
\"35\",
\"40\"
],
minorTicks: 4,
strokeTicks: true,
highlights: [
{
\"from\": 30,
\"to\": 40,
\"color\": \"rgba(200, 50, 50, .75)\"
}
],
colorPlate: \"#fff\",
colorBarProgress: \"#CC2936\",
colorBarProgressEnd: \"#049faa\",
borderShadowWidth: 0,
borders: false,
needleType: \"arrow\",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: \"linear\",
barWidth: 10,
}).draw();

// Create Humidity Gauge
var gaugeHum = new RadialGauge({
renderTo: 'gauge-humidity',
width: 300,
height: 300,
units: \"Humidity (%)\",
minValue: 0,
maxValue: 100,
colorValueBoxRect: \"#049faa\",
colorValueBoxRectEnd: \"#049faa\",
colorValueBoxBackground: \"#f1fbfc\",
valueInt: 2,
majorTicks: [
\"0\",
\"20\",