Real Time Clock & GC9A01 Display Using Visuino

2025-06-04 | By Ron Cutts

License: General Public License Displays Real Time Clocks (RTCs) SPI Arduino

Step 1: What You Will Need

1. Arduino UNO (or any other Arduino or ESP)

2. GC9A01 SPI Display

3. DS1307 RTC module

4. Jumper wires

5. Breadboard

6. Visuino program: Download Visuino

Note: If you plan to use a lot of graphics on the display or more sensor/modules, then you might need a board with larger memory like Arduino UNO R4 WiFi

Step 2: The Circuit

1. Connect GC9A01 Display pin [VCC] to Arduino pin [3.3V]

2. Connect GC9A01 Display pin [GND] to Arduino pin [GND]

3. Connect GC9A01 Display pin [SCL] to Arduino pin [13]

4. Connect GC9A01 Display pin [SDA] to Arduino pin [11]

5. Connect GC9A01 Display pin [DC] to Arduino pin [9]

6. Connect GC9A01 Display pin [CS] to Arduino pin [10]

7. Connect GC9A01 Display pin [RST ] to Arduino pin [8]

8. Connect Encoder module pin [CLK] to Arduino digital pin [2]

9. Connect Encoder module pin [DT] to Arduino digital pin [3]

10. Connect Encoder module pin [+] to Arduino pin [5v]

11. Connect Encoder module pin [-] to Arduino pin [GND]

1. Connect RTC DS1307 module pin[VCC] to Arduino pin[5V]

2. Connect RTC DS1307 module pin[GND] to Arduino pin[GND]

3. Connect RTC DS1307 module pin[SDA] to Arduino pin[SDA]

4. Connect RTC DS1307 module pin[SCL] to Arduino pin[SCL]

Step 3: Start Visuino, and Select the Arduino UNO Board Type

Start Visuino as shown in the first picture. Click on the "Tools" button on the Arduino component (Picture 1) in Visuino. When the dialog appears, select "Arduino UNO" as shown in Picture 2

Step 4: In Visuino Add & Set Components

1. Add "Date/Time Value" component

2. Add "DS1307" component

3. Add "Decode(Split) Date/Time" component

4. Add 3X "Analog Multi Source" component

5. Add 3X "Map Range Analog" component

6. Add "GC9A01 SPI" component

1. Select "DateTimeValue1" and in the properties window set under "Value" the current time & date

2. For all Analog Multi Source components in the properties window, set "Output Pins" to 5

Step 5: In Visuino Set the Display

Select "Display1" and in the properties window set "Background Color" to clBisque and "Orientation" to goDown

Step 1: Open the Display Configuration

1. Double-click on the Display1 component in the diagram.

2. This will open the Elements window for the display.

3. Drag 6X "Draw Angled Line" element to the left side

4. Drag "Draw Scene" to the left side

5. Drag "Draw Ellipse" to the left side

Step 2: Configure Graphical Elements

1. Draw Angled Line1:

   1. In the Elements window, locate the Draw Angled Line1 element.

   2. In the Properties window, configure the following:

   3. Set Begin to 11.

   4. Set End to 90.

   5. Set X to 120.

   6. Set Y to 120.

   7. Set Color to aclBlue

   8. Select Angle and click on the pin icon and select Float SinkPin

2. Draw Angled Line2:

   1. In the Elements window, locate the Draw Angled Line2 element.

   2. In the Properties window, configure the following:

   3. Set Begin to 11.

   4. Set End to 90.

   5. Set X to 120.

   6. Set Y to 120.

   7. Set Color to aclBisque

   8. Select Angle and click on the pin icon and select Float SinkPin

3. Draw Angled Line3:

   1. In the Elements window, locate the Draw Angled Line3 element.

   2. In the Properties window, configure the following:

   3. Set Begin to 11.

   4. Set End to 80.

   5. Set X to 120.

   6. Set Y to 120.

   7. Set Color to aclBlue

   8. Select "Angle" and click on the pin icon and select "Float SinkPin"

4. Draw Angled Line4:

   1. In the Elements window, locate the Draw Angled Line4 element.

   2. In the Properties window, configure the following:

   3. Set Begin to 11.

   4. Set End to 80.

   5. Set X to 120.

   6. Set Y to 120.

   7. Set Color to aclBisque

   8. Select "Angle" and click on the pin icon and select "Float SinkPin"

5. Draw Angled Line5:

   1. In the Elements window, locate the Draw Angled Line5 element.

   2. In the Properties window, configure the following:

   3. Set Begin to 11.

   4. Set End to 100.

   5. Set X to 120.

   6. Set Y to 120.

   7. Set Color to aclRed

   8. Select "Angle" and click on the pin icon and select "Float SinkPin"

