Building a Weather Station with BME280 and ESP32 using Arduino IDE

Hello people!

Welcome to another ESP32 experiment. Last time I created a simple webserver to control an ESP32. The idea of it was to access an IP address over a web browser to wirelessly light-up LED's wired to an ESP32 via Wi-Fi Connection. If you haven't read it you should! :) This time I'm gonna combine the ability of the ESP to create web servers with the ability of the BME280 sensor to record weather conditions! So to display those measurements on a browser we're gonna need to create a table using an HTML web page that can be modified with CSS programming. This project is based on randomnerdtutorials.com.

Step 1 - Hardware Requirement

For today here's what we'll need:

• A Microcontroller (ESP32)

• A laptop/PC and compartments to connect to the ESP32

• Exactly 4 Female-Male Jumper Wires

• The BME280 weather sensor

Step 2 - Software Requirement

If you haven't set up the Arduino IDE on your computer you can click here and check out my first article which contains a complete Software setup on Step 2.

If you have set up the Arduino IDE but you're using the BME280 for the first time, then you need to install the library for it first. To do so, in Arduino IDE go to Sketch > Include Library > Manage Libraries... In the search box type Arduino bme 280 and you'll find the following library to install.

Step 3 - Code and Compile

Because I have tested my BME280 before I will straightly use this code to immediately create the webserver and its content. Here's a sneak peek of the upper part of the code. Notice the comment saying "Network Credentials".

That is where we will put the SSID and the password of the Network we are going to use. On a mac, you can easily find the SSID of your network you are currently using by clicking on the WiFi icon, it's the text where you find a checklist icon next to. In my case the SSID is Andromax-M3Y-DE84.

Note : If you are using I2C like I am, don't forget to set up the I2C address to the sensor.

If you scroll to this part below, you can see the HTML web page table configuration using CSS.

 

Step 4 - Circuit

Using the equipment I have prepared before I will now build the circuit. Since all that has to be wired is the BME280, this circuit is only about its powering and communication. Simple right? This is how it should look:

Here's a closer look. In the picture below, you can see my BME280 and the messy iron soldering I did to it. I am powering it via the 3.3V pin using the orange wire and it's GND is connected to the ESP GND using the purple wire. Then the SCL pin is connected to ESP pin 22 using the yellow wire and the SDA pin is connected to ESP pin 21 using the green wire. Voilà!

Step 5 - Upload

Once I was done making the circuit and made sure I had written the correct SSID and the network's password I uploaded the code. Remember to press the Boot button on the ESP32 while the uploader shows the "Connecting" message if needed. If the Arduino IDE is done uploading the ESP32 is ready to work the WiFi connection.

In the Serial Monitor, you can see how the ESP is connecting to the network until it succeeds to get us an IP address.

What we'll do with it is copy it to our web browser. At first, what I got on my browser was this:

Then it turned out that I was using a different network. So, make sure the browser you're using to view the weather measurements is using the same network you have written into the Arduino file uploaded to the ESP.

Step 6 - Observe and Explore

If everything went well the following is what we'll see this on our browser:

To see updated measurements, just refresh the tab!

Hope you had fun! See you next time..