Arduino Nano: Show Date/Time From DS1307 Real Time Clock(RTC) on I2C 2 X 16 LCD Display With Visuino

DS1307 Real Time Clock are widely available low cost I2C RTC modules. They come with a clock and a small battery, and when connected to Arduino, can keep track of real time even when the Arduino board is not powered. I already wrote some Instructables with DS1307. Some of you have asked, how to display the Date and Time on LCD Display.

In this Instructable, I will show you how to connect DS1307 I2C RTC Module, and I2C LCD Display to Arduino, and program it with Visuino to read and display the date and time. I will use the Tiny RTC Module that I have, but it should be very much the same with any other DS1307 Module.

Step 1: Components

1. One Arduino compatible board (I use Arduino Nano, because I have one, but any other will be just fine)
2. One DS1307 Real Time Clock Module (I used Tiny RTC Module but any other DS1307 Module will be just fine)
3. One I2C 16x2 LCD Display (Back side of the LCD with the I2C adapter showed on Picture 2)
4. One small Breadboard (Any breadboard can be used, or any other way to connect 3 wires together)
5. 9 Female-Male jumper wires
6. 2 Female-Female (Black) jumper wires

Step 2: Connect the LCD Module to the Arduino

1. Connect Female-FemaleGround(Black wire) to the LCD Module (Picture 1)
2. Connect the Female end of Female-Male Power(Red wire), SDA(Green wire), and SCL(Yellow wire) to the LCD Module (Picture 1), and leave the Male ends unconnected
3. Connect the other end of the Ground wire(Black wire) to Ground pin of the Arduino board(Picture 2)
4. Connect the Female end of another Female-Male wire(Green wire) to SDA/Analog pin 4 of the Arduino Nano board(Picture 2), and leave the Male end unconnected
5. Connect the Female end of another Female-Male wire(Yellow wire) to SCL/Analog pin 5 of the Arduino Nano board(Picture 2), and leave the Male end unconnected
6. Connect the Female end of anotherFemale-Male Power wire(Red wire) to the 5V Power pin of the Arduino board(Picture 2), and leave the Male end unconnected
7. Picture 3 shows where are the Ground, 5V Power, SDA/Analog pin 4, and SCL/Analog pin 5 pins of the Arduino Nano

Step 3: Connect the Real Time Clock to Arduino

1. Connect Female-Female Ground(Black wire) to the DS1307 RTC Module (Picture 1)
2. Connect the Female end of Female-Male Power(Red wire), SDA(Green wire), and SCL(Yellow wire) to the DS1307 RTC Module (Picture 1), and leave the Male ends unconnected
3. Connect the other end of the Ground wire(Black wire) to Ground pin of the Arduino board(Picture 2)
4. Picture 3 shows in Red where is the Ground pin of the Arduino Nano (In Blue are shown the pins connected in the previous step)

Step 4: Connect the Power, and I2C Wires Together

1. Connect the Male ends of the 3 Power wires(Red wires) - from the Display, the RTC Module, and the Arduino together as example with the help of a Breadboard (Picture 1) - In my case I used a small Breadboard
2. Connect the Male ends of the 3 SDA wires(Green wires) - from the Display, the

   RTC

   Module, and the Arduino together as example with the help of a Breadboard (Picture 2) - In my case I used a small Breadboard

3. Connect the Male ends of the 3 SCL wires(Yellow wires) - from the Display, the

   RTC

   Module, and the Arduino together as example with the help of a Breadboard (Picture 2) - In my case I used a small Breadboard

Step 5: Start Visuino, and Select the Arduino Board Type

To start programming the Arduino, you will need to have the Arduino IDE installed from here: http://www.arduino.cc/.

Make sure that you install 1.6.7 or higher, otherwise this Instructable will not work!

The Visuino: https://www.visuino.com also needs to be installed.

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

Step 6: In Visuino: Add and Connect LCD, RTC, and Decode Date/Time Components