6. Draw Angled Line6:

   1. In the Elements window, locate the Draw Angled Line6 element.

   2. In the Properties window, configure the following:

   3. Set Begin to 11.

   4. Set End to 100.

   5. Set X to 120.

   6. Set Y to 120.

   7. Set Color to aclBisque

   8. Select Angle and click on the pin icon and select Float SinkPin

7. Draw Scene1:

   1. In the Elements window, locate the Draw Scene1 element.

   2. In the Properties window, select Elements and click on the 3 dots button.

   3. In the Elements window, add 12X Draw Angled Line elements.

   4. For each Draw Angled Line element, set the properties as follows:

   5. Draw Angled Line1:

      1. Name: Draw Angled Line1

      2. Properties:

      3. Begin: 100

      4. Angle: 0

      5. X: 120

      6. Color: aclBlack

      7. End: 120

      8. Y: 120

   6. Draw Angled Line2:

      1. Name: Draw Angled Line2

      2. Properties:

      3. Begin: 100

      4. Angle: 30

      5. X: 120

      6. Color: aclBlack

      7. End: 120

      8. Y: 120

   7. Draw Angled Line3:

      1. Name: Draw Angled Line3

      2. Properties:

      3. Begin: 100

      4. Angle: 60

      5. X: 120

      6. Color: aclBlack

      7. End: 120

      8. Y: 120

   8. Draw Angled Line4:

      1. Name: Draw Angled Line4

      2. Properties:

      3. Begin: 100

      4. Angle: 90

      5. X: 120

      6. Color: aclBlack

      7. End: 120

      8. Y: 120

   9. Draw Angled Line5:

      1. Name: Draw Angled Line5

      2. Properties:

      3. Begin: 100

      4. Angle: 120

      5. X: 120

      6. Color: aclBlack

      7. End: 120

      8. Y: 120

   10. Draw Angled Line6:

       1. Name: Draw Angled Line6

       2. Properties:

       3. Begin: 100

       4. Angle: 150

       5. X: 120

       6. Color: aclBlack

       7. End: 120

       8. Y: 120

   11. Draw Angled Line7:

       1. Name: Draw Angled Line7

       2. Properties:

       3. Begin: 100

       4. Angle: 180

       5. X: 120

       6. Color: aclBlack

       7. End: 120

       8. Y: 120

   12. Draw Angled Line8:

       1. Name: Draw Angled Line8

       2. Properties:

       3. Begin: 100

       4. Angle: 210

       5. X: 120

       6. Color: aclBlack

       7. End: 120

       8. Y: 120

   13. Draw Angled Line9:

       1. Name: Draw Angled Line9

       2. Properties:

       3. Begin: 100

       4. Angle: 240

       5. X: 120

       6. Color: aclBlack

       7. End: 120

       8. Y: 120

   14. Draw Angled Line10:

       1. Name: Draw Angled Line10

       2. Properties:

       3. Begin: 100

       4. Angle: 270

       5. X: 120

       6. Color: aclBlack

       7. End: 120

       8. Y: 120

   15. Draw Angled Line11:

       1. Name: Draw Angled Line11

       2. Properties:

       3. Begin: 100

       4. Angle: 300

       5. X: 120

       6. Color: aclBlack

       7. End: 120

       8. Y: 120

   16. Draw Angled Line12:

       1. Name: Draw Angled Line12

       2. Properties:

       3. Begin: 100

       4. Angle: 330

       5. X: 120

       6. Color: aclBlack

       7. End: 120

       8. Y: 120

       9. Close the Elements window.

   17. Draw Ellipse1:

       1. In the Elements window, locate the Draw Ellipse1 element.

       2. In the Properties window, configure the following:

       3. Set Width to 20.

       4. Set Height to 19.

       5. Set X to 110.

       6. Set Y to 110.

       7. Set FillColor to aclBlue

       8. Set Color to aclBlue

Step 3: Connect Clock Inputs

1. Draw Ellipse1:

   1. Connect the ClockInputPin to MultiSource2 pin [Pin 0], MultiSource1 pin [Pin 0], and MultiSource3 pin [Pin 0].

2. Draw Angled Line1:

   1. Connect the ClockInputPin to MultiSource2 pin [Pin 4].

3. Draw Angled Line2:

   1. Connect the ClockInputPin to MultiSource2 pin [Pin 1].

4. Draw Angled Line3:

   1. Connect the ClockInputPin to MultiSource1 pin [Pin 4].

5. Draw Angled Line4:

   1. Connect the ClockInputPin to MultiSource1 pin [Pin 1].

