Guide to 1.8 TFT Display with Arduino

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, rg 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);
}

View raw code

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);
}

View raw code

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:

 Thanks for reading.

Learn how to program and build projects with the ESP32 and ESP8266 using MicroPython firmware DOWNLOAD »

Learn how to program and build projects with the ESP32 and ESP8266 using MicroPython firmware DOWNLOAD »


Enjoyed this project? Stay updated by subscribing our weekly newsletter!

24 thoughts on “Guide to 1.8 TFT Display with Arduino”

    • 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.

  1. 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

  2. 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!

  3. 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

  4. 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

Leave a Comment

Download our Free eBooks and Resources

Get instant access to our FREE eBooks, Resources, and Exclusive Electronics Projects by entering your email address below.