Published October 19, 2021 © GPL3+

A Big Self-Setting Clock

Use an ESP32, an RTC, and a flexible LED Matrix panel to build this large clock that gets NTP time from the Internet.

IntermediateFull instructions provided4 hours3,278

Things used in this project

Hardware components

Adafruit HUZZAH32 – ESP32 Feather Board

WS2812B RGB 8X32 256 Pixels LED Matrix Flexible Display

DS3231 Real Time Clock Module

LM2596 Buck Regulator Module

Wall charger 5 Volt 2 Amp

Software apps and online services

Arduino IDE

Hand tools and fabrication machines

Soldering iron (generic)

Hot glue gun (generic)

3D Printer (generic)

OPTIONAL

Story

Overview

I've built several clocks. I like the ones that connect to the Internet and set themselves. This one should be educational since it combines a bunch of different technologies to produce an very interesting clock.

First, we are using an ESP32 processor which comes with built-in WiFi and a lot of powerful features. With its WiFi capabilities, we get NTP or Epoch time from the Internet and use it to configure a DS3231 RTC (real time clock) module.

We are combining it with a 32x8 flexible WS2812B LED Matrix display and using the FastLED library to control the programmable LEDs. I wrote my own matrix routine - i.e. a routine that handles the conversion from the single strand of programmable LEDs (which this display actually is) to a matrix of LEDs addressed by their XY coordinates.

Technically, since the ESP32 is 3.3 volt logic and the LED matrix is 5 volts, we should be using a level shifter for the data line, but I found it unnecessary. The LED display responded fine to 3.3 volt logic signals.

Finally, to display the time on our LED matrix, we need a font suitable for our 32 x 8 LED matrix. And we need software to get the numbers up on the display. So there is a lot going on in our clock software to make this simple clock tick!

Speaking of ticking, our display is only big enough to display hours and minutes. So I am handling seconds in two ways. First, a blinking colon shows seconds. Also, the color of the display tells us approximately where we are in seconds. At the beginning of a minute, the display is green. During the first 30 seconds, it gradually changes from green to blue. During the second 30 seconds, it gradually changes from blue to red, changing back to green when the minute changes. These color changes are accomplished using 256 rainbow hues, a feature built into the FastLED library.

Power is supplied by a small 5 volt wall brick, but we also need 3.3 volts for the ESP32 and RTC. That is derived from an LM2596 adjustable buck regulator module. It needs to be adjusted and set to 3.3 volts out.

Construction / Hardware

Hardware is pretty straight forward. Our ESP32 board is the Adafruit Huzzah ESP32 Feather, though I suspect any ESP32 board would work. The schematic is shown below:

Clock Schematic

The LED display has a three wire input, a three wire output (to a potential 2nd display) and separate power connections. For our purposes, we only need the three wire input, which itself supplies power. We are only powering the LEDs at about 6% of max brightness and less than half are on at any one time, so we don't need to connect the separate power lines. So our 3 wire input to the display consists of +5 volts, ground, and a single data input which is connected to digital pin 21 of the ESP32.

The DS3231 RTC module has a place for a battery to keep the time settings when the clock is turned off, but since the clock resets the RTC to Internet time every time the clock is powered up, the battery is really unnecessary.

The buck regulator is the source of the 3.3 volts used by both the ESP32 and the RTC. It needs to be adjusted to output 3.3 volts using the on-board potentiometer. Set the voltage to 3.3 volts before hooking up to the processor and then check the voltage again under load to verify you have 3.3 volts.

The image above shows how the clock is physically wired up prior to installing the display. The box was 3D printed and has a recess around the top which just accommodates the display. A second 3D printed piece called the "display support" was placed behind the flexible display to keep it straight and give it a little support. Everything in the final assembly including the processor are all fastened in place with hot glue.

Software

Before we get into any detail about software, there are some setup items that need to be taken care of. This clock sets itself through WiFi, so you need to give it your WiFi credentials: WiFi server name and password. You also need to specify your time zone as an offset in hours from GMT. (For example, I am in MST (Mountain Standard Time) which is -7 hours from GMT.) You can also change the NTP time server, if you want to, though that is not necessary.

Another detail needing your attention is the various #includes. You will likely have to install NTPClient, FastLED, and Rtc by Makuna. RtcDS3231.h is a part of this last one. The other items you may already have - I did.

With the necessary libraries installed, you should be able to compile the app. Now let's talk a little bit about how it works.

The software basically consists of three components:

1) A connection to the Internet through WiFi to an NTP time server to get Epoch time, which is defined as the number of seconds since the beginning of 1970.

2) Setting up the RTC (real time clock) and setting it to the correct time using Epoch time.

