instructables

A-Z Guide to Interfacing TFT LCD Displays W/ Arduino

by Electropeak

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 desired font.

Draw shapes like circle, triangle, square, etc.
Display.bmp images on the screen.Change screen parameters such as rotating and inverting color.
Display an animation by Arduino.

A-Z Guide to Interfacing TFT LCD Displays W/ Arduino: Page 1

Step 1: Things Used in This Project

Hardware components rel="nofollow">Arduino Mega 2560 X1

ElectroPeak 3.5 inch TFT Color Display Screen Modu Arduino DUE X1
le X1
Software apps and online services
ElectroPeak 2.4 inch TFT LCD Display Shield X1
Arduino IDE
Arduino UNO & Genuino UNO X1

A-Z Guide to Interfacing TFT LCD Displays W/ Arduino: Page 2

Step 2: Presenting Ideas on Displays

In electronic’s projects, creating an interface between technology to improve image qualities such as
user and system is very important. This interface addressability and contrast. A TFT LCD is an active
could be created by displaying useful data, a menu, matrix LCD, in contrast to passive matrix LCDs or
and ease of access. A beautiful design is also very simple, direct-driven LCDs with a few segments. In
important. Arduino-based projects, the processor frequency is
low. So it is not possible to display complex, high
There are several components to achieve this. LEDs, definition images and high-speed motions. Therefore,
7-segments, Character and Graphic displays, and full-color TFT LCDs can only be used to display
full-color TFT LCDs. The right component for your simple data and commands. In this article, we have
projects depends on the amount of data to be used libraries and advanced technics to display data,
displayed, type of user interaction, and processor charts, menu, etc. with a professional design. This
capacity. TFT LCD is a variant of a liquid-crystal can move your project presentation to a higher level.
display (LCD) that uses thin-film-transistor (TFT)

Step 3: Which Size? Which Controller?

Size of displays affects your project parameters. 220×176. After choosing the right display, It’s time to
Bigger Display is not always better. if you want to choose the right controller. If you want to display
display high-resolution images and signs, you should characters, tests, numbers and static images and the
choose a big size display with higher resolution. But it
speed of display is not important, the Atmega328
decreases the speed of your processing, needs more Arduino boards (such as Arduino UNO) are a proper
space and also needs more current to run. choice. If the size of your code is big, The UNO board
may not be enough. You can use Arduino Mega2560
So, First, you should check the resolution, speed of instead. And if you want to show high resolution
motion, details of color and size of your project’s images and motions with high speed, you should use
images, texts, and numbers. We suggest popular size the ARM core Arduino boards such as Arduino DUE.
of Arduino displays such as 3.5 inch 480×320, 2.8
inch 400×240, 2.4 inch 320×240 and 1.8 inch

A-Z Guide to Interfacing TFT LCD Displays W/ Arduino: Page 3

Step 4: Drivers & Libraries

In electronics/computer hardware a display driver is The display driver will typically accept commands and
usually a semiconductor integrated circuit (but may data using an industry-standard general-purpose
alternatively comprise a state machine made of serial or parallel interface, such as TTL, CMOS,
discrete logic and other components) which provides RS232, SPI, I2C, etc. and generate signals with
an interface function between a microprocessor, suitable voltage, current, timing and demultiplexing to
microcontroller, ASIC or general-purpose peripheral make the display show the desired text or image. The
interface and a particular type of display device, e.g. LCDs manufacturers use different drivers in their
LCD, LED, OLED, ePaper, CRT, Vacuum fluorescent products. Some of them are more popular and some
or Nixie. of them are very unknown. To run your display easily,

you should use Arduino LCDs libraries and add them MCUFRIEND_kbv.CPP. You can see the list of
to your code. Otherwise running the display may be drivers that are supported by MCUFRIEND library.
very difficult. There are many free libraries you can
find on the internet but the important point about the Open Example folder. There are several example
libraries is their compatibility with the LCD’s driver. codes that you can run by Arduino. Hook up the LCD
The driver of your LCD must be known by your and test some of the examples.
library. In this article, we use the Adafruit GFX library
and MCUFRIEND KBV library and example codes.
You can download them from the following links.
Unzip the MCUFRIEND KBV and open the

A-Z Guide to Interfacing TFT LCD Displays W/ Arduino: Page 4

Step 5: Code

You must add the library and then upload the code. If it is the first time you run an Arduino board, don’t worry. Just
follow these steps:

Go to www.arduino.cc/en/Main/Software and download the software of your OS. Install the IDE
software as instructed.
Run the Arduino IDE and clear the text editor and copy the following code in the text editor.
Navigate to sketch and include the libraries. Now click add ZIP library and add the libraries
Choose the board in tools and boards, select your Arduino Board.
Connect the Arduino to your PC and set the COM port in tools and port.
Press the Upload (Arrow sign) button.
You are all set!

After uploading an example code, it’s time to learn how to create your images on the LCD.

Open a new Sketch, and the necessary codes as described in the following sections.

A-Z Guide to Interfacing TFT LCD Displays W/ Arduino: Page 5

Step 6: Library

#include "Adafruit_GFX.h" #include "Fonts/FreeSans9pt7b.h" // when you want

other fonts
#include "MCUFRIEND_kbv.h"
#include "Fonts/FreeSans12pt7b.h" // when you want
The first line adds core graphics library for displays other fonts
(written by Adafruit).
The second adds a library that supports drivers of #include "Fonts/FreeSerif12pt7b.h" // when you want
MCUFRIEND Arduino display shields. other fonts

. #include "FreeDefaultFonts.h" // when you want other

fonts
#include "TouchScreen.h" // only when you want to
use touch screen #include "SPI.h" // using sdcard for display bitmap
image
#include "bitmap_mono.h" // when you want to
display a bitmap image from library #include "SD.h"

#include "bitmap_RGB.h" // when you want to display These libraries are not necessary for now, but you
a bitmap image from library can add them.

Step 7: Basic Commands

Class & Object The tft.readID function reads ID from the display and
put it in ID variable. Then tft.begin function gets ID
//(int CS=A3, int RS=A2, int WR=A1, int RD=A0, int and the LCD gets ready to work.
RST=A4)
.
MCUFRIEND_kbv tft(A3, A2, A1, A0, A4);
Resolution of the Display
This line makes an object named TFT from
MCUFRIEND_kbv class and provides an SPI tft.width(); //int16_t width(void);
communication between LCD and Arduino.
tft.height(); //int16_t height(void);
.
By these two functions, You can find out the
Running the LCD resolution of the display. Just add them to the code
and put the outputs in a uint16_t variable. Then read
uint16_t ID = tft.readID(); it from the Serial port by Serial.println();. First add
Serial.begin(9600); in setup().
tft.begin(ID);
.

A-Z Guide to Interfacing TFT LCD Displays W/ Arduino: Page 6

Color of the Screen .

tft.fillScreen(t); //fillScreen(uint16_t t); Filling Pixels

fillScreen function change the color of screen to t tft.drawPixel(x,y,t); //drawPixel(int16_t x, int16_t y,

color. The t should be a 16bit variable containing uint16_t t)
UTFT color code.
tft.readPixel(x,y); //uint16_t readPixel(int16_t x,
#define BLACK 0x0000 int16_t y)

#define NAVY 0x000F drawPixel function fills a pixel in x and y location by t

color.
#define DARKGREEN 0x03E0
readPixel function read the color of a pixel in x and y
#define DARKCYAN 0x03EF location.

#define MAROON 0x7800 .

#define PURPLE 0x780F Rotating the Screen

#define OLIVE 0x7BE0 tft.setRotation(r); //setRotation(uint8_t r)

#define LIGHTGREY 0xC618 This code rotates the screen. 0=0, 1=90, 2=180,
3=270.
#define DARKGREY 0x7BEF
.
#define BLUE 0x001F
Inverting Screen Colors
#define GREEN 0x07E0
tft.invertDisplay(i); //invertDisplay(boolean i)
#define CYAN 0x07FF
This code inverts the colors of the screen.
#define RED 0xF800
tft.color565(r,g,b); //uint16_t color565(uint8_t r, uint8_t
#define MAGENTA 0xF81F g, uint8_t b)

#define YELLOW 0xFFE0 This code give RGB code and get UTFT color code.

#define WHITE 0xFFFF .

#define ORANGE 0xFD20 Scrolling the Screen

#define GREENYELLOW 0xAFE5 for (uint16_t i = 0; i < maxscroll; i++) {

#define PINK 0xF81F tft.vertScroll(0, maxscroll, i);

You can add these lines to the top of your code and delay(10);}
just use the name of the color in the functions.
This code Scroll your screen. The Maxroll is the

A-Z Guide to Interfacing TFT LCD Displays W/ Arduino: Page 7

maximum height of your scrolling. tft.reset();

. This code resets the screen.

Reset

A-Z Guide to Interfacing TFT LCD Displays W/ Arduino: Page 8

Step 8: Drawing Lines

tft.drawFastVLine(x,y,h,t); { tft.drawLine(xi+a, yi, xj+a, yj, t);}

//drawFastVLine(int16_t x, int16_t y, int16_t h, for (uint16_t a=0; a<5; a++)

uint16_t t)
{ tft.drawLine(xi, yi+a, xj, yj+a, t);}
tft.drawFastHLine(x,y,w,t);
These three blocks of code draw lines like the
//drawFastHLine(int16_t x, int16_t y, int16_t w, previous code with 5-pixel thickness.
uint16_t t)
.
tft.drawLine(xi,yi,xj,yj,t);
tft.fillRect(x,y,w,h,t);
//drawLine(int16_t x0, int16_t y0, int16_t x1, int16_t
y1, uint16_t t) //fillRect(int16_t x, int16_t y, int16_t w, int16_t h,
uint16_t t)
drawFastVLine function draws a vertical line that
starts in x, y location, and its length is h pixel and its tft.drawRect(x,y,w,h,t);
color is t.
//drawRect(int16_t x, int16_t y, int16_t w, int16_t h,
drawFastHLine function draws a horizontal line that uint16_t t)
starts in x and y location and the length is w pixel and
the color is t. tft.fillRoundRect(x,y,w,h,r,t);

drawLine function draws a line that starts in xi and yi //fillRoundRect (int16_t x, int16_t y, int16_t w, int16_t
locationends is in xj and yj and the color is t. h, uint8_t R , uint16_t t)

. tft.drawRoundRect(x,y,w,h,r,t);

for (uint16_t a=0; a<5; a++) //drawRoundRect(int16_t x, int16_t y, int16_t w,

int16_t h, uint8_t R , uint16_t t)
{ tft.drawFastVLine(x+a, y, h, t);}
fillRect function draws a filled rectangle in x and y
for (uint16_t a=0; a<5; a++) location. w is width, h is height and t is color of the
rextangle
{ tft.drawFastHLine(x, y+a, w, t);}
drawRect function draws a rectangle in x and y
for (uint16_t a=0; a<5; a++) location with w width and h height and t color.

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

drawRoundRect function draws a Rectangle with r

A-Z Guide to Interfacing TFT LCD Displays W/ Arduino: Page 9

Step 9: Drawing Circles

tft.drawCircle(x,y,r,t); //drawCircle(int16_t x, int16_t y, j = 120 * (sin(PI * p / 2000));

int16_t r, uint16_t t)
i = 120 * (cos(PI * p / 2000));
tft.fillCircle(x,y,r,t); //fillCircle(int16_t x, int16_t y,
int16_t r, uint16_t t) j2 = 60 * (sin(PI * p / 2000));

drawCircle function draws a circle in x and y location i2 = 60 * (cos(PI * p / 2000));

and r radius and t color.
tft.drawLine(i2 + 160, j2 + 160, i + 160, j + 160,
fillCircle function draws a filled circle in x and y col[n]);
location and r radius and t color.
}
.
By this code, you can draw an Arc. change the “for”
for (int p = 0; p < 4000; p++) between 0 and 4000.

Step 10: Drawing Triangles

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

//drawTriangle(int16_t x1, int16_t y1, int16_t x2, drawTriangle function draws a triangle with three
int16_t y2, int16_t x3, int16_t y3,// uint16_t t) corner location x, y and z, and t color.

tft.fillTriangle(x1,y1,x2,y2,x3,y3,t); fillTriangle function draws a filled triangle with three

corner location x, y and z, and t color.
//fillTriangle(int16_t x1, int16_t y1, int16_t x2, int16_t

A-Z Guide to Interfacing TFT LCD Displays W/ Arduino: Page 10

Step 11: Displaying Text

tft.setCursor(x,y); //setCursor(int16_t x, int16_t y) void showmsgXY(int x, int y, int sz, const GFXfont *f,
const char *msg)
This code sets the cursor position to of x and y
{ uint16_t x1, y1;
.
uint16_t wid, ht;
tft.setTextColor(t); //setTextColor(uint16_t t)
tft.setFont(f);
tft.setTextColor(t,b); //setTextColor(uint16_t t, uint16_t
b) tft.setCursor(x, y);

The first line sets the color of the text. Next line sets tft.setTextColor(0x0000);
the color of text and its background.
tft.setTextSize(sz);
.
tft.print(msg);
tft.setTextSize(s); //setTextSize(uint8_t s)
}
This code sets the size of text by s. s is a number
between 1 and 5. This function changes the font of the text. You should
add this function and font libraries.
.
.
tft.write(c); //write(uint8_t c)
for (int j = 0; j < 20; j++) {
This code displays a character.
tft.setCursor(145, 290);
tft.println("www.Electropeak.com");
int color = tft.color565(r -= 12, g -= 12, b -= 12);
tft.print("www.Electropeak.com");
tft.setTextColor(color);
The first function displays a string and moves the
cursor to the next line. tft.print("www.Electropeak.com");

The second function just displays the string. delay(30);

. }

