TouchGFX 4.20 is now obtainable for obtain. With this model, we intention to assist builders share their creations with their teammates and with the world higher. Certainly, we are actually providing a approach to export customized containers. Designers will thus have the instruments to share particular design parts throughout tasks. TouchGFX 4.20 additionally brings important efficiency optimizations when utilizing vector graphics. Builders will, due to this fact, have the ability to share smoother animations with their prospects or present extra advanced interfaces. As is commonly the case, this new model of the framework ensures that wealthy UIs can run on a wider vary of MCUs and that groups cut back friction to enhance their creativity.
What Is TouchGFX?
The Framework
TouchGFX is ST’s free-to-use framework that helps create graphical consumer interfaces on STM32 microcontrollers. Written in C++, the engine takes benefit of optimizations on ST gadgets. TouchGFX works below the idea that interfaces encompass screens customers navigate. Therefore, the framework is intuitive and displays one’s experiences. Additionally it is in depth because it handles 2D and 3D objects, movies, animations, transitions, and many others. Moreover, the flexibility to entry the code generated permits professional engineers to optimize it. To assist them within the course of, TouchGFX Documentation offers info on the framework’s APIs or obtainable improvement instruments.
TouchGFX Designer
TouchGFX Designer is commonly the primary device builders use when beginning their UI. It’s a utility with a WYSIWYG method the place designers create what their customers will see and work together with. Builders can begin with instance tasks, reminiscent of a clock, gauge, or animated picture. There are additionally extra full-fledged demos like cube animation, scene transitions, or a pool monitoring system. A startup display screen helps select the demo software, an ST improvement board, after which configures every part. Therefore, working instance codes and demos takes minutes, which suggests creating proofs-of-concept quicker. UI parts in TouchGFX Designer usually take the type of widgets one provides and configures via the utility’s interface.
TouchGFX Designer is an integral a part of the TouchGFX ecosystem. As an example, so long as customers select a 3.0 template, it’s doable to begin the undertaking in Designer, then take it to STM32CubeMX, arrange the Discovery board or MCU, and let TouchGFX Generator (see beneath) replace the .IOC file to use the brand new settings instantly. Equally, a developer can begin with TouchGFX Generator, transfer to TouchGFX Designer, after which return to STM32CubeMX to vary the show decision. The system will routinely replace TouchGFX Designer while not having to shut the appliance.
TouchGFX Simulator
TouchGFX Simulator helps builders preview their graphical consumer interface earlier than working it onto their MCU. A part of its enchantment is that it provides keyboard shortcuts to streamline workflows. As an example, it’s simpler to take numerous screenshots and examine animations body by body. Equally, urgent F2 highlights invalidated areas, that means the sections of the body that the system should replace. Consequently, builders can verify if their animations waste MCU sources by unnecessarily invalidating belongings.
TouchGFX Generator
TouchGFX Generator works with STM32CubeMX to generate a good portion of the TouchGFX abstraction layer. We assist practically all STM32 Discovery Kits with a show, and the brand new plugin works with any STM32 MCU with a Cortex-M0+, M4, or M7. Builders nonetheless need to fill some blanks with their consumer code and carry out optimizations, however this new plugin makes beginning a undertaking much more simple. Certainly, Generator creates empty capabilities to information builders and facilitate board initialization. There are additionally current default setups for the ST improvement boards to hasten developments and function examples.
What’s New in TouchGFX 4.20?
Exporting Customized Containers
In its most simplistic kind, TouchGFX Designer depends on widgets, a illustration of a characteristic drawn on the display screen. The software program comes with many predefined widgets, reminiscent of a gauge, clock, or graph, and builders can design their customized widgets. To make widgets extra simple, designers can group them inside a container. Containers are sometimes the constructing blocks of an interface. They allow programmers to reuse a set of widgets throughout a number of screens with out having to reconfigure them each time. Moreover, modifying container impacts each display screen utilizing it, which vastly simplifies developments. TouchGFX additionally comes with predefined containers to hasten the most typical design operations and builders can create customized containers.
Customized containers are extremely fashionable as a result of they allow builders to tweak their interface and flesh out a exact imaginative and prescient. The inherent problem behind any design device, nevertheless, is that the work spent on one undertaking can virtually by no means be exported to a different UI. Certainly, a customized container contains code, graphical belongings, texts, dependencies, and extra that ties it to its current undertaking. TouchGFX Designer 4.20 solved this challenge by providing an export characteristic that creates a bundle (.tpkg file) that’s reusable on different tasks. The utility will add all belongings, together with fonts, to the bundle and an XML file lists its content material. Builders can due to this fact verify that file and modify it to pick what they wish to export.
Importing Customized Containers
To import a customized container, customers choose Edit -> Import -> Customized Container. TouchGFX 4.20 features a new import utility that guides customers via the method. As an example, the software program detects the languages outlined by the customized container and matches them to these obtainable within the new undertaking or ignores them. The system can even halt the import course of if there’s a battle between generic names or if a difficulty may trigger issues inside the brand new interface. TouchGFX Designer forces customers to repair points on the unique customized container, as a substitute of making workarounds throughout the import course of. Because the characteristic’s goal is to protect the feel and appear of interfaces throughout merchandise, forcing modifications inside the unique undertaking ensures consistency throughout UIs.
Vector Optimizations
Most static interfaces on microcontrollers use bitmaps as a result of they require so little computational throughput. Comparatively, vector pictures are much less frequent as a result of they want much more computing energy. The problem is that vectors are important for animations. Consequently, builders could select to make use of extra sources to supply a smoother animation because of the next variety of frames per second. Alternatively, the animation can use much less energy and be much less fluid. TouchGFX 4.20 provides important optimizations when processing vector graphics with a rise in effectivity of as much as 70% in some circumstances. Builders can thus supply smoother animations on smaller MCUs or use extra vector parts. Nevertheless, builders will see the most important efficiency positive aspects on bigger animations.
The brand new optimization makes use of Chrom-ART to dump the microcontroller throughout sure operations like shade fills. ST additionally up to date the best way the framework computes the perimeters of a form. Furthermore, for the reason that updates pertain to the framework’s dealing with of vector graphics, customers routinely profit from them. Builders will thus see efficiency boosts instantly and may plan accordingly. Some could select to decrease their software’s reminiscence requirement or determine so as to add new animations to their interface. Groups might also need to overview their UI as a result of some parts could run at a quicker charge than anticipated.
What Options Are Already in TouchGFX?
Assist for X-NUCLEO-GFX01M2 and X-NUCLEO-GFX02Z1
When engineers determine to have a graphical consumer interface, the show usually turns into the one most costly part of their invoice of supplies. A easy 2-inch show with no contact layer will considerably enhance the consumer expertise, however it’s nonetheless extra expensive than anything. Sourcing an reasonably priced show, when aiming for a BoM of 5 {dollars} or much less, is thus problematic. Consequently, ST is delivery show growth boards to assist engineers discover cost-effective components, and we’re providing assist for the {hardware} inside TouchGFX Designer. Customers select the show’s configuration and may begin engaged on an interface that matches its specs.
The primary growth board engineers can select is the X-NUCLEO-GFX01M2. It makes use of an SPI 2.2-inch QVGA (320 x 240) show that helps SPI flash, and that may match a BOM of about 5 {dollars} for a typical embedded system with exterior flash and a two-layer PCB. The X-NUCLEO-GFX01M2 is suitable with a broad vary of 64-pin NUCLEO boards. As an example, engineers can apply it to the NUCLEO-WB55RG to assist make Bluetooth functions extra accessible.
Equally, the X-NUCLEO-GFX02Z1 is our first show growth board to assist a parallel interface, QSPI flash, and Nucleo boards with 144 pins. The platform targets microcontrollers with extra energy, which explains the compatibility with interfaces that supply larger bandwidths. Builders can use the X-NUCLEO-GFX02Z1 with the NUCLEO-U575ZI-Q that got here out with the primary STM32U5s. It thus permits engineers to make the most of the higher performance-per-watt ratio of the brand new MCU to create consumer interfaces that weren’t doable on earlier generations of STM32s.
Embedding Movies in UIs
The need to convey movies to extra UIs is a pure consequence of the rising recognition of shows on embedded programs. Sadly, exhibiting a video on an embedded system with a microcontroller is difficult. There is no such thing as a working system with a default media participant and codecs. Equally, writing an online web page exhibiting a YouTube video is inconceivable. Builders need to do all of the heavy lifting, reminiscent of implementing a video buffer, determining what format would work greatest on their microcontroller, and figuring out how one can make the most of {hardware} acceleration if obtainable. TouchGFX Designer provides a video widget to resolve this problem. Therefore, including a video now solely requires three simple steps.
CacheableContainers
Because the title implies, it makes use of a bitmap cache to speed up graphical efficiency and allow the next body charge for smoother transitions. The demo beneath runs on an STM32F429I Discovery package. With out CacheableContainers, the straightforward full-screen (240 × 320) slide animation runs at 9 frames per second. With the TouchGFX expertise, the system reaches 60 frames per second. Some smartwatches presently use this characteristic to make sure a seamless consumer expertise regardless of the numerous {hardware} limitations inherent to their kind issue and the necessity for extra battery life. Past animations, CacheableContainers can optimize advanced widgets, reminiscent of texture mappers or small dynamic parts displayed in entrance of a static background.
With out CacheableContainers, an animation should redraw each body, which may get computationally costly. CacheableContainer bypasses this drawback by storing the primary and final frames in a separate container within the type of a bitmap that the system retains within the RAM. As a substitute of rendering the animation, the system retrieves the 2 pictures from reminiscence utilizing DMA and exhibits them at totally different locations because of a easy DynamicBitmap methodology. The MCU not generates each body, thus considerably optimizing efficiency. Builders solely have to tick the Cacheable field in TouchGFX Designer, choose the situation in reminiscence of the containers they wish to cache, and name them when wanted. With this system, the render time drops from 100 ms to five ms.
Partial Framebuffer
A body buffer is a contiguous reminiscence area that shops a illustration of every of the pixels that may seem on show. For instance, a regular 24-bit 390 x 390 picture for a smartwatch show calls for a body buffer of three,650,400 bits or 456.3 KB
Because the title signifies, Partial Framebuffer solely shops a portion of the body buffer, thus decreasing its reminiscence footprint by 10. Builders can configure its measurement in accordance with the part of the display screen that may change after which retailer a number of partial buffers. The framework will then select the suitable one and ship it to the show. The expertise works greatest with quick animations, like clocks, loading bars, or a graph that builds itself over time. It additionally calls for that the display screen use an embedded controller as it can immediately obtain the partial body buffer from the MCU’s RAM, thus bypassing the flash for added efficiency. The expertise works on Parallel / 8080, DSI, and SPI shows.
TouchGFX additionally optimizes the partial body buffer to convey UIs to resource-constrained microcontrollers. Historically, a minimal graphical interface would require a body buffer of about 200 KB. Nevertheless, when a microcontroller just like the STM32G071 has solely 36 KB of RAM, it may be an actual drawback. TouchGFX solves this by optimizing the partial body buffer to solely six kilobytes. Accounting for the framework’s software knowledge, an entry-level UI would solely want 16 KB of RAM to run. TouchGFX additionally makes use of good partial display screen updates. The performance enhances partial body buffering to optimize the order of updates on the display screen. The method saves sources, thus permitting extra updates throughout the identical interval.
L8 Compression Format
Graphical belongings take quite a lot of area in reminiscence, and decreasing their high quality means downgrading the consumer interface. L8 is thus a necessary characteristic as a result of it will possibly compress a picture file by as much as 75% with no downgrade, because of the Chrom-ART accelerator current in STM32 microcontrollers. So long as an asset makes use of a most of 256 colours, which may be very usually the case on small embedded programs with an STM32 MCU, builders can select to compress an asset utilizing the L8 format by merely ticking a field in TouchGFX Designer. Decompression can be computationally environment friendly because it makes use of the Chrom-ART engine to search for colours in a desk and render the asset with out lack of high quality.
XML File for Textual content
Design groups usually retailer textual content in an Excel file to work with numerous translators worldwide. Nevertheless, as a substitute of utilizing model management programs, reminiscent of Git, editors need to manually deal with modifications and ensure nobody inadvertently overwrites another person’s work, which might be cumbersome. To resolve this drawback, TouchGFX shops all textual content in an XML file. The format makes merging operations and battle resolutions so much less complicated. TouchGFX additionally contains an XML to Excel converter to suit current workflows. Builders can export to Excel after which import their Excel file again into TouchGFX and its XML format.
Optimized Venture Information
TouchGFX additionally fosters collaboration because of small undertaking information. Their measurement makes them simpler to merge and doubtlessly share. Beforehand, undertaking information saved all parameters in a JSON format. The issue is that such a file can get fairly massive. ST, due to this fact, determined to optimize undertaking information by solely storing customized settings. Subsequently, something that isn’t within the file is handled as utilizing a default worth. Consequently, the file is far smaller, making merging operations on Git much more simple and quicker.
Single-Use Textual content and Its Random ID
Builders wishing to make use of textual content should create a useful resource within the textual content panel of TouchGFX Designer after which use the textual content’s ID within the UI. Nevertheless, TouchGFX additionally permits for “single-use textual content”, which doesn’t seem as a typical textual content useful resource. Builders use it throughout testing or if a textual content isn’t necessary. It prevents filling up the database with irrelevant texts and helps prototype quicker. Certainly, the single-use textual content characteristic routinely generates an ID and erases the useful resource from the database if deleted from the UI, not like common textual content sources. TouchGFX additionally makes use of a random string generator for ID creation. Consequently, it’s practically inconceivable for 2 single-use textual content IDs in the identical undertaking to be an identical.
Animations and Widgets
Slide-in Transitions and Dynamic Graphs
The problem for builders is to make the most of all of the options we maintain including to TouchGFX. Therefore, we provide optimized animations that already use the options above. As an example, whereas a standard slide-in transition requires a complete display screen refresh, TouchGFX’s wipe animation makes use of far fewer sources. Equally, the dynamic graph widget exhibits sequential knowledge higher with much less influence on the RAM and the microcontroller.
Static Graphs
As wearables observe environmental or bodily knowledge, customers wish to see progress. Graphs can observe coronary heart charges, temperatures, steps walked, and extra. TouchGFX builders first requested for dynamic graphs, as they are often difficult to implement, and the characteristic has been obtainable since TouchGFX 4.15. Now, our groups are releasing static graphs to accommodate new functions. Certainly, knowledge that doesn’t have to evolve always or is aware of solely slight variation over time higher fits a static illustration. The brand new graphs work barely in a different way. Builders solely have to ship one knowledge level on a dynamic one for the reason that time interval is fixed. Nevertheless, on static ones, programmers should enter info for the X and Y axes.
Clocks and Texture Mapper
TouchGFX additionally has widgets that mimic functions, reminiscent of analog and digital clocks. There’s additionally a texture mapper, which signifies that builders can begin creating their mapping program with a easy drag and drop. They may nonetheless have to enter their C++ code, however it can make the entire course of so much smoother. Texture Mapper can be a fantastic instance of TouchGFX optimizations on resource-constrained MCUs. It may possibly assist animate objects and even works on an STM32G0 so long as the graphical asset is within the RAM and never the flash.
Gauge
The gauge template attracts a needle and an arc to assist customers monitor values. Builders may change its background, the needle’s orientation, the vary of values, and extra. The demo beneath exhibits how programmers can change between their IDE and TouchGFX Designer for a extra fluid workflow. Groups can verify the gauge quickly, tweak it on the fly, and check their code instantaneously. As an example, the video exhibits how the handleTickEvent() perform controls the gauge’s habits. With only a few traces of code, builders can change the vary of values and the way usually the indicator receives an replace, amongst different issues. Such optimizations can save quite a lot of sources in functions that don’t have to renew the worth displayed always.
Superior Textual content Administration
Textual content is a necessary a part of most graphical consumer interfaces, which explains why designers work a lot on it. They customise it, translate it, and form it. Some functions created on TouchGFX Designers can have 1000’s of textual content sources, every translated into many languages. The issue is that working with textual content might be cumbersome. Therefore, to scale back friction, TouchGFX now provides teams that builders can outline in accordance with a piece or characteristic of their functions. The brand new characteristic makes it less complicated to point out translated textual content side-by-side in TouchGFX Designer. It additionally helps bundle related info to verify for consistency and accuracy. Lastly, teams make looking out and discovering particular sources quicker.
TouchGFX Designer additionally features a Typographieschoice to set defaults parameters inside teams. The part permits customers to decide on font specs, fallback characters, wildcards, alignment, and many others. Beforehand, builders needed to overwrite parameters for every textual content useful resource, which might be quite a lot of work. Due to teams, it’s doable to set parameters for a lot of sources concurrently, thus vastly optimizing developments. Current tasks with customized typographies will see their settings transfer to the brand new part. The brand new textual content interface additionally shows single-use texts and permits their promotion to a useful resource if essential.
For extra info, go to weblog.st.com/touchgfx/
