Differences

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

--- tutorials:products:tfttouchshield:index.html [2012/03/17 20:09]
ladyada [Touchscreen Paint example]
+++ tutorials:products:tfttouchshield:index.html [2016/01/28 18:05] (current)
@@ Line 67: / 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/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>
@@ Line 81: / 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.
-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();
+[[http://www.ladyada.net/wiki/tutorials/gfx|Check out the GFX tutorial for detailed information about what is supported and how to use it!]]
-uint16_t height();</code>
-These primitives should get you started!

AdaWiki

User Tools

Site Tools

Differences

Page Tools