Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

Nuts and Volts April 2010

Using a 128×64 Graphics Display with your 16 Bit Micro Experimenter

We discussed a number of features on the 16 Bit Micro Experimenter (Experimenter) since introducing it in the Nuts and Volts Dec 2009 Issue. In this article we like to extend Experimenter applications with graphics. We are all familiar with character based LCD displays; they have been around for quite some time —but what if you could have both character as well as graphic displays at the same time? Graphic technology is becoming quite pervasive. More and more products have some form of graphical interface. Using graphics enhances the user experience by not only allowing standard text, but bitmap pictures and graphic data outputs. We want to show you how easy and inexpensive  this technology can be for the 16 Bit Micro Experimenter .This article introduces a low cost hardware solution and ‘C’  software library that works with the 16 bit Micro Experimenter. Figure 1 shows an example of this graphics capability.

Figure 1 Experimenter with Graphics Display

Introducing the EA DOGM 128×64 graphics series LCD Display

We will be using the EA (ELECTRONIC ASSEMBLY) DOGM Graphics series display. The display has a matrix of 128 horizontal pixels by vertical 64 pixels, for a total of 8192 pixels. This display provides a significant capability for displaying pictures, graphics and text. Designed for commercial hand-held devices, it is extremely compact, with a large viewing area. The +3.3VDC display is a perfect complementary graphics display system for the 16 Bit Micro experimenter and is easily mountable onto a solderless breadboard.
A good choice in the EA Series is the EA DOG128W-6 display when used with the white backlight EA LED55X46-W. This combination creates a monochrome display of black pixels on an illuminated white background. The EA LCD Display and EA Back light modules are configured as a single unit. The EA DOG128W-6 display plugs in and sits on top of the back light EA LED55X46-W. Both parts are soldered together and are then plugged in as a complete display assembly (again see figure 1).

Hardware and Interfaces

The EA DOGM has internal memory to support each of the 8192 pixel states. A block diagram of its internal memory is shown in figure 2. The internal memory is organized as 8 pages of 128 bytes each for total of 1024 bytes or 8192 bits. Each bit in the row corresponds to a unique column or horizontal display pixel x position. There are 64 rows, so selecting a row corresponds to a unique vertical y position of the pixel on the display. Figure 2 is marked with the individual pixel addresses (x, y) representing the four corners of the display for a pixel reference map.  Setting or resetting a bit for a particular pixel will turn it on or off during display.

Figure 2  EADOGM Internal Memory and Pixel Position Map

Control of the display is through Synchronous Peripheral Interface (SPI) both for initialization, setting pixel contrast, pixel addressing and pixel on/off. The use of SPI really simplifies interconnection between the Experimenter and the Display. Only a few control lines plus power and ground are needed.
To support the internal working of the display a total of nine 1 UF external capacitors are needed as shown in figure 3. The backlight which mounts under the display requires three 100 OHM resistors to current limit the three integrated LEDS within the backlight. Make sure when mounting the display on the backlight to remove all the protective films, labels, and papers that are on both components. If left on and the units are soldered together they will form a permanent shadow or blocking of light– taking away from a clean display.
A timing diagram for SPI is also shown. The SPI Data out is clocked 8 bits at a time. All communication between the Experimenter to the display is one way –only the Experimenter talks. The Command or data indication (A0) must be valid during transfer.  The EADOGM brochure lists a table of all of the Programming commands to properly initialize the display. The ‘C’ Graphics library does this, as well as, all communications with the display.

Figure 3  the Experimenter and Display Hardware Interface

Introducing the Graphics Library