First we need to add components to control the RTC and the LCD Display. The RTC provides Date/Time data. To Display it the way we want, we need to decode it into Integer fields, and for this we will use Decode Date/Time component:

1. Type "lcd" in the Filter box of the Component Toolbox then select the "Liquid Crystal Display (LCD) - I2C" component (Picture 1), and drop it in the design area
2. Connect the "Out" pin of the

   LiquidCrystalDisplay1

   component to the to the "In" pin of the "I2C channel" of the Arduino component (Picture 2)
3. If necessary you may need to change the default Address of the LCD by setting the "Address" property. Check this Instructable on how you can find the address of an I2C device
4. Type "rtc" in the Filter box of the Component Toolbox then select the "Real Time Clock(RTC) DS1307" component (Picture 3), and drop it in the design area
5. Connect the "Control" pin of the RealTimeClock1 component to the to the "In" pin of the I2C channel of the Arduino component (Picture 4)
6. Type "decode" in the Filter box of the Component Toolbox then select the "Decode Date/Time" component (Picture 5), and drop it in the design area
7. Connect the "Out" Output pin of the RealTimeClock1 component to the to the "In" pin of the DecodeDateTime1 component (Picture 6)

Step 7: In Visuino: Add and Configure Text Array Component With the Names of the Months

1. Type "array" in the Filter box of the Component Toolbox then select the "Text Array" component (Picture 1), and drop it in the design area
2. Click on the "Tools" button of the Array1 component (Picture 2) to open the elements editor (Picture 3)
3. In the Elements Editor select the "Value" element on the right, and then click on the "+" button on the left (Picture 3) 13 times to add 13 elements (Picture 4)
4. In the Elements editor, select the second element (Picture 4)
5. In the Object Inspector set the value of the "Value" property to "Jan" (Picture 4)
6. In the Elements editor, select the third element (Picture 5)
7. In the Object Inspector set the value of the "Value" property to "Feb" (Picture 5)
8. Continue setting the "Value" properties for the rest of the Elements to "Mar", "Apr", "May", "Jun", "Jyl", "Aug", "Sep", "Oct", "Nov", "Dec" (Picture 6)

Step 8: In Visuino: Add LCD Text Element to Display Date Separation Text

To display the Date/Time nicely in the LCD we will need to add some fields with the separation text, and the Date/Time values for day, month, year, hours, minutes, and seconds.

First we will add text to form the separation between the Date elements:

1. Click on the "Tools" button of the LiquidCrystalDisplay1 component (Picture 1) to open the elements editor (Picture 2)
2. In the "Elements" editor select the "Text Field" in the right window, and clicking on the "+" button (Picture 2)
3. In the Object Inspector set the "InitialValue" property of the element to " - -" (Picture 3) - This will specify the text to be displayed

Step 9: In Visuino: Add LCD Integer Element to Display the Day

1. In the "Elements" editor select the "Integer Field" in the right window, and clicking on the "+" button (Picture 1)
2. In the Object Inspector set the "Align Left" property of the element to "False" (Picture 2)
3. In the Object Inspector set the "Fill Character" property of the element to "0" (Picture 3)
4. In the Object Inspector set the "Width" property of the element to "2" (Picture 4)

Step 10: In Visuino: Add LCD Elements to Display the Month, and the Year

1. In the "Elements" editor select the "Text Field" in the right window, and clicking on the "+" button (Picture 1)
2. In the Object Inspector set the "Column" property of the element to "3" (Picture 2)
3. In the Object Inspector set the "Width" property of the element to "3" (Picture 2)
4. In the "Elements" editor select the "Integer Field" in the right window, and clicking on the "+" button (Picture 3)
5. In the Object Inspector set the "Align Left" property of the element to "False" (Picture 4)
6. In the Object Inspector set the "Column" property of the element to "7" (Picture 4)
7. In the Object Inspector set the "Fill Character" property of the element to "0" (Picture 4)
8. In the Object Inspector set the "Width" property of the element to "2" (Picture 4)

Step 11: In Visuino: Add LCD Text Element to Display Time Separation Text

1. In the "Elements" editor select the "Text Field" in the right window, and clicking on the "+" button (Picture 1)
2. In the Object Inspector set the "InitialValue" property of the element to " : :" (Picture 2)
3. In the Object Inspector set the "Row" property of the element to "1" (Picture 3)

Step 12: In Visuino: Add LCD Integer Elements to Display the Hour, the Minute, and the Second

1. In the "Elements" editor select the "Integer Field" in the right window, and clicking on the "+" button (Picture 1)
2. In the Object Inspector set the "Column" property of the element to "3" (Picture 2)
3. In the Object Inspector set the "Row" property of the element to "1" (Picture 2)
4. In the Object Inspector set the "Width" property of the element to "3" (Picture 2)
5. In the "Elements" editor select the "Integer Field" in the right window, and clicking on the "+" button (Picture 3)
6. In the Object Inspector set the "Align Left" property of the element to "False" (Picture 4)
7. In the Object Inspector set the "Column" property of the element to "7" (Picture 4)
8. In the Object Inspector set the "Fill Character" property of the element to "0" (Picture 4)
9. In the Object Inspector set the "Row" property of the element to "1" (Picture 4)
10. In the Object Inspector set the "Width" property of the element to "2" (Picture 4)
11. In the "Elements" editor select the "Integer Field" in the right window, and clicking on the "+" button (Picture 5)
12. In the Object Inspector set the "Align Left" property of the element to "False" (Picture 6)
13. In the Object Inspector set the "Column" property of the element to "6" (Picture 6)
14. In the Object Inspector set the "Fill Character" property of the element to "0" (Picture 6)
15. In the Object Inspector set the "Row" property of the element to "1" (Picture 6)
16. In the Object Inspector set the "Width" property of the element to "2" (Picture 6)

Step 13: In Visuino: Make the Connections to Display the Values for Day, Month and Year

1. Connect the "Day" output pin of the DecodeDateTime1 component to the "In" input pin of the IntegerField1 element of the LiquidCrystalDisplay1 component (Picture 1)
2. Connect the "Month" output pin of the DecodeDateTime1 component to the "In" input pin of the Array1 component (Picture 2)
3. Connect the "Out" output pin of the Array1 component to the "In" input pin of the TextField2 element of the LiquidCrystalDisplay1 component (Picture 3)
4. Connect the "Year" output pin of the DecodeDateTime1 component to the "In" input pin of the IntegerField2 element of the LiquidCrystalDisplay1 component (Picture 4)

Step 14: In Visuino: Make the Connections to Display the Values for Hour, Minute and Second

1. Connect the "Hour" output pin of the DecodeDateTime1 component to the "In" input pin of the IntegerField3 element of the LiquidCrystalDisplay1 component (Picture 1)
2. Connect the "Minute" output pin of the DecodeDateTime1 component to the "In" input pin of the IntegerField4 element of the LiquidCrystalDisplay1 component (Picture 2)
3. Connect the "Second" output pin of the DecodeDateTime1 component to the "In" input pin of the IntegerField5 element of the LiquidCrystalDisplay1 component (Picture 3)

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

1. In Visuino, Press F9 or click on the button shown on Picture 1 to generate the Arduino code, and open the Arduino IDE
2. In the Arduino IDE, click on the Upload button, to compile and upload the code (Picture 2)

Step 16: And Play...

Congratulations! You have made a clock with I2C LCD Display driver, and DS1307 Real Time Clock(RTC).

Picture 1, and the Video show the connected and powered up project.

If you power Arduino, you will see the Date and Time displayed on the LCD Display.

On Picture 2 you can see the complete Visuino diagram.

Also attached is the Visuino project, that I created for this Instructable. You can download and open it in Visuino: https://www.visuino.com