{"id":42881,"date":"2017-09-20T10:58:33","date_gmt":"2017-09-20T10:58:33","guid":{"rendered":"http:\/\/randomnerdtutorials.com\/?p=42881"},"modified":"2020-04-20T10:37:41","modified_gmt":"2020-04-20T10:37:41","slug":"guide-to-1-8-tft-display-with-arduino","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/guide-to-1-8-tft-display-with-arduino\/","title":{"rendered":"Guide to 1.8 TFT Display with Arduino"},"content":{"rendered":"

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.<\/p>\n

\"\"<\/p>\n

Introducing the 1.8 TFT Display<\/h2>\n

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.<\/p>\n

\"\"<\/p>\n

This module uses SPI communication – see the wiring below . To control the display we’ll use the TFT<\/strong> library, which is already included with Arduino IDE 1.0.5 and later.<\/p>\n

Where to buy?<\/h3>\n

\"\"<\/a><\/p>\n

You can get the 1.8 TFT display for approximately $3 – check prices on Maker Advisor<\/a>.<\/p>\n

You can use the preceding links or go directly to MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p>

<\/a><\/p>\n

Pin wiring<\/h3>\n

The table below shows the 1.8 TFT wiring to Arduino UNO.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n
1.8 TFT Display<\/strong><\/td>\nWiring to Arduino Uno<\/strong><\/td>\n<\/tr>\n
LED<\/span><\/td>\n3.3 V<\/span><\/td>\n<\/tr>\n
SCK <\/span><\/td>\n13<\/span><\/td>\n<\/tr>\n
SDA<\/span><\/td>\n11<\/span><\/td>\n<\/tr>\n
A0 or DC<\/span><\/td>\n9<\/span><\/td>\n<\/tr>\n
RESET<\/span><\/td>\n8<\/span><\/td>\n<\/tr>\n
CS <\/span><\/td>\n10<\/span><\/td>\n<\/tr>\n
GND<\/span><\/td>\nGND<\/span><\/td>\n<\/tr>\n
VCC <\/span><\/td>\n5 V<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Note<\/strong>: different Arduino boards have different SPI pins. If you\u2019re using another Arduino board, check the Arduino official\u00a0documentation<\/a>.<\/p>\n

Initializing the display<\/h2>\n

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.<\/p>\n

#include <TFT.h> <\/strong>\n#include <SPI.h><\/strong><\/pre>\n
Then, you need to define the CS, A0 (or DC) and RST pins:<\/p>\n
#define cs 10<\/strong>\n#define dc 9<\/strong>\n#define rst 8<\/strong><\/pre>\n
Create an instance of the library called TFTscreen<\/strong>:<\/p>\n
TFT TFTscreen = TFT(cs, dc, rst);<\/strong><\/pre>\n
Finally, in the setup()<\/strong>, you need to initialize the library:<\/p>\n
TFTscreen.begin();<\/strong><\/pre>\n
Display text<\/h2>\n
To write text on the display, you can customize the screen background color, font size and color.<\/p>\n
To set the background color, use:<\/p>\n
TFTscreen.background(r<\/strong><\/span>, g<\/strong><\/span>, b<\/strong><\/span>);<\/pre>\n
In which, r<\/strong><\/span>,\u00a0g<\/strong><\/span> and b<\/strong><\/span> are the RGB values for a given color. To choose font color:<\/p>\n
TFTscreen.stroke(r<\/strong>, g<\/strong>, b<\/strong>);<\/pre>\n
To set the font size:<\/p>\n
TFTscreen.setTextSize(2<\/strong>);<\/pre>\n
You can increase or decrease the number given as argument, to increase or decrease font size.<\/p>\n
Finally, to draw text on the display you use the following line:<\/p>\n
TFTscreen.text(\"Hello, World!<\/strong>\", x, y);<\/pre>\n
In which “Hello, World!<\/strong>” 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.<\/p>\n
Code<\/h3>\n
The following example displays “Hello, World!” in the middle of the screen and changes the font color every 200 miliseconds.<\/p>\n
Copy the following code to your Arduino IDE and upload it to your Arduino board.<\/p>\n
\/*\n * Rui Santos \n * Complete Project Details http:\/\/randomnerdtutorials.com\n *\/\n\n\/\/ include TFT and SPI libraries\n#include <TFT.h>  \n#include <SPI.h>\n\n\/\/ pin definition for Arduino UNO\n#define cs   10\n#define dc   9\n#define rst  8\n\n\n\/\/ create an instance of the library\nTFT TFTscreen = TFT(cs, dc, rst);\n\nvoid setup() {\n\n  \/\/initialize the library\n  TFTscreen.begin();\n\n  \/\/ clear the screen with a black background\n  TFTscreen.background(0, 0, 0);\n  \/\/set the text size\n  TFTscreen.setTextSize(2);\n}\n\nvoid loop() {\n\n  \/\/generate a random color\n  int redRandom = random(0, 255);\n  int greenRandom = random (0, 255);\n  int blueRandom = random (0, 255);\n  \n  \/\/ set a random font color\n  TFTscreen.stroke(redRandom, greenRandom, blueRandom);\n  \n  \/\/ print Hello, World! in the middle of the screen\n  TFTscreen.text("Hello, World!", 6, 57);\n  \n  \/\/ wait 200 miliseconds until change to next color\n  delay(200);\n}\n<\/code><\/pre>\n\t
View raw code<\/a><\/p>\n
Here’s your “Hello, World!” text on the 1.8 TFT display.<\/p>\n
\"\"<\/div>\n
Display shapes<\/h2>\n
The TFT library provides useful functions to draw shapes on the display:<\/p>\n