User Tools

Site Tools


tutorials:products:18tftbreakout: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
Next revision Both sides next revision
tutorials:products:18tftbreakout:index.html [2012/01/29 18:55]
ladyada
tutorials:products:18tftbreakout:index.html [2012/07/25 17:57]
adafruit_support [Flexible Wiring]
Line 7: Line 7:
 This tutorial is for our 1.8" diagonal TFT display & microSD breakout board. This breakout is the best way to add a small, colorful and bright display to any project. Since the display uses 4-wire SPI to communicate and has its own pixel-addressable frame buffer, it can be used with every kind of microcontroller. Even a very small one with low memory and few pins available! This tutorial is for our 1.8" diagonal TFT display & microSD breakout board. This breakout is the best way to add a small, colorful and bright display to any project. Since the display uses 4-wire SPI to communicate and has its own pixel-addressable frame buffer, it can be used with every kind of microcontroller. Even a very small one with low memory and few pins available!
  
 +<class warning>
 +**We also have a shield version of this display that is pre-wired for use with an Arduino. ​ Just solder in the headers and you are ready to go!**
 +</​class>​
  
  
Line 22: Line 25:
  
 There are two ways to wire up these displays - one is a more flexible method (you can use any pins on the Arduino) and the other is much faster (4-8x faster, but you are required to use the hardware SPI pins) We will begin by showing how to use the more flexible method. ​ There are two ways to wire up these displays - one is a more flexible method (you can use any pins on the Arduino) and the other is much faster (4-8x faster, but you are required to use the hardware SPI pins) We will begin by showing how to use the more flexible method. ​
 +
 +<class warning>
 +** The shield version is pre-wired for hardware SPI.  Once you have soldered in the headers, you can skip the wiring instructions and proceed to the "​Graphics Library"​ section for the library code and examples **
 +</​class>​
  
 [[http://​www.ladyada.net/​images/​18tftbreakout/​18tftback.jpg|{{ ​ http://​www.ladyada.net/​images/​18tftbreakout/​18tftback_t.jpg?​nolink&​500x385 ​ |}}]] [[http://​www.ladyada.net/​images/​18tftbreakout/​18tftback.jpg|{{ ​ http://​www.ladyada.net/​images/​18tftbreakout/​18tftback_t.jpg?​nolink&​500x385 ​ |}}]]
Line 128: Line 135:
 ==== Graphics Library ​ ==== ==== Graphics Library ​ ====
  
 +We've written a full graphics library specifically for this display which will get you up and running quickly. The code is written in C/C++ for Arduino but is easy to port to any microcontroller by rewritting the low level pin access functions.
  
-We've written a full graphics library ​specifically for this display which will get you up and running quicklyThe code is written in C/C++ for Arduino but is easy to port to any microcontroller by rewritting the low level pin access ​functions. ​Here are some of the functions ​we've included in the library+The TFT LCD library is based off of the Adafruit GFX graphics ​core library. ​GFX has many ready to go functions ​that should help you start out with your projectIts 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.
  
 +__Two__ libraries need to be downloaded and installed: first is the [[https://​github.com/​adafruit/​Adafruit-ST7735-Library|ST7735 library]] (this contains the low-level code specific to this device), and second is the [[https://​github.com/​adafruit/​Adafruit-GFX-Library|Adafruit GFX Library]] (which handles graphics operations common to many displays we carry). Download both ZIP files, uncompress and rename the folders to '​Adafruit_ST7735'​ and '​Adafruit_GFX'​ respectively,​ place them inside your Arduino libraries folder and restart the Arduino IDE. If this is all unfamiliar, we have a [[http://​www.ladyada.net/​library/​arduino/​libraries.html|tutorial introducing Arduino library concepts and installation]].
  
 +[[http://​www.ladyada.net/​images/​18tftbreakout/​st7735squares.jpg|{{ ​ http://​www.ladyada.net/​images/​18tftbreakout/​st7735squares_t.jpg?​nolink&​500x309 ​ |}}]]
  
-First thing to note is that color is 16-bit (the driver can handle 18-bit but 16-bit is good enough for most applications and fits neatly into a 2-byte word), 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. +[[http://​www.ladyada.net/​wiki/tutorials/gfx|Check out the GFX tutorial ​for detailed information about what is supported ​and how to use it!]]
- +
- +
- +
-For solid colors, we have this handy cheat-sheet. Of course, you can pick any of 65,536 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>​ +
- +
- +
- +
-**Drawing pixels** +
- +
-[[http://​www.ladyada.net/​images/18tftbreakout/st7735pixel.jpg|{{  http://​www.ladyada.net/​images/​18tftbreakout/​st7735pixel_t.jpg?​nolink&​500x301 ​ |}}]] +
- +
- +
- +
-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(uint8_t x, uint8_t y, uint16_t color);</​code>​[[http://​www.ladyada.net/​images/​18tftbreakout/​st7735lines.jpg|{{ ​ http://​www.ladyada.net/​images/​18tftbreakout/​st7735lines_t.jpg?​nolink&​500x321 ​ |}}]] +
- +
- +
- +
-You can also draw lines, with a starting and end point and color +
- +
-<code C>void drawLine(uint8_t x0, uint8_t y0, uint8_t x1, uint8_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(uint8_t x0, uint8_t y0, uint8_t length, uint16_t color); +
- +
-void drawHorizontalLine(uin86_t x0, uin86_t y0, uint8_t length, uint16_t color);</​code>​[[http://​www.ladyada.net/​images/​18tftbreakout/​st7735squares.jpg|{{ ​ http://​www.ladyada.net/​images/​18tftbreakout/​st7735squares_t.jpg?​nolink&​500x309 ​ |}}]] +
- +
- +
- +
-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(uint8_t x0, uint8_t y0, uint8_t w, uint8_t h, uint16_t color); +
- +
-void fillRect(uint8_t x0, uint8_t y0, uint8_t w, uint8_t h, uint16_t color);</​code>​[[http://​www.ladyada.net/​images/​18tftbreakout/​st7735circles.jpg|{{ ​ http://​www.ladyada.net/​images/​18tftbreakout/​st7735circles_t.jpg?​nolink&​500x311 ​ |}}]] +
- +
- +
- +
-Likewise, ​for circles, you can draw and fill +
- +
-<code C>void drawCircle(uint8_t x0, uint8_t y0, uint8_t r, uint16_t color); +
- +
-void fillCircle(uint8_t x0, uint16_t y0, uint8_t r, uint8_t color);</​code>​[[http://​www.ladyada.net/​images/​18tftbreakout/​st7735text.jpg|{{ ​ http://​www.ladyada.net/​images/​18tftbreakout/​st7735text_t.jpg?​nolink&​500x514 ​ |}}]] +
- +
- +
- +
-If you need to add some text, we have two basic string drawing procedures. The first is just for a single character. You can place the character anywhere, ​and with any color. We only have one font to save on space, and its meant to be 5x8 pixels. If you pass **size** as 1 or if you don't put down a size, that will be what is used. If you need bigger text, the code can scale the font up by passing in a larger **size** (integer). It's a little blocky but this keeps the flash usage down so we don't need multiple fonts.  +
- +
-<code C>void drawChar(uint8_t x, uint8_t y, char c, uint16_t color, uint8_t size); +
- +
-void drawString(uint8_t x, uint8_t y, char *str, uint16_t color, uint8_t size);</​code>​ +
- +
-  +
- +
- +
- +
-These primitives should get you started! +
  
 ==== Displaying bitmaps ​ ==== ==== Displaying bitmaps ​ ====
Line 233: Line 173:
 ==== Download ​ ==== ==== Download ​ ====
  
- +[[https://​github.com/​adafruit/​Adafruit-GFX-Library|Adafruit GFX library]]. ​\\ 
-[[https://​github.com/​adafruit/​Adafruit-ST7735-Library|You can download our Arduino ​library ​with examples from github]]. To install it, rename the downloaded and uncompressed library to **Adafruit_ST7735** and place in the sketchfolder/libraries folder. [[http://​www.ladyada.net/​library/​arduino/​libraries.html|See our detailed tutorial for more info.]] +[[https://github.com/​adafruit/​Adafruit-ST7735-Library|Adafruit ST7735 library]]. \\ 
- +([[http://​www.ladyada.net/​library/​arduino/​libraries.html|See our detailed tutorial for installation assistance.]])
  
 You may also be interested in the [[http://​www.adafruit.com/​datasheets/​JD-T1800.pdf|datasheet for the display]], and [[http://​www.adafruit.com/​datasheets/​ST7735R_V0.2.pdf|display driver chip]] You may also be interested in the [[http://​www.adafruit.com/​datasheets/​JD-T1800.pdf|datasheet for the display]], and [[http://​www.adafruit.com/​datasheets/​ST7735R_V0.2.pdf|display driver chip]]
  
  
/home/ladyada/public_html/wiki/data/pages/tutorials/products/18tftbreakout/index.html.txt · Last modified: 2016/01/28 18:05 (external edit)