To help use the capabilities of the EA DOGM a Graphics library is provided. This library provides an Application Programming Interface (API) that is really just a bunch of C functions and rules. We will discuss each with examples. The library allows drawing lines, bars, circles, triangles, rectangles, and bitmaps, plotting data and outputting text. These parts of the library API are the graphic primitives. However, in order to use these primitives a lot of low level drivers are also required. Most of these low level drivers function when the primitives are drawing, with the exception of initializing the SPI and display—this has to be done by you. The library was written using the Microchip PIC24F C complier and occupies about 6018 bytes of Flash and 1264 bytes of RAM. The library is fully contained in three files Font.h (which contains the bit images for the different character fonts), Graphics.c (library source code) and Graphics.h (list of library functions for main code reference). These must be included in the project and the FONT.H and GRAPHICS.H must appear in the MAIN code using complier directives #include FONT.H and #include GRAPHICS.H. A GRAPHICDEMO project is available from the web site to experiment with and use as a template for applications. The library assumes that the Experimenter I/O Expansion Bus is configured for SPI and digital control outputs. This I/O programming is accomplished at the beginning of the MAIN code in GRAPHICDEMO.

Figure 4 Graphic library Components

The VMAP, Bitmaps, Font and Graphics Library operations

There are several other aspects in using the library to be aware of.
The library requires, and sets up, a dedicated ram area within the Experimenter PIC24F designated VMAP. It is here where all the drawings occur prior to display.  The VMAP ram area is a C array that is configured as a linear memory map 128 bytes x 8 bytes, representing all pixels on the display. VMAP contents are manipulated using the graphic primitives and then dumped onto the display for a drawing or screen presentation. The VMAP to used to do drawing and then the low level driver “dumpVmap ()”is used to transfer the contents to the display. When writing text the library makes use of a font array that are organized as 8×8 pixels for each character that is drawn in VMAP. The font supports all printable characters, numbers, and special characters like quotes, comma etc. Likewise, when drawing bit images or icons the library uses the available bit images that have included within the project as “bitmap.h “files. These must include a “# include” directive for each bit image in the Main code. It is recommended to look at the GRAPHICDEMO project to get a better idea of how this works. There are a large number of bit images already provided.

Figure 5 the Graphic Library operation

Display Initialization and refresh using Library

There are several library functions that are used to initialize the display, clear it on demand and dump or “refresh” contents of VMAP onto display for presentation.

  • initSD( ) –initializes  the SPI port to communicate to the display, initializes the display for graphics and clears it of any random pixel content ( display comes up blank)
  • clearScreen () – clears VMAP memory first and then dumps these contents onto the display. Use this to begin any new display screen presentation.
  • dumpVmap ()- dumps the current contents of VMAP onto the display. The idea is once the  screen is finished in VMAP transfer it to the display for user presentation. This function performs that operation.

Outputting Text using Library

Outputting text is really simple. An important rule to remember is to position the cursor to a legitimate character position prior to outputting text.  Let’s discuss legitimate character positions. Since the library uses an 8×8 bit font for each character and the display has 128×64 pixels; there is a total character display capability of 16 columns by 8 rows of character text. The library accepts a column value (x between 0-15) and row value (y between 0-7) for text placement.  Let’s review some important functions and give some examples. Keep in mind that the 0, 0 cursor position is the top left hand corner of the display.

  • AT( x, y) – position character cursor to x, y position of VMAP
  • putsV ( string) – outputs the string starting at current character position. If string length extends beyond maximum column the text wraps around to next row.

Here’s a code example for the Random Line Display

Figure 6 Text Display

Here’s a more challenging example that displays the entire available character font in the library on one screen

Figure 7 FONT display

Outputting Bitmaps using Library

Outputting bitmaps is as easy as outputting text using the library. A bitmap at 32×32 pixels is just a large font (remember our fonts are 8×8).  A particular bitmap has to be included as a “bitmap.h “file in the project and referenced in the Main code using a “#include directive”. Within the demo there are up to eighteen different bitmaps (these are focused on a SCI-FI genre with rockets, planets, robots, and satellites). Examples are shown.

The basic library drawing function is

  • drawbitmap32x32 (bitmap, x, y) – draws the designated bit map to location x, y of VMAP. In this case x, y are not character positions but actual pixel based x and y positions. The range of x is 0-127 and y is 0-63.

Here’s an actual code snippet used for the first display on left (all other examples are similar in structure).

