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.
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”.
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
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:
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
Play around with the values to find out what they do. Under
Almost there! Now only the code is missing. In the next section under
Finally click on the button Generate code and copy it from the field below.
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
After your preparations you now show the icon on your display as follows:
display.drawBitmap(0, 0, alien, 128, 64, WHITE); display.display();
That’s it! Now give your creativity a chance! 🙂