5 tips for optimizing GUIs in industrial applications

In this guest post, embedded systems expert Jacob Beningo offers techniques in graphics, fonts, and memory to get better performance out of resource-constrained hardware for industrial applications.

Industrial applications have traditionally involved analog buttons, switches, and dials to interact with a user. As you are aware, times are changing, and industrial application users now need rich graphical user interfaces (GUI). Many interfaces are built on top of embedded systems, which are quite powerful, but they are still resource-constrained systems. They may be resource constrained in processing power, memory, or in battery life.

In today’s post, we will examine several tips for optimizing GUIs in industrial applications.

Tip #1 – Draw images directly from flash

GUI images are often stored in flash memory as PNGs. The PNG file format is a compressed image format that is designed to save space. This sounds great but if the image is compressed, that means the processor needs to decompress the image before it can be written to the frame buffer. Decompressing the image doesn’t just require internal RAM but also will waste potentially precious clock cycles to decompress the image.

The optimization developers can leverage is to decompress their PNGs and store them in flash in the TGA format. This format is an uncompressed file format that supports 8, 16, 24, or 32 bits per pixel with an 8-bit alpha channel. While each image will be larger than the PNGs, it can be directly written from flash to the frame buffer without the need to waste CPU cycles and RAM for decompression. Thankfully, flash memory is generally very cheap, and many system designers oversize them anyways so this optimization not only will improve system performance but should also have minimal impact on system costs.

Tip #2 – Optimize the image storage format

There are several different image formats that can be used to interact with a display, but they are not all created equally and have various advantages and disadvantages. For example, the RGB888 format provides developers with a 24-bit per pixel color depth, which means 8-bits are used for each red, green, and blue color control. While this does provide a rich color, storing the images can require additional storage space in addition to more complex hardware and harnessing requirements.

A good trade-off for industrial applications is to instead use the RGB565 format. The RGB565 format provides developers with 16-bit per pixel color depth where 5-bits are used to represent red, 6-bits are used to represent green, and 5-bits are used to represent blue. Obviously, the color fidelity will not be as rich as the RGB888 format since we are using 16-bit instead of 24-bit representations. To regain some of that color fidelity that is lost due to fewer bits being available, we can add dithering to the image. The result is a nice-looking image with savings in storage and computing power.

AMETEK Crank's Director of Innovation, Thomas Fletcher, goes into a lot more detail about image optimization in this video:

Tip #3 – Carefully optimize animations

In general, an animation can go a long way in sprucing up a GUI. Whether it’s to create a fancy splash screen or to display live data on the screen. The problem with animations though is that they generally use a lot of processing power. It’s not uncommon to see the CPU utilization spike to 100% for extended periods while an animation is playing. This may not be desirable especially if there are other real-time activities going on. Thankfully, there are some great optimizations that can be employed.

First, limit the size of the animation space. It’s common for an animation to only take up a small part of the screen. However, developers often rewrite the entire screen over and over. Developers can cut down their size so that it doesn’t use the entire screen. By doing this, they can update just a small part of the screen. This results in decreases in image store size, the memory used, and the clock cycles required to process the animation.

Another recommendation is to use fast RAM to optimize pixel writing. Most microcontroller-based systems have some amount of fast, zero wait RAM, or even RAM designed to be used with the graphics accelerator and the frame buffer. Utilizing this RAM can minimize the execution cycles and keep the CPU load below 100% while the screen is being animated.

Tip #4 - Leverage DMA

Another simple technique that is often overlooked by developers is to leverage the microcontrollers (MCU) direct memory access (DMA) controller. The DMA controller is made of up of several channels that can be used to perform the following types of memory transfers:

• Peripheral to RAM
• RAM to peripheral
• RAM to RAM

This can be very useful for moving large amounts of data around the application without the CPU intervening! This means that it’s possible to update the frame buffer in the background while the CPU is busy processing an analog-to-digital conversion.

Some MCUs can also perform the following types of DMA transfers:

• Flash to RAM
• Flash to Peripheral

This can be useful for reading images directly out of flash and pushing them to the frame buffer. Flash-based DMA channels tend to be less commonly available, although they are finding their way into high performance MCUs.

Tip #5 – Pre-render fonts

The last tip for today’s post is a simple but often overlooked one. It’s common for GUIs to have text displayed which in turn uses some font. Developers can improve their graphics system efficiency by again trading off storage space for fewer CPU cycles by pre-rendering their fonts. When the fonts have already been rendered, they can be directly written to the screen. If they have not been rendered, well, that means the CPU has to use some cycles and time to render the fonts before pushing them into the frame buffer.

Conclusions

Industrial applications are leveraging GUIs more and more to provide customers and users with interfaces that are intuitive and easy to use. While an industrial GUI designer may at first be hesitant to leverage an embedded systems-based solution, we’ve seen in today’s post that there are many optimization techniques that can be used to dramatically streamline and optimize these applications. These techniques have ranged from adjusting the image format, how images are stored, and through alleviating CPU cycles. At the end of the day, developers need to carefully examine each link in their display system and determine what can be done to minimize the processing power needed.

To see how Storyboard helps accelerate industrial GUI development, download and run our free trial now: