Creating bitmapped images for the E100

This web page describes how to create bitmapped color images in a format that can be displayed using the E100's VGA controller.

  1. Create the source image. You may use any program to create the source image, e.g., Linux programs kolourpaint or gimp. kiconedit works well for drawing small low-resolution images (e.g., fonts).
  2. After you have created the source image, save it as a 24-bit truecolor image. Truecolor images represent color as a 24-bit value (8 bits each for red, green, and blue).
  3. To use the image on the E100, you need to convert the color value of each pixel from 24 bits to the 8-bit format used by the VGA controller. Here is a Matlab function color100 which does this. color100 reads the specified source image and converts each pixel color value from a 24-bit value to the most similar color in the VGA controller's 8-bit color palette.
  4. There are two ways for your E100 program to read the pixel color values for your image. For small images, your program can include an array of E100 assembly-language .data lines. For large images, E100 memory is not big enough to store all the pixel color values, so your program will need to read the image data from an SD card. (For monochromatic images such as fonts, you can save space by storing on/off values for 16 pixels in a single word.)

    color100 outputs the 8-bit pixel color values to two files: a binary file (suitable for an SD card) and an E100 assembly file. Each word in the output 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.

The E100 VGA controller uses a color palette with only 256 colors: 8 intensities (3 bits) for red, 8 intensities (3 bits) for green, and 4 intensities (2 bits) for blue. This small color-palette makes it difficult to faithfully represent color images on the E100. color100 simply rounds each color in the image to the nearest color in the E100 palette, but this can lead to loss of detail and ugly pictures. You can use a technique called dithering to improve how 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. To dither the image for the E100 color palette, replace 'nodither' with 'dither' in the rgb2ind function call in color100.