Introduction

This is my first project where I have used an OLED display module and the first idea that came to my mind was making an OLED clock. I am fascinated by OLED technology as it is compact, consumes less power, does not require a backlight and can display deep black levels compared to LCD. Moreover, there are several functions provided by the Adafruit Library that provides simplicity while making OLED related projects. In this project, the OLED display provides date, day and time in digital and analog clock style.

Since the the NodeMCU has a built-in ESP8266 WiFi module, I decided to make use of NTP server to obtain accurate time instead of using an additional RTC module. As an advantage, the user need not set the time manually as the NodeMCU is synchronized to the NTP Server provided it has internet access via WiFi.

Network Time Protocol(NTP)-NTP is a standard Internet protocol(IP) that is used to synchronize computer clock connected to the network.

In my program I have specified the address of the NTP server as "asia.pool.ntp.org" that returns asia sub-zone time. The time I received from NTP server was 5:30 hrs slow from from the time in my country i.e India, so I had to set my offset time(in the code) as 19800( 5hrs 30 mins = 19800 seconds) to obtain the correct time.

Displaying Analog style Clock

I have used trignometric concepts on making the Analog style clock.

The basic logic is to calculate the angle to be moved by the hand( hour, minute and second) of the clock depending upon the time and using sine and cosine functions of the angle to obtain the displaced x, y coordinates. Plotting a line between the center coordinates and the displaced x, y coordinates can provide a correct hand movement of the clock.

We know that the second hand moves 360 degree for every 60 seconds. So for 1 second, the second hand moves 360/60=6 degrees. Similarly, the minute hand moves 360/60mins=6 deg for every minute and the hour hand moves 360/12hrs= 30 degrees for every hour. The center coordinates and the radius of the clock circle is fixed. From the fig below, Using sine and cosine functions we can obtain the displaced x and y coordinates of the clock.

In this example, consider the Second hand is at 30 degrees in the 1st quadrant. Thus, the number of seconds elapsed is 30/6 = 5 seconds ie: the second hand points to hour hand 1. To find the displacement in the x coordinate, we will need to calculate the length of AB that is r*Sin(30). Similarly, for y coordinate displacement, we will need to calculate the length of OB that is r*Cos(30) where 'r' is the radius of the circle.

Using the center coordinates and the displacement coordinates, a line can be plotted indicating Second hand using the Adafruit GFX library function

void drawLine(x_center,y_center,x_center + r*sin(angle),y_center - r*cos(angle), color);

in the 1st quadrant, as the clock moves from 0 to 90 degrees(ie from 0 to 15 seconds), the x coordinate should keep increasing and the y coordinate should keep decreasing. Thats why I have used + r*sin(angle) and - r*cos(angle).

Since the IDE uses radians to calculate trignometric Sine and Cosine(see here), I have multiplied the angle with 0.0174533 (as 1 deg= 0.0174533 rad) to convert it to radians which will give a result between -1 and 1.

Although I believed this syntax would work only for 1st quadrant, I have noticed a full clockwise rotation when I tried it with other quadrants too(with no sign change in displacement coordinates). The change in sign of Sine and Cosine in different quadrants could be the factor (will need to figure it out).

The same concept has been used to indicate the minute and hour hand too.

Uploading the Code

The code requires the following libraries to be installed on the IDE-

1. NTPClient by Fabrice Weinberg.

2. Adafruit SSD1306 by Adafruit.

3. Adafruit GFX Library by Adafruit.

Make sure to enter the SSID and Password of your WiFi router on the source code before uploading it to the NodeMCU.

Here is the final demo of the project.

---

🛠️ เจาะลึกเบื้องหลังการทำงาน (Deep Dive / Technical Analysis)

A hardware DS3231 RTC is great, but eventually, its battery dies. The Internet OLED Clock uses the ESP8266 to transcend local hardware. By tapping directly into the global atomic clock architecture used by the GPS satellite network, your tiny desk clock will literally never be a millisecond wrong.

The Network Time Protocol (NTP)

The code does not use mechanical counting; it uses internet requests.

1. The ESP8266 connects to your home Wi-Fi using <ESP8266WiFi.h>.
2. It hits a global time server (e.g., time.nist.gov or pool.ntp.org) using the User Datagram Protocol (UDP).
3. The Epoch Timestamp: The server responds with a massive single number (Unix Epoch Time). E.g., 1792842100. (This is the exact number of seconds that have passed since Jan 1, 1970).
4. The Translation: The code uses the <TimeLib.h> library to mathematically dissect that massive number into hours, minutes, and seconds!
5. Timezone Offset: You must mathematically add or subtract seconds (e.g., + (7 * 3600) for UTC+7 Bangkok) to fix the timezone offset before displaying it!

Crisp Text Rendering (U8g2)

Standard 16x2 LCDs are ugly.

• You wire an I2C 0.96" or 1.3" OLED Screen to the ESP8266.
• You use the incredibly powerful <U8g2lib.h> library.
• This library allows you to load gorgeous, anti-aliased TrueType fonts into the processor memory.
• u8g2.setFont(u8g2_font_logisoso24_tr); -> Draws massive, beautiful, glowing white numbers that look like high-end commercial electronics.

Tooling Required

• ESP8266 (NodeMCU / D1 Mini) or ESP32.
• 0.96" or 1.3" I2C OLED Display (SSD1306/SH1106).
• A reliable 5V Micro-USB cable and wall adapter.