This will not work for the Circuit Playground Classic because it does not have SPI flash.

Although there isn't a built in microSD card slot, we can still use the SPI flash to store and load bitmap images! It's really easy with Adafruit Arcada because it can make the SPI flash show up as a drive on your computer that you can easily copy files over to.

Let's start by downloading this image of Adabot and Blinka.

If you would like to use your own images, they should be a 240x240 sized image in 24-bit Bitmap format.
The images are also available in the images folder of the Arcada Library.

Required Libraries for Bitmaps

To draw Bitmaps, we'll be using the Arcada library, but there are a few other required libraries as well. If you haven't already, go ahead and take a look at the Arcada Libraries page to get all set up.

TinyUSB

Now that you have the required libraries installed, there is one last thing to do if you are using the Circuit Playground Express. You will need to change your USB Stack over to TinyUSB.

 

Arcada Library

If you get any messages about missing libraries, make sure you installed all of the required Arcada libraries.

Start by opening the File→examples→Adafruit Arcada Library→imageloader_tft_gizmo example:

Uploading the Images

Now upload the example sketch to the Circuit Playground.

If you have not previously initialized the filesystem, you may receive a messages stating so. Go ahead and load CircuitPython on the device to initialize the files. If you are not sure how, you can check out our Welcome to CircuitPython guide.

After it is initialized, go ahead and upload the sketch again.

After it finishes uploading, and with the Circuit Playground board connected over USB, it should appear on your computer as a flash drive called CIRCUITPY.

Now go ahead and copy adabot.bmp and blinka.bmp onto the root of the CIRCUITPY drive.

Press the buttons on the back of your Circuit Playground board. Pressing one should make ADABOT appear! Pressing the other will make BLINKA appear. If you have any problems, check the serial console for any messages such as not being able to initialize the flash or not finding the image.

Full ImageLoader Example

#include "Adafruit_Arcada.h"
Adafruit_Arcada arcada;

#define IMAGE_A "adabot.bmp"
#define IMAGE_B "blinka.bmp"

void setup(void) {
  if (!arcada.arcadaBegin()) {
    while (1);
  }
  // If we are using TinyUSB we will have the filesystem show up!
  arcada.filesysBeginMSD();

  Serial.begin(115200);
  //while(!Serial) delay(10);       // Wait for Serial Monitor before continuing

  arcada.enableSpeaker(false);

  // Start TFT and fill blue
  arcada.displayBegin();
  arcada.display->fillScreen(ARCADA_BLUE);
  arcada.setBacklight(255);

  if (arcada.filesysBegin()) {
    Serial.println("Found filesystem!");
  } else {
    arcada.haltBox("No filesystem found! For QSPI flash, load CircuitPython. For SD cards, format with FAT");
  }

  // Turn on backlight
  arcada.setBacklight(255);
}


void loop() {
  char *imagefile = 0;
  arcada.readButtons();
  uint8_t buttons = arcada.justPressedButtons();
  Serial.print("Pressed: ");
  if (buttons & ARCADA_BUTTONMASK_LEFT) {
    imagefile = IMAGE_A;
    Serial.print("< ");
  }
  if (buttons & ARCADA_BUTTONMASK_RIGHT) {
    imagefile = IMAGE_B;
    Serial.print("> ");
  }
  Serial.println();

  delay(25);
  if (! imagefile) return;
 
  for (int i=255; i>=0; i--) {
    arcada.setBacklight(i);
    delay(1);
  }
  
  // Load full-screen BMP file at position (0,0) (top left).
  Serial.printf("Loading %s to screen...", imagefile);
  ImageReturnCode stat = arcada.drawBMP(imagefile, 0, 0);
  if(stat == IMAGE_ERR_FILE_NOT_FOUND) {
    arcada.haltBox("File not found");
  } else if(stat == IMAGE_ERR_FORMAT) {
    arcada.haltBox("Not a supported BMP variant.");
  } else if(stat == IMAGE_ERR_MALLOC) {
    arcada.haltBox("Malloc failed (insufficient RAM).");  
  }
  for (int i=0; i<=255; i++) {
    arcada.setBacklight(i);
    delay(1);
  }
}

This guide was first published on Oct 03, 2019. It was last updated on Oct 03, 2019.

This page (Drawing Bitmaps) was last updated on Jan 25, 2021.