Pixel Data Generator for Monochrome Graphical LCD Display

Introduction

When including a graphic display in your project, you may find yourself having to encode the graphics as an array of hundreds (or even thousands) of hexadecimal numbers. This process becomes extremely tedious very quickly as I found first hand working with a Newhaven Display. The ideal solution to this problem is a design tool similar to a dot matrix font generator, but on a much larger scale (in this case, 128 x 64 pixels). Having had previous experience with Excel VBA, I created a simple pixel data generator that allowed for both easy graphics and font creation. This page is not about how to communicate with graphic displays, but rather how to use this tool to obtain the data necessary for your design.

Background

Conceptually, pixel data is very simple. Each pixel is represented by a bit. When the bit is ‘0’, the pixel is off and when the bit is ‘1’, the pixel is on. Since bytes are stored on the display controller’s memory, the display is broken up into pages, as shown in Figure 1. These pages are made up of 8-bit columns represented by the stored bytes. The orientation of the bytes (i.e. if the MSB is on the top or bottom) depends on the display’s controller. As mentioned before, interpreting these bytes by hand can be very tedious. The pixel data generator does this for you.

This tool should not by any means be considered a finished product. It is a simple solution to a problem I encountered and am sure others are encountering as well. I hope you find it as useful a tool as I have!

image
Figure 1: Labeled pages of Newhaven Display with example of pixel data

User Interface

Figure 2 shows the interface of the pixel data generator.


Figure 2: Labeled user controls

  1. Pixel Array (Display Area)
  2. Pixel Data
  3. Update Button
  4. Byte Orientation Selector
  5. Reset Display Button

Functionality

Before this tool can be used, be sure to enable macros for the attached Excel file. If you are using a more recent version of Excel, you should get a security warning as shown in Figure 3. Simply click “Enable Content”. For those using a later version of Excel, you will most likely get popup windows that tells you what settings to change.


Figure 3: “Enable Content” security message

Now you can place your design in the display area. If a pixel is off, the corresponding cell should have no fill. If the pixel is on, the corresponding cell should be filled with any color. Figure 4 shows the “Fill Color” option in Excel. Selecting a color in this menu will change the color of any cells you have selected. In order to select multiple cells at the same time, just hold down the “Ctrl” button and click the cells you would like to select.

As this tool was made for monochrome displays, you cannot use it to create colored graphics.

There is another way to change a cell’s fill in Excel that is somewhat simpler than the aforementioned method. If there is already a cell in Excel with the fill you want, you can use the Format Painter to apply that fill to other cells. This option is also shown in Figure 4 under the Copy, Cut, and Paste options. To use it, simply select a cell, click the “Format Painter” button, and select the cells you wish to have the same format. Once you have selected the cells, the Format Painter option will be disabled. If you wish to prevent this, just double click the “Format Painter” button and it will stay enabled until you disable it. This way, you can continuously “paint” cells with the fill you want to easily create your design.


Figure 4: The “Fill Color” option in Excel

Filling cells with white is not recommended. If you place the generated pixel data in your code and pixels that should be off are actually on, it is probably because the corresponding cells are filled with white rather than having no fill. To be sure the entire display is cleared correctly, use the “Clear Display” button.

Before the pixel data is generated, be sure to select the correct byte orientation option. Then, once you have finished coloring in pixels, click the “Update” button. This will generate the pixel data and place it in the text box. It will also change the color of the text box to yellow, to let the user know it contains the most updated pixel data. Once any changes are made to the design, the text box color changes back to red, to let the user know the pixel data may not be the most current version. Notice that the data is broken up into sections by page for easy location of any particular data you may be interested in.

Excel File

Pixel_Data_Generator.zip (82.8 KB)

Though this tool was created with a specific display in mind, those using one that is larger in size may still appreciate its ability to create smaller elements of their design. I myself have used the tool just to create a few small icons that required only a few square pixels. If one were so inclined, they could even use Excel VBA to tailor this file to their specific display or add more features that would be useful to them.