Differences

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

--- tutorials:products:18tftbreakout:index.html [2011/05/11 21:22]
daigo
+++ 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!
+<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 15: / Line 18: @@
 The breakout has the TFT soldered on (it uses a delicate flex-circuit connector) as well as a ultra-low-dropout 3.3V regulator and a 3/5V level shifter so you can use it with 3.3V **or **5V power and logic. We also had a little space so we placed a microSD card holder so you can easily load full color bitmaps from a FAT16/FAT32 formatted microSD card.
+**[[http://www.adafruit.com/products/358|You can pick up one of these displays in the Adafruit shop!]]**
 ==== Flexible Wiring  ====
@@ Line 20: / 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.
+<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  |}}]]
@@ Line 66: / Line 75: @@
-Download our Arduino library (see bottom of page) from github by clicking on **Download** in the top right corner. Uncompress the folder and rename it **ST7735** - inside the folder you should see the **st7735.cpp** and **st7735.h** files. Install the **ST7735 **library foler by placing it in your **//arduinosketchfolder///libraries** folder. You may have to create the **libraries** subfolder if this is your first library. [[http://www.ladyada.net/library/arduino/libraries.html|You can read more about installing libraries in our tutorial]]
+Download our Arduino library (see bottom of page) from github by clicking on **Download** in the top right corner. Uncompress the folder and rename it **Adafruit_ST7735** - inside the folder you should see the **Adafruit_ST7735.cpp** and **Adafruit_ST7735.h** files. Install the **Adafruit_ST7735 **library foler by placing it in your **//arduinosketchfolder///libraries** folder. You may have to create the **libraries** subfolder if this is your first library. [[http://www.ladyada.net/library/arduino/libraries.html|You can read more about installing libraries in our tutorial]]
-Restart the Arduino IDE. You should now be able to select **File > Examples > ST7735 > graphicstest** sketch. Upload the sketch to your Arduino wired as above.
+Restart the Arduino IDE. You should now be able to select **File > Examples > Adafruit_ST7735 > graphicstest** sketch. Upload the sketch to your Arduino wired as above.
 [[http://www.ladyada.net/images/18tftbreakout/st7735lines.jpg|{{  http://www.ladyada.net/images/18tftbreakout/st7735lines_t.jpg?nolink&500x321  |}}]]
@@ Line 92: / Line 101: @@
 wiring diagram[[http://www.ladyada.net/images/18tftbreakout/spiwiring.jpg|{{ http://www.ladyada.net/images/18tftbreakout/spiwiring_t.jpg?nolink&500x473 |}}]]
-Select the **File > Examples > ST7735 > graphicstest_highspeed** sketch. Upload the sketch to your Arduino wired as above.
+Select the **File > Examples > Adafruit_ST7735 > graphicstest_highspeed** sketch. Upload the sketch to your Arduino wired as above.
@@ Line 98: / Line 107: @@
 In the sketch we changed the pin definitions
-<code C>//#define sclk 13    // for MEGAs use pin 52 \\ //#define mosi 11    // for MEGAs use pin 51 \\ #define cs 10   // for MEGAs you probably want this to be pin 53 \\ #define dc 9 \\ #define rst 8  // you can also connect this to the Arduino reset</code>
+<code C>
+//#define sclk 13    // for MEGAs use pin 52
+//#define mosi 11    // for MEGAs use pin 51
+#define cs 10   // for MEGAs you probably want this to be pin 53
+#define dc 9
+#define rst 8  // you can also connect this to the Arduino reset</code>
 To use the hardware SPI, we commented out this line
-<code C>// Option 1: use any pins but a little slower \\ // ST7735 tft = ST7735(cs, dc, mosi, sclk, rst);  </code>and uncommented this line: <code C>// Option 2: must use the hardware SPI pins  \\ // (for UNO thats sclk = 13 and sid = 11) and pin 10 must be  \\ // an output. This is much faster - also required if you want \\ // to use the microSD card (see the image drawing example) \\ ST7735 tft = ST7735(cs, dc, rst);    </code>
+<code C>
+// Option 1: use any pins but a little slower
+// Adafruit_ST7735 tft = Adafruit_ST7735(cs, dc, mosi, sclk, rst);  </code>
+and uncommented this line:
+<code C>
+// Option 2: must use the hardware SPI pins
+// (for UNO thats sclk = 13 and sid = 11) and pin 10 must be
+// an output. This is much faster - also required if you want
+// to use the microSD card (see the image drawing example)
+Adafruit_ST7735 tft = Adafruit_ST7735(cs, dc, rst);    </code>
 Now when you run the graphics test you'll notice its much faster
 **If you want to usethe microSD card and TFT at the same time, you'll need to use the hardware SPI because the SPI pins are shared between the two. **See the bitmaps tutorial below for details on how to do this
 ==== 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 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. 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 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.
+__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  ====
@@ Line 209: / Line 168: @@
 Now load the **bitmap** example sketch into the Arduino. It should display the parrot image. If you have any problems, check the serial console for any messages such as not being able to initialize the microSD card or not finding the image.
-{{  http://www.ladyada.net/images/18tftbreakout/parrot.bmp?nolink  |}}
+{{  :tutorials:products:18tftbreakout:parrot.jpg?nolink |}}
 ==== 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/ST7735-Library|You can download our Arduino library with examples from github]]. To install it, rename the downloaded and uncompressed library to **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 users, see 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]]

AdaWiki

User Tools

Site Tools

Differences

Page Tools