Introduction: Online Weather Display Widget Using the 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.
Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.
Step 1: Gather the Electronics
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
Like the previous project, we will be obtaining the weather information from the OpenWeatherMap service. Download the sketch using the following link: https://www.bitsnblobs.com/wp-content/media/fw/diy/diy-e15.zip
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.
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.
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
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.
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 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.
- YouTube: https://www.youtube.com/channel/UCbWiK1A5RqAugSquBHuyBdA
- Instagram: https://www.instagram.com/bnbe.club/
- Facebook: https://www.facebook.com/BnBe.club
- Twitter: https://twitter.com/bnbe_club
- BnBe Website: https://www.bitsnblobs.com/
Thank you for your support!