Online Weather Widget Using ESP8266

Online Weather Widget Using ESP8266

A couple of weeks ago, we learned how to build an online weather display system that obtained weather information for a particular city and displayed it on an OLED module. We used the Arduino Nano 33 IoT board for that project which is a new board that has a lot of features but is slightly expensive and larger when compared to alternatives. In this post, we will learn how to build this compact and cute little online weather display widget which is similar to the previous project.

The video above covers everything you need to know and also explains how the sketch is put together.

Step 1: Gather the Electronics

We Need The WeMos D1 Mini And A 0.96We Need The WeMos D1 Mini And A 0.96″ OLED Module

We will be using the WeMos D1 mini board that makes use of the ESP8266 chipset and we will use a 0.96” OLED module for the display.

Step 2: Download, Update and Upload the Sketch

Sketch ModulesSketch Modules

OpenWeatherMap ServiceOpenWeatherMap Service

Like the previous project, we will be obtaining the weather information from the OpenWeatherMap service. Download the sketch using the link at the bottom of this post.

We first need to obtain an API key in order to use the OpenWeatherMap service. The OpenWeatherMap service has a free plan which allows for a maximum of 60 API calls per minute. This means that we can request weather information at a maximum rate of once every second which is more than what we need. The video goes over the entire process, but here’s a text version of what needs to be done:

Start by signing up or logging into the OpenWeatherMap service and head over to the API section. Enter the name for a new key and click the generate button. Make a note of this key but do not share it with anyone. It takes a bit of time for this key to get activated so you will have to wait a while. It could take up to an hour for this to complete, but my key was activated within 10 minutes.

Add Your Network CredentialsAdd Your Network Credentials

Add Your API Key And City NameAdd Your API Key And City Name

Start updating the sketch by adding your WiFi credentials as we need to connect to a network for this to work. The other thing you need to do in the sketch is to update the API call with your city information and API key. Make sure you have the correct board support package installed for the ESP8266 board. You will also need to install the ArduinoJSON and u8g2 libraries for the sketch to work. The video takes you through the process of installing all of this.

Select The Right Board SettingsSelect The Right Board Settings

Once completed, connect the board, ensure that you have selected the correct board settings and hit the upload button. Once uploaded, the board will print the status along with the weather information to the serial terminal. You can view this to make sure everything is working as expected, before moving to the next step.

Step 3: Connect the OLED Module and Test

ConnectionsConnections

Now that we have the sketch working correctly, we need to wire up the OLED module. Use the wiring diagram shown above and make sure you connect the correct power supply voltage to the OLED module as some only accept 3.3V.

Wire Up And TestWire Up And Test

Once connected, power on the board and you should see the welcome message. Give the board a few seconds to obtain the weather information and it will print it to the OLED module.

Step 4: Use an Enclosure

All that’s left to do now is to add a suitable enclosure and I will be using this model from Thingiverse (https://www.thingiverse.com/thing:857858). This is the same one that was used for the network time project and I quite like the look of it.

Add Wires And Double Sided Tape To The OLED ModuleAdd Wires And Double Sided Tape To The OLED Module

Place The Board Onto The CoverPlace The Board Onto The Cover

Wire Up The OLED Module To The BoardWire Up The OLED Module To The Board

Add Glue To Seal The EnclosureAdd Glue To Seal The Enclosure

Add wire of suitable length to the OLED module along with some double-sided tape. Side it in place and use some hot glue near the wires to hold it in position. Then, place the board onto the tray/back cover and solder the OLED module to it like before. Finally, push the cover in place and add some glue to hold it in position.

If you liked this build then please consider subscribing to our YouTube channel and following us on social media. It doesn’t cost a thing but your support will help us immensely in continuing to create projects like this.