How to Display Images on 2.4inch TFT and Make It a Digital Photoframe




Introduction: How to Display Images on 2.4inch TFT and Make It a Digital Photoframe

About: So basically i am a crazy person, who loves to think the most odd way ever possible,who makes what he thinks and also let other also make those . Check out my crazy projects if you like do follow me :D

I really had this desire to build a digital photoframe from last three ,Until This January when i got this tft lcd touch module .I was excited but when i looked on the internet found very few (sorry none) help regarding it only JoaoLopesF instructable was there but the bitmap sketch had not been working so i cracked it as a challenged debugged it and made a working sketch .

Digital photo frame are quite popular now days.
but cost a hell lot of money with this DIY it cost less 25 $ to make one .
Most importantly its easy to add new file and even with a 1 gb card i can store more 5k photos.

Also like my page for support

Step 1: Incredients

I still give the items you shall be needing

Step 2: What Is TFT LCD ?

TFT LCD stands for thin-film-transistor liquid-crystal display.It is a variant of a liquid-crystal display (LCD) that uses thin-film transistor (TFT) technology to improve image qualities such as addressability and contrast. A TFT LCD is an active-matrix LCD, in contrast to passive-matrix LCDs or simple, direct-driven LCDs with a few segments.

When no voltage is applied, the molecule structures are in their natural state and twisted by 90 degrees. The light emitted by the back light can then pass through the structure.

If a voltage is applied, i.e. an electric field is created, the liquid crystals are twisted so that they are vertically aligned. The polarized light is then absorbed by the second polarizer. Light can therefore not leave the TFT display at this location.

Step 3: Using Th SD Card Shield and Code

Its good to have a SD card shield when you have a lot of file to read or write,
The 2.4 inch LCD touchscreen module has a inbuilt SD card module .
The SD card uses the SPI bus for interfacing with the arduino.
For the working of the SD card you need to call the SD library

Formatting the SD card

If you bought an SD card, chances are it's already pre-formatted with a FAT filesystem. However you may have problems with how the factory formats the card, or if it's an old card it needs to be reformatted. The Arduino SD library we use supports both FAT16 and FAT32 filesystems. If you have a very small SD card, say 8-32 Megabytes you might find it is formatted FAT12 which isn't supported. You'll have to reformat these card. Either way, it's always good idea to format the card before using, even if it's new! Note that formatting will erase the card so save anything you want first.


Connect the 5V pin to the 5V pin on the Arduino

Connect the GND pin to the GND pin on the Arduino

Connect CLK to pin 13 or 52Connect DO to pin 12 or 50

Connect DI to pin 11 or 51Connect CS to pin 10 or 53


Thanks to adafruit for its library and JoaoLopesF for the modified library
all his sketch work except the bitmap once i corrected it

Step 4: Setting Up the Bitmap Image

Arduino supports bitmap images so i needed to convert my jpeg into bmp files.
You can do these easily with Photoshop any version

  • Open Photoshop
  • Create a canvas of 240 x 320
  • drag the image you want in the Photoshop
  • adjust it
  • Save it as .bmp file
  • the bitrate should be 24

Once saved the file should be moved in the sd card

Full Spectrum Laser Contest 2016

Participated in the
Full Spectrum Laser Contest 2016

Digital Life 101 Challenge

Participated in the
Digital Life 101 Challenge

Be the First to Share


    • Stone Concrete Cement Contest

      Stone Concrete Cement Contest
    • Remote Control Contest

      Remote Control Contest
    • Digital Fabrication Student Design Challenge

      Digital Fabrication Student Design Challenge



    Question 4 years ago

    It's working with uno but not with mega. I don't know why. Please help


    Answer 2 years ago

    maybe pin Spi not you change with pin Spi mega


    6 years ago

    I found the TFT screen and Uno on about a month ago and over the weekend I was messing with the pair and found the tftbmp draw code in the demo.. I extended it with the ability to read any bmp file on the SD card.. so all you do is put your bitmaps on the SD and plug it in.. Having to add/edit/recompile/reload the Uno everytime is BS... Here is my code:

    // BMP-loading example specifically for the TFTLCD breakout board.
    // If using the Arduino shield, use the tftbmp_shield.pde sketch instead!
    // If using an Arduino Mega make sure to use its hardware SPI pins, OR make
    // sure the SD library is configured for 'soft' SPI in the file Sd2Card.h.

    #include <Adafruit_GFX.h> // Core graphics library
    #include <Adafruit_TFTLCD.h> // Hardware-specific library
    #include <SD.h>
    #include <SPI.h>

    int COMM = 19200; // Speed of our comm port - SET THIS to match your setup
    int SLEEP = 5000; // Sleep time in milliseconds between pictures - Set this to make you happy..

    // For Arduino Uno/Duemilanove, etc
    // connect the SD card with DI going to pin 11, DO going to pin 12 and SCK going to pin 13 (standard)
    // Then pin 10 goes to CS (or whatever you have set up)

    // In the SD card, place 24 bit color BMP files (be sure they are 24-bit!)
    // There are examples in the sketch folder

    /* * SD card attached to SPI bus as follows: */
    #define MOSI 11 // Not used yet in this code
    #define MISO 12 // Not used yet in this code
    #define SCLK 13 // Not used yet in this code
    #define SD_CS 10 // Set the chip select line to whatever you use (10 doesnt conflict with the library)

    // The control pins for the LCD can be assigned to any digital or
    // analog pins...but we'll use the analog pins as this allows us to
    // double up the pins with the touch screen (see the TFT paint example).
    #define LCD_CS A3 // Chip Select goes to Analog 3
    #define LCD_CD A2 // Command/Data goes to Analog 2
    #define LCD_WR A1 // LCD Write goes to Analog 1
    #define LCD_RD A0 // LCD Read goes to Analog 0

    // When using the BREAKOUT BOARD only, use these 8 data lines to the LCD:
    // For the Arduino Uno, Duemilanove, Diecimila, etc.:
    // D0 connects to digital pin 8 (Notice these are
    // D1 connects to digital pin 9 NOT in order!)
    // D2 connects to digital pin 2
    // D3 connects to digital pin 3
    // D4 connects to digital pin 4
    // D5 connects to digital pin 5
    // D6 connects to digital pin 6
    // D7 connects to digital pin 7
    // For the Arduino Mega, use digital pins 22 through 29
    // (on the 2-row header at the end of the board).

    // our TFT wiring
    Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, A4);

    File root;

    // This function opens a Windows Bitmap (BMP) file and
    // displays it at the given coordinates. It's sped up
    // by reading many pixels worth of data at a time
    // (rather than pixel by pixel). Increasing the buffer
    // size takes more of the Arduino's precious RAM but
    // makes loading a little faster. 20 pixels seems a
    // good balance.

    #define BUFFPIXEL 20

    void bmpDraw(char *filename, int x, int y) {

    File bmpFile;
    int bmpWidth, bmpHeight; // W+H in pixels
    uint8_t bmpDepth; // Bit depth (currently must be 24)
    uint32_t bmpImageoffset; // Start of image data in file
    uint32_t rowSize; // Not always = bmpWidth; may have padding
    uint8_t sdbuffer[3*BUFFPIXEL]; // pixel in buffer (R+G+B per pixel)
    uint16_t lcdbuffer[BUFFPIXEL]; // pixel out buffer (16-bit per pixel)
    uint8_t buffidx = sizeof(sdbuffer); // Current position in sdbuffer
    boolean goodBmp = false; // Set to true on valid header parse
    boolean flip = true; // BMP is stored bottom-to-top
    int w, h, row, col;
    uint8_t r, g, b;
    uint32_t pos = 0, startTime = millis();
    uint8_t lcdidx = 0;
    boolean first = true;

    if((x >= tft.width()) || (y >= tft.height())) return;

    int i = 0;
    int j = 0;

    Serial.print(F("Loading image '"));
    // Open requested file on SD card
    if ((bmpFile = == NULL) {
    Serial.println(F("File not found"));

    // Parse BMP header
    if(read16(bmpFile) == 0x4D42) { // BMP signature
    Serial.print(F("File size: ")); Serial.println(read32(bmpFile));
    (void)read32(bmpFile); // Read & ignore creator bytes
    bmpImageoffset = read32(bmpFile); // Start of image data
    Serial.print(F("Image Offset: ")); Serial.println(bmpImageoffset, DEC);
    // Read DIB header
    Serial.print(F("Header size: ")); Serial.println(read32(bmpFile));
    bmpWidth = read32(bmpFile);
    bmpHeight = read32(bmpFile);
    if(read16(bmpFile) == 1) { // # planes -- must be '1'
    bmpDepth = read16(bmpFile); // bits per pixel
    Serial.print(F("Bit Depth: ")); Serial.println(bmpDepth);
    if((bmpDepth == 24) && (read32(bmpFile) == 0)) { // 0 = uncompressed

    goodBmp = true; // Supported BMP format -- proceed!
    Serial.print(F("Image size: "));

    // BMP rows are padded (if needed) to 4-byte boundary
    rowSize = (bmpWidth * 3 + 3) & ~3;

    // If bmpHeight is negative, image is in top-down order.
    // This is not canon but has been observed in the wild.
    if(bmpHeight < 0) {
    bmpHeight = -bmpHeight;
    flip = false;

    // Crop area to be loaded
    w = bmpWidth;
    h = bmpHeight;
    if((x+w-1) >= tft.width()) w = tft.width() - x;
    if((y+h-1) >= tft.height()) h = tft.height() - y;

    // Set TFT address window to clipped image bounds
    tft.setAddrWindow(x, y, x+w-1, y+h-1);

    for (row=0; row<h; row++) { // For each scanline...
    // Seek to start of scan line. It might seem labor-
    // intensive to be doing this on every line, but this
    // method covers a lot of gritty details like cropping
    // and scanline padding. Also, the seek only takes
    // place if the file position actually needs to change
    // (avoids a lot of cluster math in SD library).
    if(flip) // Bitmap is stored bottom-to-top order (normal BMP)
    pos = bmpImageoffset + (bmpHeight - 1 - row) * rowSize;
    else // Bitmap is stored top-to-bottom
    pos = bmpImageoffset + row * rowSize;
    if(bmpFile.position() != pos) { // Need seek?;
    buffidx = sizeof(sdbuffer); // Force buffer reload

    for (col=0; col<w; col++) { // For each column...
    // Time to read more pixel data?
    if (buffidx >= sizeof(sdbuffer)) { // Indeed
    // Push LCD buffer to the display first
    if(lcdidx > 0) {
    tft.pushColors(lcdbuffer, lcdidx, first);
    lcdidx = 0;
    first = false;
    }, sizeof(sdbuffer));
    buffidx = 0; // Set index to beginning

    // Convert pixel from BMP to TFT format
    b = sdbuffer[buffidx++];
    g = sdbuffer[buffidx++];
    r = sdbuffer[buffidx++];
    lcdbuffer[lcdidx++] = tft.color565(r,g,b);
    } // end pixel
    } // end scanline
    // Write any remaining data to LCD
    if(lcdidx > 0) {
    tft.pushColors(lcdbuffer, lcdidx, first);
    Serial.print(F("Loaded in "));
    Serial.print(millis() - startTime);
    Serial.println(" ms");
    } // end goodBmp

    if(!goodBmp) Serial.println(F("BMP format not recognized."));

    // These read 16- and 32-bit types from the SD card file.
    // BMP data is stored little-endian, Arduino is little-endian too.
    // May need to reverse subscript order if porting elsewhere.

    uint16_t read16(File f) {
    uint16_t result;
    ((uint8_t *)&result)[0] =; // LSB
    ((uint8_t *)&result)[1] =; // MSB
    return result;

    uint32_t read32(File f) {
    uint32_t result;
    ((uint8_t *)&result)[0] =; // LSB
    ((uint8_t *)&result)[1] =;
    ((uint8_t *)&result)[2] =;
    ((uint8_t *)&result)[3] =; // MSB
    return result;

    void setup()

    // Open serial communications and wait for port to open:
    while (!Serial) {
    ; // wait for serial port to connect. Needed for native USB port only

    Serial.print("Initializing SD card...");

    if (!SD.begin(SD_CS)) {
    Serial.println("initialization failed!");
    Serial.println("initialization done.");


    uint16_t identifier = tft.readID();

    if(identifier == 0x9325) {
    Serial.println(F("Found ILI9325 LCD driver"));
    } else if(identifier == 0x9328) {
    Serial.println(F("Found ILI9328 LCD driver"));
    } else if(identifier == 0x7575) {
    Serial.println(F("Found HX8347G LCD driver"));
    } else if(identifier == 0x9341) {
    Serial.println(F("Found ILI9341 LCD driver"));
    } else if(identifier == 0x8357) {
    Serial.println(F("Found HX8357D LCD driver"));
    } else {
    Serial.print(F("Unknown LCD driver chip: "));
    Serial.println(identifier, HEX);
    Serial.println(F("If using the Adafruit 2.8\" TFT Arduino shield, the line:"));
    Serial.println(F(" #define USE_ADAFRUIT_SHIELD_PINOUT"));
    Serial.println(F("should appear in the library header (Adafruit_TFT.h)."));
    Serial.println(F("If using the breakout board, it should NOT be #defined!"));
    Serial.println(F("Also if using the breakout, double-check that all wiring"));
    Serial.println(F("matches the tutorial."));


    void printDirectory(File dir) {
    int k = 0;


    while (true) {
    File entry = dir.openNextFile();
    if (! entry) {
    // no more files
    Serial.println("Last File Reached");
    if (entry.isDirectory()) {

    void loop()
    while (true) {
    root ="/");
    // Serial.println("End"); // Loop Debug to console


    Reply 2 years ago

    thanks ! dude
    your code is helpful for me


    Reply 6 years ago

    Great show us a pic would be awesome.


    4 years ago



    5 years ago

    is there anyway to make it display multiple images?


    6 years ago

    STM32 based BMP Display on TFT LCD


    6 years ago

    Please upload the libraries you have used


    6 years ago

    2.4" is pretty small; any way to scale this up? I happen to have access to several larger displays, 7" and 10.1" that I have procured...any ideas how to adapt the project to these?


    Reply 6 years ago

    they have 7 inch lcd shield work the same ways just need the proper library


    Reply 6 years ago

    cool, thanks! I actually was thinking of making my own shield....and I really have a lot more 10.1 and 10.2" LCDs....looks like I'll have a bit of work to do to figure this out! Great idea though; been wanting to do this for a while (as long as I have had those spare LCDs), but this is the kick in the pants I needed to start.


    Reply 6 years ago

    let me know how it looked :)


    6 years ago

    Did u use SDcard shield OR just insert the SDcard into SDcard module in TFT LCD? Thx sir.


    Reply 6 years ago

    I use the SD card on the TFT display with a 32 gb card. Next up is to add jpeg support and image scaling..


    Reply 6 years ago

    the shield comes with a pre board sd card reader


    Reply 6 years ago

    Thanks bro


    Reply 6 years ago

    Thanks bro