HOW-TO PUT A BMP IMAGE ON A OLED DISPLAY

Now i will show step-by-step how to put a BMP image onto your OLED display.

First you need an image. For this demo i have chosen a battery-indicator image that is very usefull in most projects.
This is what it looks like:

This image is a monochrome bmp with the size 16×8 px.

For this demo to work you need an arduino and an OLED display ofcourse. The connections are made with SPI protocoll using 7 wires. For detailed wiring tutorial visit: https://learn.adafruit.com/monochrome-oled-breakouts/wiring-1-dot-3-128×64

For the sample code to work you need to install the following libraries(libraries can be downloaded on the bottom of the page):
Adafruit_GFX
Adafruit_SSD1306

Learn how to install libraries

 

Now if you open the sample code (downloadable on bottom of page) and upload that to your arduino you will already have the battery indicator on your display.
This is how i got it to the display:

First i need to convert the monochrome bmp to a series of hexadecimal characters that the microcontroller can read, and for that i use a program calld LCD Assistant (Download here, single exe file , no installation). Open the program and click File->Load image , locate the file named “High” in the downloadable file on the bottom of this page.

You will then see this:


The only thing i had to change here was choosing Horizontal instead of Vertical that was the default setting. You also get a nice preview of your file on the right. Now you click File-> Save output, and save the file as whateveryouwant.h. Locate this file and right-click the file and choose edit. In this small textfile you will see:

const unsigned char High [] = {
0xFF, 0xFE, 0x80, 0x02, 0xBF, 0xC3, 0xBF, 0xC3, 0xBF, 0xC3, 0xBF, 0xC3, 0x80, 0x02, 0xFF, 0xFE
};

 

The hexadecimal characters i have marked as green is what you want, and this little line contains all the data the microcontroller need to display your image.

In the demo arduino code you will see:

static const unsigned char PROGMEM BMP_DEMO[] =
{ 0xFF, 0xFE, 0x80, 0x02, 0xBF, 0xC3, 0xBF, 0xC3, 0xBF, 0xC3, 0xBF, 0xC3, 0x80, 0x02, 0xFF, 0xFE};

 

Now these two lines are identical as i have already put this exact image on my display as a test. But if you are using a different image the hexadecimal characters from the whateveryouwant.h file would be totally different than from the demo arduino file. But now you now what to copy from the whateveryouweant.h file and paste it in the correct place in the arduino code.

When this is done you might want to change a few things in the arduino code

Locate this line in the code:
display.drawBitmap(0, 0, BMP_DEMO, 16, 8, 1);

16 is the width of the image and 8 is the hight. Teese must be correct or the image will not be displayed correctly.

Congratulations. You now know how to implement an image into your arduino oled project.

Download files to make this here:
Download here

Author: Christian Arnø

Share This Post On

4 Comments

  1. I’m really impressed with your writing skills as well as with the
    layout on your blog. Is this a paid theme or did
    you customize it yourself? Anyway keep up the excellent quality writing, it is rare to see
    a nice blog like this one nowadays.

    Post a Reply
  2. Thank’s great post.

    Post a Reply

Submit a Comment

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