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)
clip_image001

2. Fire up GIMP and open the image in the editor
clip_image003

3. Select the part you want to show in the LCD display
clip_image005

4. Copy it to a new file. In GIMP, this can be done easily by copying it (Ctrl+C) and then using the keyboard shortcut Ctrl+Shift+V. This will automatically create a new file of the right dimensions
clip_image007

5. Now, increase the width of the new image so the aspect ratio roughly looks like the GLCD’s 128×64. In fact, you can even increase it a bit more since we’re going to crop it to the right size
clip_image009
clip_image011
clip_image013

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
clip_image015
clip_image017

7. Create a new layer and give the background as white. In the Layers window on the right, put this one below the layer with the main subject
clip_image018
clip_image020 clip_image022

8. Use the “Rectangle Select tool”, the first tool in the toolbox window and create a selection of arbitrary size on image
clip_image024

9. With the selection still present, scroll to the bottom of the Toolbox window and specify the size as 128×64. Then select the checkbox “Fixed” and choose “Aspect Ratio” in the dropdown
clip_image025
clip_image027

10. Now resize the selection and position it to show the image the way you want it
clip_image029

11. Select Image->Fit Canvas to Selection. Press Ctrl+Shift+A to remove the selection rectangle
clip_image031
clip_image033

12. (Optional) Resize all layers to image size
clip_image035

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
clip_image037 clip_image038 clip_image040

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. clip_image042 clip_image044 clip_image046

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
clip_image048
Marginally better? Still looks terrible. In any case, try playing around with different images and see if you can get something better.

16. Last step, export the image as a bitmap file
clip_image049
clip_image050

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

Step 2:

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:

Next:

Prev:

Table of Contents

About these ads

3 thoughts on “Part 7 – Getting started with a 128×64 Graphics LCD Display – Porting an image to a 128×64 monochrome display

  1. Pingback: Intro – Getting started with a 128×64 Graphics LCD Display | Emptiness in void

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s