ESP32 Neopixel Status Indicator and Sensor PCB Shield with Wi-Fi Manager

In this project, we’ll create a status indicator PCB shield for the ESP32 featuring two rows of addressable RGB neopixel LEDs, a BME280 sensor, and a pushbutton. We’ll program the board to display a web server with the BME280 sensor readings and show the temperature and humidity range on the LEDs (like two progress bars). We’ll also set up a Wi-Fi Manager⁠—the LEDs indicate whether it is already connected to a Wi-Fi network or if it is set in access point mode.
The Wi-Fi Manager allows you to connect the ESP32 boards to different Access Points (networks) without having to hard-code network credentials (SSID and password) and upload new code to the board. Your ESP will automatically join the last saved network or set up an Access Point that you can use to configure the network credentials.
By following this project, you’ll learn more about the following concepts:
Controlling two addressable RGB LED “strips” individually with the ESP32;
Build a Web Server with the ESP32 using Server-sent Events (SSE);
Handle HTML input fields to save data on your board (SSID and password);
Save variables permanently using files on the filesystem;
Build your own Wi-Fi Manager using the ESPAsyncWebServer library;
Switch between station mode and access point mode;
And much more…
To better understand how this project works, we recommend taking a look at the following tutorials:
Input Data on HTML Form ESP32/ESP8266 Web Server using Arduino IDE
How to Set an ESP32 Access Point (AP) for Web Server
ESP32 Static/Fixed IP Address
ESP32 Web Server using Server-Sent Events (Update Sensor Readings Automatically)
Resources
You can find all the resources needed to build this project in the links below (or you can visit the
GitHub project page
):
ESP32 Code (Arduino IDE)
Gerber files
EasyEDA project to edit the PCB
Click here to download all the files
Project Overview
Before going straight to the project, let’s take a look at the PCB Shield features (hardware and software).
PCB Shield Features
The shield is designed with some headers pins to stack the ESP32 board. For this reason, if you want to build and use our PCB, you need to get the same ESP32 development board. We’re using the
ESP32 DEVKIT DOIT V1
board (the model with
36 GPIOs
).
If you want to follow this project and have a different ESP32 model, you can assemble the circuit on a breadboard, or you can modify the PCB layout and wiring to match the pinout of your ESP32 board. Throughout this project, we provide all the necessary files if you need to modify the PCB.
Additionally, you can follow this project by assembling the circuit on a breadboard if you don’t want to build a PCB shield.
The shield consists of:
BME280 temperature, humidity, and pressure sensor;
Pushbutton;
Two rows of 5 addressable RGB LEDs (WS2812B).
If you replicate this project on a breadboard, instead of individual WS2812B addressable RGB LEDs, you can use
addressable RGB LED strips
PCB Shield Pin Assignment
The following table shows the pin assignment for each component on the shield:
Component
ESP32 Pin Assignment
BME280
GPIO 21 (SDA), GPIO 22 (SCL)
Pushbutton
GPIO 18
Addressable RGB LEDs (row 1)
GPIO 27
Addressable RGB LEDs (row 2)
GPIO 32
PCB Software Features
You can program the shield in several different ways. We’ll program the ESP32 to have the following features:
Web Server
Web server to display BME280 sensor readings: temperature, humidity, and pressure. It also displays the time of the last update. The readings update automatically every 30 seconds using server-sent events.
Learn more about Server-Sent Events in this project
Visual Interface (Addressable RGB LEDs)
The RGB LEDs on the shield behave like a progress bar showing the range of temperature and humidity values. The higher the temperature, the more LEDs will be lit—the same for the humidity readings. The temperature values are displayed in an orange/yellow color, and the humidity is displayed in a teal color.
Wi-Fi Manager
The Wi-Fi Manager allows you to connect the ESP32 board to different Access Points (networks) without having to hard-code network credentials (SSID and password) and upload new code to your board. Your ESP will automatically join the last saved network or set up an Access Point that you can use to configure the network credentials.
When the board is in Access Point mode (Wi-Fi Manager), all LEDs are lit in red. When the board is in station mode (Web Server with sensor readings), all LEDs are temporarily lit in green/teal color before showing the temperature and humidity range.
Testing the Circuit on a Breadboard
Before designing and building the PCB, it’s important to test the circuit on a breadboard. If you don’t want to make a PCB, you can still follow this project by assembling the circuit on a breadboard.
Parts Required
To assemble the circuit on a breadboard you need the following parts (the parts for the PCB are shown in a later section):
DOIT ESP32 DEVKIT V1 Board
– read
Best ESP32 Development Boards
BME280
(4 pins)
2x
WS2812B Addressable RGB LED Strips
Pushbutton
*
10k Ohm resistor
Breadboard
Jumper wires
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!
After gathering all the parts, assemble the circuit by following the next schematic diagram:
*We ended up not using the pushbutton for this particular project, so, it is not necessary to include it in your circuit.
Designing the PCB
To design the circuit and PCB, we used
EasyEDA
, a browser-based software, to design PCBs. If you want to customize your PCB, you need to upload the following files:
EasyEDA project files to edit the PCB
I’m not an expert in PCB design. However, designing simple PCBs like the one we’re using in this tutorial is straightforward. Designing the circuit works like in any other circuit software tool, you place some components, and you wire them together. Then, you assign each component to a footprint.
Having the parts assigned, place each component. When you’re happy with the layout, make all the connections and route your PCB.
Save your project and export the Gerber files.
Note:
you can grab the project files and edit them to customize the shield for your own needs.
Download Gerber .zip file
EasyEDA project to edit the PCB
Ordering the PCBs at PCBWay
This project is sponsored by PCBWay.
PCBWay
is a full feature Printed Circuit Board manufacturing service.
Turn your DIY breadboard circuits into
professional PCBs
– get 10 boards for approximately $5 + shipping (which will vary depending on your country).
Once you have your Gerber files, you can order the PCB. Follow the next steps.
1. Download the Gerber files –
click here to download the .zip file
2. Go to
PCBWay website
and open the PCB Instant Quote page.
3. PCBWay can grab all the PCB details and automatically fills them for you. Use the “Quick-order PCB (Autofill parameters)”.
4. Press the “+ Add Gerber file” button to upload the provided Gerber files.
And that’s it. You can also use the OnlineGerberViewer to check if your PCB is looking as it should.
If you aren’t in a hurry, you can use the China Post shipping method to lower your cost significantly. In our opinion, we think they overestimate the China Post shipping time.
You can increase your PCB order quantity and change the solder mask color. As usual, we’ve ordered the Blue color.
Once you’re ready, you can order the PCBs by clicking “Save to Cart” and complete your order.
Unboxing the PCBs
After approximately one week using the DHL shipping method, I received the PCBs at my office.
As usual, everything comes well packed, and the PCBs are really high-quality. The letters on the silkscreen are really well-printed and easy to read.
We’re really satisfied with the PCBWay service. Here are some other projects we’ve built using the PCBWay service:
ESP32-CAM with