Hardware

Brief characteristics of TFT shield:

Size 3.5 " diagonal,

Resolution 320x240,

Number of colors 65536 (16-bit),

Resistive touch screen (XPT2046 controller),

5 buttons,

RTC IC DS1307 with 3V lithium battery CR1220,

Slot for connecting a micro SD card,

4-pin (2.54 mm) connector for connecting the Bluetooth module HC-05 (-06),

20-pin (2.54 mm) connector for camera (OV7670).

Software

At the moment, the following library functions are implemented for working with graphics: drawing points, lines, circles, rectangles.The most popular library from Adafruit Industries was adapted for working with fonts. Additionally, work with the touch screen and buttons is implemented.Demo sketch to demonstrate the work with graphics and fonts:

#include <YATFT.h>                       // Hardware-specific library
#include <Adafruit_GFX.h>                // Include Adafruit-GFX library
#include <Fonts/FreeSerif9pt7b.h>        // Include Adafruit fonts
#include <Fonts/FreeSerifItalic24pt7b.h>
#include <Fonts/FreeSans24pt7b.h>
YATFT tft(0);
uint32_t  total_time;
uint16_t  Color[4] = {BRIGHTBLUE, BRIGHTGREEN, BRIGHTRED, BRIGHTYELLOW};
uint16_t  Gray[7] = {GRAY0, GRAY1, GRAY2, GRAY3, GRAY4, GRAY5, GRAY6};
/*************************************************************************************************/
void ClearScreen (void)
{
   tft.SetColor(BLACK);   // Set fone color
   tft.ClearDevice();     // Fill all screen
}
void setup()
{
   Serial.begin(115200);  // initialize the serial port
   Serial.println("Arduino TFT_shield Example 1!");
   tft.begin();           // initialize the display
}
void loop()
{
   uint16_t  x, y, x2, y2, mask_gray;
   uint16_t  i;
   ClearScreen();
   // Fonts
   Serial.print("1) View Fonts (");
   total_time = millis();
   tft.SetColor(BRIGHTBLUE);
   tft.SetFont(NULL);
   tft.OutTextXY(5, 5, "Demonstration of work with the TFT display.");
   tft.SetColor(BRIGHTGREEN);
   tft.SetFont(&FreeSerif9pt7b);
   tft.OutTextXY(5, 20, "The   example   uses   fonts   from   Adafruit.");
   tft.SetFont(&FreeSerifItalic24pt7b);
   tft.SetColor(BRIGHTCYAN);
   tft.OutTextXY(5, 45, "3,5''");
   tft.SetColor(BRIGHTRED);
   tft.OutTextXY(90, 45, "QVGA");
   tft.SetColor(BRIGHTMAGENTA);
   tft.OutTextXY(230, 45, "disp.");
   tft.SetColor(BRIGHTYELLOW);
   tft.SetFont(&FreeSans24pt7b);
   tft.OutTextXY(5, 100, "A R D U I N O      +  T F T");
   tft.SetFont(NULL);
   for (i = 0; i < 7; i++)
   {
       tft.SetColor(Gray[i]);
       tft.OutTextXY(5, 170+10*i, "Demonstration of work with the TFT display.");
   }
   total_time = millis() - total_time;
   Serial.print(total_time);
   Serial.println(" ms)");
   delay(3000);
   ClearScreen();
   // Circle
   Serial.print("2) Draw circle (");
   total_time = millis();
   tft.SetColor(BRIGHTRED);
   for (i = 10; i < GetMaxY()>>1; i += 10) {
       tft.DrawCirc(GetMaxX()>>1, GetMaxY()>>1, i);
   }
   total_time = millis() - total_time;
   Serial.print(total_time);
   Serial.println(" ms)");
   delay(1000);
   // DrawFillCircle & DrawFillRect
   Serial.print("3) Draw FillCircle and FillRect (");
   total_time = millis();
   tft.SetColor(BRIGHTRED);
   tft.DrawFillCirc(GetMaxX()>>1,GetMaxY()>>1,110);
   tft.SetColor(BRIGHTCYAN);
   tft.DrawFillRect(GetMaxX()/2-77,GetMaxY()/2-77, GetMaxX()/2+77,GetMaxY()/2+77);
   tft.SetColor(BRIGHTGREEN);
   tft.DrawFillCirc(GetMaxX()>>1,GetMaxY()>>1,77);
   tft.SetColor(BRIGHTMAGENTA);
   tft.DrawFillRect(GetMaxX()/2-54,GetMaxY()/2-54, GetMaxX()/2+54,GetMaxY()/2+54);
   tft.SetColor(BRIGHTBLUE);
   tft.DrawFillCirc(GetMaxX()>>1,GetMaxY()>>1,54);
   tft.SetColor(BRIGHTYELLOW);
   tft.DrawFillRect(GetMaxX()/2-37,GetMaxY()/2-37, GetMaxX()/2+37,GetMaxY()/2+37);
   total_time = millis() - total_time;
   Serial.print(total_time);
   Serial.println(" ms)");
   delay(1000);
   ClearScreen();
   // Arc
   Serial.print("4) Draw Arc (");
   total_time = millis();
   ClearScreen();
   tft.SetColor(BRIGHTBLUE);
   tft.DrawArc((GetMaxX()>>1)-60,(GetMaxY()>>1)-60,(GetMaxX()>>1)+60,(GetMaxY()>>1)+60,20,30,0xFF);
   tft.SetColor(BRIGHTGREEN);
   tft.DrawArc((GetMaxX()>>1)-40,(GetMaxY()>>1)-40,(GetMaxX()>>1)+40,(GetMaxY()>>1)+40,20,30,0xFF);
   tft.SetColor(BRIGHTRED);
   tft.DrawArc((GetMaxX()>>1)-20,(GetMaxY()>>1)-20,(GetMaxX()>>1)+20,(GetMaxY()>>1)+20,20,30,0xFF);
   total_time = millis() - total_time;
   Serial.print(total_time);
   Serial.println(" ms)");
   delay(1000);
   Serial.print("5) Draw FillBevel (");
   total_time = millis();
   tft.SetColor(BRIGHTBLUE);
   tft.DrawFillBevel((GetMaxX()>>1)-60,(GetMaxY()>>1)-60,(GetMaxX()>>1)+60,(GetMaxY()>>1)+60,30);
   tft.SetColor(BRIGHTGREEN);
   tft.DrawFillBevel((GetMaxX()>>1)-40,(GetMaxY()>>1)-40,(GetMaxX()>>1)+40,(GetMaxY()>>1)+40,30);
   tft.SetColor(BRIGHTRED);
   tft.DrawFillBevel((GetMaxX()>>1)-20,(GetMaxY()>>1)-20,(GetMaxX()>>1)+20,(GetMaxY()>>1)+20,30);
   total_time = millis() - total_time;
   Serial.print(total_time);
   Serial.println(" ms)");
   delay(1000);
   ClearScreen();
   Serial.print("6) Draw Arc (");
   total_time = millis();
   for (i = 0; i < 4; i++) {
       tft.SetColor(Color[i]);
       tft.DrawArc((GetMaxX()>>1),(GetMaxY()>>1)-50,(GetMaxX()>>1),(GetMaxY()>>1)+50,50,60,0x11<<i);
   }
   for (i = 0; i < 4; i++) {
       tft.SetColor(Color[i]);
       tft.DrawArc((GetMaxX()>>1),(GetMaxY()>>1)-30,(GetMaxX()>>1),(GetMaxY()>>1)+30,35,45,0x11<<i);
   }
   for (i = 0; i < 4; i++) {
       tft.SetColor(Color[i]);
       tft.DrawArc((GetMaxX()>>1),(GetMaxY()>>1),(GetMaxX()>>1),(GetMaxY()>>1),20,30,0x11<<i);
   }
   total_time = millis() - total_time;
   Serial.print(total_time);
   Serial.println(" ms)");
   delay(1000);
   ClearScreen();
   // Draw 1000 random lines
   Serial.print("7) Draw 1000 random lines (");
   total_time = millis();
   for (i = 0; i < 1000; i++) {
       tft.SetColor(random(65535));
       x  = random(GetMaxX());
       y  = random(GetMaxY());
       x2 = random(GetMaxX());
       y2 = random(GetMaxY());
       tft.DrawLine(x, y, x2, y2);
   }
   total_time = millis() - total_time;
   Serial.print(total_time);
   Serial.println(" ms)");
   delay(1000);
   // Draw 1000 random lines
   Serial.print("8) ReDraw 10 Fill Screen (");
   total_time = millis();
   tft.SetColor(BLACK);   // Set fone color
   tft.ClearDevice();     // Fill all screen
   tft.SetColor(BRIGHTBLUE);   // Set fone color
   tft.ClearDevice();     // Fill all screen
   tft.SetColor(YELLOW);   // Set fone color
   tft.ClearDevice();     // Fill all screen
   tft.SetColor(BRIGHTGREEN);   // Set fone color
   tft.ClearDevice();     // Fill all screen
   tft.SetColor(BRIGHTRED);   // Set fone color
   tft.ClearDevice();     // Fill all screen
   tft.SetColor(BRIGHTCYAN);   // Set fone color
   tft.ClearDevice();     // Fill all screen
   tft.SetColor(GREEN);   // Set fone color
   tft.ClearDevice();     // Fill all screen
   tft.SetColor(BRIGHTYELLOW);   // Set fone color
   tft.ClearDevice();     // Fill all screen
   tft.SetColor(BRIGHTCYAN);   // Set fone color
   tft.ClearDevice();     // Fill all screen
   tft.SetColor(BLACK);   // Set fone color
   tft.ClearDevice();     // Fill all screen
   total_time = millis() - total_time;
   Serial.print(total_time);
   Serial.println(" ms)");
   delay(1000);
}

