DS1307 Real Time Clock & GC9A01 Display Using Visuino

by RonFrtek in Circuits > Arduino

313 Views, 0 Favorites, 0 Comments

DS1307 Real Time Clock & GC9A01 Display Using Visuino

DS1307 Real Time Clock & GC9A01 Display Using Visuino

This tutorial shows how to use the DS1307 Real-Time Clock (RTC) with a GC9A01 Display in Visuino to keep and display accurate time. The project reads the current time from the DS1307 module and creates an analog clock on the GC9A01 circular display.

Watch the video!

What You Will Need

Galaxycore GC9A01.jpg
breadboard.png
arduino.jpg
VisuinoAdvrtisemenTexasInstruments-Release.jpg
rtc-ds1307.jpg
jumper-wires.jpg
  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 sensore/modules then you might need a board with larger memory like Arduino UNO R4 WiFi

The Circuit

2025-03-04_12-59-09.png
  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]


Start Visuino, and Select the Arduino UNO Board Type

select-board-uno.jpg
Visuino-Select-Board-UNO.jpg

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 on Picture 2

In Visuino Add & Set Components

2025-03-05_13-38-39.png
2025-03-05_13-40-02.png
2025-03-05_13-32-54.png
2025-03-05_13-33-30.png
2025-03-05_13-43-11.png
2025-03-05_13-47-22.png
2025-03-05_13-48-41.png
  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" current time & date
  2. For All Analog Multi Source components in the properties window set "Output Pins" to 5

In Visuino Set the Display

2025-03-05_13-50-10.png
2025-03-05_13-50-43.png
2025-03-05_13-51-17.png
2025-03-05_13-51-31.png
2025-03-05_13-51-55.png
2025-03-05_13-52-20.png
2025-03-05_13-52-36.png

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:
  2. In the Elements window, locate the Draw Angled Line1 element.
  3. In the Properties window, configure the following:
  4. Set Begin to 11.
  5. Set End to 90.
  6. Set X to 120.
  7. Set Y to 120.
  8. Set Color to aclBlue
  9. Select Angle and click on the pin icon and select Float SinkPin
  10. Draw Angled Line2:
  11. In the Elements window, locate the Draw Angled Line2 element.
  12. In the Properties window, configure the following:
  13. Set Begin to 11.
  14. Set End to 90.
  15. Set X to 120.
  16. Set Y to 120.
  17. Set Color to aclBisque
  18. Select Angle and click on the pin icon and select Float SinkPin
  19. Draw Angled Line3:
  20. In the Elements window, locate the Draw Angled Line3 element.
  21. In the Properties window, configure the following:
  22. Set Begin to 11.
  23. Set End to 80.
  24. Set X to 120.
  25. Set Y to 120.
  26. Set Color to aclBlue
  27. Select "Angle" and click on the pin icon and select "Float SinkPin"
  28. Draw Angled Line4:
  29. In the Elements window, locate the Draw Angled Line4 element.
  30. In the Properties window, configure the following:
  31. Set Begin to 11.
  32. Set End to 80.
  33. Set X to 120.
  34. Set Y to 120.
  35. Set Color to aclBisque
  36. Select "Angle" and click on the pin icon and select "Float SinkPin"
  37. Draw Angled Line5:
  38. In the Elements window, locate the Draw Angled Line5 element.
  39. In the Properties window, configure the following:
  40. Set Begin to 11.
  41. Set End to 100.
  42. Set X to 120.
  43. Set Y to 120.
  44. Set Color to aclRed
  45. Select "Angle" and click on the pin icon and select "Float SinkPin"
  46. Draw Angled Line6:
  47. In the Elements window, locate the Draw Angled Line6 element.
  48. In the Properties window, configure the following:
  49. Set Begin to 11.
  50. Set End to 100.
  51. Set X to 120.
  52. Set Y to 120.
  53. Set Color to aclBisque
  54. Select Angle and click on the pin icon and select Float SinkPin
  55. Draw Scene1:
  56. In the Elements window, locate the Draw Scene1 element.
  57. In the Properties window, select Elements and click on the 3 dots button.
  58. In the Elements window, add 12X Draw Angled Line elements.
  59. For each Draw Angled Line element, set the properties as follows:
  60. Draw Angled Line1:
  61. Name: Draw Angled Line1
  62. Properties:
  63. Begin: 100
  64. Angle: 0
  65. X: 120
  66. Color: aclBlack
  67. End: 120
  68. Y: 120
  69. Draw Angled Line2:
  70. Name: Draw Angled Line2
  71. Properties:
  72. Begin: 100
  73. Angle: 30
  74. X: 120
  75. Color: aclBlack
  76. End: 120
  77. Y: 120
  78. Draw Angled Line3:
  79. Name: Draw Angled Line3
  80. Properties:
  81. Begin: 100
  82. Angle: 60
  83. X: 120
  84. Color: aclBlack
  85. End: 120
  86. Y: 120
  87. Draw Angled Line4:
  88. Name: Draw Angled Line4
  89. Properties:
  90. Begin: 100
  91. Angle: 90
  92. X: 120
  93. Color: aclBlack
  94. End: 120
  95. Y: 120
  96. Draw Angled Line5:
  97. Name: Draw Angled Line5
  98. Properties:
  99. Begin: 100
  100. Angle: 120
  101. X: 120
  102. Color: aclBlack
  103. End: 120
  104. Y: 120
  105. Draw Angled Line6:
  106. Name: Draw Angled Line6
  107. Properties:
  108. Begin: 100
  109. Angle: 150
  110. X: 120
  111. Color: aclBlack
  112. End: 120
  113. Y: 120
  114. Draw Angled Line7:
  115. Name: Draw Angled Line7
  116. Properties:
  117. Begin: 100
  118. Angle: 180
  119. X: 120
  120. Color: aclBlack
  121. End: 120
  122. Y: 120
  123. Draw Angled Line8:
  124. Name: Draw Angled Line8
  125. Properties:
  126. Begin: 100
  127. Angle: 210
  128. X: 120
  129. Color: aclBlack
  130. End: 120
  131. Y: 120
  132. Draw Angled Line9:
  133. Name: Draw Angled Line9
  134. Properties:
  135. Begin: 100
  136. Angle: 240
  137. X: 120
  138. Color: aclBlack
  139. End: 120
  140. Y: 120
  141. Draw Angled Line10:
  142. Name: Draw Angled Line10
  143. Properties:
  144. Begin: 100
  145. Angle: 270
  146. X: 120
  147. Color: aclBlack
  148. End: 120
  149. Y: 120
  150. Draw Angled Line11:
  151. Name: Draw Angled Line11
  152. Properties:
  153. Begin: 100
  154. Angle: 300
  155. X: 120
  156. Color: aclBlack
  157. End: 120
  158. Y: 120
  159. Draw Angled Line12:
  160. Name: Draw Angled Line12
  161. Properties:
  162. Begin: 100
  163. Angle: 330
  164. X: 120
  165. Color: aclBlack
  166. End: 120
  167. Y: 120
  168. Close the Elements window.
  169. Draw Ellipse1:
  170. In the Elements window, locate the Draw Ellipse1 element.
  171. In the Properties window, configure the following:
  172. Set Width to 20.
  173. Set Height to 19.
  174. Set X to 110.
  175. Set Y to 110.
  176. Set FillColor to aclBlue
  177. Set Color to aclBlue


