2.8'' TFT Touch Shield V2.0

From Wiki 来自痴汉的爱
(Redirected from 2.8'' TFT Touch Shield v2.0)
Jump to: navigation, search
TFT Touch Shield V2.0 .jpg

This is a versatile and Arduino/Seeeduino/Arduino Mega compatible resistive touch screen shield which can be used as display device, or sketch pad for user input/interface.

Compared with the previous version (2.8" TFT Touch Shield V1.0) we improved the screen driver with a professional chip (ILI9341) to provide the pin-saving SPI communication protocol without sacrificing the data transmission speed.

An SD card module is also integrated into the shield to provide storage space, and anything else you can think of, for your projects.

Get One Now Banner.png



  • 2.8" 320 × 240 pixels, screen for a great easy to use and comfortable experience.
  • Micro SD card slot for file/image display.
  • Programmable backlight illumination for night/dark viewing.
  • 65535 rich colors.
  • Serial Peripheral Interface (SPI) - a high-speed pin-saving communication protocol.
  • Full-screen touch active range.


Item Min Typical Max Unit
Voltage 4.5 5 5.5 VDC
Current / / 250 mA
LCD Panel Size 2.8 inch
View angle 60~120 Degree
Resolution 320 × 240 /
LCD color 65k /
Backlight Type LED /
LCD driver IC ILI9341 /
Interface Type SPI /
Touch Screen 4-Wire resistive touch screen /
Active area 43.2*57.3 mm
ESD contact discharge ±4 KV
ESD air discharge ±8 KV
Dimension 72.5 × 54.7 × 18 mm
Weight 24±2 g


  • Be careful when handling and/or installing the TFT touch shield since the screen is fragile.
  • Pressing too hard on the screen might cause distortion of the graphics displayed in the screen.

TFT Touch Shield Pin Map and Description

Refer to the next two figures below for shield or Arduino board pins in this document.

TFT Touch Shield V2.0 Pin Diagram
Arduino board pins used by the TFT Touch Screen shield.

Chip Select, Data/Command, and Backlight pins:

  • Arduino D4  to TF_CS:

Used for SD card chip select (CS) SPI pin.
This pin will indicate the shield that the Arduino wants to send and receive data to and from the micro SD card.

  • Arduino D5  to TFT_CS:

Used for touch screen chip select (CS) SPI pin.
This pin will indicate the shield that the Arduino wants to send and receive data to and from the display/screen.

  • Arduino D6  to TFT_D/C:

Used for TFT Data/Command control pin.
The value of this pin (HIGH, or LOW) will tell the shield if the Arduino wants to send data or commands.

  • Arduino D7  to BACKLIGHT:

Used for touch screen backlight on/off control.

SPI Interface / Data Communication Pins:

  • Arduino D10  is SPI (CS) chip select pin:

This pin is not used by the TFT shield.

  • Arduino D11  is SPI (MOSI) data pin:

Used as data pin for SD card and screen. This pin is used by the Arduino to send data to the SD card or screen.

  • Arduino D12  is SPI (MISO) pin:

Used as data pin for SD card and screen. This is the pin that the Arduino uses to receive data from the SD card or screen.

  • Arduino D13  is SPI (SCK) pin:

Used as serial clock pin for SD card and screen. This pin is used to clock data in and out of the Arduino.

Touch Panel Output Pins

Resistive touch screens can be roughly modeled by the following four-resistor network:

Resistive screen resistor model

When the screen is touched a new resistance, Rtouch, is put into the network. One must then calculate the voltage at each terminal to get the touch point.

Resistor model of touch screen when there is pressure on the screen.

The shield provides a pin/terminal for each of the modeled resistors:

  • Arduino A0 to Y-
  • Arduino A1 to X-
  • Arduino A2 to Y+
  • Arduino A3 to X+

The Y-, X-, Y+, and X+ terminals of the touch screens are connected to analog pins in the Arduino board when the TFT shield is stacked.

For your convenience, we've created a Touch Screen Driver library to handle these pins and get the touch point.

TFT Touch Shield Setup

Hardware Installation

Stack the TFT Touch Shield on your Arduino board and connect the board to the PC using a USB cable.

Software Libraries Installation

  1. Download the SeeedTFTV2.0 Library for Arduino 1.0 and SeeedTouchScreen Library for Arduino 1.0 by clicking "Download ZIP"
  2. Unzip the folders in the Arduino IDE path ..\arduino-1.0\libraries

Getting Started

Example #1:Draw a Circle

1. Restart the Arduino IDE.

2. Open the "drawCircle" example by going to File --> Examples --> SeeedTFTv2 --> drawCircle.

// drawCircle example
#include <stdint.h>
#include <TFTv2.h>
#include <SPI.h>
void setup()
    TFT_BL_ON;                                          //turn on the background light 
    Tft.TFTinit();                                      //init TFT library             
    Tft.drawCircle(100, 100, 30,YELLOW);                //center: (100, 100), r = 30 ,color : YELLOW              
    Tft.drawCircle(100, 200, 40,CYAN);                  //center: (100, 200), r = 10 ,color : CYAN  
    Tft.fillCircle(200, 100, 30,RED);                   //center: (200, 100), r = 30 ,color : RED    
    Tft.fillCircle(200, 200, 30,BLUE);                  //center: (200, 200), r = 30 ,color : BLUE                 
void loop()

3.   Upload the code to the Arduino board. You should be able to see several circles on the screen as shown below.

The TFT Touch Shield showing off some of its basic drawing capabilities.

Circles isn't the only thing our library can help you draw, we also have a lines, number, rectangle, and many more examples. Check those out as well to become a pro with the shield.

Code Explained

Let us show you how to use the drawCircle and fillCircle functions.


Function Heading: drawCircle(int poX, int poY, int r, INT16U color)

Function Description: The drawCircle function draws an empty circle with the center at the coordinates poX, and poY. The circle will be of radius r and the border color will be color. The color parameter is a 16-bit Red-Geen-Blue (RGB) integer, in the example code above the words YELLOW, CYAN, RED, and BLUE are defined as integers in the TFTv2.h file.

RGB Integers: A 16-bit RGB integer specifies the amount of red, green, and blue to form a color. From right to left, bits 0-4, 5-10, and 11-15 specify the amount of blue, green, and red. For example, if you want to specify white as the color this will require an equal amount of red, green, and blue therefore the RGB integer for white will be 0xffff.

These are the colors defined in the TFT Touch Shield V2 library, but you can make your own of course:

//Basic Colors
#define RED		0xf800
#define GREEN	0x07e0
#define BLUE	0x001f
#define BLACK	0x0000
#define YELLOW	0xffe0
#define WHITE	0xffff
//Other Colors
#define CYAN		0x07ff	
#define BRIGHT_RED	0xf810	
#define GRAY1		0x8410  
#define GRAY2		0x4208


Function Heading: fillCircle(int poX, int poY, int r, INT16U color)

Function Description: Draws a filled circle with center coordinates poX, and poY, with radius r and colored color.

Note: There are many other examples in this library (e.g "drawLines"), try them out to figure out how to use each of the draw functions.

Example #2: Display Images From The SD Card

This example will display a 320 × 240 24-bit-depth BMP image that you put in the micro SD card of the shield. This shows that you can toggle between the SD card and screen using the SPI protocol.

  1. Remove all power from the circuit.
  2. Using your PC save a 320 × 240 BMP image in the micro SD card and insert the SD card into the shield.
  3. Stack the shield on the Arduino board and connect the board to your to your PC's USB port.
  4. In the Arduino IDE, open the “tftbmp2” example in the same way as you opened the “drawCircle” example above.
  5. Upload the example code into the Arduino board.
  6. You should be able to see the BMP image(s) in the screen. Check out our results in the image below.

A beautiful yellow flower image we put in the TFT Touch Shield's SD card slot.

Example #3: Sketch Pad

This example shows how to make a sketch pad, with touch brushes of different colors.

  1. Open the “paint” the same way you opened the ”drawCircle” example above.
  2. Upload the code to the Arduino board.
  3. A color palette should be displayed on the right side of the screen to give the user different colors to choose from for his/her finger brush. The colors available in the palette are BLACK, RED, GREEN, BLUE, CYAN, YELLOW, WHITE, and GRAY1. Check out our artistic skills below!

Smiley face we made using the TFT shield as a sketch pad

Note: To clear the screen/canvas, simply press the reset button or power off and then power on the Shield.

Example #4: Backlight Control

The TFT Touch Shield's backlight is on by default since its control circuit is directly powered by the 5V pin. If, however, you wish to control the backlight's on/off state using the Arduino Digital I/O pin 7, a simple modification will have to be made:

Note: Please read ALL of the following steps first before performing any action.

1. Find the back light's three terminals' locations (ON, BACKLIGHT, D7) in the back/bottom side of the shield (see figure below).

Backlight terminals location.

2. Notice that the ON terminal is soldered to the BACKLIGHT terminal as shown in the PCB figure below. Scrape off this connection, or use a soldering iron to remove it.

The default connection of the backlight (ON connected to BACKLIGHT).

3. Now solder the D7 terminal to the BACKLIGHT terminal as shown in the PCB figure below.

The required modification to control the backlight using digital pin 7 (connect BACKLIGHT to D7)

Now controlling the backlight's state is as easy as controlling an LED, upload the following code to the Arduino board to see how to toggle the backlight every 500ms (1/2 second):

#define Backlight 7
void setup(void)
void loop(void)
{ digitalWrite(Backlight,HIGH); // turn on the backlight
 digitalWrite(Backlight,LOW);  // turn off the backlight

Related Projects

The best way to learn something is to create a project with it.

Recipe Community is a place which gathers a lot of amazing projects with step-by-step tutorials. Makers in the community have made an awesome project with the TFT Touch Shield V2.0, check this out!

Make an Instructables Indicator


Instructables is really an awesome place to share your awesome project. There are so many makers here to share their works.

I had made many instructable as well, I will feel excite when my instructable get a large views or favorites. Especially when you first post your instructable, you will always go to the page and see if someone like it.

I still remember when I post my first Instructable post years ago, it's a project about Arduino, I made a phone with Arduino. It's called ArduinoPhone, even today I can get some comments from it, and I am glad to help others to make their own phone with Arduino.

Now, I will share my latest instructions, it's a beautiful device that you can put it on the desk. It's named Instructables Indicator. With this instructable, you can know people like your Instructable if your Instructable posts get featured.

This application contains the below function:

Connecting to Wi-Fi

  • A 320 × 240 TFT display to show the message
  • Include Views, Favorites and Comments.
  • When your Instructable post get featured, the LEDs on the base will turn on

If you like Instructables and write instruction post, you will like this idea. I will share the process to make it, as well as the code, all things are open sources.

Wiki makeitnow logo.png


Recipe - arduinophone.png

Combining Arduino and other shield modules, we make a mobile phone named Arduino Phone. Meanwhile, we printed a shell for it with the 3D printer. Although it's not such fine as you think, even a little bit clunky, it's still very cool. That is the point this is a cell phone made by ourselves.

While, we can't install Arduino Phone Apps limited by Arduino. So, if you want to play Angry Birds, then you need to do some big modifications on Arduino Phone. :)

Next, I will make a detailed explanation about the steps of making an Arduino Phone, including the hardware connection and software implementation.

Now, let's begin.

Wiki makeitnow logo.png


Personal tools