Issue 150 January 2003
GUI Interfacing
A Straightforward, Simple Solution

SUPPORT TOOLS

Amulet supplies a number of software tools that make it easy to work with the GUI Browser Chip. The HTML compiler is used to program the ’64VL01 (actually the flash memory) with the HTML display pages and LCD specifications. The LCD control lines on the ’64LV01 are configured via the LCD characteristics section of the HTML compiler. 

Although a few LCDs are predefined, you can rely on an LCD’s datasheet to supply the needed information. After the selections are made, initialization parameters are prepared for storage in the flash memory. The ’64VL01 can configure its LCD I/O control lines based on these parameters. Additionally, it handles LCDs up to the full VGA (see Photo 1). I’ll say more about compiling HTML later. With the LCD defined, a default-sized page becomes your pallet, and anything placed within the default page boundaries is legal (i.e., will be displayed on the LCD).

HTML pages are made up of a list of HTML commands. These describe display text and images and how they will be handled. Although today’s HTML editors allow you to view and edit HTML directly, the WYSIWYG drag-and-drop interface is far easier to use. You can spend time placing text and images instead of dealing with the HTML language.

Placing text isn’t any more difficult than using a text editor. You get to choose the font style and size, and place it anywhere on the HTML page. To get a bit-mapped LCD the best-fit fonts, Amulet provides a font converter. This program converts the bit-mapped font into one sized for the LCD’s screen. If you choose to use an unusual font in your HTML page, you will be required to convert that font file into an Amulet-compatible font file. This conversion is as simple as choosing the font file to convert and naming the converted file. For instance, taking a TrueType 56-KB font file and converting it into an Amulet font file reduces the size down to 3 KB.

Graphics images placed within the default page boundaries can be resized so that their size is in correct proportion to the other information on the screen. Naturally, you can reduce an image’s size to the point where it’s unrecognizable. So, pick (or design) your images accordingly. 

To help with user interfacing (UI), there are some controls supported in HTML. Besides the standard anchor, area, image, and meta refresh commands, Amulet supplies other UI objects created specifically for its GUI controller solution. There are 12 special objects: widgets, bar graph, checkbox, custom button, function button, image bar, image sequence, line plot, list, numeric field, radio button, slider, and string field. You probably recognize many of these objects. The advantage of using these Amulet UI objects is that they can interact with each another. 

The display property of widgets like disappearing reverse video can be controlled via other widgets. A number of predefined local variables can be set and read, including byte (0–255), word (0–255), and string (0–255). Variables associated with multiple widgets allow for dynamic control. Although an application such as an information kiosk could be designed using just the GUI controller, associated circuitry, LCD, and touch screen, interaction with other devices is possible via the same serial port that allows ’64VL01 programming.

I had to design 10 HTML pages for this project. It took less than two hours to complete, because many of the pages required only text changes. When I finished, I was ready to load them into the ’64VL01. After entering the name of the home page into the HTML compiler tool, it proceeds to strip out all of the unnecessary code and look for links to other pages. All of the hyperlinked pages are also compiled into one small file. This file is downloaded into the ’64VL01.

The serial port defaults to 115 kbps to program the HTML pages quickly. After they’re programmed, the ’64VL01 displays the home page and the serial port is open for business. HTML commands as well as widgets can request byte, word, string variable values, or set byte and invoke a remote procedure call (RPC) via the serial port. A simple command/value protocol is implemented with the ’64VL01 as a master controlling all external device communication. The only important rule is that the slave device must answer all commands within 200 ms (even if its only a single-byte acknowledge).

To make the GUI controller complete, it must control an LCD and accept input from a touch screen on top of the LCD. The ’64VL01 supports an SPI touch controller like the ADS7846. This touch controller uses a four-wire x-y interface. Check the Amulet web site for a resource page that includes manufacturers for both LCD panels and touch screen interfaces. For those of you who don’t have the desire or facility to design a PCB using the GUI controller chip, Amulet offers a complete GUI controller PCB with an integrated LCD and touch screen in both the 3.8” and 5.7” backlit one-fourth VGA sizes.

If you use one of Amulet’s LCD modules with an integrated GUI controller PCB, you can design all of your pages prior to building additional hardware. Any application program at the other end of the GUI’s serial link can be simulated using the included Amulet simulator. This will allow you to transfer byte, word, and string variables as requested from your live GUI controller/display. The simulator displays all requests and responses. Each request is ACKed until you enter response data.