A demo sketch to demonstrate how to work with fonts and a touch screen:

---------- more ----------

#include <YATFT.h>                       // Hardware-specific library
#include <SPI.h>                         // Include SPI library
#include <XPT2046_Touchscreen.h>         // Include Touchscreen library
#include <Adafruit_GFX.h>                // Include Adafruit-GFX library
#include <Fonts/FreeSerif9pt7b.h>        // Include Adafruit fonts
#include <Fonts/FreeSerifItalic24pt7b.h>
#include <Fonts/FreeSans24pt7b.h>
// Touchscreen: MOSI=11, MISO=12, SCK=13, CS=2
#define CS_PIN  2
XPT2046_Touchscreen ts(CS_PIN, 255);
YATFT tft(0);
#define  Y_BAR_TOP      (GetMaxY()-50)
#define  Y_BAR_BOT      GetMaxY()
#define  BUTTON1_MASK   0x01
#define  BUTTON2_MASK   0x02
#define  BUTTON3_MASK   0x04
#define  BUTTON4_MASK   0x08
#define  BUTTON5_MASK   0x10
/* 
  If using the shield, all control and data lines are fixed, and
  a simpler declaration can optionally be used:
*/
//uint32_t  total_time;
uint16_t  pos_x[] = {0,0,0,0};
uint16_t  pos_y[] = {0,0,0,0};
uint8_t   pos_x_cnt = 0;
uint8_t   pos_y_cnt = 0;
uint16_t  pos_x_mid = 0;
uint16_t  pos_y_mid = 0;
uint16_t  color_paint = WHITE;
uint8_t   buttons = 0;
uint16_t  Color[4] = {BRIGHTBLUE, BRIGHTGREEN, BRIGHTRED, BRIGHTYELLOW};
uint16_t  Gray[7] = {GRAY0, GRAY1, GRAY2, GRAY3, GRAY4, GRAY5, GRAY6};
/*************************************************************************************************/
void ClearScreen (void)
{
   tft.SetColor(BLACK);   // Set fone color
   tft.ClearDevice();     // Fill all screen
}
void setup()
{
   Serial.begin(115200);  // initialize the serial port
   Serial.println("Arduino TFT_shield Example1!");
   ts.begin();            // Init Touchscreen
   SPI.end();             // Disable SPI for correct work DB2 (SS) pin 
   tft.begin();           // initialize the display
   RefreshWindow();
}
void loop()
{
   uint16_t  x, y;
   // Touch
   // When the SS pin is set as OUTPUT, it can be used as
   // a general purpose output port (it doesn't influence
   // SPI operations).
   SPI.begin();
   if (ts.touched())
   {
       TS_Point p = ts.getPoint();
       Serial.print(F("Pressure = "));
       Serial.print(p.z);
       Serial.print(F(", x = "));
       Serial.print(p.x);
       Serial.print(F(", y = "));
       Serial.print(p.y);
       Serial.println();
       delay(3);     // Delay for filtering
       SPI.end();  // Disable SPI for correct work DB2 (SS) pin 
       // Calculate coordinates x, y from code ADC
       if (p.x < 200) p.x = 200;
       if (p.y < 250) p.y = 250;
#if 0
       x = (uint16_t)(320L - ((uint32_t)p.x - 200L)*10L/115L);
       y = (uint16_t)(((uint32_t)p.y - 250L)/15L);
#else
       x = (uint16_t)(0 + ((uint32_t)p.y - 200L)*10L/115L);
       y = (uint16_t)(((uint32_t)p.x - 250L)/15L);
#endif
       // Filtering 
       pos_x_mid = (pos_x[0] + pos_x[1] + pos_x[2] + pos_x[3])/4;
       pos_y_mid = (pos_y[0] + pos_y[1] + pos_y[2] + pos_y[3])/4;
       pos_x[pos_x_cnt++] = x;
       pos_y[pos_y_cnt++] = y;
       pos_x_cnt &= 0x03;
       pos_y_cnt &= 0x03;
       if (x > (pos_x_mid - 10) && x < (pos_x_mid + 10) && y > (pos_y_mid - 10) && y < (pos_y_mid + 10 )) {
           if (y > Y_BAR_TOP && y < Y_BAR_BOT) {
               if (x < 1*(GetMaxX()+1)/5) {  // Touch Bar 1
                   color_paint = Color[0];
                   RefreshTitle();
               } else
               if (x < 2*(GetMaxX()+1)/5) {  // Touch Bar 2
                   color_paint = Color[1];
                   RefreshTitle();
               } else
               if (x < 3*(GetMaxX()+1)/5) {  // Touch Bar 3
                   color_paint = Color[2];
                   RefreshTitle();
               } else
               if (x < 4*(GetMaxX()+1)/5) {  // Touch Bar 4
                   color_paint = Color[3];
                   RefreshTitle();
               } else {                     // Clear screen
                   RefreshWindow();
               }
           } else {
               tft.SetColor(color_paint);
               tft.DrawFillRect(x-1, y-1, x+1, y+1);
           }
       }
   }
   SPI.end();  // Disable SPI for correct work DB2 (SS) pin 
   ScanKey();
}
void  RefreshWindow(void)
{
   color_paint = WHITE;
   ClearScreen();
   for (uint8_t i = 0; i < 4; i++) {
       tft.SetColor(Color[i]);
       tft.DrawFillRect((i+1)*((GetMaxX()+1)/5), Y_BAR_TOP, (i)*((GetMaxX()+1)/5), Y_BAR_BOT);
   }
   RefreshTitle();
   tft.SetColor(WHITE);
   tft.OutTextXY(GetMaxX() - 50, GetMaxY() - 45, "Clear");
   tft.OutTextXY(GetMaxX() - 55, GetMaxY() - 25, "screen");
}
void  RefreshTitle(void)
{
   tft.SetColor(color_paint);
   tft.SetFont(&FreeSerif9pt7b);
   tft.OutTextXY(3, 20, "Touch     color     bar     and     screen     or     press     key.");
}
void  ScanKey(void)
{
   static uint8_t buttons_last = 0;
   buttons = tft.scanButtons();
   if (buttons != buttons_last) {
       if (buttons & BUTTON1_MASK) {  // Bar 1
           color_paint = Color[0];
           RefreshTitle();
       }
       if (buttons & BUTTON2_MASK) {  // Bar 2
           color_paint = Color[1];
           RefreshTitle();
       }
       if (buttons & BUTTON3_MASK) {  // Bar 3
           color_paint = Color[2];
           RefreshTitle();
       }
       if (buttons & BUTTON4_MASK) {  // Bar 4
           color_paint = Color[3];
           RefreshTitle();
       }
       if (buttons & BUTTON5_MASK) {  // Clear screen
           RefreshWindow();
       }
   }
   buttons_last = buttons;
}

Demonstration

Below is added a video demonstrating the work of sketches. To be continued.

P.S. If you like or are interested in this topic, please rate my article. Perhaps your assessment will speed up the next article. :-) Thanks for attention.

Project Details

Hardware

Software

Demonstration