Guide.TFT History

Hide minor edits - Show changes to markup

September 30, 2013, at 09:01 PM by Roberto Guido - todo's corrections
Changed line 12 from:

Library

to:

Library

Changed line 19 from:

Screen layout

to:

Screen layout

Changed line 26 from:

Colors

to:

Colors

Changed line 29 from:

Hardware vs software SPI interface

to:

Hardware vs software SPI interface

Changed lines 36-37 from:

Connecting the screen

to:

Connecting the screen

Changed line 40 from:
Connecting to the Esplora
to:

Connecting to the Esplora

Changed line 45 from:
Connecting to other Arduino boards
to:

Connecting to other Arduino boards

Changed line 48 from:

Write your first program

to:

Write your first program

Changed lines 137-138 from:

Movement across the screen

to:

Movement across the screen

Changed line 271 from:

Draw some text

to:

Draw some text

Changed line 368 from:

Draw an image from the SD card

to:

Draw an image from the SD card

Changed lines 490-491 from:

Next steps

to:

Next steps

May 21, 2013, at 04:03 PM by Alberto Cicchi -
Changed line 492 from:

Now that you have tested the basic functionality of the screen, see the TFT library? pages for information about the library's API and additional examples. See the hardware page? for more information about the screen's components. It's also recommended to visit the Adafruit graphics library page for additional information on functions not covered.

to:

Now that you have tested the basic functionality of the screen, see the TFT library pages for information about the library's API and additional examples. See the hardware page for more information about the screen's components. It's also recommended to visit the Adafruit graphics library page for additional information on functions not covered.

May 21, 2013, at 03:56 PM by Alberto Cicchi -
Changed lines 8-9 from:
to:
May 21, 2013, at 03:03 PM by Alberto Cicchi -
Added line 45:
Connecting to other Arduino boards
May 21, 2013, at 03:01 PM by Alberto Cicchi -
Changed lines 45-46 from:

How to connect the screen to other Arduino boards: link

to:

To connect the screen to other Arduino boards, read the tutorial on this link.

May 21, 2013, at 03:00 PM by Alberto Cicchi -
Changed lines 45-55 from:
Connecting to other Arduino boards

You can either connect the screen with hardware SPI pins, or define your own set of pins. Using the hardware SPI is faster when drawing to the screen.

Arduino Uno connected to the screen. Click for larger size.

Connect the screen to a breadboard. The headers on the side of the screen with the small blue tab and arrow should be the ones that attach to the board. Pay attention to the orientation of the screen, in these images, it is upside down.

Connect the BL and +5V pins to power, and GND to ground. Connect CS-LD to pin 10, DC to pin 9, RESET to pin 8, MOSI to pin 11, and SCK to pin 13. If you're using a Leonardo, you'll be using different pins as outlined below

If using hardware SPI with the Uno, you need to declare CS, DC, and RESET. The MOSI (pin 11) and SCK (pin 13) pins are handled by the SPI library :

to:

How to connect the screen to other Arduino boards: link

Write your first program

To get started with the screen, first write a program that will draw a line, then 2 rectangles horizontally across the screen in different colors.

The first set of instructions are for the Uno, Leonardo, and similar boards. For use with the Esplora, see below.

First, declare the pins to use, import the necessary libraries, and instantiate a named instance of the TFT library. :

Added lines 54-56:
  1. include <TFT.h> // Hardware-specific library
  2. include <SPI.h>
Changed lines 59-60 from:
  1. define RESET 8
to:
  1. define RESET 8

// pin definition for the Leonardo // #define CS 7 // #define DC 0 // #define RESET 1

Changed line 69 from:

To use hardware SPI with the Leonardo, pin 16 is MOSI, pin 15 is SCK. These pins are exposed on the ICSP header. Declare the other pins like so :

to:

In setup(), you need to start the library with begin() and clear the screen by filling it in black with background().

Changed lines 71-75 from:
  1. define CS 7
  2. define DC 0
  3. define RESET 1

TFT myScreen = TFT(CS, DC, RESET);

to:

void setup(){

  myScreen.begin();  
  myScreen.background(0,0,0);  // clear the screen with black
  delay(1000);  // pause for dramatic effect

}

Changed lines 78-79 from:

When not using hardware SPI, you can use any available pins, but you must declare the MOSI and SCLK pins in addition to CD, DC, and RESET.

to:

in loop(), to draw a line across the screen, call line(). line() takes four arguments, the the starting x and y coordinates, and the ending x and y coordinates. For drawing a box, use rect(). rect() take four arguments as well : the x and y coordinates of the top left corner, followed by the width in pixels, and the height in pixels. Between each of these calls, change the color with stroke() or fill(). stroke() will change the color of a line, or the outline around a shape. fill() changes the internal color of a shape. Calling noStroke() will stop the library from drawing an outline around any shapes that follow it. If you call stroke() after noStroke(), the screen will again draw lines.

Changed lines 81-95 from:
to:
Changed lines 108-122 from:
to:
  1. include <Esplora.h>
Changed lines 111-112 from:
  myScreen.begin();  
  myScreen.background(0,0,0);  // clear the screen with black
to:
  EsploraTFT.begin();  
  EsploraTFT.background(0,0,0);  // clear the screen with black
Changed lines 115-119 from:
to:
Changed lines 117-118 from:
  myScreen.stroke(255, 0, 0); // set the stroke color to red
  myScreen.line(0, 10, myScreen.width(), 10); // draw a line across the screen
to:
  EsploraTFT.stroke(255, 0, 0); // set the stroke color to red
  EsploraTFT.line(0, 10, EsploraLCD.width(), 10); // draw a line across the screen
Changed lines 121-123 from:
  myScreen.noStroke(); // don't draw a line around the next rectangle
  myScreen.fill(0,255,0); // set the fill color to green
  myScreen.rect(0,20,myScreen.width(),10); //draw a rectangle across the screen
to:
  EsploraTFT.noStroke(); // don't draw a line around the next rectangle
  EsploraTFT.fill(0,255,0); // set the fill color to green
  EsploraTFT.rect(0,20,EsploraTFT.width(),20); //draw a rectangle across the screen
Changed lines 126-128 from:
  myScreen.fill(0,0,255); // set the fill color to blue
  myScreen.stroke(255,255,255); // outline the rectangle with a white line
  myScreen.rect(0,45,myScreen.width(),45); // draw a fat rectangle
to:
  EsploraTFT.fill(0,0,255); // set the fill color to blue
  EsploraTFT.stroke(255,255,255); // outline the rectangle with a white line
  EsploraTFT.rect(0,45,EsploraTFT.width(),50); // draw a fat rectangle
Changed line 131 from:
  myScreen.background(0,0,0); // clear the screen before starting again
to:
  EsploraTFT.background(0,0,0); // clear the screen before starting again
Changed lines 136-139 from:

If you are using an Esplora, the structure of the program is the exact same. As the Esplora has a socket designed for the screen, and the pins for using the screen are fixed, an Esplora only object is created when targeting sketches for that board. You can reference the screen attached to an Esplora through EsploraTFT.

You do not need to declare any pins in your sketch; the object is instantiated for you automatically :

to:

Movement across the screen

To give the illusion of motion, you need to quickly erase and draw images on the screen. When using Processing on a powerful computer, you can call background() every time through your draw() function to erase the window contests and dra objects in their new positions. The Arduino is not as fast, is it takes a little time to clear the screen when calling background() with the TFT library.

To create the illusion of motion, it's usually best to check if an object has moved each time through loop(). If it has, then you should draw over the object with your background color, then redraw the object in its new location. Because you're not updating all the pixels on the screen, it helps maintain the illusion of motion.

This example draws a single point, and has it bounce around on the screen. You'll set up the program in the same way you did previously, adding some variables to keep track of the point's current and previous locations, as well as the velocity and direction of the point.

Changed lines 147-148 from:
  1. include <Esplora.h>
to:
  1. define CS 10
  2. define DC 9
  3. define RESET 8

// pin definition for the Leonardo // #define CS 7 // #define DC 0 // #define RESET 1

TFT myScreen = TFT(CS, DC, RESET);

// initial position of the point is the middle of the screen // initial position of the point is the middle of the screen int xPos = 80; int yPos = 64;

// direction and speed int xDir = 1; int yDir = 1;

// variables to keep track of the point's location int xPrev = xPos; int yPrev = yPos;

