TOP

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


Contents

Introduction

This is a multifunctional 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 in the shield to provide storage space, and anything else you can think of, for your projects.


Model: SLD10261P

Features

  • Big, 2.8" 320x240 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


Specification

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 Deg
Resolution 320x240 /
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.5x54.7x18 mm
Weight 24±2 g


Cautions

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

TFT Touch Shield Pin Map and Description

Refer to the next two figures below for any mention to 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 an 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

TFT Touch Shield Examples

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.

drawCircle:

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 

fillCircle:

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 320x240 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 320x240 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 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 backlight's three terminals location (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 Backlignt 7
void setup(void)
{
 pinMode(Backlignt,OUTPUT); 
}
void loop(void)
{ digitalWrite(Backlignt,HIGH); // turn on the backlight
 delay(500);
 digitalWrite(Backlignt,LOW);  // turn off the backlight
 delay(500);
}



Resources


Personal tools
Namespaces

Variants
Actions
Navigation
Support
Navigation
Collections
Toolbox