Images can be presented in many different formats. For images to be drawn onto any LCD screen, they must first be converted into a format that is read by the MSP430 Graphics Library. The library is accompanied by a GUI, the MSP430 Image Reformer, which does this automatically; the output is formatted as C code and can be added to the application project. As a result, the process is automated. However, it is advantageous for the developer to understand the format to assist in optimizing performance.

The library uses a palette-based approach where each pixel in an image is represented by an index to a common color palette, rather than containing the data for the color itself. This approach divides the image into an information section, color palette section, and a pixel data section, each requiring a specific format to be read properly.

The information section of the image contains information for the graphics library about the image. This section contains six elements that describe: bits per pixel (BPP) and compression, x size, y size, number of colors in the palette, a pointer to the color palette section, and a pointer to the pixel data section. This section is interpreted by the library for proper image drawing no matter what image options are selected.

The color palette section of data contains all colors used in a particular image. The MSP430 Graphics Library supports palette sizes of 2, 16, and 256 colors. These palette sizes correspond to the number of bits per pixel required to store the index to the palette, or 1BPP, 4BPP, and 8BPP, respectively. The color of each pixel is represented in a 24-bit form with 8 bits each for red, green, and blue. This is a typical method of conveying pixel color information and looks like 0xRRGGBB. For instance, a blue pixel would be represented by 0x0000FF while a red pixel would be represented by 0xFF0000.

The pixel data section is comprised of information for each pixel in the image. This data is organized according to the size of the color palette or bits per pixel. In an 8BPP image each pixel data byte indexes to a single pixel. In the other BPP configurations, multiple pixels represent one pixel data byte.

The coordinate system for pixel matrices is different than a standard Cartesian coordinate system. Pixel data for images is ordered across rows from left to right, starting with the top row and working downward. Figure 4-1 shows the difference between the standard x-y Cartesian coordinate system and the pixel matrix coordinate system where r and c denote rows and columns, respectively.

Figure 4-1 Image Format – Coordinate Systems

Figure 4-2 illustrates how images are converted into an acceptable format for the MSP430 Graphics Library. This 16 pixel image consists of 4 pixels each of blue, green, red and white.

Figure 4-2 Image Format - Example 16 Pixel Figure

In a generic bitmap form, this image is represented by a color string of 48 total bytes.

After converting this image to the palette and index format used by the graphics library, the format will look like the following palette and pixel sections. In this form, the image saves space by using the indices to repeatedly represent the same colors.

The image above has only four colors and could use 4BPP storage instead of 8BPP storage. This would merge the 8BPP indices together so that 1 byte represents 2 pixels of 4 bits each. The transition from 8BPP to 4BPP converts the first and second rows of pixels 0x00, 0x00, 0x01, 0x01 to 0x00, 0x11. The third and fourth rows of pixels 0x02, 0x02, 0x03, 0x03 become 0x22, 0x33. This alters the pixel data section as shown below.

The palette and index method saves a considerable amount of space over the direct color string method, especially as the image grows in size. The image is now fully optimized for storage size and has reduced from 48 bytes down to 20 bytes, a 42% size savings.