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.

Watch the Video Tutorial and Project Demo

This guide is available in video format (watch below) and in written format (continue reading).

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:
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.

/*

* Rui Santos

* Complete Project Details https://randomnerdtutorials.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 DHTPin = 15;

//intialize DHT sensor

DHT dht(DHTPin, DHTTYPE);

// create a bmp object

Adafruit_BMP085 bmp;

// Web page file stored on the SD card

File webFile;

// Set potentiometer GPIO

const int potPin = 32;

// IMPORTANT: At the moment, GPIO 4 doesn't work as an ADC when using the Wi-Fi library
// This is a limitation of this shield, but you can use another GPIO to get the LDR readings

const int LDRPin = 4;

// variables to store temperature and humidity

float tempC;

float tempF;

float humi;

// Variable to store the HTTP request

String header;

// Set web server port number to 80

WiFiServer server(80);

void setup(){

// initialize serial port

Serial.begin(115200);

// initialize DHT sensor

dht.begin();

// initialize BMP180 sensor

if (!bmp.begin()){

Serial.println("Could not find BMP180 or BMP085 sensor");

while (1) {}

// initialize SD card

if(!SD.begin()){

Serial.println("Card Mount Failed");

return;

uint8_t cardType = SD.cardType();

if(cardType == CARD_NONE){

Serial.println("No SD card attached");

return;

// initialize SD card

Serial.println("Initializing SD card...");
 if (!SD.begin()) {

Serial.println("ERROR - SD card initialization failed!");

return; // init failed

// Connect to Wi-Fi network with SSID and password

Serial.print("Connecting to ");

Serial.println(ssid);

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(500);

Serial.print(".");

// Print local IP address and start web server

Serial.println("");

Serial.println("WiFi connected.");

Serial.println("IP address: ");

Serial.println(WiFi.localIP());

server.begin();

void loop(){

WiFiClient client = server.available(); // Listen for incoming clients

if (client) { // if new client connects

boolean currentLineIsBlank = true;

while (client.connected()) {

if (client.available()) { // client data available to read

char c = client.read(); // read 1 byte (character) from client

header += c;

// if the current line is blank, you got two newline characters in a row.

// that's the end of the client HTTP request, so send a response:

if (c == '\n' && currentLineIsBlank) {

// send a standard http response header

client.println("HTTP/1.1 200 OK");

// If client already on the web page, browser requests with AJAX the latest

// sensor readings (ESP32 sends the XML file)

if (header.indexOf("update_readings") >= 0) {

// send rest of HTTP header

client.println("Content-Type: text/xml");

client.println("Connection: keep-alive");

client.println();

// Send XML file with sensor readings

sendXMLFile(client);

// When the client connects for the first time, send it the index.html file

// stored in the microSD card

else {

// send rest of HTTP header

client.println("Content-Type: text/html");

client.println("Connection: keep-alive");

client.println();

// send web page stored in microSD card

webFile = SD.open("/index.html");

if (webFile) {

while(webFile.available()) {

// send web page to client

client.write(webFile.read());

webFile.close();

break;

// every line of text received from the client ends with \r\n

if (c == '\n') {
 // last character on line of received text

// starting new line with next character read

currentLineIsBlank = true;

else if (c != '\r') {

// a text character was received from client

currentLineIsBlank = false;

} // end if (client.available())

} // end while (client.connected())

// Clear the header variable

header = "";

// Close the connection

client.stop();

Serial.println("Client disconnected.");

} // end if (client)

// Send XML file with the latest sensor readings

void sendXMLFile(WiFiClient cl){

// Read DHT sensor and update variables

readDHT();

// Prepare XML file

cl.print("<?xml version = \"1.0\" ?>");

cl.print("<inputs>");

cl.print("<reading>");

cl.print(tempC);

cl.println("</reading>");

cl.print("<reading>");

cl.print(tempF);

cl.println("</reading>");

cl.print("<reading>");

cl.print(humi);
 cl.println("</reading>");

float currentTemperatureC = bmp.readTemperature();

cl.print("<reading>");

cl.print(currentTemperatureC);

cl.println("</reading>");

float currentTemperatureF = (9.0/5.0)*currentTemperatureC+32.0;

cl.print("<reading>");

cl.print(currentTemperatureF);

cl.println("</reading>");

cl.print("<reading>");

cl.print(bmp.readPressure());

cl.println("</reading>");

cl.print("<reading>");

cl.print(analogRead(potPin));

cl.println("</reading>");

// IMPORTANT: Read the note about GPIO 4 at the pin assignment

cl.print("<reading>");

cl.print(analogRead(LDRPin));

cl.println("</reading>");

cl.print("</inputs>");

void readDHT(){

// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)

humi = dht.readHumidity();

// Read temperature as Celsius (the default)

tempC = dht.readTemperature();

// Read temperature as Fahrenheit (isFahrenheit = true)

tempF = dht.readTemperature(true);

// Check if any reads failed and exit early (to try again).

if (isnan(humi) || isnan(tempC) || isnan(tempF)) {

Serial.println("Failed to read from DHT sensor!");

return;
 }

/*Serial.print("Humidity: ");

Serial.print(humi);

Serial.print(" %\t Temperature: ");

Serial.print(tempC);

Serial.print(" *C ");

Serial.print(tempF);

Serial.println(" *F");*/

