Introduction: Arduino Clock Get Started
This instructables show how to build a simple clock with Arduino dev board.
Supplies
- Any Arduino dev board
- Any Arduino compatible display, ILI9341 is recommended for the beginner
- 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.
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:
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:
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:
Step 7: Enjoy!
You just finished a usable project with your Arduino board, It's time to plan next project.
If you still want to try more about clock, here are my previous project for your reference:
- https://www.instructables.com/Live-Regional-Weather-Clock/
- https://www.instructables.com/GIF-Animation-Clock/
- https://www.instructables.com/Live-Weather-Satellite-Image-Clock/
- https://www.instructables.com/ATtiny-Clock/
- https://www.instructables.com/Design-Sewing-Electronics/
- https://www.instructables.com/Design-Watch-Face-With-LVGL/
- https://www.instructables.com/Google-Photo-Clock/
- https://www.instructables.com/Face-Aware-OSD-Photo-Frame/
- https://www.instructables.com/Arduino-BiJin-ToKei/
- https://www.instructables.com/Arduino-Watch-2/
- https://www.instructables.com/Arduino-Watch-Core/
- https://www.instructables.com/TTGO-T-Watch/
- https://www.instructables.com/ESP32-Photo-Clock/
- https://www.instructables.com/ATtiny85-Ring-Watch/
- https://www.instructables.com/ATtiny-Watch-Core/





