There is a built in microSD card slot into the shield, and we can use that to load bitmap images! You will need a microSD card formatted FAT16 or FAT32 (they almost always are by default).
Its really easy to draw bitmaps. We have a library for it, Adafruit_ImageReader, which can be installed through the Arduino Library Manager (Sketch→Include Library→Manage Libraries…). Enter “imageread” in the search field and the library is easy to spot:
With the library installed, let’s proceed by downloading this image of pretty flowers (pix by johngineer):
Copy purple.bmp into the base directory of a microSD card and insert it into the microSD socket in the shield. Now upload the File→Examples→Adafruit_ImageReader→ShieldILI9341 example sketch to your Arduino + shield. You will see the flowers appear!
To make new bitmaps, make sure they are less than 240 by 320 pixels and save them in 24-bit BMP format! They must be in 24-bit format, even if they are not 24-bit color as that is the easiest format for the Arduino to decode. You can rotate images using the setRotation() procedure.
The ShieldILI9341 example sketch shows everything you need to work with BMP images. Here’s just the vital bits broken out…
Several header files are included at the top of the sketch. All of these are required…they let us access the SD card and the display, and provide the image-reading functions:
#include <SPI.h> #include <SD.h> #include <Adafruit_GFX.h> // Core graphics library #include <Adafruit_ILI9341.h> // Hardware-specific library #include <Adafruit_ImageReader.h> // Image-reading functions
Several #defines relate to hardware pin numbers, all fixed values when using the shield.
Then we declare the tft screen object, and the image-reader object like so:
#define SD_CS 4 // SD card select pin #define TFT_CS 10 // TFT select pin #define TFT_DC 9 // TFT display/command pin Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC); Adafruit_ImageReader reader; // Class w/image-reading functions
After the SD and TFT’s begin() functions have been called (see the example sketch again, in the setup() function), you can then call reader.drawBMP() to load an image from the card to the screen:
ImageReturnCode stat;
stat = reader.drawBMP("/purple.bmp", tft, 0, 0);
You can draw as many images as you want — though remember the names must be less than 8 characters long. Call like so:
reader.drawBMP(filename, tft, x, y);
'x' and 'y' are pixel coordinates where top-left corner of the image will be placed. Images can be placed anywhere on screen…even partially off screen, the library will clip the section to load.
