Beginner’s Guide to Run TFT LCD Displays

In this article, you will learn how to use TFT LCDs by Arduino boards. From basic commands to professional designs and technics are all explained here. At the end of this article, you can:

• Write texts and numbers with your own font.

• Draw shapes like circle, triangle, square, etc.

• Change screen parameters such as rotation.

Drivers & Libraries

Download the libraries from the Arduino Library Manager.

You will the need the following libraries:

• Adafruit_GFX

• MCUFRIEND_kbv

Including Libraries

#include "Adafruit_GFX.h"
#include "MCUFRIEND_kbv.h"
MCUFRIEND_kbv tft;  

These lines are the core graphics library for displays (written by Adafruit).

Basic Commands

Running the LCD

uint16_t ID = tft.readID();
tft.begin(ID);

The tft.readID function reads ID from the display and put it in ID variable. Then tft.begin function gets ID and the LCD gets ready to work.

Resolution of the Display

Popular sizes of Arduino displays such as 3.5 inch 480×320, 2.8 inch 400×240, 2.4 inch 320×240 and 1.8 inch 220×176.

Color of the Screen

tft.fillScreen(t);

fillScreen function change the color of screen to t color. The t should be a 16bit variable containing UTFT color code.

#define BLACK 0x0000
#define NAVY 0x000F
#define DARKGREEN 0x03E0
#define DARKCYAN 0x03EF
#define MAROON 0x7800
#define PURPLE 0x780F
#define OLIVE 0x7BE0
#define LIGHTGREY 0xC618
#define DARKGREY 0x7BEF
#define BLUE 0x001F
#define GREEN 0x07E0
#define CYAN 0x07FF
#define RED 0xF800
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0
#define WHITE 0xFFFF
#define ORANGE 0xFD20
#define GREENYELLOW 0xAFE5
#define PINK 0xF81F

You can add these lines to the top of your code and just use the name of the color in the functions.

Filling Pixels

tft.drawPixel(x,y,t); //drawPixel(int16_t x, int16_t y, uint16_t t)
tft.readPixel(x,y); //uint16_t readPixel(int16_t x, int16_t y)

drawPixel function fills a pixel in x and y location by t color.

readPixel function read the color of a pixel in x and y location.

Drawing Lines

tft.drawLine(xi,yi,xj,yj,t); 
//drawLine(int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t t)

drawLine function draws a line that starts in xi and yi location ends is in xj and yj and the color is t.

Drawing Rectangles

 tft.fillRect(x,y,w,h,t); 
//fillRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t t)
tft.drawRect(x,y,w,h,t); 
//drawRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t t)

fillRect function draws a filled rectangle in x and y location. w is width, h is height and t is color of the rextangle

drawRect function draws a rectangle in x and y location with w width and h height and t color.

Drawing Round Rectangles

tft.fillRoundRect(x,y,w,h,r,t);
//fillRoundRect (int16_t x, int16_t y, int16_t w, int16_t h, uint8_t R , uint16_t t)
tft.drawRoundRect(x,y,w,h,r,t);
//drawRoundRect(int16_t x, int16_t y, int16_t w, int16_t h, uint8_t R , uint16_t t)

fillRoundRect function draws a filled Rectangle with r radius round corners in x and y location and w width and h height and t color.

drawRoundRect function draws a Rectangle with r radius round corners in x and y location and w width and h height and t color.

Drawing Circles

tft.drawCircle(x,y,r,t); 
//drawCircle(int16_t x, int16_t y, int16_t r, uint16_t t)
tft.fillCircle(x,y,r,t); 
//fillCircle(int16_t x, int16_t y, int16_t r, uint16_t t)

drawCircle function draws a circle in x and y location and r radius and t color.

fillCircle function draws a filled circle in x and y location and r radius and t color.

Drawing Triangles

 tft.drawTriangle(x1,y1,x2,y2,x3,y3,t); 
//drawTriangle(int16_t x1, int16_t y1, int16_t x2, int16_t y2, int16_t x3, int16_t y3,// uint16_t t)
tft.fillTriangle(x1,y1,x2,y2,x3,y3,t); 
//fillTriangle(int16_t x1, int16_t y1, int16_t x2, int16_t y2, int16_t x3, int16_t y3,// uint16_t t)

drawTriangle function draws a triangle with three corner location x, y and z, and t color.

fillTriangle function draws a filled triangle with three corner location x, y and z, and t color.

Displaying Text

 tft.setCursor(x,y); //setCursor(int16_t x, int16_t y) 

This code sets the cursor position to of x and y

tft.setTextColor(t); //setTextColor(uint16_t t)tft.setTextColor(t,b); //setTextColor(uint16_t t, uint16_t b)

The first line sets the color of the text. Next line sets the color of text and its background.

tft.setTextSize(s); //setTextSize(uint8_t s)

This code sets the size of text by s. s is a number between 1 and 5.

tft.write('c'); //write(uint8_t c)

This code displays a character.

tft.println("www.dayalsoft.com");
tft.print("www.dayalsoft.com");

The first function displays a string and moves the cursor to the next line.

The second function just displays the string.

t.setCursor(20, 160);
t.setTextColor(WHITE);
t.setTextColor(WHITE, BLACK); 
t.setTextSize(2);
t.println("www.dayalsoft.com");

This is a code for printing a line.

Rotating the Screen

tft.setRotation(r); //setRotation(uint8_t r) 

This code rotates the screen. 0=0, 1=90, 2=180, 3=270.

Reset

tft.reset();

This code resets the screen.