In a mature consumer electronics market, good engineering alone won’t guarantee a product’s success. To rise above the crowd and win over consumers, a product needs to offer something more: an engaging and appealing user interface. One can appreciate the power of advanced user-interface design by looking at Apple’s iPhone. The iPhone was not the first touch-screen smart phone, but it was the first to add the “wow” factor. The iPhone’s graphically rich, seductive, and simple user interface makes complex technology accessible to a younger, trend-seeking audience, not just the tech-savvy business professionals traditionally targeted by the segment.

The iPhone raised the bar for graphical user interfaces (GUIs), and not just in the smart phone segment. Consumer expectations for high-end user interfaces are pushing electronics manufacturers to integrate colorful touch-screen GUIs in everything from clothes washers, microwave ovens, and air conditioners, to home lighting systems and automobiles.

Designing in color is easy. Making it pop off the screen is not. Most OEMs have their hands full just trying to make all of their features work. They have limited time, resources, and expertise to undertake the arduous task of implementing a color GUI that pops. Traditionally, in the embedded space, the task of GUI design has fallen to the engineering department, not because engineers are good artists, but because bringing graphics to life on touch screens involves a significant writing of software. This accepted industry norm tends to exclude the very people capable of adding the “wow” — the graphic artists.

Enlarge this picture Fig. 1. Refrigerator user-interface graphics with flat, 8-bit color created using traditional GUI development tools.

For an engineer, taking an artist’s or marketing department’s vision and replicating it in a working GUI can feel like an exercise in futility. Questions concerning colors (256 or 65K or 16 million colors), resolution and screen size often go unanswered, resulting in a GUI that bears little or no resemblance to the original idea. The marketing team may provide a compelling GUI design to the engineering team with the expectation that the final GUI will look exactly like marketing’s vision of it. However, marketing may not realize the limitations involved with designing such a GUI with the platform that engineering has already decided upon.

For example, some tools can only support 8-bit color or menu-driven designs. Most color GUI libraries on the market today still adhere to the philosophy of using high-level languages by providing application programming interfaces. The library or menu-driven approach may promote the idea of making GUI design easier, but the problem is that the design implementation still lies in the hands of the engineer, since high-level languages are required. Also, many of the libraries are heavily tied to certain operating systems, which can be costly and cumbersome in regards to design flexibility and implementation.

In a typical system, the GUI is a collection of input and output objects, such as buttons and indicators, which are solely responsible for exchanging data between the user and device. For instance, in a refrigerator, the water dispensing “button” is a part of the GUI system that interacts with the central processor through a touch panel. The central processor has to handle the analog-to-digital conversion of touch panel presses and perform two-dimensional pattern recognition, relaying the human gesture to the correct function. On top of all of that, the processor also has to draw the new button images to the display (pressed and non-pressed button states). The central processor is overburdened with running both the GUI and the application. Such a system requires a more powerful processor and additional memory for the complex GUI, and with the GUI and application code co-mingled, debugging becomes much more complex. Such situations would benefit greatly from an integrated hardware-software touch-screen GUI solution that fully manages the GUI input/output and talks to the central processor with just a serial line.

Fig. 2. Refrigerator user interface graphics enhanced by a graphic artist that can go straight to production using Amulet GUI development tools.

To address such challenges, Amulet Technologies has developed a hardware-software solution that empowers OEMs to render a high-end, feature-rich color GUI that can transform an otherwise ordinary product into a stylish and unique one.

Amulet’s GUI solution incorporates hardware and software in a single chip, a GUI co-processor that features an LCD controller and a graphical operating system, where the GUI design is performed using graphic editing programs and HTML. This system-on-chip solution supports 24-bit color and alpha-blending, which allows the designer to maintain the photo-realistic or PC-based look that marketing wants, without the power or memory consumption required by other GUI systems.

