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

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

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

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)

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

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

3 More Images

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)

3 More Images

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)

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

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)

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)

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)

3 More Images

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)

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)

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)

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)

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

Attachments

• ArduinoNano_DS1307_RTC_I2C_LCD_Tutorial.zip
  Download