Drawing Bitmaps

Wiring for the Bitmap Example

Drawing bitmaps from the on-board micro SD card requires a few more connections to communicate with the SD card. The library allows you to use any pins. The Arduino connections listed below match the code in the "bmp" example from the library:

  • GND -> GND (G)
  • 5v -> VIN (+)
  • #7 -> SDCS (SC)
  • #4 -> DC
  • #6 -> RST (R)
  • #5 -> OLEDCS (OC)
  • #11 -> MOSI (SI)
  • #12 -> MISO (SO)
  • #13 -> SCLK (CL)
Note that the Bitmap example code uses hardware SPI wiring for maximum speed. You can still use software SPI, but make sure that the pin definitions match your wiring and that you modify the example to select the Software SPI option (#1) in the code. The SPI pins shown are for Atmega-328 processors. To use this wiring on other processors, software SPI must be used.

Hint:

If you are confused by the abbreviations on the front of the board, the full signal names are printed on the back!

Bitmap Example Sketch

To display bitmaps from the on-board micro SD slot, you will need a micro SD card formatted FAT16 or FAT32 (they almost always are by default).

There is a built in microSD card slot on the rear of the breakout and we can use that to load bitmap images!

It's 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:

Next you can either download the image here or copy it from the images folder from inside the library files.

Insert the card

Insert the micro SD card into the slot on the back of the SSD1351 breakout board.

Copy the bitmap file

Copy the file "lily128.bmp" from the Adafruit_ImageReader_Library\images folder (or wherever you saved it if you downloaded the file) over to the root directory of your micro-SD card.

Load the bitmap example sketch

Select "Examples->Adafruit_ImageReader_Library->BreakoutSSD1351" and upload it to your Arduino.

In the example, find the following section of code:

Download: file
// Load full-screen BMP file 'rgbwheel.bmp' at position (0,0) (top left).
// Notice the 'reader' object performs this, with 'tft' as an argument.
Serial.print(F("Loading rgbwheel.bmp to screen..."));
stat = reader.drawBMP("/rgbwheel.bmp", tft, 0, 0);
reader.printStatus(stat);   // How'd we do?

On the line with reader.drawBMP() change "/rgbwheel.bmp" to "/lily128.bmp".

After that, upload it to your Arduino. When the Arduino restarts, you should see the flower as below!

To make new bitmaps, make sure they are less than 128 by 128 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 BreakoutSSD1351 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:

Download: file
#include <SPI.h>
#include <SD.h>
#include <Adafruit_GFX.h>         // Core graphics library
#include <Adafruit_SSD1351.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:

Download: file
#define SD_CS    7 // SD card select pin
#define TFT_CS   5 // TFT select pin
#define TFT_DC   4 // TFT display/command pin
#define TFT_RST  6 // Or set to -1 and connect to Arduino RESET pin

Adafruit_SSD1351 tft = Adafruit_SSD1351(SCREEN_WIDTH, SCREEN_HEIGHT, &SPI, TFT_CS, TFT_DC, TFT_RST);

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:

Download: file
ImageReturnCode stat; // Status from image-reading functions
stat = reader.drawBMP("/lily128.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:

Download: file
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.

Image loading is explained in greater depth in the Adafruit_GFX library guide.

This guide was first published on Aug 16, 2013. It was last updated on 2019-08-13 20:18:59 -0400. This page (Drawing Bitmaps) was last updated on Aug 22, 2019.