The GUI software was designed for the group best suited to create visually appealing graphical user interfaces — graphic designers. With this GUI chip, programming of the GUI is done in HTML, a visual markup language familiar to designers, instead of the more esoteric C language. Developing a GUI in HTML enables graphic designers to use What-You-See-Is-What-You-Get tools. They can drag and drop GUI elements exactly where they want them and see a preview of what the GUI will look like before programmers even start writing application code.

Enlarge this picture Fig. 3. Amulet's simple HTML commands make it easy to program the application function for a touch screen GUI.

This approach bridges the divide between engineering and graphic design, enabling the GUI and application code to be developed in parallel. Dividing up the workload this way not only reduces development time and speeds time to market, it results in a visually appealing and user-friendly GUI. The engineers are trying to fit as many features as they can into their product before their deadline, so taking some work out of their queue and putting it into the right hands makes the overall product that much better. This changes the challenge from making it work to making it look cool.

Designers of GUIs may be given some concept art from marketing to begin with, but more likely they just have a list of specifications or a previous UI design (pushbuttons, 7-segment LEDs, etc). To visualize this, take a refrigerator example. The traditional UI has three main functions: dispensing ice, water, and a safety light. Fig. 1 shows an example of a UI that was assembled pixel by pixel. It is flat and boring. By taking this general concept design and giving the reins to a graphic designer, one can generate something much more visually appealing, as observed in Fig. 2.

Whether one already has concept art or hires an artist to create it, one common question is how to take an ordinary image, such as a refrigerator control panel, and make it come alive. Often Fig. 2 becomes Fig. 1 in the final product, because the advanced look was too difficult to recreate using traditional GUI development tools. This is where Amulet’s widget-based API becomes so powerful, making it easier to improve visual appeal.

First, the layered image file is separated into its individual components, such as the background, up-button and down-button states. Next, these components are saved individually in a popular format such as JPEG, GIF, or PNG. The files are then ready to be directly imported into widgets. Using drag-and-drop HTML tools such as Dreamweaver, one can see exactly what the UI will look like before even programming the embedded device. Depending on the complexity, the whole process, from layered image to HTML, consumes just a few hours instead of days. And the result is an interactive GUI ready to hand off to engineering. Creating different designs for popular stainless steel, sleek black, or traditional white refrigerators can now be done without adding time to the design cycle.

At this stage, one can virtually push buttons, slide sliders, play animations, or perform any of the other functions, but next the programmers are needed to add the functionality that makes it a real application. There are two sides to this — the HTML side and the embedded processor side. The communication between the two is simple. Most applications will only need bytes, 16-bit word, or ASCII character string variables passed back and forth. Going back to the refrigerator example, the traditional door has a few UI elements: buttons for crushed or cubed ice and light on or off, then one or two switches to activate the dispensing of water and ice. Using Amulet’s method, all of the settings can be done on the LCD, and just a few bytes are communicated to the central processor to control the flow of ice and water, and control the light. Fig. 3 shows a sample communication. The other side of this functionality is on the central processor.

In this scenario, the communication between the controller chip and the central processor consists simply of passing back and forth variables, not graphical elements, for display or control. Variables consist of bytes, words, or strings and represent control parameters such as ice type or temperature. The low overhead of this method allows for a robustness of design. The LCD can be placed far apart from the main CPU and only run UART or USB lines plus power, instead of running 20 to 30 wires to control the LCD’s RGB signals, as well.

After the simple communications protocol has been implemented on the central processor, the more upscale GUI seen in Fig. 2 becomes ready to navigate. Without headaches or high costs for development tools or software licensing, designers can now easily create a color GUI that pops – a reason today’s consumers will ultimately purchase one product over another.

Amulet’s advanced GUI co-processor for color user interfaces enables OEMs and design firms to seamlessly take their products to the next level with color-rich and sophisticated GUIs. Building upon its proven expertise with monochrome GUI solutions, the color chip makes it easier, faster and less expensive for designers to make new and existing products more exciting.

For more information, email: sales@amulettechnologies.com