Display BMP images from SD card on ST7735 TFT screen

This example shows how to display Bitmap (BMP) image files from SD card on ST7735 1.8″ (128×160) TFT screen using PIC18F4550 microcontroller and CCS PIC C compiler.
To build this project we need the ST7735 TFT driver, SD card driver and FAT16 library. The three source files must be added to the project folder (or CCS C driver folder) in order to compile the C code.
The ST7735 driver is update to support the display of BMP images from the SD card.
The ST7735 TFT display driver topic:
ST7735 SPI TFT Display Driver for CCS PIC C compiler
The SD card driver topic:
MMC/SD Card driver for CCS PIC C compiler
The FAT16 library topic:
FAT16 Library for CCS C compilerDisplay BMP images from SD card on ST7735 TFT screen

Related topics:
Some posts related to this project if you want to go through them.
Interfacing PIC18F4550 with 1.8″ TFT display

Hardware Required:

  • PIC18F4550 microcontroller
  • SD Card with FAT16 file system ( <= 2GB)
  • ST7735R (or S) 1.8‚Ä≥ TFT screen
  • AMS1117 3.3V voltage regulator
  • 8MHz crystal oscillator
  • 2 x 22pF ceramic capacitor
  • Push button
  • 3 x 3.3K ohm resistor
  • 3 x 2.2K ohm resistor
  • 2 x 10K ohm resistor
  • 5 x 1K ohm resistor
  • 100nF ceramic capacitor
  • 10uF polarized capacitor
  • 5V Power source
  • Breadboard
  • Jumper wires

The Circuit:Circuit Display BMP images from SD card on ST7735 TFT screen

The microcontroller PIC18F4550 has 1 SPI module only, both the ST7735 TFT and the SD card share the same SPI module. We could use software SPI but the hardware SPI is much faster.
The AMS1117 3.3V voltage regulator steps down the 5V into 3.3V, it is used to supply the SD card with 3.3V. Also there are 3 voltage dividers in the circuit, each voltage divider consists of 3K3 and 2K2 resistors, it is used to get about 3V from the outputs of the PIC18F4550.
The ST7735 board also has AMS1117 3.3V regulator which can be used to supply the SD card.
Connecting the PIC18F4550 data pins directly to the SD card without the voltage dividers may damage the SD card. The only pin which is connected directly from the microcontroller to the SD card is the SDI pin (MISO).
The PIC18F4550 runs with 8MHz crystal oscillator and with the PLL enabled the microcontroller now becomes run @ 48MHz and this is the maximum frequency of this type. With the frequency of 48MHz we get an SPI data transfer rate of 12Mbps.
The ST7735 D/C (Data/Command) pin is connected to pin RD0 and CS (Chip Select) pin is connected to pin RD1. The other pins which are DIN (Data IN) and CLK (Clock) are connected to hardware SPI pins of the MCU.

There is a button connected to pin RB2, this button is used to switch the images.
Display BMP images from SD card on ST7735 TFT screen C code:
This was tested with CCS PIC C compiler versions 5.059 and 5.070 with no error or warning.
As mentioned above to be able to compile this code the ST7735 TFT display and SD card drivers and the FAT16 library for CCS C compiler must be added to the project folder.
To use the hardware SPI module with the ST7735 we’ve to define:
To enable the drawing of Bitmap (BMP) images from the SD card we’ve to define:
We can define the pixel buffer with the following line. If it is not defined the pixel buffer default value is 10 bytes. Bigger pixel buffer ==> higher speed.
#define pixel_buffer  500
SD Card uses the hardware SPI by defining:
#define   SDCARD_SPI_HW
The the drivers of the ST7735 TFT and the SD card and the FAT16 library are included:
#include <sdcard.c>
#include <fat16.c>
#include <ST7735_TFT.c>

In the SD card there are 28 bmp images named from ‚Äėa‚Äô to ‚Äėz‚Äô (a.bmp, b.bmp, c.bmp ‚Ķ‚Ķ.). To write all the names in the code is painful and may consumes more RAM. For that, I used a string of 5 characters named¬†bmp[6]¬†(6 = 5 characters + ‚Äė\0‚Äô ) and I copied the string¬†‚ÄúA.bmp‚Ä̬†into it and used the variable¬†i¬†to change the first letter of the array¬†bmp. The letter ‚ÄėA‚Äô in ASCII code decimal = 65 , ‚ÄėB‚Äô = 66 ‚Ķ‚Ķ‚Ķ‚Ķ‚Ķ..‚ÄôZ‚Äô = 90. If¬†i¬†> ‚ÄėZ‚Äô ==>¬†i¬†= ‚ÄėA‚Äô (if i > 90 ==> i = 65).
Note that FAT16 library is letter insensitive ( ‚ÄėA‚Äô = ‚Äėa‚Äô ‚Ķ‚Ķ‚Ķ‚Ķ.).
The function fat16_init() returns 0 if OK and 1 if an error occurred.
To draw any BMP image file just use the function bmpDraw(x, y, bmp_file_name); where:
bmp_file_name: is the BMP image file name (file name + extension must be < 13 character).
x and y: are the TFT screen coordinates.
If there is no SD card or there is a problem while the initialization of the SD card and FAT16 file system the display will show the message¬†‚ÄúFAT16 Initialization Error!‚ÄĚ. This text is displayed using the function¬†drawtext(x, y, text, text_color, background_color, text_size);¬†.

If the BMP image is not 128√ó160 the TFT screen will display the upper left 128√ó160 part as shown in this picture:

The full C code is the one below.

// Display BMP images from SD card on ST7735 1.8" (128x160) TFT screen.
// ST7735 TFT driver, MCC/SD card driver and Fat16 library for CCS C compiler
//   must be installed!
// http://ccspicc.blogspot.com/
//¬†[email protected]

// TFT module connections
#define   TFT_CS  PIN_D1
#define   TFT_DC  PIN_D0
#define   TFT_SPI_HARDWARE                       // Hardware SPI module is used for the TFT
// End TFT module connections
#define   DRAW_BMP_FROM_MMCSD_CARD               // Enable BMP draw from SD card
#define   pixel_buffer  500                      // Set pixel buffer to 500

// SD Card module connections
#define   SDCARD_SPI_HW                          // Hardware SPI module is used for the SD card
// End SD card module connections

#include <18F4550.h>
#use delay(clock = 48MHz)
#use fast_io(D)
#include <sdcard.c>                              // SD card diver source code
#include <fat16.c>                               // FAT16 library source code
#include <ST7735_TFT.c>                          // ST7735 TFT driver source code

const int8 *txt = "FAT16 Initialization Error!";
int8 i = 'A', bmp[6];
void main(){
  set_tris_d(0);                                 // Configure PORTD pins as outputs
  if(fat16_init() == 0){
    strcpy (bmp, "A.bmp");
      bmpDraw(0, 0, bmp);
      if(i > 90)
        i = 'A';
      bmp[0] = i;
    drawtext(0, 10, txt, ST7735_YELLOW, ST7735_BLACK, 2);

Display BMP images from SD card on ST7735 TFT video:


Source : Display BMP images from SD card on ST7735 TFT screen

About The Author

Ibrar Ayyub

I am an experienced technical writer holding a Master's degree in computer science from BZU Multan, Pakistan University. With a background spanning various industries, particularly in home automation and engineering, I have honed my skills in crafting clear and concise content. Proficient in leveraging infographics and diagrams, I strive to simplify complex concepts for readers. My strength lies in thorough research and presenting information in a structured and logical format.

Follow Us:

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.