Displaying Pictures to the OLED

Before we can put an image on the screen, we have to turn a picture you want into a format that this screen and Arduino knows how to use (128 by 64 pixel OLED Screen).. Here is a tutorial for how to do that. Here is a link to a useful online tutorial. 
https://learn.adafruit.com/adafruit-gfx-graphics-library/graphics-primitives​

Test: Displaying The OLED Manufacturer's Logo

The most basic thing we need to do first is getting the code to initialize the display. The code to the right comes directly from the manufacturer and is the minimum needed to get the display ready to start working.

If all you do is get the board started and nothing else, the logo stays up forever.

Type up this code and wire the LED like the last LED lesson.

Upload it to the board and make sure it works. 
It looks similar to this picture, but your colors may be different based on the screen colors. 

Your First Bitmap Image

It seems appropriate that the first image we display is the Arduino Logo. Here is what that looks like. You should already know that though :P 
The picture here is actually already a 128 by 64 pixel bitmap image. It was generated using a converter using their actual logo. Here is the site: https://javl.github.io/image2cpp/
We need to turn it into code that the Arduino knows how to read.
​Start by generating a bitmap using the picture here of the Arduino logo and the converter website. Here is what it looked like when I did it. Each pixel has a 4-digit code. 

Image File Download

Arduino Logo Bitmap Picture File
File Size: 0 kb
File Type: png
Download File
Go ahead and practice converting images to bitmap codes using the website.

Image to Bitmap site

The pixel size for your image must be the same number of pixels as your screen. That is 128 x 64 

Resizing images. 

This is a simple and small screen, so make sure to pick an image that is also simple. It does not have to be the same 128 x 64 size, but it does have to be a 2 to 1 ratio. 

The Resulting Image

Copy and paste your bitmap file declaration right before your void setup; then alter your setup function to draw it. Your screen will look similar to this after uploading if it is working. 

Example Code.

It is useful to rename the bitmap from the default "epd_bitmap_bitmap". I deleted that part and renamed mine "logo". You can name it whatever you want to or keep it the same. 
Copy and paste your bitmap before void setup. 
Change the "logo" text in the below image to what the bitmap generator named your file or you can change it to be called "image".

Try Other Pictures. Make Your Own! 

Take the time to try out the above steps on a couple of two-by-one ratio pictures (because 128 by 64)
Here are some examples! 

Alternate Method for Windows Computers

https://exploreembedded.com/wiki/Displaying_Images_and_Icons_on_GLCD
Links to picture sources: 
Header art: https://cdn-learn.adafruit.com/guides/cropped_images/000/000/633/medium640/DSC00469_copy.jpg?1534972410
Arduino Inf logo: http://3.bp.blogspot.com/--Kg2qIZJB_k/VpzryPoDygI/AAAAAAAACEI/obWgHE4Qa7k/s1600/arduino-infinity.jpg
troll face https://pbs.twimg.com/media/Eq2N4XsWMAQBinw.jpg:large
iron  man https://iotdesignpro.com/sites/default/files/inline-images/OLED_0.jpg
space invaders https://www.electronics-lab.com/wp-content/uploads/2018/03/home.jpg

Yoda https://content.instructables.com/ORIG/FI5/24DE/KISUSQVP/FI524DEKISUSQVP.jpg?auto=webp&fit=bounds&frame=1&height=1024&width=1024&auto=webp&frame=1&height=300
Proudly powered by Weebly