3) Displaying the time on the display in either 24 or 12 hour format. This involves creating an X-Y matrix where individual LEDs can be addressed by their X-Y coordinates, breaking the time down into its component digits, and then using a 6x8 pixel font to display each of those digits.

Our setup() routine has to deal with all three of the processes above. Our loop() routine has the somewhat easier task of just reading the time from the RTC and putting it up on the display.

There are some helper routines that assist in displaying the time:

The setNUM routine uses our font to place a single digit in one of 4 positions on the display. It does this by storing what goes onto the display in a 32 x 8 array.
The setColon routine just turns the 8 LEDs that make up the blinking colon on or off.
The myHue routine manages the color of the display as a function of seconds since the last minute change.
And finally, the refreshDisplay routine takes the content of the 32x8 array and projects it onto the display, correcting for the fact that the display is actually a single strand of LEDs zig-zagging back and forth across the matrix of LEDs.

Schematics

Code

Matrix Clock

#include <NTPClient.h> //NTPClient by Fabrice Weinberg 3.2.1
#include <WiFi.h>
#include <WiFiUdp.h>
#include <Wire.h>
#include <RtcDS3231.h> // Requires Rtc by Makuna 2.3.5 specifically
#include "FastLED.h" // FastLED by Daniel Garcia 3.6.0

#define NUM_LEDS 256  // # of LEDs in the display
#define DATA_PIN 21 // pin controlling the display

// Your wifi credentials 
const char* ssid      = "Your Network";
const char* password  = "Your Password";
// Other User Settings
const int   GMToffset = -7;  // - 7 = US-MST;  set for your time zone)
const int   format = 12; // time format can be 12 or 24 hour
const char* ntpServer = "us.pool.ntp.org";  // NTP server

RtcDS3231<TwoWire> Rtc(Wire); // instance of RTC
WiFiUDP ntpUDP;  // instance of UDP
NTPClient timeClient(ntpUDP, ntpServer, GMToffset*3600);
CRGB leds[NUM_LEDS];
bool colon=false;
byte myArray[8][32];  // display buffer

byte num [10][8] = {  // our font for numbers 0-9
  { 0x38,  /* 001110   number 0 */
    0x44,  /* 010001 */
    0x4C,  /* 010011 */
    0x54,  /* 010101 */
    0x64,  /* 011001 */
    0x44,  /* 010001 */
    0x38,  /* 001110 */
    0x00},   /* 000000 */      
  { 0x10,  /* 000100   number 1 */
    0x30,  /* 001100 */
    0x10,  /* 000100 */
    0x10,  /* 000100 */
    0x10,  /* 000100 */
    0x10,  /* 000100 */
    0x38,  /* 001110 */
    0x00},   /* 000000 */
  { 0x38,  /* 001110   number 2  */
    0x44,  /* 010001 */
    0x04,  /* 000001 */
    0x18,  /* 000110 */
    0x20,  /* 001000 */
    0x40,  /* 010000 */
    0x7C,  /* 011111 */
    0x00},  /* 000000 */
  { 0x38,  /* 001110   number 3  */
    0x44,  /* 010001 */
    0x04,  /* 000001 */
    0x38,  /* 001110 */
    0x04,  /* 000001 */
    0x44,  /* 010001 */
    0x38,  /* 001110 */
    0x00},  /* 000000 */
  { 0x08,  /* 000010   number 4  */
    0x18,  /* 000110 */
    0x28,  /* 001010 */
    0x48,  /* 010010 */
    0x7C,  /* 011111 */
    0x08,  /* 000010 */
    0x08,  /* 000010 */
    0x00},  /* 000000 */
  { 0x7C,  /* 011111   number 5  */
    0x40,  /* 010000 */
    0x40,  /* 010000 */
    0x78,  /* 011110 */
    0x04,  /* 000001 */
    0x44,  /* 010001 */
    0x38,  /* 001110 */
    0x00},  /* 000000 */
  { 0x18,  /* 000110   number 6  */
    0x20,  /* 001000 */
    0x40,  /* 010000 */
    0x78,  /* 011110 */
    0x44,  /* 010001 */
    0x44,  /* 010001 */
    0x38,  /* 001110 */
    0x00},  /* 000000 */
  { 0x7C,  /* 011111   number 7  */
    0x04,  /* 000001 */
    0x08,  /* 000010 */
    0x10,  /* 000100 */
    0x20,  /* 001000 */
    0x20,  /* 001000 */
    0x20,  /* 001000 */
    0x00},  /* 000000 */
  { 0x38,  /* 001110   number 8  */
    0x44,  /* 010001 */
    0x44,  /* 010001 */
    0x38,  /* 001110 */
    0x44,  /* 010001 */
    0x44,  /* 010001 */
    0x38,  /* 001110 */
    0x00},  /* 000000 */
  { 0x38,  /* 001110   number 9  */
    0x44,  /* 010001 */
    0x44,  /* 010001 */
    0x3C,  /* 001111 */
    0x04,  /* 000001 */
    0x08,  /* 000010 */
    0x30,  /* 001100 */
    0x00}  /* 000000 */
};

