SENSORS/ACTUATORS

INTERNET OF THING (IoT)

DIYables Web Apps Web Analog Gauge

Overview

This ESP32 S3 Uno analog gauge tutorial shows you how to put a round, needle-style meter on a web page served by the ESP32 S3 Uno form board. You open the page on your phone or PC, and the needle moves in real time as your sensor value changes. It works well as a web-based meter for voltage, pressure, light level or a potentiometer, with no app to install.

In this tutorial, you will:

Install the DIYables ESP32 WebApps library in Arduino IDE
Run the WebAnalogGauge example and open the gauge in a web browser
Set the gauge range, unit and update speed in code
Connect a potentiometer and watch the circular gauge follow it live

The video below walks through the whole project with a potentiometer driving the Web Analog Gauge app:

Features

The gauge page does a lot of work for you, so your sketch only needs to send numbers. Here is what you get out of the box.

Circular gauge in the browser

A clean, professional dial with tick marks and a moving needle. You open it from any web browser on the same WiFi network.

Custom range and unit

You set the minimum value, maximum value and unit (%, V, °C…) once in the constructor. The page picks up this setup on its own, so there is nothing else to configure.

Live, smooth updates

Values travel over WebSocket, so the needle moves the moment the ESP32 S3 Uno sends a new number. There is no page refresh, and the needle glides smoothly between values.

Color zones and precision

Green, yellow and red zones show the status at a glance. You can also choose how many decimal places the reading shows.

Works on every screen

The layout adapts to desktop, tablet and phone screens.

Hardware Preparation

1	×	ESP32 S3 Uno-form Board
1	×	USB Cable Type-A to Type-C (for USB-A PC)
1	×	USB Cable Type-C to Type-C (for USB-C PC)
1	×	Potentiometer (optional for testing)
1	×	Alternatively, 10k Ohm Trimmer Potentiometer
1	×	Alternatively, Potentiometer Kit
1	×	Alternatively, Potentiometer Module with Knob
1	×	Breadboard
1	×	Jumper Wires

Or you can buy the following kits:

DIYables Sensor Kit (18 sensors/displays)

Disclosure: Some of the links provided in this section are Amazon affiliate links. We may receive a commission for any purchases made through these links at no additional cost to you.
Additionally, some of these links are for products from our own brand, DIYables .

Setup Instructions

The first sketch needs no wiring at all. It simulates a sensor that sweeps up and down, so you can test the web page with just the board and a USB cable. You will add a real potentiometer later in this tutorial.

Detailed Instructions

Follow these steps in order:

New to the ESP32 S3 Uno? Follow ESP32 S3 Uno - Getting Started first.
Connect the board to your computer with a USB Type-C cable.
Open Arduino IDE, choose the ESP32S3 Dev Module board and the correct COM port.
Open the Library Manager by clicking the Libraries icon on the left bar of Arduino IDE.
Search for the library: type "DIYables ESP32 WebApps" and find the DIYables ESP32 WebApps library by DIYables.
Install it by clicking the Install button.

Search for DIYables ESP32 WebApps created by DIYables and click the Install button.

Newbiely | Arduino IDE 2.3.8

──

☐

Library Manager

DIYables ESP32 WebApps

All

DIYables ESP32 WebApps by DIYables

A comprehensive library designed for ESP32 that provides multiple professional web applications including Web Monitor, Chat, Digital Pin Control, Sliders, Joystick, Analog Gauge, Rotator Control, and Temperature Display via WebSocket communication. Features modular architecture for memory efficiency, automatic config handling, and perfect for IoT projects, robotics, sensor monitoring, servo/stepper control, temperature monitoring, and remote ESP32 control. More info

1.0.1

INSTALL

Newbiely.ino

···