Figure 8 bitmaps

Outputting Lines, Triangles, Circles, Bars, and Rectangles using Library

Displaying geometric shapes and lines is also straightforward but it requires math functions within ‘C ‘to accomplish. No worries here, the PIC24F Microchip complier comes with a Math Library and it is used with the Graphics library automatically. Here are the drawing functions of interest:

  • line( x0, y0, x1,  y1) – draws a line from x0,y0 to x1,y1 in VMAP
  • Rectangle ( left,  top,  right,  bottom) – draws a rectangle using top left hand corner x,y to bottom right hand corner x,y in VMAP
  • Circle (  x,  y, radius) – draws a circle of radius around center point x,y in VMAP
  • Bar ( left, top, right, bottom) – does the same as rectangle but fills it in
  • Triangle (  top-x,  top-y,  right-x,  right-y) – draws an equal sided triangle from apex x,y to right x,y
  • rightTriangle (  top-x,  top-y,  right-x,  right-y) – draws a right triangle from apex x,y to right x,y

Here’s an example code snippet for the following text and shape display

Figure 9 Shapes

Outputting a Waveform

Outputting a waveform is really a cool application for the Graphics library. The drawing shown here is “canned”, in that is not captured data but calculated data, just to illustrate the graphics library drawing capability. Its function is

  • plotxsinx() – calculates and plots a x times sin x function for display.

Example Code snippet:

Figure 10 Waveform Display

Running the demo Application

Hook up the Experimenter and display as shown in figure 11. Download the complete Microchip project and source code from Nuts and Volts. It is named GRAPHICSDEMO.
As mentioned in earlier articles, use Microchip’s Free IDE and PIC24F Compiler to compile and then program the Experimenter using the PICKIT2 programmer.
The Graphics demo application initializes the display and runs through a series of graphic library features using a number of separate screens. Between each screen is a slight delay to allow easy viewing before switching to another screen. The main code repeats itself as a continuous loop.

Figure 11 Graphic and Experimenter Hook up

Display Incoming Data in Real Time

How about displaying real time data as it is coming in to one of the Experimenter‘s ADC input channels?  The graphic library has a function that supports this as well.

  • plotsignal( data array, number of data samples, x offset, y offset) –This function takes a array of data samples  and plots them in VMAP. The x and y offset centering or positioning the plot on the display as needed.

In order to use this function an incoming source of data samples is needed. This is where the ADC comes in. Recall from earlier articles, the Experimenter has an ADC library that allows any of several inputs on the Expansion I/O to be configured as an ADC input channel. Once a channel is configured then simply supply an incoming signal. I used my bench sine wave generator. Remember that the incoming signal must be between +3.3V and 0V, and should be centered at +1.5 volts if it varies in the negative as well as positive direction.  With the channel configured and the signal source connected begin collecting samples into the array. Once the array is filled call the plotsignal () library function. To help things along, another demo is provided: the SNAPSHOT demo. A code snippet from the demo is shown. The Demo runs a continuous snapshot refreshing the display with what is captured from the ADC every couple of seconds.
A picture of the demo is shown where a 3 KHz waveform is being digitized using pin 9 of I/O Expansion Bus.

Figure 12 the Snapshot Viewer- Display shows incoming 3 KHz Sine wave

Ideas for future expansion

Ok, we now have a pretty cool graphics display system and a waveform snapshot viewer, and there are a lot of potential experiments to perform to customize these library tools for applications. A kit is offered through the web site with all the necessary Graphics hardware and assembly instructions to get started. Once the graphics display is connected try to start out by modifying the Graphics demo.  In all this work, an important reference in developing this library was ‘Programming 16 bit Microcontrollers in C” by Lucio Di Jasio. Mr. Di Jasio is one of the real PIC experts at Microchip. The book was invaluable in developing the concept of Experimenter Graphics Library as well contributing to some of its source code. It is highly recommended. It is an excellent reference and a source of additional experimental code for those wanting to derive more out of their Experimenter applications.

Download Graphics demo