Weather and Time Display

Have you ever been excited to go cycling with your friends? You wake up and think that the weather is great, and right as you step out of the house, it starts pouring. I created a compact weather station that serves as a versatile planning tool, constantly updating the current time, date, and weather, along with a 3-day forecast for any location. Using an API Key from openweathermap.org, I can set the location by adjusting latitude and longitude in the software. The display cycles through three screens: main time and date, today’s weather, and the next three days’ forecast.

This weather station simplifies the task of staying informed, providing real-time updates without needing to check a phone. It’s a practical tool for planning outdoor activities, giving quick and reliable information to make decisions efficiently.

This project uses code from the ThingPulse WeatherStation project, licensed under the MIT License © 2018 Daniel Eichhorn.

The video below is how your final product will look like.

1. 1 ESP8266 NodeMCU V3
2. 1 OLED 4 Pin i2c display
3. 4 male to male jumper wires
4. Bread Board (170 holes suffices)
5. Computer (MacOS)
6. Arduino IDE app
7. USB to MicroUSB cable
8. Adapter to USB-C (for macbook)
9. Openweathermap.org account

Downloading the Arduino IDE Application.

https://support.arduino.cc/hc/en-us/articles/360019833020-Download-and-install-Arduino-IDE

For our date and weather, we will need to use openweathermap.org for an API.

Firstly, go to the sign in button and create an account, all you need to do is fill in the required information and we can get started.

Then once you are signed in and have an account, click on your username at the top right – a dropdown should appear

Choose my api keys, and over there, you can generate an API key for this instructable.

We will be using the API Key in one of the later steps.

Visit this website: https://nodemcu-build.com/

Over here, we will have our firmware built.

Leave the default settings and fill in your email then click Start your Build at the bottom of the page.

You will receive an email like after a while, download the float firmware.

Visit this website: https://github.com/marcelstoer/nodemcu-pyflasher/releases/tag/v5.0.0 and download the flasher suited to your laptop.

What flashing the ESP does: It rewrites the firmware of the ESP to add new features like wifi connectivity and web servers, which we will use in our weather station

To open pyflasher, double click on the app icon to give it administrative access.

After, follow the steps in the screen recording.

Open Arduino IDE and download all updates to the app and libraries

Then, on the top left of your screen, click Arduino IDE and go to settings.

In settings, there should be a section called "Additional Board Managers URL".

Paste this link in there to download the board files: https://arduino.esp8266.com/stable/package_esp8266com_index.json

Go to the board and port selection and choose the board in the image above and the port that has your ESP8266.

The board will be grayed out as it is not installed, so click the prompt to install it.

On the left of your Arduino app, there will be a couple of icons, go to the one with the book icon that is called library manager.

You will need to download these libraries below

1. Adafruit SSD1306 by Adafruit (Include dependencies)
2. ESP8266 Weather Station by ThingPulse
3. i2cdetect by Mike Causer
4. ESP8266 and ESP32 OLED driver

Using your 64-pin bread board, NodeMCU, 4 pin OD screen and Male-to-Male jumper wires

Connect GND to GND(Black)

Connect VCC to 3V3(Red)

Connect SDA to D2(Blue)

Connect SCL to D1(Yellow)

The photos above can be used to reference, I took the photos with individual connections just for clearer visuals. When you are connecting, connect all.

For this step, we will be using a pre-made example on Arduino.

Create a new page on Arduino IDE

At the top of your screen, click File and then Examples.

Scroll to the examples from custom libraries and choose ESP8266 Weather Station, then choose WeatherStationDemo.

A long set of code should come up, but we will only be changing certain parts.

Look for //WIFI

Over there, change the lines:

const char* WIFI_SSID = " ";

const char* WIFI_PWD = " ";

And fill in the your wifi name and password that you are connected to with your laptop.

After that, we will be using the API Key from step 2. Look for this line of code.

Depending on your language, change this line of code

String OPEN_WEATHER_MAP_LANGUAGE = "de";

Above this line of code, there should be some notes about what 2 letters to use for your language so just look through and swap out the "de".

Lastly, we will be filling in the location information.

Over on openweathermap.org, look for the city, state or country you want to display.

When you search, the location will come up.

In those searches, there will be a part saying Geo Coords, and next to it will be the latitude and longitude of the place you want to display.

float OPEN_WEATHER_MAP_LOCATION_LAT = XXX;

float OPEN_WEATHER_MAP_LOCATION_LON = XXX;

Substitute your coordinates with the XXX in the code – the first one is the latitude, the second is the longitude.

After this, your code should be done. All that needs to be finished is uploading it onto your ESP8266.

Connect your ESP8266, which should be on the breadboard connected to the OLED Display, to your laptop using a micro-usb to USB C cable. Then, click the tick mark button at the top left of Arduino IDE to verify the code. If everything is good, no error's should come up. If you have any errors, look at the troubleshooting in the next step. Lastly, click the arrow button to upload your code to the ESP8266.

On your display, it should say "connecting to Wi-Fi" along with a wifi symbol. Depending on your connection, it should show your time, date and weather on your screen after a while. Check out the video above to see how your end product will look like.

Missing Libraries Error

Check the libraries list again and check your own libraries to see if they match.

Screen Showing Random Pixels

You need to ensure that the display you are using is a 4 pin i2c OLED Display with GND, VCC, SCL and SDA. If your display is different, this problem is likely to occur.

Another cause of this issue is if you are using the wrong address.

In your code, there should be a line saying const int I2C_DISPLAY_ADDRESS = 0x3c;

Now, there are 2 different options for it, 0x3c or 0x3d.

But how do I know which one to use?

Usually, the default of 0x3c should be correct but in some cases, it might be 0x3d.

To check, we will need to use a different example.

In Arduino IDE, go to Files, then Examples. In examples, scroll to "Examples from Custom Libraries", over there choose 'i2cdetect' and 'i2cdetect' in the dropdown. This will check the address of the screen that your ESP8266 is connected to. Compile and upload the code onto your ESP8266. Wait till it reaches 100%. Then, at the top of your screen, select serial monitor and make sure that it is on 9600 bauds, you can change this at the right most dropdown in the serial monitor area. It will display random lines like in the picture with words. If you see 0x3c then you do not need to change anything, however, if you see 0x3d you will need to change a line of code.

Under //display settings, this line of code should be changed:

const int I2C_DISPLAY_ADDRESS = 0x3c;

into

const int I2C_DISPLAY_ADDRESS = 0x3d;

This should fix the issue of random pixels on your screen.

Doesn't show the right date or time?

This happened to me but it takes 2 minutes to calibrate and show the right information.