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!

Step 1: What You Will Need

• Arduino UNO (or any other Arduino or ESP)
• GC9A01 SPI Display
• DS1307 RTC module
• Jumper wires
• Breadboard
• 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

Step 2: The Circuit

• Connect GC9A01 Display pin [VCC] to Arduino pin [3.3V]
• Connect GC9A01 Display pin [GND] to Arduino pin [GND]
• Connect GC9A01 Display pin [SCL] to Arduino pin [13]
• Connect GC9A01 Display pin [SDA] to Arduino pin [11]
• Connect GC9A01 Display pin [DC] to Arduino pin [9]
• Connect GC9A01 Display pin [CS] to Arduino pin [10]
• Connect GC9A01 Display pin [RST ] to Arduino pin [8]
• Connect Encoder module pin [CLK] to Arduino digital pin [2]
• Connect Encoder module pin [DT] to Arduino digital pin [3]
• Connect Encoder module pin [+] to Arduino pin [5v]
• Connect Encoder module pin [-] to Arduino pin [GND]
• Connect RTC DS1307 module pin[VCC] to Arduino pin[5V]
• Connect RTC DS1307 module pin[GND] to Arduino pin[GND]
• Connect RTC DS1307 module pin[SDA] to Arduino pin[SDA]
• 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 on Picture 2

Step 4: In Visuino Add & Set Components

• Add "Date/Time Value" component
• Add "DS1307" component
• Add "Decode(Split) Date/Time" component
• Add 3X "Analog Multi Source" component
• Add 3X "Map Range Analog" component
• Add "GC9A01 SPI" component
• Select "DateTimeValue1" and in the properties window set under "Value" current time & date
• 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

• Double-click on the Display1 component in the diagram.
• This will open the Elements window for the display.
• Drag 6X "Draw Angled Line" element to the left side
• Drag "Draw Scene" to the left side
• Drag "Draw Ellipse" to the left side

Step 2: Configure Graphical Elements

• Draw Angled Line1:
• In the Elements window, locate the Draw Angled Line1 element.
• In the Properties window, configure the following:
• Set Begin to 11.
• Set End to 90.
• Set X to 120.
• Set Y to 120.
• Set Color to aclBlue
• Select Angle and click on the pin icon and select Float SinkPin
• Draw Angled Line2:
• In the Elements window, locate the Draw Angled Line2 element.
• In the Properties window, configure the following:
• Set Begin to 11.
• Set End to 90.
• Set X to 120.
• Set Y to 120.
• Set Color to aclBisque
• Select Angle and click on the pin icon and select Float SinkPin
• Draw Angled Line3:
• In the Elements window, locate the Draw Angled Line3 element.
• In the Properties window, configure the following:
• Set Begin to 11.
• Set End to 80.
• Set X to 120.
• Set Y to 120.
• Set Color to aclBlue
• Select "Angle" and click on the pin icon and select "Float SinkPin"
• Draw Angled Line4:
• In the Elements window, locate the Draw Angled Line4 element.
• In the Properties window, configure the following:
• Set Begin to 11.
• Set End to 80.
• Set X to 120.
• Set Y to 120.
• Set Color to aclBisque
• Select "Angle" and click on the pin icon and select "Float SinkPin"
• Draw Angled Line5:
• In the Elements window, locate the Draw Angled Line5 element.
• In the Properties window, configure the following:
• Set Begin to 11.
• Set End to 100.
• Set X to 120.
• Set Y to 120.
• Set Color to aclRed
• Select "Angle" and click on the pin icon and select "Float SinkPin"
• Draw Angled Line6:
• In the Elements window, locate the Draw Angled Line6 element.
• In the Properties window, configure the following:
• Set Begin to 11.
• Set End to 100.
• Set X to 120.
• Set Y to 120.
• Set Color to aclBisque
• Select Angle and click on the pin icon and select Float SinkPin
• Draw Scene1:
• In the Elements window, locate the Draw Scene1 element.
• In the Properties window, select Elements and click on the 3 dots button.
• In the Elements window, add 12X Draw Angled Line elements.
• For each Draw Angled Line element, set the properties as follows:
• Draw Angled Line1:
• Name: Draw Angled Line1
• Properties:
• Begin: 100
• Angle: 0
• X: 120
• Color: aclBlack
• End: 120
• Y: 120
• Draw Angled Line2:
• Name: Draw Angled Line2
• Properties:
• Begin: 100
• Angle: 30
• X: 120
• Color: aclBlack
• End: 120
• Y: 120
• Draw Angled Line3:
• Name: Draw Angled Line3
• Properties:
• Begin: 100
• Angle: 60
• X: 120
• Color: aclBlack
• End: 120
• Y: 120
• Draw Angled Line4:
• Name: Draw Angled Line4
• Properties:
• Begin: 100
• Angle: 90
• X: 120
• Color: aclBlack
• End: 120
• Y: 120
• Draw Angled Line5:
• Name: Draw Angled Line5
• Properties:
• Begin: 100
• Angle: 120
• X: 120
• Color: aclBlack
• End: 120
• Y: 120
• Draw Angled Line6:
• Name: Draw Angled Line6
• Properties:
• Begin: 100
• Angle: 150
• X: 120
• Color: aclBlack
• End: 120
• Y: 120
• Draw Angled Line7:
• Name: Draw Angled Line7
• Properties:
• Begin: 100
• Angle: 180
• X: 120
• Color: aclBlack
• End: 120
• Y: 120
• Draw Angled Line8:
• Name: Draw Angled Line8
• Properties:
• Begin: 100
• Angle: 210
• X: 120
• Color: aclBlack
• End: 120
• Y: 120
• Draw Angled Line9:
• Name: Draw Angled Line9
• Properties:
• Begin: 100
• Angle: 240
• X: 120
• Color: aclBlack
• End: 120
• Y: 120
• Draw Angled Line10:
• Name: Draw Angled Line10
• Properties:
• Begin: 100
• Angle: 270
• X: 120
• Color: aclBlack
• End: 120
• Y: 120
• Draw Angled Line11:
• Name: Draw Angled Line11
• Properties:
• Begin: 100
• Angle: 300
• X: 120
• Color: aclBlack
• End: 120
• Y: 120
• Draw Angled Line12:
• Name: Draw Angled Line12
• Properties:
• Begin: 100
• Angle: 330
• X: 120
• Color: aclBlack
• End: 120
• Y: 120
• Close the Elements window.
• Draw Ellipse1:
• In the Elements window, locate the Draw Ellipse1 element.
• In the Properties window, configure the following:
• Set Width to 20.
• Set Height to 19.
• Set X to 110.
• Set Y to 110.
• Set FillColor to aclBlue
• Set Color to aclBlue

