Dear friends welcome back. Today we’re going to see how to display are custom-made bitmap graphics on this tiny OLED display using Arduino. It is my first OLED Display Graphics tutorial. Let’s start!

Intro to the Arduino OLED Display Graphics Tutorial

In this Arduino OLED Display Graphics Tutorial, we are using the tiny and very easy to use OLED display with an Arduino Uno. as you can see in the display I have loaded some custom made graphics from the popular arcade game Space Invaders. I have designed three frames which are shown one after another. In order to see how to connect your OLED display to your Arduino board please check our previous tutorial on that.

——————–
WHERE TO BUY
——————–

1. OLED Display: https://educ8s.tv/part/OLED096

2. Arduino Uno: https://educ8s.tv/part/ArduinoUno

3. Large Breadboard: https://educ8s.tv/part/LargeBreadboard

4. Wires: https://educ8s.tv/part/Wires

Full disclosure: All of the links above are affiliate links. I get a small percentage of each sale they generate. Thank you for your support!

[adsense]

——————–
LIBRARIES & SOFTWARE
——————–

? U8glib: https://code.google.com/p/u8glib/

? LCD assistant: http://en.radzio.dxp.pl/bitmap_converter/

? Paint.net: http://www.getpaint.net/index.html

Now let’s go to the computer and see how the program Arduino to display these graphics. As you can see the code of the project is really simple. We are using the u8 graphics library for Arduino. In order to download it you have to visit the library’s website and download it from here. We click here … Download the library for Arduino and then we go to downloads. We download it from here. Then all we have to do is to unzip in our Arduino -> Libraries folder. In the code we have three byte Arrays that contain the data of each bitmap graphic that is going to be displayed on the screen. So all we do in the code is to display these graphics one after another with a delay of three seconds.

We use the command drawBitmap in order to display the graphics on the screen. The command has four arguments The first 2, are the x and y coordinates of the screen that we want the top-left corner over the bitmap to be drawn to. The third argument is the width of the image divided by 8, then is the height of the bitmap image, and then it’s the byte Array that we want to draw.

In order to create the bitmaps that we want to display on the screen we can use either Photoshop or the Free Software paint.net . We create a new empty document with a resolution 128 by 64 because that’s the resolution of the display. We disable antialiasing and we can use only two colors, Black and white. If we use any other colour it won’t appear on the display. I created a new bitmap and now I’m going to save it as a .bmp file. So we go to File -> Save as we save as BMP and we enter a new name here for example space4.bmp and we press save. OK. Flatten image. We don’t want any layers. and that’s it.

Now we are going to use LCD assistant in order to create a byte Array from this bitmap. I have loaded the image on the LCD assistant software and I change the settings to Horizontal orientation. Now, all we have to do is to press File save output as for example space4.c and press save. That’s it. Then we open the file that LCD assistant has created and we copy the data Array from here. We then paste it in our Arduino sketch and then enter the word PROGMEM in order to store all that data in the program memory. Then all we have to do is to call the drawBitmap command and with the new bitmap Array. That’s it!

——————–
CODE
——————–

Download

 

 

 

——————–

SUBSCRIBE ON YOUTUBE

——————–

Never miss a video: Subscribe to educ8s.tv