Displaying a bitmap on OLED

Rather than use Vector lines (and circles, rectangles, and triangles) to draw shapes on a screen, it is possible to work in what is called Raster format. This involves defining what colour (or black/white) each pixel should be, rather than define the end points of lines. Working in Raster has some benefits: it is more difficult to edit, but is faster to process on small CPUs. Raster image formats are therefore a good choice for the Arduino.

This image shows a bitmap developed in Photoshop, translated into bytes using an online website, then copy-pasted into the Arduino IDE and subsequently displayed on the small OLED screen.

The way we do this on Arduinos is by representing the image as an array of values. Have a look at the below code. The array called fly[] holds the image data. The rest of the code just draws it on the screen.

#include <Adafruit_SSD1306.h> 
#define OLED_RESET 4
Adafruit_SSD1306 display(OLED_RESET);

void setup() {
  // tell the little OLED screen that we are 128 x 32 pixels
  display.begin(SSD1306_SWITCHCAPVCC, 0x3C);  // dont worry about this line, it looks complex

  display.setTextColor(WHITE);
}

void loop() {
  display.clearDisplay();
  drawBitMap(0,0);
  display.display();
}

const unsigned char PROGMEM fly [] = {
  // size is 56 x 64 
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x18, 0x00, 0x00, 0x00, 0x00, 0x00, 
0x00, 0x3c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0f, 0xff, 
0xf8, 0x00, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xf8, 0x00, 
0x00, 0x00, 0x00, 0x0f, 0xff, 0xf8, 0x00, 0x00, 0x1e, 0x00, 0xf1, 0xff, 0x8f, 0x03, 0xc0, 0x1e, 
0x00, 0xf1, 0xff, 0x8f, 0x03, 0xc0, 0x0e, 0x00, 0xf1, 0xff, 0x8f, 0x03, 0xc0, 0x01, 0xc0, 0xff, 
0xff, 0xff, 0x1c, 0x00, 0x01, 0xc0, 0xff, 0xff, 0xff, 0x1c, 0x00, 0x01, 0xc0, 0xff, 0xff, 0xff, 
0x1c, 0x00, 0x01, 0x28, 0xef, 0xff, 0xfd, 0xfc, 0x00, 0x00, 0x38, 0x0f, 0xff, 0xf1, 0xe0, 0x00, 
0x00, 0x38, 0x0f, 0xff, 0xf1, 0xe0, 0x00, 0x00, 0x38, 0x1f, 0xff, 0xf9, 0xe0, 0x00, 0x00, 0x07, 
0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x03, 0xff, 0xff, 
0xff, 0xe0, 0x00, 0x00, 0x00, 0x0e, 0x00, 0x70, 0x00, 0x00, 0x00, 0x00, 0x0e, 0x00, 0x70, 0x00, 
0x00, 0x00, 0x00, 0x0e, 0x00, 0x78, 0x00, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 
0x3f, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x2a, 0xff, 
0xff, 0xdf, 0x55, 0x00, 0x01, 0xc0, 0x71, 0xff, 0x87, 0x03, 0xc0, 0x01, 0xc0, 0xf1, 0xff, 0x8f, 
0x03, 0x80, 0x01, 0xc0, 0x71, 0xff, 0x87, 0x03, 0xc0, 0xfe, 0x07, 0x80, 0x1c, 0x00, 0xe0, 0x3f, 
0xfe, 0x07, 0x00, 0x3c, 0x00, 0xe0, 0x7f, 0xfe, 0x03, 0x80, 0x1c, 0x00, 0xe0, 0x3f, 0x00, 0x3c, 
0x00, 0x3c, 0x00, 0x1c, 0x00, 0x00, 0x38, 0x00, 0x1c, 0x00, 0x1c, 0x00, 0x00, 0x38, 0x00, 0x3c, 
0x00, 0x1c, 0x00, 0x00, 0xa8, 0x00, 0x1c, 0x00, 0x15, 0x00, 0x01, 0xc0, 0x00, 0x3c, 0x00, 0x03, 
0xc0, 0x01, 0xc0, 0x00, 0x1c, 0x00, 0x03, 0x80, 0x01, 0xc0, 0x00, 0x3c, 0x00, 0x03, 0xc0, 0x01, 
0xc0, 0x01, 0xff, 0x80, 0x03, 0x80, 0x01, 0xc0, 0x01, 0xff, 0x80, 0x03, 0xc0, 0x01, 0xc0, 0x01, 
0xff, 0x80, 0x03, 0x80, 0x01, 0xc0, 0x01, 0xff, 0x80, 0x03, 0xc0, 0x01, 0xc0, 0x01, 0xff, 0x80, 
0x03, 0x80, 0x01, 0xc0, 0x01, 0xff, 0x80, 0x03, 0xc0, 0x01, 0x50, 0x05, 0xff, 0xa0, 0x0a, 0x80, 
0x00, 0x38, 0x0f, 0xff, 0xf0, 0x1c, 0x00, 0x00, 0x38, 0x0f, 0xff, 0xf8, 0x1c, 0x00, 0x00, 0x3c, 
0x0f, 0xff, 0xf0, 0x1c, 0x00, 0x01, 0xc3, 0xf1, 0xff, 0x8f, 0xe3, 0xc0, 0x01, 0xc7, 0xf1, 0xff, 
0x8f, 0xe3, 0x80, 0x01, 0xc7, 0xf1, 0xff, 0x87, 0xe3, 0xc0, 0x01, 0xc0, 0x00, 0x3c, 0x00, 0x03, 
0x80, 0x01, 0xc0, 0x00, 0x1c, 0x00, 0x03, 0xc0, 0x01, 0xc0, 0x00, 0x3c, 0x00, 0x03, 0x80, 0x0a, 
0x80, 0x00, 0x10, 0x00, 0x01, 0x50, 0x1e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x38, 0x0e, 0x00, 0x00, 
0x00, 0x00, 0x00, 0x78, 0x1c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x30, 0xe0, 0x00, 0x00, 0x00, 0x00, 
0x00, 0x07, 0xe0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 

};

void drawBitMap(int x, int y)
{
  display.drawBitmap(x, y,  fly, 56, 64, 1);
  
}


 

The challenge, of course, is how to generate those zeros and ones from an image (done in photoshop, or paint or whatever).

Software developers will usually write a few lines of code that can read an image file and spit out the binary values. For the Arduino, which is a very limited software platform, it is not that simple. But, there are a few ready-to-go programs that will do this for you. A Google search on “bitmap converter for mono and color lcd displays: returns the following results

LCD assistant is a good option for Windows users. On OSX, I have use LCD Creator. But perhaps the easiest way is to use this webservice:

http://javl.github.io/image2cpp/

Warning: the width of the bitmap *must* be a multiple of 16