6. Draw Angled Line5:

   1. Connect the ClockInputPin to MultiSource3 pin [Pin 4].

7. Draw Angled Line6:

   1. Connect the ClockInputPin to MultiSource3 pin [Pin 1].

Step 6: In Visuino Connect Components

Connect "DateTimeValue1" pin [Out] to "RealTimeClock1" pin [Set]

1. Connect "RealTimeClock1" pin [I2C] to "Arduino" pin [I2C]

2. Connect "RealTimeClock1" pin [Out] to "DecodeDateTime1" pin [In]

3. Connect "DecodeDateTime1" pin [Minute] to "MapRange1" pin [In]

4. Connect "DecodeDateTime1" pin [Hour] to "MapRange2" pin [In]

5. Connect "DecodeDateTime1" pin [Second] to "MapRange3" pin [In]

6. Connect "MapRange1" pin [Out] to "MultiSource2" pin [In]

7. Connect "MapRange2" pin [Out] to "MultiSource1" pin [In]

8. Connect "MapRange3" pin [Out] to "MultiSource3" pin [In]

9. Connect "MultiSource2" pin [Pin[0]] to "Display1" pin [Elements.Draw Ellipse1.Clock]

10. Connect "MultiSource2" pin [Pin[1]] to "Display1" pin [Elements.Draw Angled Line2.Clock]

11. Connect "MultiSource2" pin [Pin[2]] to "Display1" pin [Elements.Draw Angled Line1.Angle]

12. Connect "MultiSource2" pin [Pin[3]] to "Display1" pin [Elements.Draw Angled Line2.Angle]

13. Connect "MultiSource2" pin [Pin[4]] to "Display1" pin [Elements.Draw Angled Line1.Clock]

14. Connect "MultiSource1" pin [Pin[0]] to "Display1" pin [Elements.Draw Ellipse1.Clock]

15. Connect "MultiSource1" pin [Pin[1]] to "Display1" pin [Elements.Draw Angled Line4.Clock]

16. Connect "MultiSource1" pin [Pin[2]] to "Display1" pin [Elements.Draw Angled Line3.Angle]

17. Connect "MultiSource1" pin [Pin[3]] to "Display1" pin [Elements.Draw Angled Line4.Angle]

18. Connect "MultiSource1" pin [Pin[4]] to "Display1" pin [Elements.Draw Angled Line3.Clock]

19. Connect "MultiSource3" pin [Pin[0]] to "Display1" pin [Elements.Draw Ellipse1.Clock]

20. Connect "MultiSource3" pin [Pin[1]] to "Display1" pin [Elements.Draw Angled Line6.Clock]

21. Connect "MultiSource3" pin [Pin[2]] to "Display1" pin [Elements.Draw Angled Line5.Angle]

22. Connect "MultiSource3" pin [Pin[3]] to "Display1" pin [Elements.Draw Angled Line6.Angle]

23. Connect "MultiSource3" pin [Pin[4]] to "Display1" pin [Elements.Draw Angled Line5.Clock]

1. Connect "Display1" pin [Chip Select] to Arduino digital pin [10]

2. Connect "Display1" pin [Data Command] to Arduino digital pin [9]

3. Connect "Display1" pin [Reset] to Arduino digital pin [8]

4. Connect "Display1" Control pin [SPI] to Arduino SPI pin [In]

Step 7: Generate, Compile, and Upload the Arduino Code

In Visuino, at the bottom, click on the "Build" Tab, make sure the correct port is selected, then click the "Compile/Build and Upload" button.

Step 8: Play

Congratulations! You have completed your project with Visuino. Also attached is the Visuino project that I created. You can download it here and open it in Visuino: https://www.visuino.eu

Download Visuino File: GC9A01-ds1307-rtc-CLOCK.visuino

Related Content

DS1302 Real-Time Clock Module: A Reliable Timekeeping Solution

By Antonio Velasco

DS1302 Real-Time Clock Module: Project Applications

By Antonio Velasco

3D Printed PIR Arduino Nano Alarm Clock

By Jim Greever

Adding a Real Time Clock to Raspberry Pi

By Adafruit Industries

Stylish Binary Wall Clock

By John Wittington

DIY Arduino Holographic Matrix Clock

By Mirko Pavleski

Unusual LED Ring Arduino Clock, Temperature, and Humidity meter

By Mirko Pavleski

A Simple Raspberry Pi IoT Clock Using Kiosk Mode

By Nate_Larson

Building an E-Paper Analog Clock with ESP32 - Full Tutorial

By Mirko Pavleski

ESP32 Analog Style VU Meter with GC9A01 Round Displays + Peak Meters

By Mirko Pavleski