Building a real time clock with a color TFT display is extremely easy using Arduino. The display shows the time, the date, the currect temperature along the MAX and MIN temperature that it has measured. Let's build it!

Step 1: Get the Parts

The parts needed in order to build this project are these:

  1. An Arduino of course, I am using an Arduino Uno clone here. Buy a cheap clone here: http://bit.ly/Cheap_Uno
  2. An ST7735S color tft display. You can buy it here: http://bit.ly/ColorTFT_18
  3. A DS3231 real time clock module with a battery. Get it here: http://goo.gl/WzkCTO
  4. A small breadboard. Get it here: http://bit.ly/SmallBreadboard

The total cost of the parts at the time of writing this text is 12.79$.

Step 2: Connect the DS3231 Real Time Clock Module to Arduino

First we connect the real time clock module to Arduino.

Vcc -> Arduino 5V

GND -> Arduino GND

SDA -> A4 of Arduino

SCL -> A5 of Arduino

Step 3: Connect the ST7735S Display

The next step is connect the ST7735S display. First we plug in the display at the small breadboard and then we connect to the Arduino Uno board. The connection is as this:

Display -> Arduino

LED -> 3.3V

CSK -> D13

SDA -> D11

A0 -> D9


CS -> D10


VCC -> 5V

Please watch the detailed tutorial I have prepared on how to connect the ST7735S to an Arduino Uno here:

Step 4: Upload the Code to Arduino

<#include  <Adafruit_ST7735.h>
#include  <Adafruit_GFX.h>
#include <Wire.h>
#include "Sodaq_DS3231.h"
#include  <SPI.h>

#define TFT_CS     10
#define TFT_RST    8                      
#define TFT_DC     9

Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS,  TFT_DC, TFT_RST);

// Option 2: use any pins but a little slower!
#define TFT_SCLK 13   // set these to be whatever pins you like!
#define TFT_MOSI 11   // set these to be whatever pins you like!

float maxTemperature=0;
float minTemperature=200;
char charMinTemperature[10];
char charMaxTemperature[10];
char timeChar[100];
char dateChar[50];
char temperatureChar[10];

float temperature = 0;
float previousTemperature = 0;

String dateString;
int minuteNow=0;
int minutePrevious=0;

void setup () 
    printText("TEMPERATURE", ST7735_GREEN,30,65,1);  // Temperature Static Text
    printText("MAX", ST7735_RED,18,130,1);
    printText("MIN", ST7735_BLUE,95,130,1);

uint32_t old_ts;

void loop () 
  float temperature = rtc.getTemperature();
  DateTime now = rtc.now(); //get the current date-time
  uint32_t ts = now.getEpoch();

    if (old_ts == 0 || old_ts != ts) {
	old_ts = ts;
  minuteNow = now.minute();
    dateString = getDayOfWeek(now.dayOfWeek())+", ";
    dateString = dateString+String(now.date())+"/"+String(now.month());
    dateString= dateString+"/"+ String(now.year()); 
    minutePrevious = minuteNow;
    String hours = String(now.hour());
      hours = hours+":0"+String(now.minute());
      hours = hours+":"+String(now.minute());
    printText(timeChar, ST7735_WHITE,20,25,3);
    printText(dateChar, ST7735_GREEN,8,5,1);
  if(temperature != previousTemperature)
    previousTemperature = temperature;
    String temperatureString = String(temperature,1);
    printText(temperatureChar, ST7735_WHITE,10,80,3);
    printText("o", ST7735_WHITE,90,75,2);
    printText("C", ST7735_WHITE,105,80,3);

      maxTemperature = temperature;
      dtostrf(maxTemperature,5, 1, charMaxTemperature); 
      printText(charMaxTemperature, ST7735_WHITE,3,145,1);
      printText("o", ST7735_WHITE,35,140,1);
      printText("C", ST7735_WHITE,41,145,1);

if(temperature < minTemperature

{ minTemperature = temperature; dtostrf(minTemperature,5, 1, charMinTemperature); tft.fillRect(75,140,36,18,ST7735_BLACK); printText(charMinTemperature, ST7735_WHITE,80,145,1); printText("o", ST7735_WHITE,112,140,1); printText("C", ST7735_WHITE,118,145,1); } } } delay(1000); }

void setRTCTime() { DateTime dt(2015, 8, 27, 9, 35, 30, 4); // Year, Month, Day, Hour, Minutes, Seconds, Day of Week rtc.setDateTime(dt); //Adjust date-time as defined 'dt' above }void printText(char *text, uint16_t color, int x, int y,int textSize) { tft.setCursor(x, y); tft.setTextColor(color); tft.setTextSize(textSize); tft.setTextWrap(true); tft.print(text); } String getDayOfWeek(int i) { switch(i) { case 1: return "Monday";break; case 2: return "Tuesday";break; case 3: return "Wednesday";break; case 4: return "Thursday";break; case 5: return "Friday";break; case 6: return "Saturday";break; case 7: return "Sunday";break; default: return "Monday";break; } }

Get the code as a file here: http://educ8s.tv/arduino-real-time-clock/

After uploading the code, the first time you run the sketch you have to set the time. Uncomment this line of code here:


Next set current date and time at the following function.

<p>void setRTCTime()<br>{
  DateTime dt(2015, 8, 27, 9, 35, 30, 4); // Year, Month, Day, Hour, Minutes, Seconds, Day of Week
  rtc.setDateTime(dt); //Adjust date-time as defined 'dt' above 

After setting the time, upload the sketch and run it once.

Next, comment the line the sets the time and updload the sketch once more.


Now, the program can keep time with the embedded battery for years!

Enjoy your color Real Time Clock!

Never miss a project by subscribing to my YouTube channel:


<p>looks awesome!</p>
<p>Nice clock</p>

About This Instructable




Bio: I am Nick Koumaris from Sparta, Greece. I'm extremely passionate about electronics, making things and design. I love teaching what I know and sharing ... More »
More by educ8s:Arduino Menu on a Nokia 5110 Lcd Using a Rotary Encoder DIY Art Deco Analog Thermometer Using Arduino Arduino DIY Analog Thermometer 
Add instructable to: