(62) An internet-synced clock: circular display with GC9A01 controller powered by an ESP8266

by Floris Wouterlood – The Netherlands – November 1, 2022

Summary
Long ago a clock was an instrument maker’s masterpiece, full of cogs and gear wheels powered by a spring or by gravity. Notwithstanding all sorts of decorating boxes, baroque and romance the form factor of an archetype analog clock typically is circular. In the past 50 years or so cheap electronics has supplanted mechanics and the clock instrument maker has become folklore. To examine my nostalgia to times long past I wired an Arduino compatible, 1.28 inch diameter, circular 240*240 pixel TFT display to an ESP8266 microcontroller board. The display has a GC9A01 controller. The sketch instructs the ESP8266 to connect to a WiFi network to pick up a time stamp from an internet server. This feature, together with the wonderful software analog clock simulation provided by Bodmer, creates a perfect, Arduino internet-synced clock. To make my clock as small as possible the soldering board has an ESP8266 Wemos D1 mounted on one side and the display on the opposite side.

figure 1. Top view of an Arduino compatible, 1.28” diameter, circular TFT display. Resolution is 240*240 pixels. This display is controlled by a GC9A01 chip. View combined with a pin connectivity scheme for an ESP8266 microcontroller board

Introduction
Circular displays have become widely available in home appliances, for instance in smart thermostats and even in high-end vacuum cleaners. Their form factor is that of the good old mechanical clock! Remember the big clock at your local train station’s platform with big hands that indicate the hour and the minutes. The circular shaped displays featured in home appliances are Arduino incompatible. I discovered to my surprise several Arduino breakout smll circular TFT displays.

figure 2. Designing the Internet clock: positioning of the circular TFT display on the front and the ESP8266 Wemos D1 mini ‘engine’ on the back of a 4×6 cm soldering board.

Screen diameter of these devices usually is 1.28 inch, with a resolution of 240*240 pixels. The driver is a GC9A01 chip; the interface complies with SPI specifications. These are screens that can for instance be used in sports watches. Fortunately, Adafruit Industries has released an Arduino library that supports the GC9A01 driver chip. Such conditions make it attractive to experiment with these circular displays. An intriguing side question is that of the organization of pixels in a circular display: are they organized in concentric circles or in a standard perpendicular x-y orthogonal array, say rows and columns, and how does software handle a circular screen?

Electronics

• 1x 1.28” diameter 240*240 TFT 4-wire SPI display GC9A01 controller
• 1x ESP8266 Wemos D1 mini microcontroller board
• 1x 6×4 cm double-sided soldering board (14*20 holes)
• 2x 8 pin header socket
• 1x 7-pin header socket
• 1x 5-pin header socket
• 1x 2-pin header socket
• 1x 2-pin pin header
• wire

Construction
Central in my designs is the rule that all principal components be mounted interchangeable. Thus, the ‘breakouts’ in the designs must always be mounted on pin header sockets. In order to keep the footprint of the current Internet synced clock as small as possible a back-to-back construction of the display and the microcontroller was designed. This makes construction slightly more complex than mounting parts side-by-side. The result, however, is attractive: the display is on front and the wires and the ‘engine’ are hidden and do not spoil the view. In a back-to-back construction wires have to be run from one side of the board to the opposite side. This was planned here through an opening to be drilled in the center of the board. Note that in such a construction the pin-pin wiring ‘flips’; the wire bundle will become twisted half a turn.
Most important during soldering in a back-to back construction is to remain continuously alert which pin is on the front of the main board and which (corresponding) pin is on the back. The design: positioning of components and wiring, was done with a drawing program (XaraX) on computer screen. Figure 2 shows the front and back design. As the display needs only four control pins, a series of pins on the microcontroller board remain free. Five of these free pins were planned to be wired to the side pin header socket to be easily available in future experiments. Twin pin headers carrying 3.3V and a double GND header socket were planned as well to complete a functional ‘bench’.

figure 3. Wiring diagram for the wires connecting the display and the microcontroller board. Note that all these wires run from one side of the main board via a central opening to the other side. ‘Free’ pins D1, D3,D4, D6 and D8 of the microcontroller board are wired to a separate socket header (right upper corner, Front diagram); wires running to this socket header (left out here) also run through the central opening in the main board.

Connectivity Table

figure 4. A, Completed and working Internet clock. B, Display removed to show the pin header sockets, the central opening in the main board and the wires soldered to the pin header sockets of the ESP8266 Wemos D1 mini.

Software
A circular design of a display invites to simulate an analog clock. Such clocks exist! A beautiful simulation is the one published by Bodmer in his TFT_eSPI library suite (in the Arduino IDE: File – Examples – TFT_eSPI – 320×240 – TFT_Clock. The essential instructions in this analog clock example were adapted for the present purpose: dial, layout, hour-minute-second hand movements. Bodmer’s original sketch uses compilation time as starting point for the hour-, minute- and second hands. This works fine only when the watch is always connected to a computer that freshly compiles the sketch every time the computer is switched on. In a standalone situation the watch needs to be powered on all the time; else it will fall back to showing compilation time at its start every time that power is applied.
To overcome this handicap I added internet functionality. The ESP8266 has WiFi on board which makes it attractive to connect to the internet, fetch the correct time from the internet and sync the watch.
Thus the sketch starts with instructions to create the fixed parts of the clock: dial, minute markers and dots, central pivot. Then the sketch sets up a local WiFi client and a NTP time client, connects to the local WiFi router, jumps onto the internet, catches UTC time from an internet time server and fills the parameters for the hour (hh), minute (mm) and second (ss). The hh, mm and ss values are passed to the routines of Bodmer’s clock, and the result is a perfect analog clock showing UTC time. An offset added to UTC time creates the time at my own geographical location.

Circular display but no circular arrangement of pixels
Pixels in a circular display are organized in the standard way: square pixels organized in rows and columns. No arrangement in concentric circles!

Note on the number of functional pixels in a 240*240 circular display
One of the first graphical sketches tried with the Adafruit_GC9A01A.h library and the 240*240 circular display was my ‘radar’ sketch* that creates a box with embedded a radar scope that shows a beam with central pivot that continuously 360 degrees sweeps the screen. The scope neatly filled the circular display with the beam equally neatly sweeping and sweeping. Changing offset values demonstrated that the entire radar box surrounding the scope is in fact present in the display controller’s memory but not displayed due to the circularity.
Consider that a 240*240 display contains 57,600 pixels. A circle with a diameter of 240 units embraces π (pi) multiplied with the square of 240/2, or 45,216 pixels. This amounts to 78,5% of the 57,600 pixels inside an entire 240*240 field. The functional number of pixels of what is marketed as a nice 240*240 TFT circular display equals therefore that of a ‘square’ 212*212 pixels display. The price for owning a circular display is the loss of 12,384 pixels, or 3,096 for each of the corners. Also while the screen diameter measures 1.28” the screen radius is 0.64” and the screen diagonal = √2*1.28, or 1.6” due to the unseen pixels. We are dealing with a 1.6” display with the corners pinched off!

Libraries needed

• Adafruit_GFX.h
• Adafruit_GC9A01A.h
• NTPClient.h
• ESP8266WiFi.h
• WiFiUdp.h

Sketch
internet_clock_GC9A010_ESP8266.ino

Download
internet_clock_GC9A010_ESP8266.ino – packed as ZIP file

References

(*) Floris Wouterlood – Connecting a 240×240 TFT display with ST7789 controller with a NodeMCU ESP8266 or an Arduino Nano. TheSolarUniverse, December 24, 2019.