Hi guys, Welcome to today’s tutorial. About a year ago I made this tutorial (https://educ8s.tv/arduino-project-real-time-clock-with-ds3231-module/ ) which was about how to create a real-time clock with temperature monitor using the DS3231 real-time clock, an Arduino and a 1602 LCD shield. Today, we will be upgrading that particular project and instead of the LCD shield, we will be using a 1.8″TFT display with the Arduino. This tutorial will be a sort of demonstration to show how easy it is to use the ST7735 based 1.8″ color TFT display with the Arduino.

As an upgrade, Instead of just displaying date, and time like we did the last time, this project displays the current date and time along with the temperature. It also displays the minimum and maximum temperature that has been read.

To better understand how to use the 1.8″ color display, check out this my tutorial on it (https://www.youtube.com/watch?v=boagCpb6DgY)

Components Required and Where to Buy

The following components/parts are required to build this project and each part can be bought by clicking on the link in front of it.

Parts

1. Arduino Uno ▶ https://educ8s.tv/part/ArduinoUno

2. DS3231 RTC module ▶ https://educ8s.tv/part/DS3231

3. 1.8″ Color TFT ▶ https://educ8s.tv/part/7735

4. Small Breadboard ▶ https://educ8s.tv/part/SmallBreadboard

5. Wires ▶ https://educ8s.tv/part/Wires

[adsense]

 

Schematics

Connect the components as shown in the schematics below.

Schematics

The pin connection between the components is described below to make the schematics easier to understand.

For the TFT display and the Arduino;

ST7735 ▶ Arduino
LED â–¶ 3.3V
SCK â–¶ D13
SDA â–¶ D11
DC â–¶ D9
CS â–¶ D10
Reset â–¶ D8
GND â–¶ GND
VCC â–¶ 5V


For DS3231 and Arduino;
DS3231 ▶ Arduino
VCC â–¶ 5V
GND ▶ GND
SDA ▶ A4
SCL ▶ A5

Code

To facilitate communication between the Arduino and other components involved in this project, we will be using the Sodaq library for the DS3231 RTC module and the Adafruit ST7735 Arduino library to facilitate easy communication with the LCD.

To do a brief explanation of the code, as usual, the first thing we do is include the libraries we will be using.

/////////////////////////////////////////////////////////////////
   //         Arduino Real Time Clock fahrenheit         v1.02    //
  //       Get the latest version of the code here:              //
 //       https://educ8s.tv/arduino-real-time-clock/             //
/////////////////////////////////////////////////////////////////


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

Next, we declare the pins of the Arduino to which the LCD is connected after which we create an object of the ST7735 library, with those pins as arguments.

#define TFT_CS     10
#define TFT_RST    8                     
#define TFT_DC     9
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS,  TFT_DC, TFT_RST);

Next, we declare the Code variables including, min temperature, max temperature, date, time etc.

#define TFT_CS     10
#define TFT_RST    8                     
#define TFT_DC     9float maxTemperature=0;
float minTemperature=200;
char charMinTemperature[10];
char charMaxTemperature[10];
char timeChar[100];
char dateChar[50];
char temperatureChar[10];
uint32_t old_ts;

float temperature = 0;
float previousTemperature = 0;

String dateString;
int minuteNow=0;
int minutePrevious=0;
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS,  TFT_DC, TFT_RST);

Next, we write the code for the void setup.

We initialize the system, starting all communication needed to interact with both the screen and the RTC.

void setup () 
{
    tft.initR(INITR_BLACKTAB);
    tft.fillScreen(ST7735_BLACK);
    Serial.begin(57600);
    Wire.begin();
    rtc.begin();

Next, we setup the screen and the create the information to be updated.

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

The last part of the void setup() function is the SetRTCtime function. This function allows us to set the date and time of the RTC. This line should be uncommented the first time the code is to be uploaded and commented out and reuploaded after the date and time have been set.

//setRTCTime();

Next, we move to the void loop function.

The void loop function basically reads the current time and temperature and updates the display with their values but driving this display with the Arduino is a bit slow and results in visible flickering when the information on the display is being updated or changed. To combat this, I developed a small trick which involves only updating some part of the display when needed. This means the amount of data being pushed to the display is minimal thus, there is a reduction in the amount of time it takes to update the display. For example, the temperature of an environment may not change every second so, in the code, We measure temperature and only update the display when there is a difference between the current temperature being displayed and the new readings.

void loop () 
{
  rtc.convertTemperature();
  float temperature = Celcius2Fahrenheit(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();
  if(minuteNow!=minutePrevious)
  {
    dateString = getDayOfWeek(now.dayOfWeek())+", ";
    dateString = dateString+String(now.date())+"/"+String(now.month());
    dateString= dateString+"/"+ String(now.year()); 
    minutePrevious = minuteNow;
    String hours = String(now.hour());
    if(now.minute()<10)
    {
      hours = hours+":0"+String(now.minute());
    }else
    {
      hours = hours+":"+String(now.minute());
    }
    
    hours.toCharArray(timeChar,100);
    tft.fillRect(10,0,160,65,ST7735_BLACK);
    printText(timeChar, ST7735_WHITE,20,25,3);
    dateString.toCharArray(dateChar,50);
    printText(dateChar, ST7735_GREEN,8,5,1);
  }
  
  if(temperature != previousTemperature)
  {
    previousTemperature = temperature;
    String temperatureString = String(temperature,0);
    temperatureString.toCharArray(temperatureChar,10);
    tft.fillRect(10,80,128,30,ST7735_BLACK);
    printText(temperatureChar, ST7735_WHITE,35,80,3);
    printText("o", ST7735_WHITE,85,75,2);
    printText("F", ST7735_WHITE,100,80,3);

    if(temperature>maxTemperature)
    {
      maxTemperature = temperature;
      dtostrf(maxTemperature,3, 0, charMaxTemperature); 
      tft.fillRect(3,142,33,20,ST7735_BLACK);
      printText(charMaxTemperature, ST7735_WHITE,10,145,1);
      printText("o", ST7735_WHITE,35,140,1);
      printText("F", ST7735_WHITE,41,145,1);
    }
    if(temperature<minTemperature)
    {
      minTemperature = temperature;
      dtostrf(minTemperature,4, 0, charMinTemperature); 
      tft.fillRect(75,140,36,18,ST7735_BLACK);
      printText(charMinTemperature, ST7735_WHITE,80,145,1);
      printText("o", ST7735_WHITE,112,140,1);
      printText("F", ST7735_WHITE,118,145,1);
    }
  }
}
    delay(1000);
}

The complete code for the project can be downloaded via the link below.

——————–
CODE
——————–

 

 

Check your connections once again to ensure everything is as it should be, then proceed to upload the code to the Arduino board. Don’t forget to uncomment the line used to set the time and date the first time the code is being uploaded and don’t forget to comment it and re-upload after the time and date has been set.

With the code uploaded the second time, your screen should now look like that of the image below.

Demo

That’s it for today’s tutorial guys, thanks for reading/watching. If you get stuck at any point while building this project, feel free to reach out to me via the comment section, I will be glad to answer whatever questions you might have. Don’t forget to share, like and subscribe on youtube. Thanks!

 

——————–

SUBSCRIBE ON YOUTUBE

——————–

Never miss a video: Subscribe to educ8s.tv