In this guide we’re going to show you how you can use the 1.8 TFT display with the Arduino. You’ll learn how to wire the display, write text, draw shapes and display images on the screen.
Introducing the 1.8 TFT Display
The 1.8 TFT is a colorful display with 128 x 160 color pixels. The display can load images from an SD card – it has an SD card slot at the back. The following figure shows the screen front and back view.
This module uses SPI communication – see the wiring below . To control the display we’ll use the TFT library, which is already included with Arduino IDE 1.0.5 and later.
Where to buy?
You can get the 1.8 TFT display for approximately $3 – check prices on Maker Advisor.
You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!
Pin wiring
The table below shows the 1.8 TFT wiring to Arduino UNO.
1.8 TFT Display | Wiring to Arduino Uno |
LED | 3.3 V |
SCK | 13 |
SDA | 11 |
A0 or DC | 9 |
RESET | 8 |
CS | 10 |
GND | GND |
VCC | 5 V |
Note: different Arduino boards have different SPI pins. If youâre using another Arduino board, check the Arduino official documentation.
Initializing the display
The TFT display communicates with the Arduino via SPI communication, so you need to include the SPI library on your code. We also use the TFT library to write and draw on the display.
#include <TFT.h> #include <SPI.h>
Then, you need to define the CS, A0 (or DC) and RST pins:
#define cs 10 #define dc 9 #define rst 8
Create an instance of the library called TFTscreen:
TFT TFTscreen = TFT(cs, dc, rst);
Finally, in the setup(), you need to initialize the library:
TFTscreen.begin();
Display text
To write text on the display, you can customize the screen background color, font size and color.
To set the background color, use:
TFTscreen.background(r, g, b);
In which, r, g and b are the RGB values for a given color. To choose font color:
TFTscreen.stroke(r, g, b);
To set the font size:
TFTscreen.setTextSize(2);
You can increase or decrease the number given as argument, to increase or decrease font size.
Finally, to draw text on the display you use the following line:
TFTscreen.text("Hello, World!", x, y);
In which “Hello, World!” is the text you want to display and the (x, y) coordinate is the location where you want to start display text on the screen.
Code
The following example displays “Hello, World!” in the middle of the screen and changes the font color every 200 miliseconds.
Copy the following code to your Arduino IDE and upload it to your Arduino board.
/*
* Rui Santos
* Complete Project Details https://randomnerdtutorials.com
*/
// include TFT and SPI libraries
#include <TFT.h>
#include <SPI.h>
// pin definition for Arduino UNO
#define cs 10
#define dc 9
#define rst 8
// create an instance of the library
TFT TFTscreen = TFT(cs, dc, rst);
void setup() {
//initialize the library
TFTscreen.begin();
// clear the screen with a black background
TFTscreen.background(0, 0, 0);
//set the text size
TFTscreen.setTextSize(2);
}
void loop() {
//generate a random color
int redRandom = random(0, 255);
int greenRandom = random (0, 255);
int blueRandom = random (0, 255);
// set a random font color
TFTscreen.stroke(redRandom, greenRandom, blueRandom);
// print Hello, World! in the middle of the screen
TFTscreen.text("Hello, World!", 6, 57);
// wait 200 miliseconds until change to next color
delay(200);
}
Here’s your “Hello, World!” text on the 1.8 TFT display.
Display shapes
The TFT library provides useful functions to draw shapes on the display:
- TFTscreen.point(x, y) – display a point at the (x, y) coordinate
- TFTscreen.line(xStart, yStart, xEnd, yEnd) – draws a line that starts at (xStart, yStart) and ends at (xEnd, yEnd)
- TFTscreen.rect(xStart, yStart, width, height) – draws a rectangle with the top left corner at (xStart, yStart) with the defined width and height
- TFTscreen.circle(x, y, radius) – draws a circle with center at (x, y) with the specified radius
Code
The following example displays several shapes. Every time the code goes through the loop, the shapes change color.
Copy the following code to your Arduino IDE and upload it to your Arduino board.
/*
* Rui Santos
* Complete Project Details https://randomnerdtutorials.com
*/
// include TFT and SPI libraries
#include <TFT.h>
#include <SPI.h>
// pin definition for Arduino UNO
#define cs 10
#define dc 9
#define rst 8
// create an instance of the library
TFT TFTscreen = TFT(cs, dc, rst);
void setup() {
//initialize the library
TFTscreen.begin();
// clear the screen with a black background
TFTscreen.background(0, 0, 0);
}
void loop() {
//generate a random color
int redRandom = random(0, 255);
int greenRandom = random (0, 255);
int blueRandom = random (0, 255);
// set the color for the figures
TFTscreen.stroke(redRandom, greenRandom, blueRandom);
// light up a single point
TFTscreen.point(80,64);
// wait 200 miliseconds until change to next figure
delay(500);
// draw a line
TFTscreen.line(0,64,160,64);
delay(500);
//draw a square
TFTscreen.rect(50,34,60,60);
delay(500);
//draw a circle
TFTscreen.circle(80,64,30);
delay(500);
//erase all figures
TFTscreen.background(0,0,0);
}
Here’s the shapes on the display:Â
Display images
The 1.8 TFT display can load images from the SD card. To read from the SD card you use the SD library, already included in the Arduino IDE software. Follow the next steps to display an image on the display:
1) Solder header pins for the SD card. There are four pins opposite to the display pins, as shown in figure below.
2)Â The display can load images bigger or smaller than the display size (160 x 128 px), but for better results, edit your image size to 160 x 128 px.
3) The image should be in .bmp format. To do that, you can use a photo editing software and save the image as .bmp format.
4)Â Copy the image to the SD card and insert it on the SD card slot at the back of the display.
5)Â Wire the SD card pins to the Arduino by following the table below:
SD card on TFT display | Wiring to Arduino Uno |
CS | 4 |
MOSI | 11 |
MISO | 12 |
SCK | 13 |
Both the display and the SD card work with SPI communication, so you’ll have pins on the Arduino with two connections.
6) In the Arduino IDE go to File > Examples > TFT > Arduino > TFTBitmaLogo.
7)Â Edit the code, so that it searches for your image. Replace the “arduino.bmp” with the name of your image:
// now that the SD card can be access, try to load the image file
logo = TFTscreen.loadImage("arduino.bmp");
8)Â Upload the code to your Arduino.
Note: some people find issues with this display when trying to read from the SD card. We don’t know why that happens. In fact, we tested a couple of times and it worked well, and then, when we were about to record to show you the final result, the display didn’t recognized the SD card anymore – we’re not sure if it’s a problem with the SD card holder that doesn’t establish a proper connection with the SD card. However, we are sure these instructions work, because we’ve tested them.
Wrapping up
In this guide we’ve shown you how to use the 1.8 TFT display with the Arduino: display text, draw shapes and display images. You can easily add a nice visual interface to your projects using this display.
Do you have any projects with the 1.8 TFT display? Let us know in the comments section below.
If you liked this post, you may also find useful:
- Arduino Step-by-step Projects course
- Guide to SD card module with Arduino
- 7 Arduino Compatible Displays for Your Electronic Projects
- Arduino step-by-step course
Great, as always đ Thank you !
Great tuto. But is a shame that I cant rotate text only appear in the same angle. But great i gonna test other TFT library đ but thanks for the intro đ
Sorry my fault there is a method “setRotation(TFT_angle_text)” i used 0 for get my result đ
I can’t thank you enough for making there lessons and allowing us to follow along for free. THANK YOU….
Hi Steve.
We’re glad to hear that.
Thanks.
Hi very good have one of these displays will have a go at using now thanks and thanks for all the other articals jeff
Hi Jeff.
Thanks for your support.
Regards
How about a similar RNT driving the TFT from an ESP8266?
Your SD card MISO pin is wrong. Should be 12. And SD card SCK pin –
13. https://www.arduino.cc/en/Reference/SPI https://www.arduino.cc/en/Tutorial/TFTBitmapLogo
Hi Alex.
You’re right.
We’ve fixed that now.
Thanks đ
Is it possible to read different images stored in the sd card on the flow? Thanks!
Hi Kevin.
Yes, you just need to load each image by its name in the following function
TFTscreen.loadImage(“IMAGE_NAME.bmp”);
Regards,
Sara
Thanks Sara, I’m going to use the Adafruit 1.54″ TFT LCD Display with MicroSD – ST7789. My goal is to load several images on the flow and make an animation. Is the refresh rate good or I’ll see the scanline when changing the image? Thanks in advance!
I haven’t tested changing between different images.
I’ve just tested with a single image. But the refresh rate wasn’t that good. I could clearly see the scanline when refreshing the image.
But you have to test with your own setup and see what you get.
Hi,
That’s great tutorial for beginner like me.
Will you please provide me connection of TFT with arduino for 8 bit parallel mode with steps to required initiize LCD
Thanks for the suggestion, but we don’t have any tutorials on that exact subject
Hallo and thank you so much for your great tutorial !
Can I ask please where can I find the TFT.h library? Is it a build in one or should I download it from somewhere? Thanks again!
Hi Rafi.
The TFT library is included with Arduino IDE 1.0.5 or later.
Regards,
Sara đ
Hi ,
In my project i am using 1.8 TFT SPI 128*160 lcd ,for this i have installed TFT library from arduino IDE but i am getting error as shown below
ERROR: Arduino\libraries\TFT\src/utility/Adafruit_ST7735.h:30:26: fatal error: avr/pgmspace.h: No such file or directory
please tell me the solution
Thank you
Are you running this for the Arduino board, right?
Try updating your Arduino IDE.
Regards,
Sara
I see that your images of the display in action were taken at very close to a 90 degree angle. How does it look when tilted?
I bought a couple of similar ones, usually advertised as “1.77 inch”, that have no SD card, and two rows of pins (one with 8 pins, one with 6) at one end. It looked fine from a 90-degree angle, but awful if you tilted it even a little bit: colors changed dramatically, and contrast was terrible.
Do these work better?
Thanks.
Hi Ran.
To be honest I don’t know.
I wrote this tutorial a long time ago and I don’t remember how the image looks when the display is tilted.
Regards,
Sara
Hi Ruis,
The code for the basic start produces an error which I expect is to do with the TFT library.
Do you know which version of the library you were using at the time, please?
The errors are :
Old_Sketch:14:21: error: ‘cs’ was not declared in this scope
TFT TFTscreen = TFT(cs, dc, rst);
^
Old_Sketch:14:25: error: ‘dc’ was not declared in this scope
TFT TFTscreen = TFT(cs, dc, rst);
^
Old_Sketch:14:29: error: ‘rst’ was not declared in this scope
TFT TFTscreen = TFT(cs, dc, rst);
Thanks,
Martin
Update. I have just tried the latest TFT library from github and the error is still the same.8-((
Hi Martin.
Please double-check that you’ve copied the whole code: https://raw.githubusercontent.com/RuiSantosdotme/Random-Nerd-Tutorials/master/Projects/tft/draw_shapes.ino
That error means that the code can’t find the cs variable, that should be defined at he beginning of the code.
If you’re using the exact same code we have here, I don’t know why you are getting the error.
The library is included in the Arduino IDE by default, so I don’t know which version we were using, but I believe it should be working at the moment.
Regards,
Sara
Everything works fine – Arduino Nano. Thx
hi,
How can i try it ? Because i couldn’t find SCK and SDA Pins.
Please clear it to me.
Thanks
Hi.
What pins do you have instead?
You might have SCL instead of SCK, for example.
Regards,
Sara
I have a 1.8″ TFT display (from Banggood) that looks exactly like the one shown in your tutorial. Though the pins are correctly connected (triple checked), I’m getting a blank screen. I suspect that my TFT display is using different driver.
My question is: Is there a way to determine which of the many dozens of TFT drivers might be used with my particular model???
Thanks
Hi Gary.
I never had much luck with TFT displays. Probably because I wasn’t using the correct driver or something.
Usually, Banggood provides a link for the library you need to use with that specific display.
Start by trying the examples provided in library and see if you can get something to work.
Regards,
Sara
every thing ok with my 1,8″ 128 x160 driver st7735 .. the only difference in my display ..the pin A0 is printed RS near connector and has built-in backlight
THANKS !!!!
Thank you! Your tutorial works!
Just one problem (i dont use the sd card):
If i have the display attached i can not upload sketch why?
if i disconnect the “shield” no problem and display works as expected after i repower the board!
Funny trivia:
it worked on breadboard, arduino und+tft was flashable same cable/pc on my side đ
Thank you for the Tutorial!
It works nicely with the azdelivery tft from amazon so this is pretty usefull!
My only problem is when i soldered the TFT to a breadboard and connected it to the arduino uno i can’t upload any sketch any more, avr dude fails with timeouts..
if i remove the shield i can flash and then plug it back in and restart or repower the board to initialize and write the display…
Is it possible that the 3,3V regulator of an arduino is too weak to run the display with very low resistace before the 1,8″ tft?
Hi Sara,
Thank you for the good information. I managed to copy your example and it works fine. Now I want to develop more. How can we display numbers (integer, float), since I have numbers in my calculation and need to be displayed.
Thanks
Mula
Hi.
Yes, but I think you need to convert them to a String to be displayed.
Regards,
Sara
Dear Sara,
Thank you, while waiting your answer, I found how to convert integer to string, and now I am struggling on how to format the “stringed integer” to look even space when the number changes.
Thank you
Mula
Hi Sara,
It’s me again, sorry to bother you.
I managed to convert integer to string and display it properly on the 1.8″ TFT Display with Arduino Nano.
My application is such that it display numbers according to Input, in this case a Rotary Encoder. When I change the input (rotate the Encoder), the the number on the display also change. However the new number is superimposing the previous number, so after several rotations, the displayed number become block of color. I think I need to clear the number before I put another number. I tried: TFT.clear(); TFT.ClearScreen(); TFT.init(); TFT.clearDispay; TFT.ScreenFill(BLACK), etc., it did not work (error while compiling).
Could you please teach me on how to overcome this problem?
Thank you so much.
Mula
Hi.
Try one of the following commands before displaying a new number to fill the screen with white or black color:
screen.fill(255,255,255); //white
screen.fill(0,0,0); //black
For more functions for the TFT display, see: https://www.arduino.cc/en/Reference/TFTFill
Regards,
Sara
Dear Sara,
Thank you, I try then.
Mula
Dear Sara,
I tried:
TFTscreen.fill(0,0,0);
TFTscreen.rect(10,35,120,26);
It works, but then another issue came out, the display blinks. I put delay(800); in the void loop(), but still blinking
Do you think we can solve this issue?
Thank you.
Mula
Hello. It’s not showed in this tutorial or some articles about the TFT library, if I’m not worng, you can use print() or println() so you can print integer or floats.
Ex:
// your code
TFTscreen.print(variable);
Hi,
A question regarding use of TFTLCD. I can input analog data and save it to SD while also displaying it on the TFTLCD. And I can play the same data back to Arduino serial monitor from the SD. However, I am not able to play the stored analog data from the SD to the TFTLCD. Is that possible and, if so, what are the key coding instructions? Does it require a digital to analog converter? Thanks,
Hi Sara,
Was unable to find the code under file > examples (no ‘TFT’ in menu) as you instructed. Managed to find some code online that appears similar. Next problem was to find a bit map file the could be read, (tried editing my own image, but the arduino could not find the bitmap on SD card). Found another bit map image arduino recognised this, but it was in the wrong format. Finally found arduino.bmp online & used this. Finally found an image that could be displayed!!
Thanks for all the hard work you put into these tutorials most of them work first time (unlike many online tutorials I have found).
Keep up the good work.
Alan
Thank you so much for posting this
Hi i have tried the above project to do but i am getting problem with the header file TFT.
Getting the below error:
pio/libdeps/esp32dev/TFT-1.0.6/src/utility/Adafruit_ST7735.h:30:26: fatal error: avr/pgmspace.h: No such file or directory
.pio/libdeps/esp32dev/TFT-1.0.6/src/utility/glcdfont.c:3:20: fatal error: avr/io.h: No such file or directory
please can you tell me the solution for this
Hi.
This tutorial is for the Arduino board. You are trying to run it for an ESP32. I didn’t try it with an ESP32. So, I’m not sure if it works.
It seems you’re trying to run the code using PlatformIO.
You need to include the necessary libraries. See this tutorial to learn more about getting started with VS Code and how to install libraries: https://randomnerdtutorials.com/vs-code-platformio-ide-esp32-esp8266-arduino/#7
You also need to add the following line to the beginning of all your sketches in Platformio:
#include <Arduino.h>
I hope this helps.
Regards,
Sara
Hie ,thanks for great information. My question here is how do i print or show the serial monitor contents on the TFT. Which code do i use.? Can i have a code to display humidity and temperature on the tft. Thanks
Regards
L zhakie
I am really interested in a updated tutorial using for using a bitmap. It looks like TFT.h is retired
Does the SD slot have a size limit? Does it work with 32GB/64GB/128GB sd cards?
Hi.
I’m not sure. I guess you’ll need to test it to figure it out.
Regards,
Sara
I just use a 32Gig SANDISK
No problems reading the card.
Hi
Thanks firstly for your effort, then I wanted to ask you if we could use an external memory (e.g. EEPROM or FRAM) instead of the SD card, if YES what are the most important features we have to consider in this memory?
Thanks for your tutorial.I have problem with picture from SD Card.The picture has only cold colors,not any warm colors.Please where is mistake?
Thank you Ivan
Hi Ivan,
Not shure, but maybe it’s a problem with the color palette of your bitmap.
This can be checked in your GFX software. Maybe try to use the mostly useless Windows PAINT software to open the image and resave it.
Make shure to save your bitmap as 24k color.
Hi there!
Thank you very much for this tutorial. I was really successfull displaying text on the TFT. Then I tried the SD card. I prepared a Bitmap fitting the size. An old SD card didn’t work. Using a newer one works fine. 256 color bitmap didn’t work either. Using 24k bitmap feedbacks no problems and I receive “drawing image”.
Now the problem:
My TFT stays full white. Nothing is displayed. Re-checking the text-mode, I rewired the tft and startet the “Hello world” sketch. Now the background starts white flickering! I pulled out the SD card and everything is fine.
I rewired again for SD card configuration, inserted the SD and uploaded the sketch: White display. Although the Serial monitor displays no problems.
Is there a faulty TFT? Or do I oversee here some important detail?
Thanks for any help
Chris
Hi i have the same problem, it appears just like that, it was fine before but when i try using SD card and TFT it doesn’t work.
Do you have an answer to your problem ?
Thanks
If you want to use this kind of TFT display on an Arduino Mega 2560, change the CS pin to 53 and wire SCK to 52 and SDA to 51.
Great tutorial, im wondering is it possible to get touch signal from the screen? For example I would like to create a simple button, when the button is pressed it changes to another page or something?
Thank-you! I’ve had this DSD TFT display for several months now, and your tutorial is the only one I found that made sense, (to me, anyway). You gave me the foothold I needed to get started on more projects that will include a display.
That’s great!
Hi. Unfortunately, I could not get a proper image with the Nodemcu Card. Which libraries should I use?
I was not successful with Nodemcu. The screen color and text are not clear. The screen looks cracked. The text and colors are very faint. Can anyone who tests for Nodemcu give me information? It works fine with Arduino Nano, but I cannot display properly with Nodemcu. I am using Adafruit st7735 and GFX libraries. But as I said, the colors are not clear. Anyone who can help me would be appreciated. Thank you
How about creating a project that can convert sign language to text with esp32 cam, arduino uno and TFT LCD screen. without use of gloves. is that possible ???
Chekc this projecT: https://randomnerdtutorials.com/install-mediapipe-raspberry-pi/
Regards,
Sara
Dear Sara, what could be the reason? the data of the imported images are displayed in a row on the serial monitor, a white image is displayed, followed by random pixels in color, alternating every 3 seconds. Thanks.
Hi.
I don’t have any previous message from you.
Maybe it was not submitted?
Regards,
Sara
Thank you very much for this tutorial, best regards
Tony from France đ