TouchGFX 4.20 is now available to download. With this update we hope to assist developers share their work with their colleagues and the world at a higher level. In fact, we’re providing a method for exporting custom container. Designers will have tools to share their specific design elements across multiple projects. TouchGFX 4.20 is also bringing significant performance improvements for vector graphics. Developers will be able share smoother animations to their clients or create more sophisticated interfaces. As is the norm in the past, this latest release of the Framework will ensure that rich user interfaces be used on a wider variety of MCUs, and teams can reduce friction and increase their ability to innovate.
What Is TouchGFX?
The Framework
TouchGFX from ST is a no-cost framework to create graphic user interfaces for STM32 microcontrollers. Written in C++ the engine utilizes improvements that are available on ST devices. TouchGFX is based on the idea that interfaces are comprised of screens on which users can navigate. Therefore, the framework is intuitive and is able to mirror one’s own experiences. It’s also broad in that it works with 2D and 3D images, videos, transitions, animations, etc. In addition, the capability to get access to the code created lets expert engineers optimize the framework. To aid them in this procedure, TouchGFX Documentation gives information on the framework’s APIs and developed tools for development.
TouchGFX Designer
TouchGFX Designer is often the first tool used by developers for launching their user interface. is a program that employs an WYSIWYG method of creating the interface that users experience and engage with. Developers can start with a few examples like the clock, gauge or an animated image. You can also get more comprehensive demos such as a dice-based animation, scene-changing effects, or a system for monitoring pools. A screen for startup helps select the demo software, as well as or an ST developing board and configures everything. Thus, running examples and demos can take about a minute, making prototypes quicker. UI elements within TouchGFX Designer often take the form of widgets which one installs and can configure through the interface.
TouchGFX Designer makes up an important component in the TouchGFX ecosystem. In this case, so the user selects the 3.0 template, it’s possible to create the project using Designer and then transfer it to STM32CubeMX to install the Discovery board or MCU and allow TouchGFX Generator (see below) modify to the .IOC file to implement the new settings instantly. Similarly, a developer can begin by using TouchGFX Generator, move to TouchGFX Designer and then and return to STM32CubeMX to adjust the resolution of the display. The system will make the necessary changes to TouchGFX Designer without needing to shut down the application.
TouchGFX Simulator
TouchGFX Simulator lets developers test their user interface prior to running it through an microcontroller. Part of its draw is the fact that it has keys to speed up processes. It is, for instance, easy to take multiple pictures and look at animations frame-by-frame. In the same way pressing F2 will highlight invalid areas which are the areas in the frames that system has to update. This means that developers can verify whether their animations use up MCU resources, thereby invalidating unnecessary assets.
TouchGFX Generator
TouchGFX Generator is compatible together with STM32CubeMX for it to create large portions part of TouchGFX abstract layer. We support nearly all STM32 Discovery Kits equipped with an LCD and the latest plugin can be used in conjunction with every STM32 MCU equipped with a Cortex M0+ M4, M7, or M4. Developers must fill in the gaps with user-generated code and implement adjustments, but the new plugin makes starting projects simpler. In fact, Generator creates empty functions to assist developers and aid in the initialization of boards. There are also default configurations for ST development boards that speed up development and provide examples.
What’s New in TouchGFX 4.20?
Exporting Custom Containers
In its simplest version, TouchGFX Designer relies on widgets, which represent an element displayed onto the display. It includes a number of already-defined widgets such as an indicator, clock, or graph. Developers can make customized widgets. To simplify widgets designers can arrange them in a container. Containers are usually the primary building components of interfaces. allow developers to reuse the same widgets across multiple screens without the need to reconfigure them each times. Additionally, modifying containers affects all screens that uses it, which greatly simplifies the development process. TouchGFX also includes predefined containers that speed up the most commonly used design processes and developers are able to create custom containers.
Custom containers are extremely popular since they allow designers to modify their interface and create a clear vision. The main issue with every design tool one of the biggest issues is that the work that is done on one project will nearly never be exported into another UI. A custom container can contain code, graphical text, assets dependencies, and much more that connects it to its current work. TouchGFX Designer 4.20 addressed this issue by providing an export option that generates the bundle (.tpkg file) which can be used in various project. The utility will include all assets, even fonts to the bundle, and an XML file lists the content. Developers are then able to check the file, and alter it to pick the items they want to export.
Importing Custom Containers
To import a custom container users need to select Edit -> Importthen Custom Container. TouchGFX 4.20 comes with a brand new import utility that will guide users through the procedure. For example it can detect the languages used in the container, and then matches them with the ones available in the new project , or does not consider the custom container. It also stops the import process in the event of an inconsistency between the generic name or a problem could create problems in an interface that is new. TouchGFX Designer forces users to resolve issues with an original customized container instead of devising solutions in the process of import. Since the purpose of the feature is to maintain the appearance and feel of interfaces across various products making changes within the original project guarantees consistency across different UIs.
Vector Optimizations
Most microcontrollers’ static interfaces make use of bitmaps as they have only a small amount of computational capacity. In contrast, vector images aren’t as popular because they require a lot of processing power. The problem is the fact that they are required to animations. Therefore, developers might decide to utilize more resources to create smoother animations due to a greater amount of frames per second. In addition, the animation may require less power and will be slower. TouchGFX 4.20 provides significant improvements in processing vector graphics, with the potential to increase efficiency by up to 70% in certain situations. Developers can thus create smoother animations with smaller MCUs or with many vector-based elements. But, developers will notice the greatest performance improvements on larger-sized animations.
The new algorithm uses Chrom-ART, which allows the microcontroller to be offloaded when performing certain functions, like filling colors. ST also changed the way the framework calculates the edges of shapes. Additionally, since the improvements relate specifically to vector graphics handling, the users immediately benefit from the changes. Developers will therefore experience speed improvements immediately and prepare according to the changes. A few developers may decide to decrease the amount of memory required by their application or even include new animations in their user interface. Teams could also be required to look at their interface as some components may be running faster than they anticipated.
What Features Are Already in TouchGFX?
Support for X-NUCLEO-GFX01M2 and X-NUCLEO-GFX02Z1
If engineers choose to incorporate a user interface that is graphic and display it’s often the most expensive item in their cost of materials. A basic 2-inch display without a touch layer can greatly enhance the user experience, however it’s more expensive than other components. The search for a low-cost display that has an BoM that is less than five bucks is therefore a challenge. As a result, ST is shipping display expansion boards to assist engineers find low-cost parts as well as providing support for the hardware inside TouchGFX Designer. The users can choose the configuration for the display and then begin working with an interface that meets the specifications of the display.
First expansion boards that engineers could choose is the XNUCLEO-GFX01M2. It has an SPI 2.2-inch QVGA (320 x 120 x 240) display that is compatible with SPI flash, and can be used with an estimated BOM of five dollars for an average embedded system, which includes external flash and two-layer PCB. It is compatible with a variety of 64-pin NUCLEO boards. For example, engineers could make use of it on NUCLEO-WB55RG. NUCLEO WB55RG to to make Bluetooth applications easier to access.
Similar to the X-NUCLEO GX02Z1 is the initial display board designed to accommodate a parallel interface, QSPI flash, as well as Nucleo boards that have the 144-pin. The platform targets microcontrollers that have more power and is compatible with interfaces with greater bandwidths. Developers can utilize the X-NUCLEO GFX02Z1 together with the NUCLEO-U575ZI Q which was released in conjunction with an initial STM32U5s. It allows engineers to benefit from the superior performance-per-watt ratio offered by the latest MCU to develop user interfaces that were not possible with earlier generations of STM32s.
Embedding Videos in UIs
The desire to add videos into more user interfaces is a natural result of the increasing popularity of embedded systems. However, displaying a video on an embedded device that has an embedded microcontroller can be difficult. There isn’t an operating system that has an integrated media player or codecs. Also, creating a web page that displays the YouTube video is not possible. Developers are required to perform most of the work including the implementation of a video buffer as well as figuring out which format will work best with their microcontroller and then determining how to make use of hardware acceleration when it’s available. TouchGFX Designer provides an application for video to help solve this problem. Therefore that adding a video is as easy as three steps.
CacheableContainers
The name itself suggests it utilizes the bitmap cache to improve the performance of graphics and provide the use of a faster frame rate, resulting in seamless animations. The demo below is run with the STM32F429I Discovery Kit. With no CacheableContainers the basic full-screen (240 x 300) slide animation is running in 9 frames/second. With TouchGFX technology that system can run 60 frames/second. Some smartwatches use this technology to provide an uninterrupted user experience, despite the huge physical limitations of their design and the requirement for longer battery time. Apart from animations CacheableContainers allow for the optimization of complex widgets such as texture mappers, or even small moving elements that are displayed on an image of static background.
Without CacheableContainers the animation has to recreate every frame, which could be extremely expensive in terms of computational cost. CacheableContainer overcomes this problem by storing the initial and final frames in separate containers that is an image which the system stores in RAM. instead of rendering animations, it pulls both images out of memory via DMA and displays them at different locations thanks to an easy DynamicBitmap procedure. The MCU no produces every frame, thereby dramatically improving performance. Developers need to simply tick the Cacheable box within TouchGFX Designer, select the memory location for the container they would like to store, and then call the containers when they are needed. This method reduces the render time decreases from 100 ms to five milliseconds.
Partial Framebuffer
Frame buffers are an uncontiguous memory space that holds the representation of all the pixels that will be displayed on the display. For example, the standard 24 bit 390 x 390 image on a smartwatch requires the frame buffer to be 3,650,400 bits . This is 456.3 KB (
) that is greater than 70 percent of the SRAM that is available to the STM32L4+, which is the best in wearables and smartwatches. The number could increase when an application needs two or more frame buffers. Beyond the limits of capacity the frame buffer can take longer to load because more data has to travel through the buffer to display which can slow down performance.
The name implies, Partial Framebuffer only stores only a small portion of the buffer which reduces its memory size by 10. Developers can configure its size based on the portion of the screen that is going to alter and then keep multiple partial buffers. The framework will select the most appropriate one and then send it to the screen. It is best used when animated shorts are used, such as clocks, loading bars as well as a graph which grows its own over the course of time. It also requires that the screen utilize an embedded controller because it directly receives the frame buffer that is part of the MCU’s RAM and thus eliminating the flash for better performance. The technology works with Parallel 8080 / 8080, DSI, and SPI display.
TouchGFX is also optimized for the frame buffer in part for bringing UIs to microcontrollers that are resource-constrained. Typically, a basic visual interface will require frames buffers of around 200 KB. But, when an STM32G071 microcontroller is only equipped with 36KB of memory, this could be a major issue. TouchGFX addresses this issue by optimizing the partial frame buffer down to just six megabytes. Accounting for the application’s information, an entry-level user interface would require only 16KB of RAM in order to run. TouchGFX also makes use of intelligent partial-screen updates. The feature complements partial frame buffering to improve the sequence of updates displayed in the monitor. This process helps save resources, allowing for more updates in the same time.
L8 Compression Format
Graphical assets occupy a significant amount of memory and any degradation in their quality could mean reducing users’ interface. L8 is therefore an essential component because it is able to compress images by approximately 75% and with no degradation because of the Chrom-ART accelerator that is found within STM32 microcontrollers. As long as the asset is using more than more than 256 colors, which is typically the case with smaller embedded systems that have the STM32 MCU, developers are able to opt to compress their assets by using the L8 format simply by clicking a button in TouchGFX Designer. The decompression process is also efficient computationally because it utilizes the Chrom-ART engine that can look up the colors in a table, and render the image without sacrificing quality.
XML File for Text
The design teams typically store their the text within an Excel file for collaboration with a variety of translators around the world. But, instead of using a version control system such as Git editors must manually manage changes and ensure sure that no one accidentally overwrites the work of another person This can be a hassle. to solve this issue, TouchGFX stores all text in the form of an XML document. The format makes merging operations and conflict resolution significantly easier. TouchGFX also comes with the XML into Excel converter that can be used to integrate with the workflows of other companies. Developers can export their XML files to Excel before importing their Excel document back into TouchGFX and it’s XML format.
Optimized Project Files
TouchGFX can also facilitate collaboration due to the smaller project files. The size of the files makes them easy to combine and share. The project files previously stored the entire set of parameters in JSON format. However, the file could become quite big. ST took the decision to reduce the size of project files by storing only custom settings. So, everything that’s not included in the file will be assumed to be an default value. Therefore it is smaller, making merging using Git easier and speedier.
Single-Use Text and Its Random ID
Developers wanting to make use of text have to create a text resource in the Text Panel of TouchGFX Designer and then use the ID of the text within the user interface. however, TouchGFX also allows for “single-use text” that doesn’t show up as a normal source of text. Developers use it for testing purposes or when a text isn’t necessary. It stops filling the database with unnecessary texts and allows prototypes to be developed faster. In fact, the single-use text feature automatically creates an ID and removes the text from the database in the event that it is deleted from the UI, which is not the case with normal text resources. TouchGFX also utilizes an algorithm to generate random strings for ID creation. In the end, it’s almost impossible for two text IDs within an identical project the same.
Animations and Widgets
Slide-in Transitions and Dynamic Graphs
The task for developers is taking advantage of the many features that we are constantly adding to TouchGFX. We therefore offer optimized animations that use the features mentioned above. For instance, whereas the traditional sliding transition takes a full screen refresh, the wipe animation requires a lot less resources. Similar to that it’s interactive graph widget displays more sequential data and has less strain on memory and microcontroller.
Static Graphs
Since wearables monitor physical or environmental information Users want to track the progress. Graphs can monitor heart rates as well as temperatures, steps taken and many more. TouchGFX developers were the first to request dynamic graphs because they are difficult to create, and the feature is available since TouchGFX 4.15. The teams at TouchGFX are making static graphs available to help new applications. In reality data that doesn’t have to be constantly changing or have little or no variation in time would be better served by static representation. The new graphs operate slightly differently. Developers need only send one data point for a dynamic graph because the interval of time is always constant. For static ones, programmers need to fill in information for the both axes.
Clocks and Texture Mapper
TouchGFX includes widgets that emulate applications, like clocks that are digital and analog. Additionally, there’s an text mapper which means developers can begin creating their own mapping software with a easy Drag and Drop. It is still necessary to write your C++ code, but it’ll make the whole process more smooth. Texture Mapper is also a fantastic illustration of TouchGFX optimizations for MCUs with limited resources. It allows you to animate objects and even operate using the STM32G0 in the event that the graphic asset is stored located in RAM, not in the flash.
Gauge
The gauge template is drawn with an arc and needle to aid users in keeping track of the value. Developers can change the background, needle’s orientation as well as its range and many more. The demonstration below demonstrates how developers are able to switch their development environment or TouchGFX Designer for a more fluid workflow. Teams can check the gauge quickly, modify it as needed and then check their code instantly. The video illustrates what it works. The handleTickEvent() function controls the behavior of the gauge. With only a few lines code, developers are able to alter the values displayed and when the gauge gets an update in addition to other things. These optimizations could help save lots of time and resources for applications that do not need to update the value displayed on a regular basis.
Advanced Text Management
Text is an integral part of all graphic user interfaces. This is why designers focus to a great extent on it. They modify it, translate it and even shape it into shapes. The applications that are built using TouchGFX Designers may include hundreds of text resources, each of which is translated into multiple languages. The issue is that dealing with text isn’t easy. Thus, to cut down on the friction TouchGFX provides groups for developers to designate according to a particular section or feature in their application. The new feature allows users to display both the text that is translated in TouchGFX Designer. It also assists in aggregating relevant information in order to verify accuracy and consistency. Additionally, groups aid in searching for and finding sources easier.
TouchGFX Designer includes an typographyoption to define default parameters within groups. The tab lets users select the font specifications such as fallback characters, wildcards and alignment, among others. In the past developers were required to change the parameters of every text resource, which could take a lot of work. Because of groups, it is now possible to set the parameters for multiple resources simultaneously, greatly optimizing the process of developing. Existing projects with custom typography settings will have their settings moved onto the brand new area. The new text interface shows single-use text and allows the promotion of the resource in case it is needed.
