Arduino Tutorials

Show images on an OLED display

project umbrella on oled display

You can use your Arduino (or ESP8266, ESP32, etc.) to display not only text but also images on a monochrome OLED display. However, you can’t just put an image file such as a JPEG there. It’s a bit more complex, but with the right tools it’s still no problem.

Basic considerations

The probably most common OLED display for the Arduino has a diagonal of 0.96″ and 128×64 pixels. This means that an image for the display can of course only have this size.

In addition, this OLED display can only show white pixels because it is monochrome. With the black background, however, this makes two colors. That means you can either draw something white on a black background – or color the background white and draw in black.

So it is obvious to speak less of a “picture”, but rather of an “icon”.

Convert images

So your first step is to convert an image into code so that your Arduino can display it. The best way to do this is to use an online tool like image2cpp, which you will learn about in the following.

Take this fancy UFO, for example:

This icon is already black and white and has a suitable size with 64×64 pixels – it is as high as the display. Now there are only 4 easy steps to convert this image into code.

First upload your icon:

upload image

Afterwards you have to make some minor adjustments. Suppose you want a white UFO on a black background centered in the middle of the display:

  • Set the canvas size to the size of your display (e.g. 128×64)
  • Select black as background color
  • Select Invert image colors
  • Select Center > horizontally
Settings for image conversion

Play around with the values to find out what they do. Under Brightness threshold you can for example fine tune the lines of your icon. Your icon should now look something like this:

Almost there! Now only the code is missing. In the next section under Code output format select the setting Arduino code. Under Identifier you can give your icon a name that you can use to access and include it later in your sketch.

Finally click on the button Generate code and copy it from the field below.

Output of the image conversion

Include the code in the sketch and display the icon

Now insert the freshly copied code into your sketch right before the void setup() function.

Before you can display something on your OLED display, you need to make some preparations in your sketch, such as including the necessary libraries. If you don’t know this yet, you will learn more in this project.

After your preparations you now show the icon on your display as follows:

display.drawBitmap(0, 0, alien, 128, 64, WHITE); 

That’s it! Now give your creativity a chance! 🙂

You may also like

Comments are closed.