EduKits

Code Kit Cookbook

Ready-to-run examples you can remix and make your own in Code Kit

RTC LCD Analogue Clock

Requires ,

This project displays an analogue clock on a TFT LCD screen, with the time maintained by a real-time clock (RTC) module.

The device shows a traditional analogue clock face with hour, minute, and second hands that update in real-time. The system combines the precision of a PCF8563 RTC module with a colourful ST7789 TFT display to create an accurate and visually appealing timepiece. The clock hands are drawn with different colours—green for hours, blue for minutes, and red for seconds—making it easy to read at a glance.

Parts List

  • ESP32-S3 microcontroller board (or any Arduino or ESP32 board that is compatible with Code Kit, though wiring will differ)
  • ST7789 TFT LCD display (240×240 pixels)
  • PCF8563 RTC (Real-Time Clock) module
  • Connecting wires
  • Power supply (USB cable)

Assembly Instructions

  1. Connect the ST7789 TFT LCD display to the ESP32-S3:
    • CS pin to GPIO2
    • DC pin to GPIO7
    • MOSI pin to GPIO3
    • SCLK pin to GPIO4
    • RST pin to GPIO6
  2. Connect the PCF8563 RTC module to the ESP32-S3:
    • SDA pin to GPIO8
    • SCL pin to GPIO9
  3. Double-check all connections
    • Ensure proper orientation of display and RTC module
    • Verify wire connections match the pin assignments in the code

Code Breakdown

  1. Setup Section:
    • Initialises I2C communication for the RTC module (only required for ESP32)
    • Configures the ST7789 display with proper orientation and colour settings
    • Sets up global variables for the clock centre, radius, and hand lengths
    • Calls the “init clock” function to create the clock face
  2. Loop Section:
    • Reads the current time from the RTC module
    • Checks if the seconds have changed since the last update
    • If time has changed, calls functions to clear the old hands and draw new ones
  3. draw clock Function:
    • Calculates angles for each clock hand based on current time
    • Draws the second hand in red using trigonometric functions
    • Draws the minute hand in blue, slightly shorter than the second hand
    • Draws the hour hand in green, the shortest of the three
  4. clear clock Function:
    • Erases previous hand positions by drawing them in black
    • Uses the same angles as when drawing to ensure complete removal
  5. init clock Function:
    • Creates the clock face with hour markers
    • Draws 12 tick marks around the perimeter of the clock face