User Tools

Site Tools


tutorials:products:tfttouchshield:index.html

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
tutorials:products:tfttouchshield:index.html [2011/06/13 04:35]
ladyada
tutorials:products:tfttouchshield:index.html [2016/01/28 18:05] (current)
Line 35: Line 35:
   *8 bit digital interface, plus 4 control lines   *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   *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)+  *Works with any Arduino '​328 ​or Mega
   *5V compatible! Use with 3.3V or 5V logic    *5V compatible! Use with 3.3V or 5V logic 
   *Onboard 3.3V @ 300mA LDO regulator   *Onboard 3.3V @ 300mA LDO regulator
Line 55: Line 55:
  
  
-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!+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. No wiring, no soldering!
  
  
 +{{  http://​www.ladyada.net/​images/​tftshield/​megaTFT_t.jpg?​nolink&​500 ​   |}}
 ==== LCD test  ==== ==== LCD test  ====
  
Line 66: Line 67:
  
 [[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. ]] [[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. ]]
 +
 +[[https://​github.com/​adafruit/​Adafruit-GFX-Library|You will also need to get the GFX graphics core]] 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 **Adafruit_GFX** make sure that inside that folder is the cpp and .h files. Then copy it to your arduinosketchfolder/​libraries folder. ​
  
 <class warning> <class warning>
Line 80: Line 83:
  
  
-==== Graphics library ​ ​==== +==== Adafruit GFX 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.+The TFT LCD library is based off of the Adaftui GFX graphics ​core library. GFX has many 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. Right now it supports pixels, lines, rectangles, circles, round-rects,​ triangles and printing text as well as rotation.
  
 +[[http://​www.ladyada.net/​wiki/​tutorials/​gfx|Check out the GFX tutorial for detailed information about what is supported and how to use it!]]
  
- 
-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! 
  
  
Line 187: Line 111:
  
 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. ​ 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. ​
 +
 +<class notewarning>​
 +The touch screen is made of a thin glass sheet, and its **very fragile** - a small crack or break will make the entire touch screen unusable. Don't drop or roughly handle the TFT and be especially careful of the corners and edges.
 +
 +When pressing on the touchscreen,​ sometimes people can use the tip of their fingers, or a fingernail. If you don't find the touchscreen responds well to your fingers, you can use a rounded stylus which will certainly work. **Do not press harder and harder until the screen cracks!**
 +</​class>​
  
 [[http://​www.ladyada.net/​images/​tftshield/​tftshield.jpg|{{ ​ http://​www.ladyada.net/​images/​tftshield/​tftshield_t.jpg?​nolink&​500x385 ​ |}}]] [[http://​www.ladyada.net/​images/​tftshield/​tftshield.jpg|{{ ​ http://​www.ladyada.net/​images/​tftshield/​tftshield_t.jpg?​nolink&​500x385 ​ |}}]]
Line 200: Line 130:
 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) 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)
  
 +<class notewarning>​
 +The SD card socket shares pins with the TFT, so many of the '​default'​ example sketches for the SD card will not work without following the initialization steps in this sketch. Before assuming that the TFT shield is broken because the default SD examples wont work, run this BMP drawing sketch. If you need to use the microSD card holder look carefully at the example sketch to see the steps to initialize the card and TFT in order
 +</​class>​
  
  
 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.  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. 
  
 +**FOR MEGA ARDUINOS** edit the **SD/​utility/​Sd2Card.h** file after installing and uncomment the line that says **#define MEGA_SOFT_SPI 1** to allow the Mega to use the same pinout for SD cards as the Classic Arduinos
  
 [[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]]) [[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]])
Line 216: Line 149:
 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 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
  
 +
 +==== Controlling the backlight ====
 +
 +By default, we assume you'll want the backlight on all the time. However, you may want to PWM control or otherwise turn off the LED backlight to save power. You can do this with a simple hack. On the back, look for the two **backlight** jumpers. Cut the trace between the **VCC** jumper using a sharp knife and then solder the jumper labeled **Pin 3**. Then you can use Digital 3 to control the backlight
 +
 +[[http://​www.ladyada.net/​images/​tftshield/​tftshieldback.jpg|{{ ​ http://​www.ladyada.net/​images/​tftshield/​tftshieldback_t.jpg?​nolink&​500x385 ​ |}}]]
  
 ==== Downloads ​ ==== ==== Downloads ​ ====
/home/ladyada/public_html/wiki/data/attic/tutorials/products/tfttouchshield/index.html.1307939738.txt.gz · Last modified: 2016/01/28 18:05 (external edit)