showmsgXY(x,y,sz,&FreeSans9pt7b,"www.Electrope This function can fade your text. You should add it to
ak.com"); your code.

//void showmsgXY(int x, int y, int sz, const GFXfont

*f, const char *msg)

A-Z Guide to Interfacing TFT LCD Displays W/ Arduino: Page 11

Step 12: Displaying Images

Displaying Monochrome Images .

static const uint8_t name[] PROGMEM = RGB Color Image Displaying

{ //Add image code here. }
const uint16_t name[] PROGMEM = {
tft.drawBitmap(x, y, name, sx, sy, 0x0000); //Add image code here. }

First you should convert your image to hex code. tft.drawRGBBitmap(x, y, name, sx, sy);
Download the software from the following link. if you
don’t want to change the settings of the software, you First, you should convert your image to code.Use this
must invert the color of the image and make the link to convert the image:
image horizontally mirrored and rotate it 90 degrees http://www.rinkydinkelectronics.com/t_imageconvert...
counterclockwise. Now add it to the software and
convert it. Open the exported file and copy the hex Upload your image and download the converted file
code to Arduino IDE. x and y are locations of the that the UTFT libraries can process. Now copy the
image. sx and sy are sizes of image. you can change hex code to Arduino IDE. x and y are locations of the
the color of the image in the last input. image. sx and sy are size of the image.

Step 13: Predesigned Templates - Loading

In this template, We just used a string and 8 filled circles that change their colors in order. To draw circles around a
static point, You can use sin(); and cos(); functions. you should define the PI number. To change colors, you can
use color565(); function and replace your RGB code.

Download
https://www.instructables.com/ORIG/FNN/8XNC/JPCY7D22/FNN8XNCJPCY7D22.ino
…

A-Z Guide to Interfacing TFT LCD Displays W/ Arduino: Page 12

Step 14: Logo Presentation

In this template, We converted a.jpg image to.c file and added to the code, wrote a string and used the fade code
to display. Then we used scroll code to move the screen left. Download the.h file and add it to the folder of the
Arduino sketch.

Download
https://www.instructables.com/ORIG/FCA/I520/JPCY7DDL/FCAI520JPCY7DDL.ino
…

Step 15: Charts

In this template, We used draw lines, filled circles, and string display functions.

You can find more chart templates here .

A-Z Guide to Interfacing TFT LCD Displays W/ Arduino: Page 13

 Download
https://www.instructables.com/ORIG/FJW/4R1L/JPCY7EFR/FJW4R1LJPCY7EFR.ino
…

Step 16: Music and Other Templates

In this template, We added a converted image to code and then used two black and white arcs to create the
pointer of volumes. Download the .h file and add it to the folder of the Arduino sketch.

You can find more animated templates (Like the following GIFs) by clicking on this link

A-Z Guide to Interfacing TFT LCD Displays W/ Arduino: Page 14

 Download
https://www.instructables.com/ORIG/FC1/3DZF/JPCY7HUU/FC13DZFJPCY7HUU.ino
…

Step 17: Screen Saver

In this template, We just display some images by RGB bitmap and bitmap functions. Just make a code for
touchscreen and use this template. Download the.h file and add it to the folder of the Arduino sketch.

Download
https://www.instructables.com/ORIG/FMM/60KI/JPCY7HQB/FMM60KIJPCY7HQB.ino
…

A-Z Guide to Interfacing TFT LCD Displays W/ Arduino: Page 15

Step 18: Final Remarks

The speed of playing all the GIF files are edited and we made them faster or slower for better
understanding. The speed of motions depends on the speed of your processor or type of code or
size and thickness of elements in the code.
You can add the image code in the main page but it fills all the main page. So you can make a.h file
and add in the folder of the sketch.
In this article, We just discussed about displaying elements on LCD. Follow our next tutorials to
learn using touch screens and SD Cards.
If you have the problem with including the Libraries, change the "" sign to <>.

× SPECIAL OFFER (VALID UNTIL NOVEMBER 1ST 2018): If you order the 3.5² LCD from ElectroPeak, our
technical staff will design your desired template for free! Just send an email to [email protected] containing
your order number and requirements ;)

You can also read this project on ElectroPeak's official website.

https://electropeak.com/learn/guides/absolute-begi...

i cant upload it to a micro sd right? thats only for bmp or am i wrong

yes you are right. SD is for images only

the code is way to large to upload whta do i do?

you have to change your micro controller with larger flash.

Which Arduino do you use? For larger codes, you need Arduino Mega or Due

A-Z Guide to Interfacing TFT LCD Displays W/ Arduino: Page 16