Examples > TFT

TFT Bitmap Logo

This example for the Arduino TFT screen reads a bitmap file from a SD card and displays it on screen in a random location.

For this example to work, you need to save an image named "logo.bmp" to the root of the SD card. The SD card needs to be FAT16 and FAT32 formatted. See the SD library documentation for more information on working with SD cards.

Hardware Required

  • Arduino Uno
  • Arduino TFT screen
  • micro-SD card
  • image file

Circuit

Insert the SD card with the "logo.bmp" file into the SD card slot on the back of your screen.

Connect power and ground to the breadboard.
Show me how to do thatShow me how to do that

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.
Show me how to do thatShow me how to do that

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, MISO to pin 12, SD_CS to pin 4 and SCK to pin 13. If you're using a Leonardo, you'll be using different pins. see the getting started page for more details.
Show me how to do thatShow me how to do that

Code

To use the screen you must first include the SPI and TFT libraries. You also need to include the SD library to read the image from the card.

#include <SD.h>
#include <SPI.h>
#include <TFT.h>
[Get Code]

Define the pins you're going to use for controlling the screen, and a pin for the SD chip select. Create an instance of the TFT library named TFTscreen.

#define sd_cs  4
#define lcd_cs 10
#define dc     9
#define rst    8  

TFT TFTscreen = TFT(cs, dc, rst);
[Get Code]

There is a special datatype called PImage for holding image information. Create a named version of PImage

PImage logo;
[Get Code]

In setup(), you're going to initialize the serial port and wait for it to become active before starting up. If you want to ignore the status information, comment out the while() loop.

Once serial communication has started, initialize the SD library. If there is an error, send a message to the serial monitor.

void setup() {
  Serial.begin(9600);
  while (!Serial) {
  }

  Serial.print("Initializing SD card...");
  if (!SD.begin(SD_CS)) {
    Serial.println("failed!");
    return;
  }
  Serial.println("OK!");
[Get Code]

Initialize and clear the screen

TFTscreen.begin();
  TFTscreen.background(255, 255, 255);
[Get Code]

Read the image file into the PImage you named earlier with loadimage(). loadImage() prints out some useful information about the image to the serial monitor.

logo = TFTscreen.loadImage("logo.bmp");
  if (!logo.isValid()) {
    Serial.println("error while loading arduino.bmp");
  }
}
[Get Code]

If the image wasn't loaded correctly, stop the sketch before going any further.

void loop() {
  if (logo.isValid() == false) {
    return;
  }
[Get Code]

If the image information is valid, pick a random spot on the screen to display the image. To make sure all the image is drawn onscreen, take the dimensions of the image and subtract that from the screen's dimensions.

int x = random(TFTscreen.width() - logo.width());
  int y = random(TFTscreen.height() - logo.height());
[Get Code]

Draw the image onscreen starting at the random coordinates from the previous step, and wait for a little bit before entering the next loop()

TFTscreen.image(logo, x, y);

  delay(1500);
}
[Get Code]

The complete sketch is below :

/*

 Arduino TFT Bitmap Logo example

 This example reads an image file from a micro-SD card
 and draws it on the screen, at random locations.

 In this sketch, the Arduino logo is read from a micro-SD card.
 There is a .bmp file included with this sketch.
 - open the sketch folder (Ctrl-K or Cmd-K)
 - copy the "arduino.bmp" file to a micro-SD
 - put the SD into the SD slot of the Arduino TFT module.

 This example code is in the public domain.

 Created 19 April 2013 by Enrico Gueli

 http://www.arduino.cc/en/Tutorial/TFTBitmapLogo

 */

// include the necessary libraries
#include <SPI.h>
#include <SD.h>
#include <TFT.h>  // Arduino LCD library

// pin definition for the Uno
#define sd_cs  4
#define lcd_cs 10
#define dc     9
#define rst    8

// pin definition for the Leonardo
//#define sd_cs  8
//#define lcd_cs 7
//#define dc     0
//#define rst    1

TFT TFTscreen = TFT(lcd_cs, dc, rst);

// this variable represents the image to be drawn on screen
PImage logo;


void setup() {
  // initialize the GLCD and show a message
  // asking the user to open the serial line
  TFTscreen.begin();
  TFTscreen.background(255, 255, 255);

  TFTscreen.stroke(0, 0, 255);
  TFTscreen.println();
  TFTscreen.println(F("Arduino TFT Bitmap Example"));
  TFTscreen.stroke(0, 0, 0);
  TFTscreen.println(F("Open serial monitor"));
  TFTscreen.println(F("to run the sketch"));

  // initialize the serial port: it will be used to
  // print some diagnostic info
  Serial.begin(9600);
  while (!Serial) {
    // wait for serial port to connect. Needed for native USB port only
  }

  // clear the GLCD screen before starting
  TFTscreen.background(255, 255, 255);

  // try to access the SD card. If that fails (e.g.
  // no card present), the setup process will stop.
  Serial.print(F("Initializing SD card..."));
  if (!SD.begin(sd_cs)) {
    Serial.println(F("failed!"));
    return;
  }
  Serial.println(F("OK!"));

  // initialize and clear the GLCD screen
  TFTscreen.begin();
  TFTscreen.background(255, 255, 255);

  // now that the SD card can be access, try to load the
  // image file.
  logo = TFTscreen.loadImage("arduino.bmp");
  if (!logo.isValid()) {
    Serial.println(F("error while loading arduino.bmp"));
  }
}

void loop() {
  // don't do anything if the image wasn't loaded correctly.
  if (logo.isValid() == false) {
    return;
  }

  Serial.println(F("drawing image"));

  // get a random location where to draw the image.
  // To avoid the image to be draw outside the screen,
  // take into account the image size.
  int x = random(TFTscreen.width() - logo.width());
  int y = random(TFTscreen.height() - logo.height());

  // draw the image to the screen
  TFTscreen.image(logo, x, y);

  // wait a little bit before drawing again
  delay(1500);
}
[Get Code]