Changed lines 173-175 from:
  EsploraTFT.begin();  
  EsploraTFT.background(0,0,0);  // clear the screen with black
  delay(1000);  // pause for dramatic effect
to:
  myScreen.begin();  
  myScreen.background(0,0,0); // clear the screen
Changed lines 176-181 from:
to:
Changed lines 183-198 from:
  EsploraTFT.stroke(255, 0, 0); // set the stroke color to red
  EsploraTFT.line(0, 10, EsploraLCD.width(), 10); // draw a line across the screen
  delay(1000);

  EsploraTFT.noStroke(); // don't draw a line around the next rectangle
  EsploraTFT.fill(0,255,0); // set the fill color to green
  EsploraTFT.rect(0,20,EsploraTFT.width(),20); //draw a rectangle across the screen
  delay(1000);

  EsploraTFT.fill(0,0,255); // set the fill color to blue
  EsploraTFT.stroke(255,255,255); // outline the rectangle with a white line
  EsploraTFT.rect(0,45,EsploraTFT.width(),50); // draw a fat rectangle
  delay(1000);

  EsploraTFT.background(0,0,0); // clear the screen before starting again
  delay(1000); 
to:
  // update the location of the dot
  xPos = xPos + xDir;
  yPos = yPos + yDir;

  // check if the current location is different than the previous
  if(xPos != xPrev || yPos != yPrev){
    myScreen.stroke(0,0,0); // set the stroke color to black 
    myScreen.point(xPrev, yPrev); // color in the previous point 
  }

  // draw a point in the current location
  myScreen.stroke(255,255,255);
  myScreen.point(xPos, yPos);

  // if the x or x position is at the screen edges, reverse direction
  if(xPos >= 160 || xPos <= 0){
    xDir = xDir*-1;
  }
  if(yPos >= 128 || yPos <= 0){
    yDir = yDir*-1;
  }

  // update the point's previous location
  xPrev=xPos;
  yPrev=yPos;

  // a 33ms delay means the screen updates 30 times a second
  delay(33);
Changed lines 213-222 from:
to:
Changed lines 219-230 from:
  1. define CS 10
  2. define DC 9
  3. define RESET 8

// pin definition for the Leonardo // #define CS 7 // #define DC 0 // #define RESET 1

TFT myScreen = TFT(CS, DC, RESET);

to:
  1. include <Esplora.h>
Deleted line 221:

// initial position of the point is the middle of the screen

Changed lines 230-232 from:

int xPrev = xPos; int yPrev = yPos;

to:

int xPrev, yPrev;

Changed lines 233-234 from:
  myScreen.begin();  
  myScreen.background(0,0,0); // clear the screen
to:
  EsploraTFT.begin();  
  EsploraTFT.background(0,0,0);
Changed lines 236-241 from:
to:
Changed lines 244-245 from:
    myScreen.stroke(0,0,0); // set the stroke color to black 
    myScreen.point(xPrev, yPrev); // color in the previous point 
to:
    EsploraTFT.stroke(0,0,0); // set the stroke color to black 
    EsploraTFT.point(xPrev, yPrev); // color in the previous point 
Changed lines 249-251 from:
  myScreen.stroke(255,255,255);
  myScreen.point(xPos, yPos);
to:
  EsploraTFT.stroke(255,255,255);
  EsploraTFT.point(xPos, yPos);
Changed line 264 from:
  // a 33ms delay means the screen updates 30 times a second
to:
  // slight pause
Changed lines 268-270 from:
to:
Changed lines 280-292 from:
  1. include <Esplora.h>

// initial position of the point is the middle of the screen int xPos = 80; int yPos = 64;

// direction and speed int xDir = 1; int yDir = 1;

// variables to keep track of the point's location int xPrev, yPrev;

to:
  1. define CS 10
  2. define DC 9
  3. define RESET 8

// pin definition for the Leonardo // #define CS 7 // #define DC 0 // #define RESET 1

TFT myScreen = TFT(CS, DC, RESET);

// variable to keep track of the elapsed time int counter = 0; // char array to print time char printout[4];

Changed lines 298-299 from:
  EsploraTFT.begin();  
  EsploraTFT.background(0,0,0);