Step 3: Connect Clock Inputs

• Draw Ellipse1:
• Connect the ClockInputPin to MultiSource2 pin [Pin 0], MultiSource1 pin [Pin 0], and MultiSource3 pin [Pin 0].
• Draw Angled Line1:
• Connect the ClockInputPin to MultiSource2 pin [Pin 4].
• Draw Angled Line2:
• Connect the ClockInputPin to MultiSource2 pin [Pin 1].
• Draw Angled Line3:
• Connect the ClockInputPin to MultiSource1 pin [Pin 4].
• Draw Angled Line4:
• Connect the ClockInputPin to MultiSource1 pin [Pin 1].
• Draw Angled Line5:
• Connect the ClockInputPin to MultiSource3 pin [Pin 4].
• Draw Angled Line6:
• Connect the ClockInputPin to MultiSource3 pin [Pin 1].

Step 6: In Visuino Connect Components

• Connect "DateTimeValue1" pin [Out] to "RealTimeClock1" pin [Set]
• Connect "RealTimeClock1" pin [I2C] to "Arduino" pin [I2C]
• Connect "RealTimeClock1" pin [Out] to "DecodeDateTime1" pin [In]
• Connect "DecodeDateTime1" pin [Minute] to "MapRange1" pin [In]
• Connect "DecodeDateTime1" pin [Hour] to "MapRange2" pin [In]
• Connect "DecodeDateTime1" pin [Second] to "MapRange3" pin [In]
• Connect "MapRange1" pin [Out] to "MultiSource2" pin [In]
• Connect "MapRange2" pin [Out] to "MultiSource1" pin [In]
• Connect "MapRange3" pin [Out] to "MultiSource3" pin [In]
• Connect "MultiSource2" pin [Pin[0]] to "Display1" pin [Elements.Draw Ellipse1.Clock]
• Connect "MultiSource2" pin [Pin[1]] to "Display1" pin [Elements.Draw Angled Line2.Clock]
• Connect "MultiSource2" pin [Pin[2]] to "Display1" pin [Elements.Draw Angled Line1.Angle]
• Connect "MultiSource2" pin [Pin[3]] to "Display1" pin [Elements.Draw Angled Line2.Angle]
• Connect "MultiSource2" pin [Pin[4]] to "Display1" pin [Elements.Draw Angled Line1.Clock]
• Connect "MultiSource1" pin [Pin[0]] to "Display1" pin [Elements.Draw Ellipse1.Clock]
• Connect "MultiSource1" pin [Pin[1]] to "Display1" pin [Elements.Draw Angled Line4.Clock]
• Connect "MultiSource1" pin [Pin[2]] to "Display1" pin [Elements.Draw Angled Line3.Angle]
• Connect "MultiSource1" pin [Pin[3]] to "Display1" pin [Elements.Draw Angled Line4.Angle]
• Connect "MultiSource1" pin [Pin[4]] to "Display1" pin [Elements.Draw Angled Line3.Clock]
• Connect "MultiSource3" pin [Pin[0]] to "Display1" pin [Elements.Draw Ellipse1.Clock]
• Connect "MultiSource3" pin [Pin[1]] to "Display1" pin [Elements.Draw Angled Line6.Clock]
• Connect "MultiSource3" pin [Pin[2]] to "Display1" pin [Elements.Draw Angled Line5.Angle]
• Connect "MultiSource3" pin [Pin[3]] to "Display1" pin [Elements.Draw Angled Line6.Angle]
• Connect "MultiSource3" pin [Pin[4]] to "Display1" pin [Elements.Draw Angled Line5.Clock]
• Connect "Display1" pin [Chip Select] to Arduino digital pin [10]
• Connect "Display1" pin [Data Command] to Arduino digital pin [9]
• Connect "Display1" pin [Reset] to Arduino digital pin [8]
• 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 on 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 for this Project, you can download it here and open it in Visuino: https://www.visuino.eu