void setup () {
  // Connect to WiFi and get NTP time
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
  }
  timeClient.begin();  // Start NTP Time Client
  delay(2000);
  timeClient.update();
  // NTP/Epoch time starts in 1970.  RTC library starts in 2000. 
  // So subtract the 30 extra yrs (946684800UL).
  unsigned long NTPtime = timeClient.getEpochTime()-946684800UL;
  Rtc.Begin();
  Rtc.SetDateTime(NTPtime); // Set RTC to NTP time
  // setup display
  FastLED.setBrightness(15); // even 5 is pretty bright!
  FastLED.addLeds<WS2812B, DATA_PIN, GRB>(leds, NUM_LEDS);  // configure for WS2812B progrmmable LEDs
  FastLED.clear();  //clear the display
  FastLED.show();  
} 

void loop () {
  RtcDateTime currTime = Rtc.GetDateTime();
  int myhour = currTime.Hour();
  if (format==12) {  // if we are using a 12 hour format
    myhour = myhour%12; 
    if (myhour==0)myhour=12;
  }
  setNum(myhour/10,0);  // set first digit of hour
  setNum(myhour%10,1); // set second digit of hour
  int myminute = currTime.Minute();
  setNum(myminute/10,2); // set first digig of minute
  setNum(myminute%10,3);  // set second digit of minute
  int mysecs= currTime.Second();
  setColon(1); // turn colon on
  refreshDisplay(myHue(mysecs));
  delay(500); // wait 1/2 sec
  setColon(0); // turn colon off
  refreshDisplay(myHue(mysecs));
  while (mysecs == currTime.Second()){ // now wait until seconds change
    delay(10); 
    currTime = Rtc.GetDateTime();
  }
  memset(myArray, 0, sizeof myArray);  // clear the display buffer
}

// Sets the LED display to match content of display buffer at a specified color (myHue).
// Takes into account the zig-zap order of the array up and down from right to left
void refreshDisplay(byte myHue) {
  int myCount = 0;
  FastLED.clear();
  for (int x = 31; x > -1; x -= 2) {
    for (int y = 7; y > -1; y--) {
      if (myArray[y][x]) leds[myCount] = CHSV(myHue, 255, 255);
      myCount++;
    }
    for (int y = 0; y < 8; y++) {
      if (myArray[y][x - 1] == 1) leds[myCount] = CHSV(myHue, 255, 255);
      myCount++;
    }
  }
  FastLED.show();
}

// put numbers onto the display using our num[][] font in positions 0-3. 
void setNum(byte number, byte pos) {
  if (pos==0) pos=3;   // change pos to the real location in the array
  else if (pos==1) pos=9;
  else if (pos==2) pos=18;
  else if (pos==3) pos=24;
  for (int x = 0; x < 6; x++) {  // now place the digit's 6x8 font in the display buffer
    for (int y = 0; y < 8; y++) {
     if (num[number][y] & (0b01000000 >> x)) myArray[y][pos+ x] = 1;
    }
  }
}

void setColon(int onOff){  // turn the colon on (1) or off (0)
  myArray[2][16]=onOff;
  myArray[1][16]=onOff;
  myArray[5][16]=onOff;
  myArray[4][16]=onOff;
  myArray[2][15]=onOff;
  myArray[1][15]=onOff;
  myArray[5][15]=onOff;
  myArray[4][15]=onOff;
}

byte myHue(int mySeconds) {     // make display color change from green 
  if (mySeconds<2) return 85;   // through blue to red as seconds advance
  else if (mySeconds > 57)return 0;  // by returning the correct hue
  else return 85 + mySeconds*3; 
}

Credits

Doug Domke

24 projects • 96 followers

A Big Self-Setting Clock

Things used in this project

Hardware components

Software apps and online services

Hand tools and fabrication machines

Story

Overview

Construction / Hardware

Software

Custom parts and enclosures

3D Print for Matrix Clock

Display Support

Schematics

Clock Schematic

Code

Matrix Clock

Credits

Doug Domke

Comments

Embed the widget on your own site

A Big Self-Setting Clock

A Big Self-Setting Clock

Things used in this project

Hardware components

Software apps and online services

Hand tools and fabrication machines

Story

Overview

Construction / Hardware

Software

Custom parts and enclosures

3D Print for Matrix Clock

Display Support

Schematics

Clock Schematic

Code

Matrix Clock

Credits

Doug Domke

Comments

Related channels and tags