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
tutorials:products:18tftbreakout:index.html [2012/01/29 18:55]
ladyada
tutorials:products:18tftbreakout:index.html [2016/01/28 18:05] (current)
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|Adafruit ST7735 library]]. \\
 +([[http://​www.ladyada.net/​library/​arduino/​libraries.html|See our detailed tutorial for installation assistance.]])
  
-[[https://​github.com/​adafruit/​Adafruit-ST7735-Library|You can download our Arduino library with examples from github]]. To install itrename ​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.]] +For shield userssee the "​shieldtest.pde"​ example ​in the ST7735 ​library.
- +
  
 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/attic/tutorials/products/18tftbreakout/index.html.1327863314.txt.gz · Last modified: 2016/01/28 18:05 (external edit)