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 video, we
will learn how to build this compact and cute little online weather display widget which
is similar to the previous project.
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. Like the previous project, we will be obtaining
the weather information from the OpenWeatherMap service. Here’s what the sketch modules
will look like. We start by connecting to a WiFI network, as we need internet access.
We then try to communicate to the OpenWeatherMap server using the application programming interface
or API. The server gives us a JSON response which contains the weather information. We
then obtain the weather information from this response and display it on the OLED module.
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. 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. I will be deleting
this API key after the video and it will no longer be valid. 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.
Head over to the API documentation to take a look at all the various options and data
formats that are available for use. You can obtain weather information for a location
by using the city name, city ID, coordinates or ZIP code and we will be using the city
name in this sketch. The page also lists an example response which gives you an idea of
the data that you will receive. You can also change the units for the response and we will
be using metric units for this sketch.
An API call is nothing but a connection request to a server where we specify the data we are
looking for. In this case it is simply a URL or web address. We first have the server name
or endpoint, which is api.openweathermap.org followed by data/2.5 which specifies the API
version. This is followed by the weather request which consists of the city name, units, and
finally, your API key. Since this is a URL, we can enter it into the web browser to obtain
the response. So open up a web browser and enter the URL. You can also do this to check
if your API key has been activated.
As you can see, the response contains all the information that we would need and we
are mainly interested in the temperature, humidity and weather conditions. This type
of a document is called a JSON document. The weather id is the easiest way to obtain the
weather condition and we will use that to update the weather symbol. There is a page
dedicated to weather conditions and the weather id is grouped into certain categories which
makes things easier for us. The only exception is 800, which is used for clear skies and
we will take care of that in the sketch.
Now that we know what the response looks like and how we can obtain the weather information;
it is time to work on the sketch. Download and open up the sketch in the Arduino IDE.
Start 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 update the API call with your city information
and API key. Once again, this API key will be deleted and it will no longer work so obtain
yours and use that instead.
Let’s quickly go over the sketch before we upload it. We will be using the OLED module
in the graphics mode so that we can display the weather symbol and that’s the reason
why we include the u8g2 library and initialize the display using it. This section prints
some text to the OLED module as soon as it is switched ON. This is not exactly needed
but it takes a few seconds for the board to connect to the internet and obtain the weather
information and having a message on the display is better than keeping it blank. You can update
this as required. We then start connecting to the WiFi network and if for any reason,
we cannot connect to the network within 20 seconds, we will restart the board and try
again. Once connected, we print the connection details to the serial terminal.
The loop function simply keeps track of time and calls the updateWeather function after
a certain time interval has lapsed. By default, the function is called every 30 seconds but
you can update this as per your needs. Keep in mind that if you do end up making more
than 60 calls in a minute then your API key will get blocked and you will have to wait
a while before any more successful requests can be made.
The updateWeather function is where all the magic happens. We start by creating the HTTP
request that includes the API call. The server responds with something like this and we already
know that we are only interested in the JSON output. The function then checks to see if
we received a valid response and it then skips the HTTP headers as we are not interested
in them. In order to make sense or parse the JSON response we will be using the ArduinoJSON
library. We first need to allocate the required memory so that the library can work with the
JSON response. We will use the ArduinoJSON assistant for this. The sketch already does
this for us so you do not have to change anything. But for reference, you can open up the ArduinoJSON
assistant and paste the example response that we received earlier. This will tell you how
much memory you need to allocate and it will also give you example commands that you can
use to obtain the information you are interested in.
The function then tries to parse the JSON object and we obtain the information we are
interested in, mainly the temperature, humidity and weather ID. We then close the client as
we have received all the information we need. We will establish a new connection, the next
time the updateWeather function is called. The weather information is printed out to
the serial terminal for debugging purposes and you can omit this if you like. We then
display the humidity as scrolling text and we try to determine the weather condition
so that we can assign the right symbol.
As mentioned earlier, the weather ID is grouped into categories which simplifies things for
us. We can simply use the first digit in the weather ID to identify the category. The only
exception being 800, which is assigned to clear skies. We first check to see if the
weather ID is 800, and if so, we then assign the SUN symbol which is what we will be using
to represent clear skies. We pass this information to the draw function, along with the temperature.
If the weather ID was not 800, then we carry out the modulus operation to obtain the first
digit and switch this to determine the category. If we could not establish a server connection,
then we simply print an error message to the serial port. Finally, we update the lastcalltime
variable so that the function is only called after 30 seconds. The draw functions have
been borrowed from the u8g2 weather sketch. They take care of printing the weather symbol,
temperature and the temperature units.
It’s now time to upload the sketch. Make sure you have the ESP8266 board support package
installed in the Arduino IDE. You can do this by opening up the preferences window, followed
by the board manager URL and adding this URL to the list. Then, open up the boards manager
from the tools menu and type in ESP8266. Install the package that shows up. Once installed,
plug in the board and make sure you select the correct board and board settings as shown
here. Your COM port will vary depending on your system. Open up the serial monitor, hit
the upload button and wait for it to complete. The board will start executing the sketch
and you will be able to view the status on the serial terminal.
Next, wire up the OLED module using the connection diagram shown here. The display communication
lines use 3.3V which is the same for the ESP8266 so there’s no issue here. Many OLED modules
like this one, accept 5V power as they have a 3.3 voltage regulator on the PCB to convert
the input voltage to 3.3V. However, some modules do not have a regulator and you will need
to power them using the 3.3V power pins from the board, instead of the 5V power pins. Make
sure you check this before powering on the boards. Once you are done with the connections,
power on the board and you should see the initial message followed by the weather information.
All that’s left to do now is add a suitable enclosure and I will be using this model from
thingiverse. This is the same one that was used for the network time project and I quite
like the look of it. The board sits perfectly into this tray which also serves as the back
cover. The OLED module sits right at the end of this shell. Start by soldering some wire
of suitable length, to the OLED module. Add a bit of double-sided tape to the bottom and
slide it in position. You can also add some hot glue near the wires to hold it in place.
Then, place the board onto the back-cover tray and solder the OLED wires to it. Finally,
slide it in position and add some hot glue to hold it together.
And that’s how you can build an online weather display widget that’s powered by USB. You
can add the WiFi Auto Connect feature to the board which will eliminate the need to hard
code the WiFi credentials in the sketch. The total cost for this build was less than $9.
These are eBay prices and you can purchase the modules at lower prices from websites
that have longer delivery times.
Don’t forget to like, share and subscribe as your support goes a long way in helping
this channel grow. As always, thank you for watching and I will see you in the next one.