Step 3: Connect Clock Inputs

  1. Draw Ellipse1:
  2. Connect the ClockInputPin to MultiSource2 pin [Pin 0], MultiSource1 pin [Pin 0], and MultiSource3 pin [Pin 0].
  3. Draw Angled Line1:
  4. Connect the ClockInputPin to MultiSource2 pin [Pin 4].
  5. Draw Angled Line2:
  6. Connect the ClockInputPin to MultiSource2 pin [Pin 1].
  7. Draw Angled Line3:
  8. Connect the ClockInputPin to MultiSource1 pin [Pin 4].
  9. Draw Angled Line4:
  10. Connect the ClockInputPin to MultiSource1 pin [Pin 1].
  11. Draw Angled Line5:
  12. Connect the ClockInputPin to MultiSource3 pin [Pin 4].
  13. Draw Angled Line6:
  14. Connect the ClockInputPin to MultiSource3 pin [Pin 1].





In Visuino Connect Components

2025-03-04_13-49-29.png
GCA-rtc-clock.png
  1. Connect "DateTimeValue1" pin [Out] to "RealTimeClock1" pin [Set]
  2. Connect "RealTimeClock1" pin [I2C] to "Arduino" pin [I2C]
  3. Connect "RealTimeClock1" pin [Out] to "DecodeDateTime1" pin [In]
  4. Connect "DecodeDateTime1" pin [Minute] to "MapRange1" pin [In]
  5. Connect "DecodeDateTime1" pin [Hour] to "MapRange2" pin [In]
  6. Connect "DecodeDateTime1" pin [Second] to "MapRange3" pin [In]
  7. Connect "MapRange1" pin [Out] to "MultiSource2" pin [In]
  8. Connect "MapRange2" pin [Out] to "MultiSource1" pin [In]
  9. Connect "MapRange3" pin [Out] to "MultiSource3" pin [In]
  10. Connect "MultiSource2" pin [Pin[0]] to "Display1" pin [Elements.Draw Ellipse1.Clock]
  11. Connect "MultiSource2" pin [Pin[1]] to "Display1" pin [Elements.Draw Angled Line2.Clock]
  12. Connect "MultiSource2" pin [Pin[2]] to "Display1" pin [Elements.Draw Angled Line1.Angle]
  13. Connect "MultiSource2" pin [Pin[3]] to "Display1" pin [Elements.Draw Angled Line2.Angle]
  14. Connect "MultiSource2" pin [Pin[4]] to "Display1" pin [Elements.Draw Angled Line1.Clock]
  15. Connect "MultiSource1" pin [Pin[0]] to "Display1" pin [Elements.Draw Ellipse1.Clock]
  16. Connect "MultiSource1" pin [Pin[1]] to "Display1" pin [Elements.Draw Angled Line4.Clock]
  17. Connect "MultiSource1" pin [Pin[2]] to "Display1" pin [Elements.Draw Angled Line3.Angle]
  18. Connect "MultiSource1" pin [Pin[3]] to "Display1" pin [Elements.Draw Angled Line4.Angle]
  19. Connect "MultiSource1" pin [Pin[4]] to "Display1" pin [Elements.Draw Angled Line3.Clock]
  20. Connect "MultiSource3" pin [Pin[0]] to "Display1" pin [Elements.Draw Ellipse1.Clock]
  21. Connect "MultiSource3" pin [Pin[1]] to "Display1" pin [Elements.Draw Angled Line6.Clock]
  22. Connect "MultiSource3" pin [Pin[2]] to "Display1" pin [Elements.Draw Angled Line5.Angle]
  23. Connect "MultiSource3" pin [Pin[3]] to "Display1" pin [Elements.Draw Angled Line6.Angle]
  24. 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]


Generate, Compile, and Upload the Arduino Code

Visuino-Compile-UNO.jpg

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

Play

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

Downloads

GC9A01-ds1307-rtc-CLOCK.visuino