to:
  myScreen.begin();  
  myScreen.background(0,0,0); // clear the screen
  myScreen.stroke(255,0,255);
  // static text
  myScreen.text("Running for",0,0);
  myScreen.text("seconds",0,30);  
  // increase font size for text in loop() 
  myScreen.setTextSize(3);
Added lines 308-311:
Changed lines 313-341 from:
  // update the location of the dot
  xPos = xPos + xDir;
  yPos = yPos + yDir;

  // check if the current location is different than the previous
  if(xPos != xPrev || yPos != yPrev){
    EsploraTFT.stroke(0,0,0); // set the stroke color to black 
    EsploraTFT.point(xPrev, yPrev); // color in the previous point 
  }

  // draw a point in the current location
  EsploraTFT.stroke(255,255,255);
  EsploraTFT.point(xPos, yPos);

  // if the x or x position is at the screen edges, reverse direction
  if(xPos >= 160 || xPos <= 0){
    xDir = xDir*-1;
  }
  if(yPos >= 128 || yPos <= 0){
    yDir = yDir*-1;
  }

  // update the point's previous location
  xPrev=xPos;
  yPrev=yPos;

  // slight pause
  delay(33);
to:
    // get elapsed time
    counter = millis();
    // convert to a string
    String elapsedTime = String(counter/1000);
    // add to an array
    elapsedTime.toCharArray(printout,4);
    // print out and erase
    myScreen.stroke(255,255,255);
    myScreen.text(printout,0,10);
    delay(1000);
    myScreen.stroke(0,0,0);
    myScreen.text(printout,0,10);
Changed lines 328-334 from:

Draw some text

The TFT library includes a basic font for drawing text on screen. By default, characters are 5 pixels wide and 8 pixels tall. It is possible to change the font size to 10x16, 15x24, or 20x32. For additional information on the underlying font capabilities, see the Adafruit page on graphic primitives.

In this example, you'll create a basic counter that will update a number on screen every half second. As in the earlier examples, include the necessary libraries and variables before setup().

In setup() send the static text that won't change to the screen. With setTextSize() you can increase the font size to make important parts stand out. Dynamic text for the screen should be stored in a char array. The String class makes it easy to update the text over time in the array.

to:

The Esplora code :

Changed lines 333-344 from:
  1. define CS 10
  2. define DC 9
  3. define RESET 8

// pin definition for the Leonardo // #define CS 7 // #define DC 0 // #define RESET 1

TFT myScreen = TFT(CS, DC, RESET);

to:
  1. include <Esplora.h>
Changed line 336 from:

int counter = 0;

to:

long counter = 0;

Changed lines 341-343 from:
  myScreen.begin();  
  myScreen.background(0,0,0); // clear the screen
  myScreen.stroke(255,0,255);
to:
  EsploraTFT.begin();  
  EsploraTFT.background(0,0,0); // clear the screen
  EsploraTFT.stroke(255,0,255);
Changed lines 345-346 from:
  myScreen.text("Running for",0,0);
  myScreen.text("seconds",0,30);  
to:
  EsploraTFT.text("Running for",0,0);
  EsploraTFT.text("seconds",0,30);  
Changed line 348 from:
  myScreen.setTextSize(3);
to:
  EsploraTFT.setTextSize(3);
Deleted lines 350-353:
Changed lines 359-360 from:
    myScreen.stroke(255,255,255);
    myScreen.text(printout,0,10);
to:
    EsploraTFT.stroke(255,255,255);
    EsploraTFT.text(printout,0,10);
Changed lines 362-363 from:
    myScreen.stroke(0,0,0);
    myScreen.text(printout,0,10);
to:
    EsploraTFT.stroke(0,0,0);
    EsploraTFT.text(printout,0,10);
Changed lines 367-368 from:

The Esplora code :

to:

Draw an image from the SD card

The TFT library has the ability to read .bmp files off a SD card and display them on the screen. Images can be smaller or larger than the screen resolution (160x128), but there is no method on the Arduino for image manipulation. The images should be sized before you put them on the SD card.

In the following example, a bitmap that is 160x128 pixels named "arduino.bmp" is in the root directory of a SD card. When read by the library and drawn, the image will fill the screen.

