ESP8266 NodeMCU Web Server: Display Sensor Readings in Gauges
Gauges Learn how to use the ESP8266 NodeMCU to build a web server that can show sensor readings in gauges. As an example, we'll show the temperature and humidity from a BME280 sensor usin…
Know the mission before touching a wire.
Understand what you are making, prepare the right tools, and make the workbench safe.
Project details
ESP8266 NodeMCU Web Server: Display Sensor Readings in Gauges is a iot project. Gauges Learn how to use the ESP8266 NodeMCU to build a web server that can show sensor readings in gauges. As an example, we'll show the temperature and humidity from a BME280 sensor usin…
- Source pages
- 967-971
- Named parts
- 5
- Build goal
- Working, tested prototype
Tools you need
- Digital multimeter
- Wire stripper and side cutters
- Soldering iron with a fine tip
- Current-limited bench supply
- Computer with a data-capable USB cable
Use eye protection, good lighting, and a clean insulated surface throughout the build.
Safety precautions
- Disconnect every power source before changing a connection.
- Check component polarity, pinout, and supply voltage twice.
- Use a current limit for the first power-up.
- Keep liquids, loose metal, and uninsulated wires away from the bench.
Gather, identify, and understand every part.
Use the standardized inventory, then open What's this? to learn each part's role, advantages, limitations, handling, and specifications.
What's this?Image, role, pros, cons, handling & specifications
ESP8266 (read Best ESP8266 development boards)
A programmable controller that reads inputs, makes decisions, and drives the project's outputs.
What it does hereIt is the control centre and must use the documented board, pin map, supply, and logic level.
Buy / compare this part ↗Advantages
- Reprogrammable and reusable
- Large learning ecosystem
- Complex behaviour remains changeable
Limitations
- GPIO voltage and current are limited
- Some pins affect boot or communication
- Loads normally need a driver
Handling
- Disconnect power before rewiring
- Avoid static discharge
- Never power motors, relays, or pumps directly from GPIO
Specifications to verify
- Use the exact model, value, package, and rating listed for ESP8266 (read Best ESP8266 development boards); similar-looking parts are not always interchangeable.
- Confirm operating voltage, logic level, pinout, memory, USB interface, and maximum GPIO current.
What's this?Image, role, pros, cons, handling & specifications
BME280 Sensor
A sensor converts a physical condition into an electrical signal the circuit can measure.
What it does hereIt provides project input as an analogue, digital, resistive, frequency, or calibrated signal.
Buy / compare this part ↗Advantages
- Adds real-world awareness
- Can usually be tested independently
- Often supports calibration
Limitations
- Readings can drift
- Placement affects results
- Some sensors need warm-up or calibration
Handling
- Protect the sensing surface
- Observe supply voltage and polarity
- Keep signal leads away from noisy power wiring
Specifications to verify
- Use the exact model, value, package, and rating listed for BME280 Sensor; similar-looking parts are not always interchangeable.
- Confirm supply range, output type, measurement range, accuracy, response time, and pin order.
What's this?Image, role, pros, cons, handling & specifications
PREREQUISITES
A named project component whose exact role is defined by the source circuit and build guide.
What it does hereIt performs a documented electrical, control, interface, or construction function in this project.
Buy / compare this part ↗Advantages
- Selected for this project
- Can be checked independently
- Supports modular troubleshooting
Limitations
- Substitutes may differ
- Generic names can hide variants
- Pinouts and ratings vary
Handling
- Compare the received part with the source
- Keep it labelled
- Do not force connectors or adjusters
Specifications to verify
- Use the exact model, value, package, and rating listed for PREREQUISITES; similar-looking parts are not always interchangeable.
- Confirm dimensions, ratings, connection method, polarity, and environmental limits.
What's this?Image, role, pros, cons, handling & specifications
Add the ESP8266 board to the Arduino IDE
A programmable controller that reads inputs, makes decisions, and drives the project's outputs.
What it does hereIt is the control centre and must use the documented board, pin map, supply, and logic level.
Buy / compare this part ↗Advantages
- Reprogrammable and reusable
- Large learning ecosystem
- Complex behaviour remains changeable
Limitations
- GPIO voltage and current are limited
- Some pins affect boot or communication
- Loads normally need a driver
Handling
- Disconnect power before rewiring
- Avoid static discharge
- Never power motors, relays, or pumps directly from GPIO
Specifications to verify
- Use the exact model, value, package, and rating listed for Add the ESP8266 board to the Arduino IDE; similar-looking parts are not always interchangeable.
- Confirm operating voltage, logic level, pinout, memory, USB interface, and maximum GPIO current.
What's this?Image, role, pros, cons, handling & specifications
Filesystem Uploader Plugin
A named project component whose exact role is defined by the source circuit and build guide.
What it does hereIt performs a documented electrical, control, interface, or construction function in this project.
Buy / compare this part ↗Advantages
- Selected for this project
- Can be checked independently
- Supports modular troubleshooting
Limitations
- Substitutes may differ
- Generic names can hide variants
- Pinouts and ratings vary
Handling
- Compare the received part with the source
- Keep it labelled
- Do not force connectors or adjusters
Specifications to verify
- Use the exact model, value, package, and rating listed for Filesystem Uploader Plugin; similar-looking parts are not always interchangeable.
- Confirm dimensions, ratings, connection method, polarity, and environmental limits.
Connect one verified path at a time.
Explore the named components and standardized signal flow, then use Source Check to verify exact physical pins, values, and topology before applying power.
Trace this circuit.
ESP8266 NodeMCU Web Server: Display Sensor Readings in Gauges: interactive parts, standardized terminals, responsive anchored wires, student explanations, and the original circuit reference in one shared system.
Trace before wiring
Follow power, ground, inputs, processing, and outputs in that order. Never guess a pin from package shape alone.
Connect with power off
Make short, labelled connections and share a common ground only where the schematic requires it.
Inspect every joint
Check continuity, polarity, adjacent shorts, and loose connections before the first power-up.
Open all source diagrams and build views 4 visuals
Confirm the hardware-only control path.
This project does not include firmware in the source. The circuit itself provides the required behaviour.
How to connect
- Match every controller label to the circuit view and source pin map.
- Join grounds before signal wires when separate low-voltage supplies are used.
- Keep motors, relays, pumps, and other loads on a suitable driver and external supply.
Common mistakes
Reversed VCC/GND, board-label versus GPIO-number confusion, missing common ground, and charge-only USB cables.
Troubleshoot
Disconnect loads, continuity-test one path at a time, then test with a current limit.
Software preparation
No IDE, board package, library, or firmware upload is required for this project.
If you add a programmable controller as an extension, document its pin map separately.
How to upload code
The original design is implemented entirely in hardware, so proceed after verifying the circuit and supply.
Assemble, deploy, test, and troubleshoot.
Use the complete source notes in build order, then pass the final checks before calling the project finished.
Build in functional stages
- Power and regulation
- Controller or processing stage
- Inputs and sensors
- Outputs and loads
- Enclosure and strain relief
Power up safely
- Inspect unpowered continuity first
- Apply the lowest safe current limit
- Measure supply rails before signals
- Add one load at a time
- Record expected and actual results
Work from simple to complex
- Confirm power, ground, polarity, and orientation
- Compare each pin with the source
- Test inputs separately from outputs
- Replace only one variable at a time
- Power off before every correction
Follow the documented instructions.
These notes come from this project's source and remain in their original order.
Project overview
Project build noteGauges Learn how to use the ESP8266 NodeMCU to build a web server that can show sensor readings in gauges. As an example, we'll show the temperature and humidity from a BME280 sensor using both a linear and a radial gauge. You can change the project easily to plot any other kind of data. We'll use the canvas-gauges JavaScript library to make the gauges.
Project Overview
Project build noteWith the ESP8266, this project will make a web server that shows temperature and humidity readings from a BME280 sensor. To show the temperature, we'll make a linear gauge that looks like a thermometer, and to show the humidity, we'll make a radial gauge.
To follow this tutorial, you need the following parts
Project build noteESP8266 (read Best ESP8266 development boards) BME280 Sensor Jumper wires Breadboard PREREQUISITES Before you move on with the project, make sure you've done everything in this section. 1. Add the ESP8266 board to the Arduino IDE We'll use Arduino IDE to programme the ESP8266. So, the ESP8266 add-on must be in place. If you haven't already, read the next lesson: 2. Filesystem Uploader Plugin We'll use a plug-in for Arduino IDE called LittleFS Filesystem Uploader to send the HTML, CSS, and JavaScript files to the ESP8266 filesystem (called LittleFS). To install the filesystem uploader plugin, follow the steps in the
next guide
Project build note3. Installing Libraries You need to install the following libraries to build this project: Adafruit BME280 (Arduino Library Manager) (Arduino Library Manager) Adafruit Sensor library (Arduino Library Manager) Version 0.1.0 of the Arduino JSON library (Arduino Library Manager) ESPAsyncWebServer (.zip folder); ESPAsyncTCP (.zip folder).
The Arduino Library Manager can be used to set up the first three libraries. Go to Sketch > Include Library > Manage Libraries, then look for the names of the libraries. Since you can't install the ESPAsyncWebServer and ESPAsynTCP libraries through the Arduino Library Manager, you have to copy the library files to the Arduino Installation Libraries folder. You can also download the libraries'.zip folders. Then, in your Arduino IDE, go to Sketch > Include Library > Add.zip Library and choose the libraries you just downloaded.
Schematic Diagram
Project build noteFrom a BME280 sensor, we'll send the temperature and humidity. With the BME280 sensor module, we will use I2C communication. Wire the sensor to the ESP8266's SCL (GPIO 5) and SDA (GPIO 4) pins by default, as shown in the diagram below. Server-Sent Events Server-Sent Events make sure that the readings on the website are always up to date (SSE)
Server-Sent Events (SSE) enables the client to receive automatic updates through HTTP connection from a server. The client establishes the SSE connection and the server sends updates using event source protocol. After the initial handshake, the client will begin to receive updates from the server, but it will no longer be able to send any data to the server. This is helpful for providing the browser with real-time data from sensors. If there is a new reading, the ESP8266 will transmit it to the client as soon as it is available. This will allow the web page to be automatically updated without the need for any additional requests. You can send any data that could be beneficial for your project rather than sensor readings. Examples of
this include notifications when motion is detected, GPIO state information, and so on.
Demonstration
Project build noteOpen your browser and type in the IP address for the ESP8266. You should be able to get to the web page that shows the latest sensor readings on the gauges.
You built ESP8266 NodeMCU Web Server: Display Sensor Readings in Gauges.
You followed the full workflow from understanding the mission to testing the finished project. That is a real engineering achievement - well done.
ESP8266 NodeMCU Door Status Monitor with Telegram Notifications
Ready to reuse what you learned in another project from the same track?
Start this project →