1 void setup() {

Output

Serial Monitor

Ln 1, Col 1

ESP32S3 Dev Module on COM15

Install the dependencies: Arduino IDE asks to install some other libraries too. Click Install All.
Open the example: go to File Examples DIYables ESP32 WebApps WebAnalogGauge, or copy the code below and paste it into Arduino IDE.

/* * DIYables WebApp Library - Web Analog Gauge Example * * This example demonstrates the Web Analog Gauge application: * - Real-time analog gauge visualization * - Simulated sensor data with smooth animation * - WebSocket communication for live updates * - Beautiful analog gauge with tick marks and smooth pointer movement * * Features: * - Automatic gauge value simulation * - Smooth animation between values * - Range: 0° to 280° (customizable) * - Real-time WebSocket updates * - Professional analog gauge appearance * * Hardware: ESP32 S3 Uno form board * * Setup: * 1. Update WiFi credentials below * 2. Upload the sketch to your ESP32 S3 Uno * 3. Open Serial Monitor to see the IP address * 4. Navigate to http://[board-ip]/web-gauge in your web browser */ #include <DIYables_ESP32_Platform.h> #include <DIYablesWebApps.h> // WiFi credentials - UPDATE THESE WITH YOUR NETWORK const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Create WebApp server and page instances ESP32ServerFactory serverFactory; DIYablesWebAppServer webAppsServer(serverFactory, 80, 81); DIYablesHomePage homePage; // Gauge configuration constants const float GAUGE_MIN_VALUE = 0.0; const float GAUGE_MAX_VALUE = 100.0; const String GAUGE_UNIT = "%"; DIYablesWebAnalogGaugePage webAnalogGaugePage(GAUGE_MIN_VALUE, GAUGE_MAX_VALUE, GAUGE_UNIT); // Range: 0-100% // Other examples: // DIYablesWebAnalogGaugePage webAnalogGaugePage(-50.0, 150.0, "°C"); // Temperature: -50°C to 150°C // DIYablesWebAnalogGaugePage webAnalogGaugePage(0.0, 4095.0, ""); // Analog sensor: 0-4095 (no unit) // DIYablesWebAnalogGaugePage webAnalogGaugePage(0.0, 3.3, "V"); // Voltage: 0-3.3V // Simulation variables unsigned long lastUpdateTime = 0; const unsigned long UPDATE_INTERVAL = 500; // Update every 500ms (0.5 second) const float STEP_SIZE = 1.0; // Step size for simulation float currentGaugeValue = GAUGE_MIN_VALUE; // Start at minimum value float step = STEP_SIZE; // Positive step means increasing, negative means decreasing void setup() { Serial.begin(9600); delay(1000); Serial.println("DIYables ESP32 WebApp - Web Analog Gauge Example"); // Add web applications to the server webAppsServer.addApp(&homePage); webAppsServer.addApp(&webAnalogGaugePage); // Optional: Add 404 page for better user experience webAppsServer.setNotFoundPage(DIYablesNotFoundPage()); // Start the WebApp server if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) { while (1) { Serial.println("Failed to start WebApp server!"); delay(1000); } } setupCallbacks(); } void setupCallbacks() { // Handle gauge value requests (when web page loads/reconnects) webAnalogGaugePage.onGaugeValueRequest([]() { webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue); Serial.println("Web client requested gauge value - Sent: " + String(currentGaugeValue, 1) + GAUGE_UNIT); }); } void loop() { // Handle WebApp server communications webAppsServer.loop(); // Update gauge with simulated sensor data if (millis() - lastUpdateTime >= UPDATE_INTERVAL) { lastUpdateTime = millis(); Serial.println("Updating gauge value..."); // Debug message // Simple linear simulation: step changes direction at boundaries currentGaugeValue += step; // Change direction when reaching boundaries if (currentGaugeValue >= GAUGE_MAX_VALUE || currentGaugeValue <= GAUGE_MIN_VALUE) { step *= -1; // Reverse direction } // Ensure value stays within bounds (safety check) if (currentGaugeValue < GAUGE_MIN_VALUE) currentGaugeValue = GAUGE_MIN_VALUE; if (currentGaugeValue > GAUGE_MAX_VALUE) currentGaugeValue = GAUGE_MAX_VALUE; // Send the new value to all connected web clients webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue); // Print to serial for debugging Serial.println("Gauge: " + String(currentGaugeValue, 1) + GAUGE_UNIT + " (" + (step > 0 ? "↑" : "↓") + ")"); } delay(10); }

Add your WiFi details by changing these two lines:

const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";

Upload the code: click the Upload button in Arduino IDE to send the sketch to the ESP32 S3 Uno.
Open the Serial Monitor and set it to 9600 baud. You should see output like this:

Newbiely | Arduino IDE 2.3.8

──

☐

Newbiely.ino

···

8 Serial.println("Hello World!");

Output

Serial Monitor

Message (Enter to send message to 'ESP32S3 Dev Module' on 'COM15')

New Line

9600 baud

DIYables ESP32 WebApp - Web Analog Gauge Example INFO: Added app / INFO: Added app /web-gauge DIYables WebApp Library Platform: ESP32 Network connected! IP address: 192.168.0.2 HTTP server started on port 80 Configuring WebSocket server callbacks... WebSocket server started on port 81 WebSocket URL: ws://192.168.0.2:81 WebSocket server started on port 81 ========================================== DIYables WebApp Ready! ========================================== 📱 Web Interface: http://192.168.0.2 🔗 WebSocket: ws://192.168.0.2:81 📋 Available Applications: 🏠 Home Page: http://192.168.0.2/ ⏲️ Web Analog Gauge: http://192.168.0.2/web-gauge ========================================== Updating gauge value... Gauge: 1.0% (↑) Updating gauge value... Gauge: 2.0% (↑)

Ln 11, Col 1

ESP32S3 Dev Module on COM15

Open a web browser on your PC or phone. It must be on the same WiFi network as the board.
Type the IP address from the Serial Monitor into the address bar, for example http://192.168.0.2. The home page appears:

ESP32 S3 Uno DIYables WebApp Home page with Web Analog Gauge app

Click the Web Analog Gauge link to open the gauge:

ESP32 S3 Uno DIYables WebApp Web Analog Gauge app

Watch the needle: it sweeps slowly from 0% to 100% and back, following the simulated value.
Tip: you can skip the home page and open the gauge directly with the IP address plus /web-gauge, for example http://192.168.0.2/web-gauge. Bookmark it on your phone for quick access.

Web Interface Features

The web page is more than a picture of a dial. Knowing what it shows helps you read your data correctly.

Analog Gauge Display

The round gauge shows the minimum and maximum values you set in code at both ends of the scale. The current reading appears as a number with its unit, and the needle points to the same value. Color zones tell you if the value is in a safe, warning or high area. The number of decimal places is configurable, so you can show whole numbers or finer readings.

Real-time Updates

The page keeps a WebSocket connection open to the ESP32 S3 Uno. New values arrive automatically, and the needle moves smoothly to each one. A status indicator shows if the connection is alive. The controls are touch-friendly, so the page works well on phones.

Code Configuration

You only need two pieces of code to use the gauge: one line that creates it, and a way to send it values.

Gauge Setup

The constructor takes the minimum value, the maximum value and the unit. Then you register a callback that runs when a browser asks for the current value.

// Configure gauge range and units DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // 0-100 Volts // Set up value request callback gaugePage.onGaugeValueRequest(onGaugeValueRequested);

Sending Values

Inside the callback, read your sensor, scale the reading and send it to the gauge. On the ESP32 S3 Uno the ADC is 12-bit, so a raw reading goes from 0 to 4095, and the pins work at 3.3V. The math below uses those values. Pin A0 on the ESP32 S3 Uno is GPIO2, so the code uses 2.

void onGaugeValueRequested() { // Read sensor value (example with potentiometer on A0 = GPIO2) int sensorValue = analogRead(2); float voltage = (sensorValue / 4095.0) * 3.3; // Send to gauge gaugePage.sendToWebAnalogGauge(voltage); }

Customization Options

The same gauge can show very different kinds of data. You only change the range, the unit and the code that produces the number.

Range Configuration

Set the minimum value to the lowest reading you expect, and the maximum value to the highest. The unit is a short text such as V, A, °C or PSI, and it appears next to the number. You can also control how many decimal places the display uses.

Sensor Integration

Analog sensors such as voltage dividers, current sensors, pressure sensors and light sensors connect straight to an analog pin. Digital sensors for temperature, humidity or gas can send their values over I2C or SPI. You can also show calculated values that combine several sensors, or readings with a calibration factor applied for better accuracy.

ESP32 S3 Uno Pinout

The image below shows the pinout diagram of the ESP32 S3 Uno form board. Use it to find the A0 header pin and its GPIO number before you wire the potentiometer.

ESP32 S3 Uno Web Analog Gauge with Potentiometer

Now replace the simulated value with a real one. A potentiometer is the easiest analog input to test with: turn the knob, and the needle on the web page follows it.

Wire the potentiometer as shown in the table. Use the 3.3V pin, not 5V, because the ESP32 S3 Uno analog pins are NOT 5V tolerant.

Potentiometer Pin	ESP32 S3 Uno Pin
VCC (one outer pin)	3.3V
GND (other outer pin)	GND
Signal (middle pin)	A0 (GPIO2)

The sketch below reads the potentiometer on A0 (GPIO2) every 500 ms. It maps the 0–4095 reading to 0–100% and sends the result to the web gauge. The rest of the code is the same as the WebAnalogGauge example.

#include <DIYables_ESP32_Platform.h> #include <DIYablesWebApps.h> // WiFi credentials - UPDATE THESE WITH YOUR NETWORK const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Define pin #define PIN_ANALOG 2 // A0 pin on the ESP32 S3 Uno (GPIO2) // Create WebApp server and page instances ESP32ServerFactory serverFactory; DIYablesWebAppServer webAppsServer(serverFactory, 80, 81); DIYablesHomePage homePage; // Gauge configuration constants const float GAUGE_MIN_VALUE = 0.0; const float GAUGE_MAX_VALUE = 100.0; const String GAUGE_UNIT = "%"; DIYablesWebAnalogGaugePage webAnalogGaugePage(GAUGE_MIN_VALUE, GAUGE_MAX_VALUE, GAUGE_UNIT); // Range: 0-100% // variables unsigned long lastUpdateTime = 0; const unsigned long UPDATE_INTERVAL = 500; // Update every 500ms (0.5 second) const float STEP_SIZE = 1.0; // Step size for simulation float currentGaugeValue = GAUGE_MIN_VALUE; // Start at minimum value float step = STEP_SIZE; // Positive step means increasing, negative means decreasing void setup() { Serial.begin(9600); // set the ADC attenuation to 11 dB (up to ~3.3V input) analogSetAttenuation(ADC_11db); delay(1000); Serial.println("DIYables ESP32 WebApp - Web Analog Gauge Example"); // Add web applications to the server webAppsServer.addApp(&homePage); webAppsServer.addApp(&webAnalogGaugePage); // Optional: Add 404 page for better user experience webAppsServer.setNotFoundPage(DIYablesNotFoundPage()); // Start the WebApp server if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) { while (1) { Serial.println("Failed to start WebApp server!"); delay(1000); } } setupCallbacks(); } void setupCallbacks() { // Handle gauge value requests (when web page loads/reconnects) webAnalogGaugePage.onGaugeValueRequest([]() { webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue); Serial.println("Web client requested gauge value - Sent: " + String(currentGaugeValue, 1) + GAUGE_UNIT); }); } void loop() { // Handle WebApp server communications webAppsServer.loop(); // Update gauge with the potentiometer value if (millis() - lastUpdateTime >= UPDATE_INTERVAL) { lastUpdateTime = millis(); Serial.println("Updating gauge value..."); // Debug message // Simple linear simulation: step changes direction at boundaries //currentGaugeValue += step; currentGaugeValue = analogRead(PIN_ANALOG); currentGaugeValue = map(currentGaugeValue,0,4095,0,100); // Change direction when reaching boundaries if (currentGaugeValue >= GAUGE_MAX_VALUE || currentGaugeValue <= GAUGE_MIN_VALUE) { step *= -1; // Reverse direction } // Ensure value stays within bounds (safety check) if (currentGaugeValue < GAUGE_MIN_VALUE) currentGaugeValue = GAUGE_MIN_VALUE; if (currentGaugeValue > GAUGE_MAX_VALUE) currentGaugeValue = GAUGE_MAX_VALUE; // Send the new value to all connected web clients webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue); // Print to serial for debugging Serial.println("Gauge: " + String(currentGaugeValue, 1) + GAUGE_UNIT + " (" + (step > 0 ? "↑" : "↓") + ")"); } delay(10); }

The sketch calls analogSetAttenuation(ADC_11db) in setup(). By default, the ESP32 S3 Uno ADC can only measure a small voltage. With 11 dB attenuation, the analog pin reads the full range, from 0V up to about 3.3V. Without this line, the reading hits 4095 too early and the gauge jumps to 100% long before the knob reaches the end.

Watch the video below to see this ESP32 S3 Uno project step by step.

Common Use Cases

A live gauge fits any project where you want to see one value at a glance. Here are some ideas to start from.

Educational Projects

Show a battery or power supply voltage while you test circuits. Display temperature, humidity or light levels in an environment project. Measure force, pressure or acceleration in physics experiments. Check components and analyze circuits in electronics lessons.

Practical Applications

Monitor system values in home automation. Show sensor feedback and diagnostics on a robot. Build an IoT dashboard for remote monitoring. Watch a process value for simple quality control.

Advanced Features

Once one gauge works, you can build a small dashboard with more gauges and charts.

Multiple Gauges

Create one gauge object for each value you want to show, and add each one to the server. Every gauge gets its own page.

DIYablesWebAnalogGaugePage voltageGauge(0.0, 3.3, "V"); DIYablesWebAnalogGaugePage currentGauge(0.0, 2.0, "A"); DIYablesWebAnalogGaugePage tempGauge(-40.0, 85.0, "°C"); webAppsServer.addApp(&voltageGauge); webAppsServer.addApp(&currentGauge); webAppsServer.addApp(&tempGauge);

Data Logging

A gauge shows only the current value. To see the history too, combine it with the Web Plotter and send the same value to both pages.

// Send same value to both gauge and plotter gaugePage.sendToWebAnalogGauge(voltage); webPlotterPage.sendPlotData(voltage);

Educational Integration

This project is a good classroom tool, because students can see the link between a physical input and a number on the screen.

STEM Learning Objectives

Students learn how analog-to-digital conversion turns a voltage into a number. They explore how sensors measure the physical world. They see real-time web communication in action, and they practice programming with callback functions and data handling.

Classroom Activities

Compare different sensors and their ranges on the same gauge.
Calibrate a sensor and discuss accuracy and precision.
Combine several sensors and gauges into one dashboard.
Find and fix sensor or display problems as a team.

This example gives you a solid base for analog sensor monitoring and visualization with the ESP32 S3 Uno, for both school projects and practical builds.

FAQ

Do I need a sensor to try the ESP32 S3 Uno web analog gauge?

No. The WebAnalogGauge example simulates a value that sweeps from 0 to 100 and back. You only need the board, a USB cable and a 2.4GHz WiFi network. Add the potentiometer later when you want real data.

Why does the code call analogSetAttenuation(ADC_11db)?

It sets the ESP32 S3 Uno ADC input range to about 0–3.3V, so the full potentiometer signal maps to 0–4095. Without it the range is smaller, and readings reach 4095 too early. The UNO R4 does not need this line, because it is ESP32-only. Keep the sensor output at 3.3V or less.

Can I connect the potentiometer to 5V on the ESP32 S3 Uno?

No. The ESP32 S3 Uno pins work at 3.3V and are not 5V tolerant. If you power the potentiometer from 5V, the middle pin can put up to 5V on A0 (GPIO2) and damage the board. Always power it from the 3.3V pin.

Is this library the same as the DIYables WebApps library for the UNO R4 WiFi?

The web pages and the API are almost the same, but the ESP32 S3 Uno uses the "DIYables ESP32 WebApps" library. The sketch includes DIYables_ESP32_Platform.h and creates an ESP32ServerFactory instead of UnoR4ServerFactory. Raw analog values also go to 4095 instead of 1023.

How can I show a real voltage instead of a percentage?

Change the constructor to DIYablesWebAnalogGaugePage webAnalogGaugePage(0.0, 3.3, "V");. Then convert the reading with analogRead(2) / 4095.0 * 3.3 and send the result. Set the gauge range to match the values you send.

What if my project needs more pins than the Uno headers give?

The ESP32 S3 Uno has two extra rows of holes with more GPIOs: GPIO15 and GPIO16 (I/O, PWM, analog), GPIO45 and GPIO35–GPIO42 (I/O, PWM), and GPIO47/GPIO48 (output only, PWM). Solder pin headers to use them and write the GPIO number in code. For extra analog sensors on more gauges, use GPIO15 or GPIO16, because they have analog input. Be careful with two things. First, GPIO47 and GPIO48 may run at 1.8V instead of 3.3V on some modules (especially ones with "V" in the name, like R8V or R16V), so 3.3V devices can be damaged or act strangely. Second, GPIO0, GPIO3 (D6), GPIO45 and GPIO46 (D9) are boot strapping pins, and a wrong connection can stop the board from booting or uploading code. Use the other extra pins first.

Troubleshooting

Problem	Possible Cause	Solution
No COM port in Arduino IDE	USB driver missing or board not in upload mode	Install the CP210x or CH340 driver, try another USB cable, or hold BOOT while you press RESET and upload again
Serial Monitor shows "Failed to start WebApp server!"	Wrong WiFi name or password, or a 5GHz network	Check WIFI_SSID and WIFI_PASSWORD and use a 2.4GHz network
Web page does not open	Wrong IP address or the device is on another network	Use the IP from the Serial Monitor and connect your phone or PC to the same WiFi
Gauge needle does not move	WebSocket blocked or callback not set	Refresh the page, check the firewall, and make sure setupCallbacks() runs after begin()
Gauge stays at 0% or 100% with the potentiometer	Signal wire on the wrong pin or loose wiring	Connect the middle pin to A0 (GPIO2) and check the 3.3V and GND wires
Gauge reaches 100% before the knob ends	ADC attenuation not set	Keep analogSetAttenuation(ADC_11db) in setup()
Values look wrong or out of range	Gauge range does not match the scaling in code	Make the min and max values match what the sketch sends
Library not found when compiling	DIYables ESP32 WebApps or its dependencies not installed	Install the library and click Install All for the dependencies

Learn More

※ OUR MESSAGES

As freelancers, We are AVAILABLE for HIRE. See how to outsource your project to us
Please feel free to share the link of this tutorial. However, Please do not use our content on any other websites. We invested a lot of effort and time to create the content, please respect our work!