View raw code

Before uploading the code, you need to modify the following lines to add your SSID and password.

// Replace with your network credentials

const char* ssid = "REPLACE_WITH_YOUR_SSID";

const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Then, press the upload button to upload the sketch to your ESP32. Make sure you have the right board and COM port
selected.

Create a new file using a text editor, and copy the following code. Alternatively, you can click here to download the
index.html file.

<!DOCTYPE html>

<html>

<head>

<title>ESP32 Weather Station</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" href="data:,">

<script>

function DisplayCurrentTime() {

var date = new Date();

var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();

var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();

var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

time = hours + ":" + minutes + ":" + seconds;

var currentTime = document.getElementById("currentTime");

currentTime.innerHTML = time;
 };

function GetReadings() {

nocache = "&nocache";

var request = new XMLHttpRequest();

request.onreadystatechange = function() {

if (this.status == 200) {

if (this.responseXML != null) {

// XML file received - contains sensor readings

var count;

var num_an = this.responseXML.getElementsByTagName('reading').length;

for (count = 0; count < num_an; count++) {

document.getElementsByClassName("reading")[count].innerHTML =

this.responseXML.getElementsByTagName('reading')
[count].childNodes[0].nodeValue;

// Send HTTP GET request to get the latest sensor readings

request.open("GET", "?update_readings" + nocache, true);

request.send(null);

DisplayCurrentTime();

setTimeout('GetReadings()', 10000);

document.addEventListener('DOMContentLoaded', function() {

DisplayCurrentTime();

GetReadings();

}, false);

</script>

<style>

body {

text-align: center;
 font-family: "Trebuchet MS", Arial;

table {

border-collapse: collapse;

width:60%;

margin-left:auto;

margin-right:auto;

th {

padding: 16px;

background-color: #0043af;

color: white;

tr {

border: 1px solid #ddd;

padding: 16px;

tr:hover {

background-color: #bcbcbc;

td {

border: none;

padding: 16px;

.sensor {

color:white;

font-weight: bold;

background-color: #bcbcbc;

padding: 8px;

</style>

</head>
<body>

<h1>ESP32 Weather Station</h1>

<h3>Last update: <span id="currentTime"></span></h3>

<table>

<tr>

<th>SENSOR</th>

<th>MEASUREMENT</th>

<th>VALUE</th>

</tr>

<tr>

<td><span class="sensor">DHT</span></td>

<td>Temp. Celsius</td>

<td><span class="reading">...</span> *C</td>

</tr>

<tr>

<td><span class="sensor">DHT</span></td>

<td>Temp. Fahrenheit</td>

<td><span class="reading">...</span> *F</td>

</tr>

<tr>

<td><span class="sensor">DHT</span></td>

<td>Humidity</td>

<td><span class="reading">...</span> %</td>

</tr>

<tr>

<td><span class="sensor">BMP180</span></td>

<td>Temp. Celsius</td>

<td><span class="reading">...</span> *C</td>

</tr>

<tr>

<td><span class="sensor">BMP180</span></td>

<td>Temp. Fahrenheit</td>
 <td><span class="reading">...</span> *F</td>

</tr>

<tr>

<td><span class="sensor">BMP180</span></td>

<td>Pressure</td>

<td><span class="reading">...</span> Pa</td>

</tr>

<tr>

<td><span class="sensor">POT</span></td>

<td>Position</td>

<td><span class="reading">...</span>/4095</td>

</tr>

<tr>

<td><span class="sensor">LDR</span></td>

<td>Luminosity</td>

<td><span class="reading">...</span>/4095</td>

</tr>

</table>

</body>

</html>

View raw code

This is HTML, and it will build your web page. In this file you can change how your web page looks, the headings, the
table, etc… The ESP32 will send this HTML text to your browser when you make an HTTP request on the ESP32 IP
address.

Save the file as index.html. Copy the HTML file to your microSD card, and insert the microSD card into the SD card
module.

Now, everything should be ready.

Testing the ESP32 Weather Station Shield Web Server

Open the serial monitor at a baud rate of 115200, and check the ESP32 IP address.

By the end of the project, you have your own ESP32 weather station web server, and all the hardware is well compacted
on a PCB.

Open your browser, type the IP address and you should see a table with the latest sensor readings. The web server
displays the DHT22, BMP180, potentiometer and LDR readings. The readings are updated every 10 seconds without the
need to refresh the web page.
To update the readings without refreshing the web page, we use AJAX. As you can read here, AJAX is a developer’s
dream, because it can update the web page without reloading the page, request and receive data from a server, after
the page has loaded, and send data to a server in the background.

Taking it Further

There’s still room to improve this project, you can use the extra terminals to connect other sensors or a relay. You can
also program the ESP32 to trigger an event when a reading is below or above a certain threshold. The idea is that you
modify the code provided to use the shield in a way that meets your own specific needs.

If you want to get your own all-in-one ESP32 weather station shield, you just need to upload the .zip file with the Gerber
files to the JLCPCB website. You’ll get high quality PCBs for a very reasonable price.