In addition to the libraries you have been including to this point, you will also need to include the SD library. You'll also need to declare a CS pin for the SD slot.

The PImage class is used to load the image and can also check if the image is a valid file that the library can read.

Once read, the image will be rendered from the coordinates you decide. In this case, it starts drawing from the top left of the screen.

Changed line 379 from:
  1. include <TFT.h> // Hardware-specific library
to:

// include the necessary libraries

Deleted lines 380-427:
May 21, 2013, at 02:48 PM by Alberto Cicchi -
Changed line 45 from:
Connecting to other Arduino boards.
to:
Connecting to other Arduino boards
May 17, 2013, at 08:35 PM by Scott Fitzgerald -
Changed line 61 from:

Arduino_GLCD myScreen = Arduino_GLCD(CS, DC, RESET);

to:

TFT myScreen = TFT(CS, DC, RESET);

Deleted line 91:
  1. include <Adafruit_GFX.h> // Core graphics library
Deleted line 143:
  1. include <Adafruit_GFX.h> // Core graphics library
Deleted line 182:
  1. include <Adafruit_GFX.h> // Core graphics library
Deleted line 254:
  1. include <Adafruit_GFX.h> // Core graphics library
Deleted line 315:
  1. include <Adafruit_GFX.h> // Core graphics library
Deleted line 368:
  1. include <Adafruit_GFX.h> // Core graphics library
Deleted line 419:
  1. include <Adafruit_GFX.h> // Core graphics library
Deleted line 481:
  1. include <Adafruit_GFX.h> // Core graphics library
May 17, 2013, at 08:33 PM by Scott Fitzgerald -
Changed line 3 from:

The Arduino TFT screen is a backlit TFT LCD screen with a micro SD card slot in the back. You can draw text, images, and shapes to the screen with the TFT library?.

to:

The Arduino TFT screen is a backlit TFT LCD screen with a micro SD card slot in the back. You can draw text, images, and shapes to the screen with the TFT library.

May 17, 2013, at 08:32 PM by Scott Fitzgerald -
Deleted lines 18-19:

You need to download and install the Adafruit GFX and Adafruit ST7735 libraries before using the screen.

May 17, 2013, at 07:39 AM by Scott Fitzgerald -
Changed lines 6-7 from:

The screen's pin layout is designed to easily fit into the socket of an Arduino Esplora, but it can be used with any Arduino board.

to:

The screen's pin layout is designed to easily fit into the socket of an Arduino Esplora and Arduino Robot, but it can be used with any Arduino board.

May 17, 2013, at 07:39 AM by Scott Fitzgerald -
Added lines 19-20:

You need to download and install the Adafruit GFX and Adafruit ST7735 libraries before using the screen.

May 13, 2013, at 10:48 AM by Scott Fitzgerald -
Changed line 48 from:
to:
May 13, 2013, at 10:40 AM by Scott Fitzgerald -
May 12, 2013, at 01:35 PM by Scott Fitzgerald -
Changed lines 3-4 from:

The Arduino TFT screen is a backlit TFT LCD screen with a micro SD card slot in the back. You can draw text, images, and shapes to the screen with the TFT library?. There is an onboard micro-SD card slot you can read images from.

to:

The Arduino TFT screen is a backlit TFT LCD screen with a micro SD card slot in the back. You can draw text, images, and shapes to the screen with the TFT library?.

Changed lines 8-9 from:
to:
Deleted lines 14-15:

The TFT library relies on the SPI library, which must be included in your sketch. If you wish to use the SD card, you need to include that library as well.

Added lines 17-18:

The TFT library relies on the SPI library, which must be included in any sketch that uses the scree. If you wish to use the SD card, you need to include the SD library as well.

Changed lines 22-25 from:

When thinking about coordinates on the screen, imagine grid. Each square int eh grid is a pixel. You can easily identify the placement of pixels with specific coordinates. A white dot in the top left corner would have coordinates of 0,0. If this dot were to move to the top right of the screen, its coordinates would now be 0, 159; in the bottom left 127,0, and the bottom right 127,159.

It is possible to use the screen in a vertical, ( also called "portrait") orientation, by calling setRotation(0). When you call this, the x and y-axes change accordingly, so any calls to screen.width() or screen.height() change as well.

to:

