![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/11\/ESP32-Web-Server-Gauges.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n We have a similar tutorial for the ESP8266 board: Web Server – Display Sensor Readings in Gauges<\/a> <\/p>\n\n\n\n This project will build a web server with the ESP32 that displays temperature and humidity readings from a BME280 sensor<\/a>. We’ll create a linear gauge that looks like a thermometer to display the temperature, and a radial gauge to display the humidity.<\/p>\n\n\n The readings are updated automatically on the web page using Server-Sent Events (SSE). <\/p>\n\n\n To learn more about SSE, you can read: <\/p>\n\n\n\n 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).<\/p>\n\n\n\n Make sure you check all the prerequisites in this section before continuing with the project.<\/p>\n\n\n\n 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:<\/p>\n\n\n\n If you want to use VS Code with the PlatformIO extension, follow the next tutorial instead to learn how to program the ESP32:<\/p>\n\n\n\n To upload the HTML, CSS, and JavaScript files to the ESP32 flash memory (LittleFS), we\u2019ll use a plugin for Arduino IDE: LittleFS<\/strong> Filesystem uploader<\/strong>. Follow the next tutorial to install the filesystem uploader plugin:<\/p>\n\n\n\n If you’re using VS Code with the PlatformIO extension, read the following tutorial to learn how to upload files to the filesystem:<\/p>\n\n\n\n To build this project, you need to install the following libraries:<\/p>\n\n\n\n You can install the first three libraries using the Arduino Library Manager. Go to Sketch <\/strong>> Include Library<\/strong> > Manage Libraries<\/strong> and search for the libraries’ names.<\/p>\n\n\n\n To follow this tutorial you need the following parts:<\/p>\n\n\n\n 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.<\/p>\n\n\n You can use the preceding links or go directly to MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p> We’ll send temperature and humidity readings from a BME280 sensor. We\u2019re going to use I2C communication with the BME280 sensor module. For that, wire the sensor to the default ESP32 SCL (GPIO 22<\/span>) and SDA (GPIO 21<\/span>) pins, as shown in the following schematic diagram.<\/p>\n\n\n Recommended reading: ESP32 Pinout Reference: Which GPIO pins should you use?<\/a><\/p>\n\n\n\n To keep the project organized and make it easier to understand, we\u2019ll create four files to build the web server:<\/p>\n\n\n\n You should save the HTML, CSS, and JavaScript files inside a folder called data<\/strong> <\/em>inside the Arduino sketch folder, as shown in the previous diagram. We\u2019ll upload these files to the ESP32 filesystem (LittleFS).<\/p>\n\n\n\n You can download all project files:<\/strong><\/p>\n\n\n\n Copy the following to the index.html<\/span> file.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n The HTML file for this project is very simple. It includes the JavaScript canvas-gauges library<\/a> in the head of the HTML file:<\/p>\n\n\n\n There is a <canvas><\/span><\/span> tag with the id gauge-temperature<\/span> where we’ll render the temperature gauge later on. <\/p>\n\n\n\n There is also another <canvas><\/span><\/span> tag with the id gauge-humidity<\/span>, where we’ll render the humidity gauge later on. <\/p>\n\n\n\n Copy the following styles to your style.css<\/span> file. It styles the web page with simple colors and styles.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Copy the following to the script.js<\/span> file.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Here’s a summary of what this code does:<\/p>\n\n\n\n When you access the web page for the first time, we\u2019ll request the server to get the current sensor readings. Otherwise, we would have to wait for new sensor readings to arrive (via Server-Sent Events), which can take some time depending on the interval that you set on the server.<\/p>\n\n\n\n Add an event listener that calls the getReadings<\/span> function when the web page loads.<\/p>\n\n\n\n The window<\/span> object represents an open window in a browser. The addEventListener()<\/span> method sets up a function to be called when a certain event happens. In this case, we\u2019ll call the getReadings<\/span> function when the page loads (‘load’<\/span>) to get the current sensor readings.<\/p>\n\n\n\n Now, let\u2019s take a look at the getReadings<\/span> function. Create a new XMLHttpRequest<\/span> object. Then, send a GET<\/span> request to the server on the \/readings<\/span> URL using the open()<\/span> and send()<\/span> methods.<\/p>\n\n\n\n When we send that request, the ESP will send a response with the required information. So, we need to handle what happens when we receive the response. We\u2019ll use the onreadystatechange<\/span> property that defines a function to be executed when the readyState<\/span> property changes. The readyState<\/span> property holds the status of the XMLHttpRequest<\/span>. The response of the request is ready when the readyState<\/span> is 4<\/span>, and the status is 200<\/span>.<\/p>\n\n\n\n So, the request should look something like this:<\/p>\n\n\n\n The response sent by the ESP is the following text in JSON format (those are just arbitrary values).<\/p>\n\n\n\n We need to convert the JSON string into a JSON object using the parse()<\/span> method. The result is saved on the myObj<\/span> variable.<\/p>\n\n\n\n The myObj<\/span> variable is a JSON object that contains the temperature and humidity readings. We want to update the gauges values with the corresponding readings. <\/p>\n\n\n\n Updating the value of a gauge is straightforward. For example, our temperature gauge is called gaugeTemp<\/span> (as we’ll see later on), to update a value, we can simply call: gaugeTemp.value = NEW_VALUE<\/span>. In our case, the new value is the temperature reading saved on the myObj<\/span> JSON object.<\/p>\n\n\n\n It is similar for the humidity (our humidity gauge is called gaugeHum<\/span>).<\/p>\n\n\n\n Here\u2019s the complete getReadings()<\/span> function.<\/p>\n\n\n\n The canvas-charts library allows you to build linear and radial gauges to display your readings. It provides several examples, and it is very simple to use. We recommend taking a look at the documentation and exploring all the gauges functionalities:<\/p>\n\n\n\n The following lines create the gauge to display the temperature.<\/p>\n\n\n\n To create a new linear gauge, use the new LinearGauge()<\/span> method and pass as an argument the properties of the gauge.<\/p>\n\n\n\n In the next line, define where you want to put the chart (it must be a <canvas><\/span><\/span> element). In our example, we want to place it in the <canvas><\/span><\/span> HTML element with the gauge-temperature<\/span> id\u2014see the HTML file section<\/a>.<\/p>\n\n\n\n Then, we define other properties to customize our gauge. The names are self-explanatory, but we recommend taking a look at all possible configurations<\/a> and changing the gauge to meet your needs. <\/p>\n\n\n\n In the end, you need to apply the draw()<\/span> method to actually display the gauge on the canvas.<\/p>\n\n\n\n Special attention that if you need to change the gauge range, you need to change the minValue<\/span> and maxValue<\/span> properties:<\/p>\n\n\n\n You also need to adjust the majorTicks<\/span> values for the values displayed on the axis.<\/p>\n\n\n\n Creating the humidity gauge is similar, but we use the new RadialGauge()<\/span> function instead and it is rendered to the <canvas><\/span><\/span> with the gauge-humidity<\/span> id. Notice that we apply the draw()<\/span> method on the gauge so that it is drawn on the canvas.<\/p>\n\n\n\n Update the readings on the gauge when the client receives the readings on the new_readings<\/span> event<\/p>\n\n\n\n Create a new EventSource<\/span> object and specify the URL of the page sending the updates. In our case, it\u2019s \/events<\/span>.<\/p>\n\n\n\n Once you\u2019ve instantiated an event source, you can start listening for messages from the server with addEventListener()<\/span>.<\/p>\n\n\n\n These are the default event listeners, as shown here in the AsyncWebServer documentation<\/a>.<\/p>\n\n\n\n Then, add the event listener for new_readings<\/span>.<\/p>\n\n\n\n When new readings are available, the ESP32 sends an event (new_readings<\/span>) to the client. The following lines handle what happens when the browser receives that event.<\/p>\n\n\n\n Basically, print the new readings on the browser console, convert the data into a JSON object and display the readings on the corresponding gauges.<\/p>\n\n\n\nProject Overview<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/11\/ESP32-Gauges-Web-Server-Overview.png?resize=750%2C476&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nServer-Sent Events<\/h3>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/11\/ESP32-Gauges-Web-Server-Overview-Server-Sent-Events.png?resize=750%2C664&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
Files Saved on the Filesystem<\/h3>\n\n\n\n
Prerequisites<\/h2>\n\n\n\n
1. Install ESP32 Board in Arduino IDE<\/h3>\n\n\n\n
\n
\n
2. Filesystem Uploader Plugin<\/h3>\n\n\n\n
\n
\n
3. Installing Libraries<\/h3>\n\n\n\n
\n
Parts Required<\/h2>\n\n\n\n
\n
![](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&quality=100&strip=all&ssl=1\")
<\/a><\/p>\n\n\n\nSchematic Diagram<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/10\/ESP32-BME280-Sensor-Temperature-Humidity-Pressure-Wiring-Diagram-Circuit_f.png?resize=675%2C670&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nOrganizing Your Files<\/h2>\n\n\n\n
\n
![\"Organizing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/folder-structure.png?resize=601%2C358&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
HTML File<\/h2>\n\n\n\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <title>ESP IOT DASHBOARD<\/title>\r\n <meta name="viewport" content="width=device-width, initial-scale=1">\r\n <link rel="icon" type="image\/png" href="favicon.png">\r\n <link rel="stylesheet" type="text\/css" href="style.css">\r\n <script src="http:\/\/cdn.rawgit.com\/Mikhus\/canvas-gauges\/gh-pages\/download\/2.1.7\/all\/gauge.min.js"><\/script>\r\n <\/head>\r\n <body>\r\n <div class="topnav">\r\n <h1>ESP WEB SERVER GAUGES<\/h1>\r\n <\/div>\r\n <div class="content">\r\n <div class="card-grid">\r\n <div class="card">\r\n <p class="card-title">Temperature<\/p>\r\n <canvas id="gauge-temperature"><\/canvas>\r\n <\/div>\r\n <div class="card">\r\n <p class="card-title">Humidity<\/p>\r\n <canvas id="gauge-humidity"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <script src="script.js"><\/script>\r\n <\/body>\r\n<\/html>\r\n<\/code><\/pre>\n\t<script src=\"http:\/\/cdn.rawgit.com\/Mikhus\/canvas-gauges\/gh-pages\/download\/2.1.7\/all\/gauge.min.js\"><\/script><\/code><\/pre>\n\n\n\n<canvas id=\"gauge-temperature\"><\/canvas><\/code><\/pre>\n\n\n\n<canvas id=\"gauge-humidity\"><\/canvas><\/code><\/pre>\n\n\n\nCSS File<\/h2>\n\n\n\n
html {\r\n font-family: Arial, Helvetica, sans-serif; \r\n display: inline-block; \r\n text-align: center;\r\n}\r\nh1 {\r\n font-size: 1.8rem; \r\n color: white;\r\n}\r\np { \r\n font-size: 1.4rem;\r\n}\r\n.topnav { \r\n overflow: hidden; \r\n background-color: #0A1128;\r\n}\r\nbody { \r\n margin: 0;\r\n}\r\n.content { \r\n padding: 5%;\r\n}\r\n.card-grid { \r\n max-width: 1200px; \r\n margin: 0 auto; \r\n display: grid; \r\n grid-gap: 2rem; \r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n}\r\n.card { \r\n background-color: white; \r\n box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);\r\n}\r\n.card-title { \r\n font-size: 1.2rem;\r\n font-weight: bold;\r\n color: #034078\r\n}<\/code><\/pre>\n\tJavaScript File (creating the gauges)<\/h2>\n\n\n\n
\/\/ Get current sensor readings when the page loads \r\nwindow.addEventListener('load', getReadings);\r\n\r\n\/\/ Create Temperature Gauge\r\nvar gaugeTemp = new LinearGauge({\r\n renderTo: 'gauge-temperature',\r\n width: 120,\r\n height: 400,\r\n units: "Temperature C",\r\n minValue: 0,\r\n startAngle: 90,\r\n ticksAngle: 180,\r\n maxValue: 40,\r\n colorValueBoxRect: "#049faa",\r\n colorValueBoxRectEnd: "#049faa",\r\n colorValueBoxBackground: "#f1fbfc",\r\n valueDec: 2,\r\n valueInt: 2,\r\n majorTicks: [\r\n "0",\r\n "5",\r\n "10",\r\n "15",\r\n "20",\r\n "25",\r\n "30",\r\n "35",\r\n "40"\r\n ],\r\n minorTicks: 4,\r\n strokeTicks: true,\r\n highlights: [\r\n {\r\n "from": 30,\r\n "to": 40,\r\n "color": "rgba(200, 50, 50, .75)"\r\n }\r\n ],\r\n colorPlate: "#fff",\r\n colorBarProgress: "#CC2936",\r\n colorBarProgressEnd: "#049faa",\r\n borderShadowWidth: 0,\r\n borders: false,\r\n needleType: "arrow",\r\n needleWidth: 2,\r\n needleCircleSize: 7,\r\n needleCircleOuter: true,\r\n needleCircleInner: false,\r\n animationDuration: 1500,\r\n animationRule: "linear",\r\n barWidth: 10,\r\n}).draw();\r\n \r\n\/\/ Create Humidity Gauge\r\nvar gaugeHum = new RadialGauge({\r\n renderTo: 'gauge-humidity',\r\n width: 300,\r\n height: 300,\r\n units: "Humidity (%)",\r\n minValue: 0,\r\n maxValue: 100,\r\n colorValueBoxRect: "#049faa",\r\n colorValueBoxRectEnd: "#049faa",\r\n colorValueBoxBackground: "#f1fbfc",\r\n valueInt: 2,\r\n majorTicks: [\r\n "0",\r\n "20",\r\n "40",\r\n "60",\r\n "80",\r\n "100"\r\n\r\n ],\r\n minorTicks: 4,\r\n strokeTicks: true,\r\n highlights: [\r\n {\r\n "from": 80,\r\n "to": 100,\r\n "color": "#03C0C1"\r\n }\r\n ],\r\n colorPlate: "#fff",\r\n borderShadowWidth: 0,\r\n borders: false,\r\n needleType: "line",\r\n colorNeedle: "#007F80",\r\n colorNeedleEnd: "#007F80",\r\n needleWidth: 2,\r\n needleCircleSize: 3,\r\n colorNeedleCircleOuter: "#007F80",\r\n needleCircleOuter: true,\r\n needleCircleInner: false,\r\n animationDuration: 1500,\r\n animationRule: "linear"\r\n}).draw();\r\n\r\n\/\/ Function to get current readings on the webpage when it loads for the first time\r\nfunction getReadings(){\r\n var xhr = new XMLHttpRequest();\r\n xhr.onreadystatechange = function() {\r\n if (this.readyState == 4 && this.status == 200) {\r\n var myObj = JSON.parse(this.responseText);\r\n console.log(myObj);\r\n var temp = myObj.temperature;\r\n var hum = myObj.humidity;\r\n gaugeTemp.value = temp;\r\n gaugeHum.value = hum;\r\n }\r\n }; \r\n xhr.open("GET", "\/readings", true);\r\n xhr.send();\r\n}\r\n\r\nif (!!window.EventSource) {\r\n var source = new EventSource('\/events');\r\n \r\n source.addEventListener('open', function(e) {\r\n console.log("Events Connected");\r\n }, false);\r\n\r\n source.addEventListener('error', function(e) {\r\n if (e.target.readyState != EventSource.OPEN) {\r\n console.log("Events Disconnected");\r\n }\r\n }, false);\r\n \r\n source.addEventListener('message', function(e) {\r\n console.log("message", e.data);\r\n }, false);\r\n \r\n source.addEventListener('new_readings', function(e) {\r\n console.log("new_readings", e.data);\r\n var myObj = JSON.parse(e.data);\r\n console.log(myObj);\r\n gaugeTemp.value = myObj.temperature;\r\n gaugeHum.value = myObj.humidity;\r\n }, false);\r\n}<\/code><\/pre>\n\t\n
Get Readings<\/h3>\n\n\n\n
\/\/ Get current sensor readings when the page loads\nwindow.addEventListener('load', getReadings);<\/code><\/pre>\n\n\n\nfunction getReadings() {\n var xhr = new XMLHttpRequest();\n xhr.open(\"GET\", \"\/readings\", true);\n xhr.send();\n}<\/code><\/pre>\n\n\n\n\n
function getStates(){\n var xhr = new XMLHttpRequest();\n xhr.onreadystatechange = function() {\n if (this.readyState == 4 && this.status == 200) {\n \u2026 DO WHATEVER YOU WANT WITH THE RESPONSE \u2026\n }\n };\n xhr.open(\"GET\", \"\/states\", true);\n xhr.send();\n}<\/code><\/pre>\n\n\n\n{\n \"temperature\" : \"25.02\",\n \"humidity\" : \"64.01\",\n}<\/code><\/pre>\n\n\n\nvar myObj = JSON.parse(this.responseText);<\/code><\/pre>\n\n\n\ngaugeTemp.value = myObj.temperature;<\/code><\/pre>\n\n\n\ngaugeHum.value = myObj.humidity;<\/code><\/pre>\n\n\n\nfunction getReadings(){\n var xhr = new XMLHttpRequest();\n xhr.onreadystatechange = function() {\n if (this.readyState == 4 && this.status == 200) {\n var myObj = JSON.parse(this.responseText);\n console.log(myObj);\n var temp = myObj.temperature;\n var hum = myObj.humidity;\n gaugeTemp.value = temp;\n gaugeHum.value = hum;\n }\n }; \n xhr.open(\"GET\", \"\/readings\", true);\n xhr.send();\n}<\/code><\/pre>\n\n\n\nCreating the Gauges<\/h3>\n\n\n\n
\n
Temperature Gauge<\/h4>\n\n\n\n
\/\/ Create Temperature Gauge\nvar gaugeTemp = new LinearGauge({\n renderTo: 'gauge-temperature',\n width: 120,\n height: 400,\n units: \"Temperature C\",\n minValue: 0,\n startAngle: 90,\n ticksAngle: 180,\n maxValue: 40,\n colorValueBoxRect: \"#049faa\",\n colorValueBoxRectEnd: \"#049faa\",\n colorValueBoxBackground: \"#f1fbfc\",\n valueDec: 2,\n valueInt: 2,\n majorTicks: [\n \"0\",\n \"5\",\n \"10\",\n \"15\",\n \"20\",\n \"25\",\n \"30\",\n \"35\",\n \"40\"\n ],\n minorTicks: 4,\n strokeTicks: true,\n highlights: [\n {\n \"from\": 30,\n \"to\": 40,\n \"color\": \"rgba(200, 50, 50, .75)\"\n }\n ],\n colorPlate: \"#fff\",\n colorBarProgress: \"#CC2936\",\n colorBarProgressEnd: \"#049faa\",\n borderShadowWidth: 0,\n borders: false,\n needleType: \"arrow\",\n needleWidth: 2,\n needleCircleSize: 7,\n needleCircleOuter: true,\n needleCircleInner: false,\n animationDuration: 1500,\n animationRule: \"linear\",\n barWidth: 10,\n}).draw();<\/code><\/pre>\n\n\n\nvar gaugeTemp = new LinearGauge({<\/code><\/pre>\n\n\n\nrenderTo: 'gauge-temperature',<\/code><\/pre>\n\n\n\n}).draw();<\/code><\/pre>\n\n\n\nminValue: 0,<\/code><\/pre>\n\n\n\nmaxValue: 40,<\/code><\/pre>\n\n\n\nmajorTicks: [\n \"0\",\n \"5\",\n \"10\",\n \"15\",\n \"20\",\n \"25\",\n \"30\",\n \"35\",\n \"40\"\n],<\/code><\/pre>\n\n\n\nHumidity Gauge<\/h4>\n\n\n\n
\/\/ Create Humidity Gauge\nvar gaugeHum = new RadialGauge({\n renderTo: 'gauge-humidity',\n width: 300,\n height: 300,\n units: \"Humidity (%)\",\n minValue: 0,\n maxValue: 100,\n colorValueBoxRect: \"#049faa\",\n colorValueBoxRectEnd: \"#049faa\",\n colorValueBoxBackground: \"#f1fbfc\",\n valueInt: 2,\n majorTicks: [\n \"0\",\n \"20\",\n \"40\",\n \"60\",\n \"80\",\n \"100\"\n\n ],\n minorTicks: 4,\n strokeTicks: true,\n highlights: [\n {\n \"from\": 80,\n \"to\": 100,\n \"color\": \"#03C0C1\"\n }\n ],\n colorPlate: \"#fff\",\n borderShadowWidth: 0,\n borders: false,\n needleType: \"line\",\n colorNeedle: \"#007F80\",\n colorNeedleEnd: \"#007F80\",\n needleWidth: 2,\n needleCircleSize: 3,\n colorNeedleCircleOuter: \"#007F80\",\n needleCircleOuter: true,\n needleCircleInner: false,\n animationDuration: 1500,\n animationRule: \"linear\"\n}).draw();<\/code><\/pre>\n\n\n\nHandle events<\/h3>\n\n\n\n
if (!!window.EventSource) {\n var source = new EventSource('\/events');<\/code><\/pre>\n\n\n\nsource.addEventListener('open', function(e) {\n console.log(\"Events Connected\");\n}, false);\n\nsource.addEventListener('error', function(e) {\n if (e.target.readyState != EventSource.OPEN) {\n console.log(\"Events Disconnected\");\n }\n}, false);\n\nsource.addEventListener('message', function(e) {\n console.log(\"message\", e.data);\n}, false);<\/code><\/pre>\n\n\n\nsource.addEventListener('new_readings', function(e) {<\/code><\/pre>\n\n\n\nsource.addEventListener('new_readings', function(e) {\n console.log(\"new_readings\", e.data);\n var myObj = JSON.parse(e.data);\n console.log(myObj);\n gaugeTemp.value = myObj.temperature;\n gaugeHum.value = myObj.humidity;\n}, false);<\/code><\/pre>\n\n\n\nArduino Sketch<\/h2>\n\n\n\n