Efficient Embedded GUIs: STM32 with TouchGFX and GPU Optimization

 

The Smartphone as a Benchmark

Intuitive touch interfaces, smooth animations, and a modern look and feel are now considered standard in the smartphone world. We are finding that this exact user experience is increasingly expected from embedded devices as well. The challenge here is the usually significantly limited resources, such as processing power, memory space, and available energy.

In this post, we explain how CSA Engineering masters these challenges with efficient and practical solutions.

 

Efficiency through the Right Tools

At CSA, we do not exclusively, but often use STM32 microcontrollers. Thanks to many years of project experience, we know their strengths, available libraries, and development tools, but also the typical stumbling blocks, very well.

One of these tools is TouchGFX, which is designed for implementing graphical user interfaces on STM32-based devices. (https://support.touchgfx.com/docs/introduction/welcome).

 

The framework consists of three main components:

  • TouchGFX Designer:
    A graphics tool for easily creating the desired screen design.

  • TouchGFX Generator:
    A CubeMX plugin for generating the GUI abstraction layer.

  • TouchGFX Engine:
    A C++ library on the embedded device that controls the GUI application in a hardware-optimized manner.

 

In practice, a hybrid approach has proven successful at CSA: The TouchGFX Designer is used to create the basic GUI structure. However, details such as coloring, sequence-specific visualizations, or symbols to be displayed are defined directly in the C++ code.
This allows for high flexibility in GUI design while maintaining efficient implementation through the existing basic structure and code generation with the Designer.

We have already provided an introduction and a simple application example of TouchGFX in a previous blog post (see https://www.csa.ch/en/blog/straightforward-development-of-displays-and-touchscreens-including-in-embedded-systems).

 

Efficiency through the Choice of the Right Display Interface

Various interfaces can be used for the integration of a screen. The choice of the display interface plays a central role in performance, energy consumption, and hardware design. For many modern applications, the MIPI Display Serial Interface (DSI) has proven to be a suitable solution.

MIPI DSI is a serial, differential high-speed interface originally developed for mobile devices.

 

It physically consists of:

  • one High-Speed Clock Lane (a differential wire pair)
  • one or more differential Data Lanes (typically 1–2 for microcontrollers)

 

The MIPI DSI interface also offers different variants on the software side. Specifically, in STM32 microcontrollers, there are integrated DSI Host Interfaces that directly support two different transmission modes:

 

  • Command Mode:
    The host sends commands, parameters, and image data to the display. These displays usually have their own controller including a framebuffer and support the Display Command Set (DCS).

  • Video Mode:
    The image data is transmitted to the display as a continuous pixel stream in real-time. In this case, the framebuffer is located entirely in the microcontroller.

 

The various transmission modes and the choice of the number of data lanes result in flexibility regarding the design and the intended application.

The MIPI DSI interface reaches data rates from 80 Mbit/s up to 1 Gbit/s (for microcontrollers), thereby enabling the transmission of high-resolution image data with a simultaneously very low pin count. For embedded designs, both factors are crucial.

The main advantages compared to classic interfaces such as the Parallel RGB interface or SPI-based solutions are summarized below:

 

  • Significantly reduced pin count
  • Lower energy consumption due to differential signal routing
  • Higher bandwidths with fewer EMC problems
  • Good availability of modern, high-resolution displays on the market

 

Optimizations for a Smooth Display

Even the most appealing design is of no use in the eyes of the user if it stutters, is not responsive, and is therefore tedious to operate. However, dynamic content places high demands on memory and processing power.

 

Memory Optimization through Suitable Image Formats

Graphical assets often occupy a large part of the available Flash and RAM memory, especially when dealing with raster graphics such as PNG. TouchGFX offers various optimized image formats here. One example is the L8 image format, which is particularly suitable for graphics with a reduced color palette (e.g., icons, logos):

 

  • Color palette with up to 256 colors
  • Pixel array with one byte per pixel
  • Each pixel references an entry in the color palette (e.g., ARGB8888)

 

This allows the memory requirement to be significantly reduced compared to full-color formats. Additionally, lossless compression methods such as Run Length Encoding (RLE) can be used, which are particularly effective for data with long repeat sequences (such as symbols or logos with large single-color areas).

 

Vector Graphics and Hardware Acceleration

Vector graphics (SVG) are increasingly being used for scalable content and high-resolution displays. While software-based rendering is usually too slow for this, current STM32 microcontrollers offer specialized 2D graphics accelerators (GPU2D). As a result, this process is many times faster than through purely software-based rendering.

 

Round Displays as an Opportunity for Further Optimizations

Round displays, such as those used in smartwatches or compact HMIs, are an increasingly popular use case. Although they place increased demands on GUI design, they also offer additional optimization potential.

Since only a part of the theoretically rectangular area is actually visible, the framebuffer can be specifically reduced in size. Modern STM32 microcontrollers provide specialized peripherals for this purpose (e.g., Chrom-ART / GRC). This allows memory requirements and memory bandwidth to be significantly reduced.

 

Application Example

In a development project for a touchscreen microphone with wireless audio transmission for a company in the Medtech segment, we used these and other approaches to implement the requirement for a modern and fluid operation with simultaneously minimal power consumption and limited space conditions.

 

  • Seamless Integration
    The STM32 microcontroller is already used in other products. Accordingly, the display expansion with TouchGFX could be integrated into the toolchain and the application without any problems.

  • Resources and Space Conditions
    A microcontroller with a GPU also allowed for the display of more computationally intensive SVG images. Furthermore, the compact and fast MIPI DSI interface enabled a minimal space requirement for the display control lines.

  • Modularity and Adaptability
    The combination of the Designer and the C++ TouchGFX Engine (library) enabled efficient development and a GUI tailored exactly to the application according to customer requirements.

 

Conclusion

Modern graphical user interfaces in the embedded environment are no longer a luxury today, but an expectation.

With the right combination of a suitable microcontroller, high-performance interfaces such as MIPI DSI, targeted optimizations, and tools like TouchGFX, convincing user experiences can be realized even on resource-constrained systems.

However, it is important to assess the project context: TouchGFX leads to a strong tie to the STM ecosystem (vendor lock-in), and the Designer requires a Windows environment. If these framework conditions fit, TouchGFX is our clear recommendation due to its excellent performance and documentation. The good documentation surrounding TouchGFX is also particularly convincing.

 

At CSA, we bring performance to where it is needed: directly to the user.

 

Further information can be found here, among other places:

Back to overview

Contact us

AGB | Imprint | Data protection
Webdesign by biwac webagentur