When thinking about coordinates on the screen, imagine a grid. Each square in the grid is a pixel. You can identify the placement of pixels with specific coordinates. A dot in the top left corner would have coordinates of 0,0. If this dot were to move to the top right of the screen, its coordinates would be 0, 159; in the bottom left corner, the coordinates would be 127,0, and in the bottom right it would be 127,159.

It is possible to use the screen in a vertical, (also called "portrait") orientation, by calling setRotation(0). When you call this, the x and y-axes change accordingly, and calls to screen.width() or screen.height() change as well.

Changed lines 27-28 from:

The screen has the ability to show 16-bit color. The red and blue have 5-bits of resolution each (32 levels of red and blue), the green has 6-bits of resolution (64 different levels). For consistency with other applications, the library deals with color in 8-bit values for each color channel (0-255), and scales the colors appropriately.

to:

The screen has the ability to show 16-bit color. The red and blue have 5-bits of resolution each (32 levels of red and blue), the green has 6-bits of resolution (64 different levels). For consistency with other applications, the library deals with color in 8-bit values for the red, green, and blue channels (0-255), and scales the colors appropriately.

Changed lines 32-33 from:

If you plan on using the SD card on the TFT module, you must use hardware SPI. All the examples are written with hardware SPI use.

to:

If you plan on using the SD card on the TFT module, you must use hardware SPI.

All the examples are written for hardware SPI use.

Changed lines 41-42 from:

There is a socket on the front of the Esplora for the screen. Insert the screen into the socket with the blue tab that says "SD Card" is closest tot he USB port.

to:

There is a socket on the front of the Esplora for the screen. Insert the screen into the socket with the blue tab that says "SD Card" closest to the USB port.

Changed lines 46-51 from:

You can either connect the screen with hardware SPI pins, or define your own set of pins. Using the hardware SPI is the faster method.

Connect the screen to the breadboard. The headers on the side of the screen with the small blue tab and arrow should be the ones that attach to the board. Pay attention to the orientation of the screen, in these images, it is upside down.

Connect the BL and +5V pins to power, and GND to ground. Connect CS-LD to pin 10, DC to pin 9, RESET to pin 8, MOSI to pin 11, and SCK to pin 13. If you're using a Leonardo, you'll be using different pins as outlined below

to:

You can either connect the screen with hardware SPI pins, or define your own set of pins. Using the hardware SPI is faster when drawing to the screen.

Added lines 51-54:

Connect the screen to a breadboard. The headers on the side of the screen with the small blue tab and arrow should be the ones that attach to the board. Pay attention to the orientation of the screen, in these images, it is upside down.

Connect the BL and +5V pins to power, and GND to ground. Connect CS-LD to pin 10, DC to pin 9, RESET to pin 8, MOSI to pin 11, and SCK to pin 13. If you're using a Leonardo, you'll be using different pins as outlined below

Deleted lines 84-86:

Using the Arduino Esplora

As the Arduino Esplora has a socket designed for the screen, and the pins for using the screen are fixed, an Esplora only object is created when targeting sketches for that board. You can reference the screen attached to an Esplora through EsploraTFT.

Changed lines 140-141 from:

If you are using an Esplora, the structure of the program is the exact same. However, you do not need to declare any pins at the top, and the object is instantiated for you automatically :

to:

If you are using an Esplora, the structure of the program is the exact same. As the Esplora has a socket designed for the screen, and the pins for using the screen are fixed, an Esplora only object is created when targeting sketches for that board. You can reference the screen attached to an Esplora through EsploraTFT.

You do not need to declare any pins in your sketch; the object is instantiated for you automatically :

May 08, 2013, at 01:24 PM by Scott Fitzgerald -
Changed lines 3-4 from:

The Arduino TFT screen is a backlit TFT LCD screen with a micro SD card slot in the back. You can draw text, images, and shapes to the screen with the TFT library?. There is an onboard micro-SD card slot you can read images from.

to:

The Arduino TFT screen is a backlit TFT LCD screen with a micro SD card slot in the back. You can draw text, images, and shapes to the screen with the TFT library?. There is an onboard micro-SD card slot you can read images from.

May 08, 2013, at 01:20 PM by Scott Fitzgerald -
Added lines 1-537:

Share