AdaWiki

  
==== 2.8" TFT touch screen shield  ====
[[http://www.ladyada.net/images/tftshield/tftshield.jpg|{{  http://www.ladyada.net/images/tftshield/tftshield_t.jpg?nolink&500x385  |}}]]



Spice up your Arduino project with a beautiful large touchscreen display shield with built in microSD card connection.  This TFT display is big (2.8" diagonal) bright (4 white-LED backlight)  and colorful (18-bit 262,000 different shades)! 240x320 pixels with  individual pixel control. It has way more resolution than a black and  white 128x64 display. As a bonus, this display has a resistive  touchscreen attached to it already, so you can detect finger presses  anywhere on the screen. 



The shield is fully assembled, tested and ready to go. No wiring, no soldering! Simply plug it in and load up our library - you'll have it running in under 10 minutes!



This display shield has a controller built into it with RAM buffering, so that  almost no work is done by the microcontroller. The shield does require a lot of pins: 12 lines total for the display, 13 total if you use the microSD card

[[http://www.ladyada.net/images/tftshield/tftshieldback.jpg|{{  http://www.ladyada.net/images/tftshield/tftshieldback_t.jpg?nolink&500x385  |}}]]



Of course, we wouldn't just leave you with a datasheet and a "good luck!" - [[https://github.com/adafruit/TFTLCD-Library|we've written a full open source graphics library that can draw pixels, lines, rectangles, circles and text]] . We[[https://github.com/adafruit/Touch-Screen-Library| also have a touch screen library that detects x, y and z (pressure)]] and example code to demonstrate all of it. The code is written for  Arduino but can be easily ported to your favorite microcontroller! 



**[[http://www.adafruit.com/products/376|Pick one up today at the Adafruit Shop!]] ** 



**Specifications:** 


  *2.8" diagonal LCD TFT display
  *240x320 resolution, 18-bit (262,000) color
  *[[http://www.adafruit.com/datasheets/ILI9325.pdf|ILI9325 (datasheet)]] or [[http://www.adafruit.com/datasheets/ILI9328.pdf|ILI9328 (datasheet)]] controller with built in video RAM buffer
  *8 bit digital interface, plus 4 control lines
  *Uses digital pins 5-13 and analog 0-3. That means you can use digital pins 2, 3 and analog 4 and 5. Pin 12 is available if not using the microSD
  *Works with any Arduino '328 (Mega not supported yet)
  *5V compatible! Use with 3.3V or 5V logic 
  *Onboard 3.3V @ 300mA LDO regulator
  *4 white LED backlight. On by default but you can connect the transistor to a digital pin for backlight control
  *4-wire resistive touchscreen 
==== Easy to use - just snap on!  ====
{{  http://www.ladyada.net/images/tftshield/shieldon_t.jpg?nolink&500x385  |}}



Because the TFT is exactly the same size as an Arduino, we preassemble the shield in the factory. To use, simply place it onto your Arduino '328. No wiring, no soldering!


==== LCD test  ====


We have a library with example code ready to go for use with these TFTs.  The library is not incredibly fast and optimized but its a good start  and can easily be ported to other micrcontrollers. However, we'll assume  you're using an Arduino 



[[https://github.com/adafruit/TFTLCD-Library|Visit our github repository ]] and click on the **Downloads** button in the top right corner to download a zip of the library and examples. Uncompress the folder and rename it **TFTLCD** make sure that inside that folder is the cpp and .h files. Then copy it to your arduinosketchfolder/libraries folder. [[http://www.ladyada.net/library/arduino/libraries.html|See our tutorial for more details. ]]

<class warning>
**For this shield, there is one more step! Open up the TFTLCD.h file in the libraries folder and uncomment the line at the top that says**: \\ 
</class>
<code>
//comment or uncomment the next line for special pinout! 
#define USE_ADAFRUIT_SHIELD_PINOUT
</code>

Restart the Arduino software. You should see a new **example **folder called **TFTLCD** and inside,  an example called **graphicstest**.  Upload that sketch to your Arduino. You should see a collection of  graphical tests draw out on the TFT 

[[http://www.ladyada.net/images/tftshield/lines.jpg|{{  http://www.ladyada.net/images/tftshield/lines_t.jpg?nolink&500x385  |}}]]


==== Graphics library  ====
The graphics library has a few ready to go functions that should help you start out with your project. Its not exhaustive and we'll try to update it if we find a really useful function.



First thing to note is that color is 16-bit, and that includes **Red, Green **and** Blue **in a 16-bit variable. The way the color is packed in is the top 5 bits are red, the middle 6 bits are green and the bottom 5 bits are blue.



For solid colors, we have this handy cheat-sheet. Of course, you can pick any of 262,000 colors but while starting out, this might be helpful

<code C>// Color definitions
#define BLACK           0x0000
#define BLUE            0x001F
#define RED             0xF800
#define GREEN           0x07E0
#define CYAN            0x07FF
#define MAGENTA         0xF81F
#define YELLOW          0xFFE0 

#define WHITE           0xFFFF</code>

First up is the most basic pixel pusher. You can call this with two coordinates and a color and it will make a dot:

<code C> void drawPixel(uint16_t x, uint16_t y, uint16_t color);</code>[[http://www.ladyada.net/images/tftshield/lines.jpg|{{  http://www.ladyada.net/images/tftshield/lines_t.jpg?nolink&500x385  |}}]]



You can also draw lines, with a starting and end point and color

<code C>void drawLine(uint16_t x0, uint16_t y0, uint16_t x1, uint16_t y1, uint16_t color);</code>

If your lines are vertical or horizontal, you can call an optimized drawing function that doesn't do all the angular calculations.

<code C>void drawVerticalLine(uint16_t x0, uint16_t y0, uint16_t length, uint16_t color);

void drawHorizontalLine(uint16_t x0, uint16_t y0, uint16_t length, uint16_t color);</code>[[http://www.ladyada.net/images/tftshield/rects.jpg|{{  http://www.ladyada.net/images/tftshield/rects_t.jpg?nolink&500x385  |}}]]



Next up, rectangles and squares can be drawn and filled using the following procedures. If you want a recangle that has a contrasting outline color, **fillRect** first, then **drawRect** over it

<code C>void drawRect(uint16_t x0, uint16_t y0, uint16_t w, uint16_t h, uint16_t color);

void fillRect(uint16_t x0, uint16_t y0, uint16_t w, uint16_t h, uint16_t color);</code>[[http://www.ladyada.net/images/tftshield/circles.jpg|{{  http://www.ladyada.net/images/tftshield/circles_t.jpg?nolink&500x385  |}}]]



Likewise, for circles, you can draw and fill

<code C>void drawCircle(uint16_t x0, uint16_t y0, uint16_t r,	uint16_t color);

void fillCircle(uint16_t x0, uint16_t y0, uint16_t r,	uint16_t color);</code>[[http://www.ladyada.net/images/tftshield/text.jpg|{{  http://www.ladyada.net/images/tftshield/text_t.jpg?nolink&500x385  |}}]]



Text is a little different. Instead of one procedure, you will set up the text size, color and location and then **print()** (just like Serial.print()!)

<code C>void setCursor(uint16_t x0, uint16_t y0);
void setTextColor(uint16_t color);

void setTextSize(uint8_t size);
</code>

First start with **setCursor(x, y)** this will place the top right corner of the text where-ever you please. Initially, its set to (0, 0). Then set the text color with **setTextColor(color)** by default its white. Then set the 'size' with **setTextSize(size)** this will 'multiply' the text by a scaling factor. Above you can see scales of 1 (default), 2 and 3. This is because we only ship the library with a simple font, to save space. You can just scale it to get bigger text without requiring a new font. 



Finally, you can use **print()** or **println() **just like you do with **Serial**! For example, to print a string, use **print("Hello world") **- that's the first line of the image above. To print variables, you can also use **print()** the second line is **print(1234.56)** and the third line is **print(0xDEADBEEF, HEX)**



You can also rotate your drawing. Note that this will not rotate what you already drew, but it will relocate any new drawing. 

[[http://www.ladyada.net/images/tftshield/rotated.jpg|{{  http://www.ladyada.net/images/tftshield/rotated_t.jpg?nolink&500x385  |}}]]

<code C> void rotate(uint8_t rotation);</code>The rotation variable can be 0, 1, 2 or 3. Rotation 0 makes it so that the display is in portrait mode, with the USB jack in the top right. Rotation 2 is portrait, with the USB jack in the bottom left. Rotation 1 is landscape mode, with the USB jack in the bottom right and rotation 3 is also landscape, with the USB jack in the top left.

When you rotate, the origin point moves with you. You may need to reference the size of the screen, which changes between portrait and landscape, use **width() **and **height()**! To get the size.

<code C>uint16_t width(); \\ uint16_t height();</code>

These primitives should get you started!

==== Headline ====

==== Touchscreen Paint example  ====


The LCD has a 2.8" 4-wire resistive touch screen glued onto it. You can  use this for detecing finger-presses, stylus', etc. You'll need 4 pins  to talk to the touch panel **but** we **reuse** some of the pins for the TFT LCD! This is because the resistance of the  panel is high enough that it doesn't interfere with the digital  input/output and we can query the panel in between TFT accesses, when  the pins are not being used. 



[[https://github.com/adafruit/Touch-Screen-Library|Visit our github repository ]] and click on the **Downloads** button in the top right corner to download a zip of the library and examples. Uncompress the folder and rename it **TouchScreen ** make sure that inside that folder is the cpp and .h files. Then copy it to your arduinosketchfolder/libraries folder. [[http://www.ladyada.net/library/arduino/libraries.html|See our tutorial for more details. ]]



We connect the 4 pins as follows:


  * Y+ is connected to Analog 1
  *Y- is connected to Digital 7
  *X+ is connected to Digital 6
  *X- is connected to Analog 2

Now start up the **tftpaint_shield** example in the TFTLCD library. The right hand side will have 'color boxes' you can press to select  which color you want to draw with. If you press the area to the **left** where the screen ends, it will erase the screen. 

[[http://www.ladyada.net/images/tftshield/tftshield.jpg|{{  http://www.ladyada.net/images/tftshield/tftshield_t.jpg?nolink&500x385  |}}]]



 


==== Bitmaps from microSD card  ====


There is a built in microSD card slot into the shield, and we can use that to load bitmap images! You will need a microSD card formatted** FAT16 or FAT32** (they almost always are by default)



You'll also need to download our SD library modifyied to allow faster reads (these changes will be added to arduino v23)  but [[https://github.com/adafruit/SD|for now you can download the new library here]] . Download the library by clicking the **Downloads** button and uncompressing the folder. Replace the files in your **ArduinoIDE/libraries/SD** folder and restart the IDE. 



[[http://www.ladyada.net/images/tftshield/tiger.bmp|Download this tiger bitmap and save it to the microsd card! ]](Image by [[http://www.flickr.com/photos/shanegorski/2515009456/in/photostream/|Shane Gorski]])



Start up the IDE and select the **tftbmp_shield** sketch. Upload it to your Arduino to see the tiger!

[[http://www.ladyada.net/images/tftshield/tftshieldtiger.jpg|{{  http://www.ladyada.net/images/tftshield/tftshieldtiger_t.jpg?nolink&500x385  |}}]]

To make new bitmaps, make sure they are less than 240 by 320 pixels and save them in **24-bit BMP format**! They must be in 24-bit format, even if they are not 24-bit color as that is the easiest format for the Arduino. You can rotate images using the **setRotation()** procedure


==== Downloads  ====

  *[[https://github.com/adafruit/TFTshield|Eagle files & Schematics]]
  * [[https://github.com/adafruit/Touch-Screen-Library|Touch screen library]] 
  * [[https://github.com/adafruit/TFTLCD-Library|TFT LCD library]] 
  *[[https://github.com/adafruit/SD|Latest SD card library]]

For files on github, download by clicking the **Downloads** button in the top right only!
AdaWiki

User Tools

Site Tools

Page Tools
