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

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
https://www.facebook.com/makewithRex

Step 1: Incredients

I still give the items you shall be needing

• Arduino UNO
  http://amzn.to/2gjeXOo
  
• 2.4 inch TFT LCD shield
  http://amzn.to/2fYc6WW
  
• micro SD card
  http://amzn.to/2f6MNUN
  
• card reader
  http://amzn.to/2fYfJMv
  
• DC adapter for power (i am using a custom made lithium ion power source )
  http://amzn.to/2gj9s29

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.

Wiring

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

Code

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

Comments

[SarvjitP]

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

[soberirsan13]

maybe pin Spi not you change with pin Spi mega

[rhall42]

I found the TFT screen and Uno on Banggood.com 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;
tft.setRotation(i);
tft.fillScreen(j);

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

// 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: "));
Serial.print(bmpWidth);
Serial.print('x');
Serial.println(bmpHeight);

// 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?
bmpFile.seek(pos);
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;
}
bmpFile.read(sdbuffer, 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
}
}

bmpFile.close();
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] = f.read(); // LSB
((uint8_t *)&result)[1] = f.read(); // MSB
return result;
}

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

void setup()
{

// Open serial communications and wait for port to open:
Serial.begin(COMM);
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!");
return;
}
Serial.println("initialization done.");

tft.reset();

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."));
return;
}

tft.begin(identifier);
delay(1000);
}

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

dir.rewindDirectory();

while (true) {
File entry = dir.openNextFile();
if (! entry) {
// no more files
Serial.println("Last File Reached");
entry.close();
break;
}
if (entry.isDirectory()) {
Serial.println("/");
}
bmpDraw(entry.name(),k,k);
entry.close();
delay(SLEEP);
}
}

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

[VikasP61]

thanks ! dude
your code is helpful for me

[geekrex]

Great show us a pic would be awesome.

[usman9805]

CAN YOU TELL ME HOW TO STOP SLIDE SHOW AND DISPLAY THE IMAGE QUICKLY ?

[1170794]

is there anyway to make it display multiple images?

[hilogicsys]

STM32 based BMP Display on TFT LCD http://stm32photoframe.blogspot.com/

[Harshits20]

Please upload the libraries you have used

[philbertmeister]

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?

[geekrex]

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

[philbertmeister]

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.

[geekrex]

let me know how it looked :)

[Lintang_Wisesa]

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

[rhall42]

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

[geekrex]

the shield comes with a pre board sd card reader

[chrisjlionel]

Nice work

[geekrex]

Thanks bro

[geekrex]

Thanks bro