Published June 4, 2020 © GPL3+

Internet OLED Clock

Uses NTP server to display day, date, time in analog and digital fashion using OLED display.

BeginnerShowcase (no instructions)7,966

Things used in this project

Hardware components

NodeMCU ESP8266 Breakout Board

DIYables OLED Display 128x64 0.96 inch, I2C Interface

DIYables Jumper Wires

Software apps and online services

Arduino IDE

Story

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.

plotting second hand in 1st quadrant

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.

Code

Source Code

//Self Adjusting OLED Clock 
//by Shubham Santosh


#include<ESP8266WiFi.h>
#include<NTPClient.h>
#include<WiFiUdp.h>
#include<SPI.h>
#include<Adafruit_SSD1306.h>
#include<Adafruit_GFX.h>
#include<Wire.h>

#define utcoffset 19800   // adds 19800 seconds = 5hr and 30 mins

Adafruit_SSD1306 display(128,64,&Wire,-1);
WiFiUDP ntp;
NTPClient timeclient(ntp,"asia.pool.ntp.org",utcoffset);

const char *ssid= " Enter SSID";               // enter SSID of your WiFi router
const char *password= "Enter Password";        // enter password of the router


String Week[7] = {"Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"};

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid,password);
  display.begin(SSD1306_SWITCHCAPVCC,0x3C);
  /*if(!(display.begin(SSD1306_SWITCHCAPVCC,0x3C)))
  {
    Serial.println("Connection Error");
    while (true)
    {continue;}
  }
  */
  delay(1000);

  // animation
display.clearDisplay();
display.setTextColor(WHITE);
display.setCursor(0,0);
display.setTextSize(2);
display.println("OLED");
display.setCursor(0,32);
display.println("CLOCK");
display.display();
display.startscrollright(0x00,0x05);
delay(1500);
display.invertDisplay(1);
display.stopscroll();
delay(1000);

    // displays ssid of the router to be connected
display.invertDisplay(0);
display.clearDisplay();
display.setCursor(0,0);
display.setTextColor(WHITE);
display.setTextSize(2);
display.println("CONNECTING");
display.setCursor(52,16);
display.println("TO");
display.setTextSize(1);
display.println(ssid);
display.display();
while(WiFi.status()!=WL_CONNECTED)
{
  Serial.print(".");
  delay(500);
}
display.setCursor(0,48);
display.setTextSize(2);
display.setTextColor(BLACK,WHITE);
display.print("Connected");
display.display();
delay(500);
display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
}


const int xcenter=90;  //x and y center points for clock
const int ycenter=32;   
const int radius=30;    // radius of clock


void loop() {
  timeclient.update();       
  display.setCursor(0,0);
  display.setTextSize(2);
  display.setTextColor(BLACK,WHITE);
  display.println("INDIA");     
  display.setTextColor(WHITE);
  display.setTextSize(1);
  display.println();
  display.println(Week[timeclient.getDay()]);
  display.println();
  display.println(timeclient.getFormattedTime());
  display.println();
  
  // to obtain and display date
  
  int epochtime=timeclient.getEpochTime();
  struct tm *ptm = gmtime ((time_t *)&epochtime); 
  display.print(ptm->tm_mday);
  display.print(":");
  display.print( ptm->tm_mon+1);
  display.print(":");
  display.println(ptm->tm_year+1900);
  
  // to display clock
  
  display.drawCircle(xcenter,ycenter,radius,WHITE);
  displaytime(timeclient.getHours(),timeclient.getMinutes(),timeclient.getSeconds());
  display.display();
  display.clearDisplay();
  delay(1000);
}

void displaytime(int hours,int mins,int secs)
{
  int Sangle=secs*6;                        // second angle 
  int Mangle=mins*6;                         //minute angle
  int Hangle;                            // hour angle
  if(hours>=0 and hours<=12)
  Hangle=30*hours+map(mins,0,60,0,30);      // map for minor adjustments in hour hand
  else if(hours>12)              // hour format is 24hrs
  Hangle=(hours-12)*30+map(mins,0,60,0,30);  
  
    //for displaying seconds
  int shiftSecX=0.8*radius*sin(Sangle*0.0174533);      //shifted x coordinate of second,0.8 is the 
  int shiftSecY=0.8*radius*cos(Sangle*0.0174533);      //shifted y coordinate of second

 // if(Sangle>=0 and Sangle<=90)
 display.drawLine(xcenter,ycenter,xcenter+shiftSecX,ycenter-shiftSecY,WHITE);    //1st quadrant
/* else if(Sangle>90 and Sangle<=180)
 display.drawLine(xcenter,ycenter,xcenter+shiftSecX,ycenter-shiftSecY,WHITE);    //4th quadrant
 else if(Sangle>180 and Sangle<=270)
 display.drawLine(xcenter,ycenter,xcenter+shiftSecX,ycenter-shiftSecY,WHITE);    // 3rd quadrant
  else if(Sangle>270 and Sangle<=354)
display.drawLine(xcenter,ycenter,xcenter+shiftSecX,ycenter-shiftSecY,WHITE);    // 2nd quadrant
*/
//for displaying minutes
  int shiftMinX=radius*sin(Mangle*0.0174533);      //shifted x coordinate of minutes
  int shiftMinY=radius*cos(Mangle*0.0174533);      //shifted y coordinate of minutes

  display.drawLine(xcenter,ycenter,xcenter+shiftMinX,ycenter-shiftMinY,WHITE);

//for displaying hours
  int shiftHourX=0.6*radius*sin(Hangle*0.0174533);      //shifted x coordinate of hours
  int shiftHourY=0.6*radius*cos(Hangle*0.0174533);      //shifted y coordinate of hours

  display.drawLine(xcenter,ycenter,xcenter+shiftHourX,ycenter-shiftHourY,WHITE);

/*
// for testing purpose
  Serial.print(Sangle);
  Serial.print("\t");
  Serial.print(sin(Sangle*0.0174533));
  Serial.print("\t");
  Serial.print(cos(Sangle*0.0174533));
  Serial.print("\t");
  Serial.println(timeclient.getSeconds());
*/
}