Part 7 – Getting started with a 128×64 Graphics LCD Display – Porting an image to a 128×64 monochrome display
Now that you’ve got the GLCD up and running and probably tried a few things, you’d like to put a picture of your cat on the display and see if he/she can recognise it right? It’s okay, you can admit it, I’m not judging.
This can be broken down into 2 steps:
1. Convert an existing image into a 1-bit black or white bitmap (BMP) image
2. Convert the bitmap from the previous step into an array for use with your microcontroller
Step 1 – Convert an existing image into a 1-bit black or white bitmap (BMP) image
For this, we’ll use GIMP. If you don’t have it already, I suggest you download it. Photoshop will also work well since we’ll be using standard features of image manipulation, but you’ll have to google for those features of photoshop yourself.
1. Get an image you like. I’m going to use this one which I shamelessly downloaded from http://eofdreams.com/photo/cat/05/. I chose an image with a white background since it’s easier to work with (you’ll see why in a few steps)
6. Use the “Fuzzy Select” tool from the toolbox (fourth from top left in the toolbox window) to select the white region which we’ll delete by pressing the “Delete” key on the keyboard. After that, press Ctrl+Shift+A to unselect the selection dots
13. Now the interesting part. We’re going to use an algorithm called “Dithering” to convert this to a 1 bit black and white image. Go to Image->Mode->Indexed … In the popup that shows up, set the options “Use black and white 1-bit palette”, “Remove unused colors from colormap” and select “Floyd-Steinberg (normal)” in the dropdown under Dithering.
Try experimenting with other Dithering options as well, but the Floyd-Steinberg option worked best for me
14. Almost done! Just resize the image to 128×64 and save it as a bitmap image for the next step. Note the sudden drop in detail when you resize it. What did you expect? It’s 8192 bytes (128×64)! That’s about 8KB.
15. Try other dithering options to see if they give you better mileage. Interesting thing to note is that it looks fine when you see it zoomed out, like a favicon or something. But when you zoom in, it’s not too clear. Another thing you can do is in the first step itself, play around with the levels and contrast so that the details come out more clearly
Marginally better? Still looks terrible. In any case, try playing around with different images and see if you can get something better.
Once you have the bitmap, move to the next step. If you want to create an image from scratch, I would suggest you create a new file and give the dimensions as 128×64. You can then zoom in and create whatever you want
Okay, I couldn’t find a stand-alone tool that would properly do the job of breaking a bitmap into an image that works well with a KS0108 128×64 display. But MikroElektronika’s MikroC IDE has an excellent tool that actually does this and gives you the data bytes for the image you feed it. I won’t go into too much detail since you can see how it’s done by this link: