Display Images on OLED Screen With Arduino (ATtiny85 and Others)
DESCRIPTION
Hi everyone!
In this instructable, I'm going to be going through the process of how you can get images to display on OLED displays such as this one: https://amzn.com/B00O2LKEW2. For this tutorial I'll be using an ATtiny85, so some of the sketches I provide will not work on other Arduino devices. However, the process for making and preparing the image files should be exactly the same for most microcontrollers, so this tutorial should be helpful.
I'll be using the following software:
- Photoshop CC 2015 (CS3-CC should work)
- LCD Assistant: http://en.radzio.dxp.pl/bitmap_converter/
- Arduino IDE
I use Photoshop to make monochromatic images and export them as bitmaps, but if you have an image you want to display you can use an online program to convert it to a bitmap file and load it into LCD Assistant.
LCD Assistant is a Windows-only program. I'm on a Mac, so I'm using Winebottler to run the .exe file. It works like a charm! You can download Winebottler here: http://winebottler.kronenberg.org. If you're having trouble getting anything to work don't hesitate to email me at info[at]coniferapps.com. TL;DR: this should work on any platform even if you don't have Photoshop.
3 More Images
Let's get to work! If you don't have Photoshop but have your 128x64 .bmp file then you can skip this step. (Step numbers correspond to the images above)
- Open up Photoshop, and create a new 128x64px image at 72ppi resolution in grayscale color mode.
- You're going to want to do all the work you need to do with rectangles and shapes while we're still in grayscale mode. We will be adding in text in bitmap mode. Additionally, keep your colors to only black and white. In the demo image I added a rectangle with a pattern fill for the background, then added a rectangle over that with a solid black fill.
- Go to Image>Mode>Bitmap. This will flatten down all your layers and get rid of any grays in the image. From here on out editing gets really primitive. No layers for you!
- Now we can start adding text. Make sure that if you want to write text on a black background, have white selected as the current color and vice-versa. Not all fonts look good at a really low resolution, so you'll just have to experiment with what looks best.
- Accept the text you created, and look at your image. You can use the eraser tool to fix some mistake pixels if need be. Make sure that everything is how you want it before we proceed to the next step.
- Go to File>Save As and select BMP as the format you want to save your image in. I'll be saving my image to my downloads folder. Use the default BMP options and select OK if a window pops up.
- Congrats! You now have probably the smallest image you'll ever make. Finder tells me that my resulting file is less than a kilobyte.
2 More Images
Now we're going to turn the .bmp file into a format that can be read by your microcontroller (Step numbers correspond to the images above)
- Open up a new window of LCD Assistant
- Go to File>Load Image, navigate to your image file (yes the interface is horrid) and select it.
- Check the settings on your window to see if they're the same as mine. The first option, the byte orientation, is a matter of experimentation. First, try vertical orientation and if the end product when you display the image is a mess of pixels then try horizontal. The only other important option is Table Name. This can be whatever you want - it's how you reference the image in the Arduino IDE.
- Go to File>Save Output, and pick a place to save your file.
- You need to name it something that ends in a .h file extension. I usually just make it the table name.
Now we have a header file that can be imported used in the Arduino IDE! There's just one quick thing we need to do before we can use it.
We just need to make one quick addition to the .h file before we can use it.
- Open the .h file in your text-editor of choice (I'll be using Sublime)
- After the square brackets ([]), add the command 'PROGMEM', then save the file.
This tells the compiler that you want this variable loaded into the program memory and not the memory used for global variables. The ATtiny doesn't have enough space in the memory that stores global variables to hold this, so it needs to go in the flash storage devoted to programs.
The variable itself is an array of hexadecimal values specifying the state of each pixel. Our image has 8192 pixels (128x64), and there are 1024 hex values in that array. Each hex value can represent one byte of information (8 bits), and each pixel in our bitmap image is one bit (black=0, white=1). Isn't it awfully coincidental that 8 bits per byte x 1024 bytes is equal to 8192 bits, the exact number of pixels? (it's not a coincidence ☺)
Attached is a sample Arduino file that you can run on an ATtiny85 connected to a 128x64 I2C OLED display. I'm using the library from the following instructable: https://www.instructables.com/id/ATTiny85-connects-to-I2C-OLED-display-Great-Things/. My program just displays the sample image I created. If you want to test your own, replace FileForOLED.h with your own file and rename things in the Arduino sketch as necessary. Thanks so much for reading, and I hope this was helpful. If you have any questions please email me at info[at]coniferapps.com or post them in the comments.
