How to design an IoT-based digital watch using ESP32

In this project, we’ll design a digital watch as an Internet-of-Thing (IoT) device. It will connect to an online API through a Wi-Fi network. Based on the user’s location, it will display the local date, time, and weather conditions.

The watch is built using an ESP32 microcontroller and an SSD1306 OLED display. The Weather API retrieves the date, time, and weather information.

Components required

ESP32 x1
SSD1306 OLED x1
Connecting/Dupont wires

Circuit connections
To design the digital watch, we must interface SSD1306 OLED with ESP32. SSD1306 is used as an SPI interface and has the pin diagram below.

To interface the SSD1306 OLED with ESP32, follow the circuit connections described in the table below.

The circuit diagram of the digital watch:

Registering with Weather API
This IoT digital watch relies on the Weather API. Register for an account on WeatherAPI.com (click on the “sign up” button), and you’ll receive an API key to build this project.

Complete the sign-up process by filling out the request information on the form.

Next, you’ll receive a confirmation e-mail. Open your email and confirm your Weather API account.

After confirming your Weather API account, login to WeatherAPI.com with your registered credentials.

After you will login, your API key will be shown. Make a note of this API key for use in the device code.

Arduino sketch
After making the circuit connections and noting your API key from WeatherAPI.com, upload the following sketch to ESP32. Remember to replace your Wi-Fi credentials and API key in the sketch.

How it works
The IoT-based digital watch easily retrieves and displays the date, time, and weather information from the Internet. When the watch is powered on, it initializes the OLED (organic light-emitting diode) display. Then, it retrieves the date, time, and weather information from the Weather API by connecting to the local Wi-Fi network. These network credentials are hard coded in the watch’s sketch.

The data received from the online API is in JSON format. The device sifts through the required data fields from the JSON data to retrieve the correct date, time, and weather information. This data is then rearranged in a proper format and displayed over the SSD1306 OLED. The watch retrieves the date, time, and weather information every ten milliseconds.

The code
The sketch begins by importing the SPI.h, Wire.h, Adafruit_GFX.h, Adafruit_SSD1306.h, WiFi.h, HTTPClient.h, and ArduinoJson.h libraries.

The SPI.h, Wire.h, Adafruit_GFX.h, and Adafruit_SSD1306.h libraries are required to work with the SSD1306 OLED.
The WiFi.h and HTTPClient.h libraries connect the watch to the Internet via a Wi-Fi connection.
The ArduinoJson.h sifts through the JSON data from the API.

Next, ESP32’s pin assignments with SSD1306 are declared. An object of Adafruit_SSD1306 is instantiated. The variables are declared to store the Wi-Fi SSID and password and the Weather API key.

The variables are declared to store date, time, day, temperature, and humidity values. An object of the StaticJsonDocument class is instantiated to store the received JSON data.

In the setup() function, the baud rate for serial debug messages is set to 115200 bps. The Wi-Fi connection is initialized, and the local IP address is printed to the serial console. The SSD1306 OLED display is also initialized.

The user-defined function, stringToCharArray(), is defined to extract the year, month, date, hour, and minute values from the string received as the “datetime” in JSON data.

In the fetchData() function, ESP32 makes an HTTP request to the Weather API and receives the HTTP response from the API as a payload. The payload is received as JSON data and sifted through for the required date, time, and weather information, which are extracted into global variables and declared. The weekday is calculated by implementing Zeller’s congruence.

In the loop() function, the date, time, day, and weather information are received by calling the fetchData() function. The data fields are displayed on the OLED screen in a pre-determined visual layout.

Results