Introduction: Arduino Clock Get Started

About: Make it yourself if you cannot buy one ;)

This instructables show how to build a simple clock with Arduino dev board.

Supplies

  1. Any Arduino dev board
  2. Any Arduino compatible display, ILI9341 is recommended for the beginner
  3. Or simply a Arduino dev device with display

Step 1: Start From Simple Project

Arduino have huge amount of projects you can build, but which should start first?

If you already finished blink and hello world, a clock is a good starting point. A clock is much useful than blink or hello world program, you can actual place it on your desk for display time before you repurpose the hardware to next project.

Step 2: Software Preparation

Arduino IDE

Download and install Arduino IDE latest version if not yet:

https://www.arduino.cc/en/software

Optional: Arduino-ESP32

Follow installation steps to add Arduino-ESP32 support if not yet:

https://docs.espressif.com/projects/arduino-esp32/en/latest/installing.html

Optional: Arduino-Pico

Follow installation step to add Arduino-Pico support if not yet:

https://github.com/earlephilhower/arduino-pico

Arduino_GFX Library

Open Arduino IDE Library Manager by selecting "Tools" menu -> "Manager Libraries...". Search "GFX for various displays" and press "install" button.

You may refer my previous instructables for more information about Arduino_GFX.


Note:

You may refer to Arduino Documentation for the details on how to install/import library to Arduino IDE.

Step 3: Clock Example

Latest version of Arduino_GFX have various clock examples. You can access it at Arduino IDE "File" menu -> "Examples" -> "GFX Library for Arduino" -> "Clock".

AnalogClock.ino and DigitalClock.ino can run by most Arduino compatible board. It simply hardcoded compile time to the code, so once upload the program, it can display current time. However, once reset the board or lost the power, the time start count from the compile time again.

AnalogClockNTP.ino and DigitalClockNTP.ino require WiFi capable board, e.g. ESP32 family board or Pico W/Pico2 W board. You need to fill your WiFi AP details and timezone information, the board will auto get the current time from the Internet NTP server.

const char *SSID_NAME = "YourAP";
const char *SSID_PASSWORD = "PleaseInputYourPasswordHere";
const long gmtOffset_sec = 8 * 60 * 60; // timezone

Step 4: Analog Clock Continuous Sweep Second Hand

Arduino_GFX analog clock example is a little bit different from other GFX library. It spent some effort to reduce the screen flickering and the second hand can sweep continuously, even using the original 16 MHz Arduino Nano. You can find more details at my previous instructables:

https://www.instructables.com/Arduino-Watch-Core/

Step 5: Digital Clock Enlarge Character

Compare with analog clock, digital clock is much simpler. It simply print the time text every second or every minute.

However, the font size is still a problem. Most MCU not powerful enough to handle vector font format, each font character requires to stored in bitmap format, i.e. each character is an image. Large font size means requires more space.

The workaround is just use 1 set of font data but enlarge each pixel, e.g. font size 5 means each pixel draw a 5x5 rectangle.

In Arduino_GFX, you can set font size by:

gfx->setTextSize(4 /* horizontal */, 5 /* vertical */, 2 /* pixel_margin */);

The above code set horizontal size is 4 and vertical size is 5, that means each pixel becomes a 4x5 rectangle. The last parameter is pixel_margin, it means reserve some gap between pixel. If pixel_margin set to 2, it means the 4x5 font size will only draw a 2x3 rectangle actually and leave 2 pixels gap at right and bottom. The pixel_margin is very effective in improving appearance in large font size.

Step 6: Wire Connection

Please follow the default pin connection to connect the dev board and the display (ILI9341 is recommended for beginner).

You can know more about the connection of display and dev board in my previous instructables:

  1. https://www.instructables.com/ArduinoGFX/
  2. https://www.instructables.com/Select-Color-Display-for-ESP32/

Step 7: Enjoy!