Build an All-in-One ESP32 Weather Station Shield

In this project I’ll show you how you can build an all-in-one ESP32 weather station shield and display the sensor readings on a web server. The web server displays data from all the sensors and automatically updates the readings every ten seconds, without the need to refresh the web page.
JLCPCB
The previous video was sponsored by
JLCPCB
. JLCPCB is a well known PCB prototype company in China. It is specialized in quick PCB prototype and small-batch production. You can order a minimum of 10 PCBs for just $2.
If you want to turn your breadboard circuits into real boards and make your projects look more professional, you just have to upload the Gerber files to order high quality PCBs for low prices. We’ll show you how to do this later in this blog post.
Resources
You can find all the resources needed to build this project in the bullets below.
Web server code (for Arduino IDE)
HTML page
Schematic diagram
Gerber files
KiCad project to edit the PCB
Click here to download all the files
ESP32 Weather Station Shield Features
To build this project, I’ve designed a PCB for the ESP32 DEVKIT V1 DOIT board. The PCB I’ve built only works with the version with 30 GPIOs.
I’ve designed the shield to be a compact weather station. The PCB has a lot of features so that it can suit a lot of different projects for different applications. In fact, I didn’t use all the PCB features in this project.
Additionally, this shield can also be used as a learning shield as it comes with some of the most used components when starting to learn how to program the ESP32.
The shield allows you to control:
2x SMD LEDs
1x Pushbutton
1x Trimpot
1x DHT22 temperature and humidity sensor
1x BMP180 barometric sensor
1x Light dependent resistor
1x MicroSD card module
2x Terminal blocks – that give you access to 3 GPIOs to connect other components
The microSD card module is a very interesting addition to the shield: it can be used to store readings if you want to build a data logger, or it can store an HTML file to serve a web page – as we’ll do in this project. I think this is a better and easier way to build a web server that requires more complex web pages.
ESP32 Shield Pin Assignment
The following table describes the pin assignment for each component on the shield:
Component
ESP32 Pin Assignment
Pushbutton
GPIO 33
Trimpot
GPIO 32
Photoresistor (LDR)
GPIO 4
DHT22 data pin
GPIO 15
LED1
GPIO 27
LED2
GPIO 26
BMP180
SDA(GPIO 21); SCL(GPIO 22)
SD card module
MOSI(GPIO 23); MISO(GPIO 19): CLK(GPIO 18); CS(GPIO 5)
Free GPIOs (terminal blocks)
GPIO14, GPIO13, GPIO12
Note:
there’s a small problem with our pin assignment. Currently the Arduino WiFi library uses GPIO 4 that is connected to the LDR. So, you’ll probably have trouble taking readings from the LDR when you use the WiFi library. To make it work, you can solder a wire from the LDR to another available GPIO (must support ADC).
Testing the Circuit on a Breadboard
Before designing the shield, I’ve assembled 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:
ESP32 DOIT DEVKIT V1 Board – 30 GPIOs
(read
ESP32 development boards comparison
)
2x 5mm LED
2x 330 Ohm resistor
1x Pushbutton
1x 10k Ohm resistor
1x 10k Ohm potentiometer
1x DHT22 temperature and humidity sensor
1x BMP180
1x MicroSD card module
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!
Schematic
After gathering all the needed parts, you can assemble the circuit by following the next schematic diagram:
Important:
if you’re using a different board, you need to double-check the pinout.
Here’s the circuit diagram:
Designing the PCB
After making sure the circuit was working properly, I’ve designed the PCB version on
KiCad
. KiCad is an open-source software used to design PCBs.
I won’t explore how I’ve designed the PCB, but I provide all the files if you want to modify the PCB for yourself.
Click here to download
the KiCad project files.
Ordering the PCBs
You don’t need to know how to design the PCB to order one. You just have to:
1. To download the Gerber files,
click here to download the .zip file
2. Go to
JLCPCB.com
, click the “
QUOTE NOW
” button, and upload the .zip file you’ve just downloaded.
3. You’ll see a success message at the bottom. Then, you can use the “Gerber Viewer” link at the bottom right corner to check if everything went as expected. You can view the top and bottom of the PCB. You can view or hide the solder-mask, silkscreen, copper, etc.
With the default settings, you can order 10 PCBs for just $2. However, if you want to select other settings like a different PCB Color it will cost you a few more dollars.
When, you’re happy with your order. Click the “
SAVE TO CART
” button to complete the order.
My PCBs took 1 day to be manufactured and they arrived in 5 business days using DHL delivery option.
Unboxing
After a week, I received my PCBs at my office. Everything came well packed, and I also received a pen from JLCPCB.
Taking a closer look at the PCBs, I must say that I’m really impressed with the quality. I don’t think you can get a better PCB service for this price.
Soldering the Components
The next step was soldering the components to the PCB. I used SMD LEDs and SMD resistors. I know it’s a bit difficult to solder SMD components, but they can save a lot of space on the PCB. I’ve solder header pins to attach the ESP32, and the sensors. This way, I can easily replace the sensors, if needed.
Here’s a list of all the components you need to solder on the PCB:
2x SMD LEDs
2x 330 Ohm SMD resistors
1x 10k Ohm SMD resistor
1x 4.7k Ohm SMD resistor
1x Trimpot (10k)
1x Pushbutton
1x SD card module
1x BMP180 barometric sensor
1x DHT22 temperature and humidity sensor
2x Screw terminal blocks
Female pin header socket
ESP32 DOIT DEVKIT V1 Board (version with 30 GPIOs) – you can get
this board from Banggood
, or
from eBay
The following figure shows how the PCB looks like after soldering all the components.
Preparing the ESP32 board in Arduino IDE
In order to upload code to your ESP32 using Arduino IDE, you should install an add-on for the Arduino IDE that allows you to program the ESP32 using the Arduino IDE and its programming language. Follow the next tutorial to prepare your Arduino IDE:
Windows instructions
– Installing the ESP32 Board in Arduino IDE
Mac and Linux instructions
– Installing the ESP32 Board in Arduino IDE
You also need to install the following libraries:
DHT sensor library
Adafruit BMP085 library
Adafruit Unified Sensor Driver
Code
The next step is writing the code to read the sensors and build the web server. The code for this project is divided into two parts:
The code in Arduino IDE to read the sensors and host a web server
An HTML file to build the web page. This HTML file should be saved in the microSD card.
Copy the code provided to the Arduino IDE. The code for this project is a bit long, but it’s fairly easy to understand. I’ve also added various comments along the code. Don’t upload the code yet.
/*
* Complete Project Details https://ajvikalabs.com
*/

// Load required libraries
#include <WiFi.h>
#include "SD.h"
#include "DHT.h"
#include <Wire.h>
#include <Adafruit_BMP085.h>

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// uncomment one of the lines below for whatever DHT sensor type you're using
//#define DHTTYPE DHT11 // DHT 11
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321

// GPIO the DHT is connected to
const int