Creating images for the E100

The tutorial explains the process of converting common image files into a list of pixel values. Your E100 program will then have to read the pixel values and write them to the VGA monitor. There are two ways to provide the image data to your E100 program. For small images, you can convert the pixel values to an array of E100 assembly-language .data lines. Larger images won't fit in E100 memory, so your program will need to read the image data from an SD card.

Choosing an image size

To reduce the memory needed to store an image, use small images, or use a packed image encoding. This tutorial describes how to export very small images for use by an E100 assembly program. A packed encoding stores each pixel in less than one word. For monochromatic images, we can store sixteen pixels in a single word. This tutorial does not describe techniques for creating a packed encoding; that is left up to the reader.

If you need to store bigger images, you can use the SDRAM. The SDRAM can be initialized by copying data from an SD card.

Image creation

We recommend you use the program KolourPaint to save the image. Start KolourPaint on Linux by running the application kolourpaint. Any imaging program will work, but KolourPaint provides an option to save an image as monochrome. In many cases, you will not need color information for the image, so saving it in monochrome makes the image data easier to understand and manage.

Here is a screenshot of kolourpaint. You can draw an image or open an image file from another source. You can resize the image by dragging the handle in the lower right corner, or using the menus: Selection -> Resize/Scale....

To make the image monochrome, click Selection -> More Effects.... This will produce the image effects dialog (screenshot). Then, from the Effects drop-down menu, select Reduce Colors. You can change the image to Monochrome or Monochrome (Dithered) (screenshot). Dithering is another technique to reduce the number of colors.

Finally, save the image using File -> Save As.... For Filter type, select BMP Image, and for Convert to, select Monochrome (screenshot). In this tutorial, we'll save the image as note.bmp.

Another useful drawing program on Linux is KIconEdit. KIconEdit works well for drawing small low-resolution images (e.g., fonts). Start KIconEdit on Linux by running the application kiconedit. Here is a screenshot of kiconedit. To save the image, click File -> Save As. For Filter, select BMP Image.

Converting an image file to an E100 assembly-language file

MATLAB can be started by running the program matlab. The right side of the MATLAB window allows you to enter commands. To change to the directory/folder your image was saved in, you can type cd followed by the directory name, just as you would at a terminal.

1. Read in the image into a matrix i:
   i = imread('note.bmp');
2. Find out the size of your image. This will be helpful for iterating through it in your E100 program. Type the following (note that there's no semicolon). This should only be a 2-D array, not a 3-D array, if the image was properly saved as monochrome. (In a color image, MATLAB uses the third dimension to specify color.)
   size(i)
3. Flatten the array so it's more easily converted to an assembly language array, storing it in the variable flati:
   flati = i(:);
4. Write out the array to a file image.txt.
   dlmwrite('image.e', flati);
5. The file image.e now contains the data from your image. To integrate this into an assembly program, you will need to add assembler .data directives to the beginning of each line (probably using the Find/Replace feature of a text editor) and label the beginning of your array. The data in the array is stored in column-major order; that is, the elements of the first column are listed first in the array, then the elements of the second column, and so on. Now you're ready to use the image data in your assembly program!

The following Matlab script can convert color images into a binary file appropriate for the SD card. Each word in the file is a proper VGA color for the E100, so it can be sent directly to vga_color_write. The output starts at the upper left of the image and sweeps across a row, then goes to the next row, eventually reaching the lower right corner of the image.

To use it, run the Matlab script and specify an 640 x 480 image file. It can take up to a minute to process a full-screen image. If the script gives an error about palettized images, try converting the image to PNG24 or BMP format. The output .bin file can be used as the SD card input if you are using code that will draw an image of the correct size using the SD card data.

Improving image quality with dithering

A technique called dithering can help improve how full-color images look on the E100. Dithering alters the color of neighboring pixels to make a richer range of colors appear to the human eye, when viewed from a distance, due to the mixing of the colors of nearby pixels by the human eye.

This tutorial describes how to use Adobe Photoshop to create a dithered image that uses the E100 color palette.

Creating a color palette for the E100

The first step is to create a Photoshop color palette with the colors supported by the E100. To do this, we need an image that contains the 64 colors supported by the E100.

1. An easy way to get all 64 possible colors into an image is to draw them onto ase100's simulated VGA screen on Windows. For example, you could write an E100 program to draw 64 columns on the VGA screen, one column per color. The resulting image might look like this:
   
   
   
   
2. Use the Print Screen key to copy this image onto the clipboard. Then paste the clipboard into Photoshop and crop out everything except the contents of simulator's screen.
3. Navigate to File->Save for Web & Devices.
4. If you switch to a format with dithering, the Color Table window will be populated with the 64 colors from the image.
5. Click the arrow button to the right of the Image Size tab. Select Save Color Table... to save the palette to a file. We've completed this steps to create this Photoshop color palette file.

Applying dithering to an image

1. In Photoshop, open the image you want to dither.
2. Navigate to File->Save for Web & Devices.
3. Now change the Preset on the right side to GIF 64 Dithered.
4. In the Color Table area, the software has selected a palette of colors but we need to restrict it to what the e100 supports. Click the arrow button to the right of the Image Size tab. Select Load Color Table... and choose the Photoshop color palette file you created.
5. The dithered image will appear on screen. You should notice that the picture quality has deteriorated a bit (but not nearly as bad as with no dithering).
6. In the drop down to the left of the Dither percentage box, experiment with the No Dither, Diffusion, Pattern, and Noise settings to see which dithering algorithm looks best for your image.
7. Click Save to save the dithered image.

Your dithered image has been created. Now your Matlab code to read the color image data will not have to truncate or round any of the color intensity values since the dithering has assigned only exact colors from the E100 palette to be included in the pixels of the image.