TouchGFX 4.22: Discover new features with Live Callouts, compress L8 images, and enjoy the offline mode

TouchGFX 4.22 is all concerning the relationship builders have with their UI-building instruments, like TouchGFX Designer. Due to the brand new Stay Callouts, customers will familiarize themselves with under-appreciated or lesser-known options. With the brand new compression capabilities, groups will get pleasure from smaller builds with none lack of high quality and, in lots of circumstances, with out even a efficiency penalty. And with the brand new offline mode and proxy configuration instrument, workflows might be extra versatile and endure from fewer interruptions. This replace is, subsequently, placing an emphasis on how customers work together with the framework. It’s not merely about what groups can do with TouchGFX however what TouchGFX can do for the individuals making an attempt to do their greatest work.

What Is TouchGFX?

The Framework

TouchGFX is ST’s free-to-use framework that helps create graphical person interfaces on STM32 microcontrollers. Written in C++, the engine takes benefit of optimizations on ST units. TouchGFX works below the idea that interfaces include screens customers navigate. Therefore, the framework is intuitive and displays one’s experiences. It's also intensive because it handles 2D and 3D objects, movies, animations, transitions, and many others. Moreover, the flexibility to entry the code generated permits knowledgeable engineers to optimize it. To assist them within the course of, TouchGFX Documentation offers data on the framework’s APIs or obtainable growth instruments.

TouchGFX Designer

TouchGFX Designer is commonly the primary instrument builders use when beginning their UI. It’s a utility with a WYSIWYG strategy 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 a cube animation, scene transitions, or a pool monitoring system. A startup Screen helps select the demo software, an ST growth board, after which configures every part. Therefore, operating instance codes and demos takes minutes, which implies creating proofs-of-concept sooner. UI components in TouchGFX Designer typically 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 potential to start out the venture 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, then return to STM32CubeMX to vary the display decision. The system will routinely replace TouchGFX Designer without having to shut the appliance.

TouchGFX Simulator

TouchGFX Simulator helps builders preview their graphical person interface earlier than operating it onto their MCU. A part of its enchantment is that it provides keyboard shortcuts to streamline workflows. As an example, taking varied screenshots and finding out animations body by body is extra easy. Equally, urgent F2 highlights invalidated areas, that means the sections of the body that the system should replace. Because of this, builders can verify if their animations waste MCU sources by unnecessarily invalidating property.

TouchGFX Generator

TouchGFX Generator works with STM32CubeMX to generate a good portion of the TouchGFX abstraction layer. We help 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 must fill in some blanks with their person code and carry out optimizations, however this new plugin makes beginning a venture way more easy. Certainly, Generator creates empty capabilities to information builders and facilitate board initialization. There are additionally default setups for the ST growth boards to hasten developments and function examples.

What’s New in TouchGFX 4.22?

L8 Compression Format

Graphical property take up a variety of area in reminiscence, and lowering their high quality means downgrading the person interface. L8 is thus a vital picture format as a result of it could actually compress a file by as much as 75% with no downgrade, due to the Chrom-ART accelerator in STM32 microcontrollers. So long as an asset makes use of a most of 256 colours, which is steadily the case on small embedded techniques with an STM32 MCU, builders can compress an asset utilizing the L8 format by merely ticking a field in TouchGFX Designer. Decompression can also 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 dropping high quality.

Compression of L8 photographs

The brand new model of TouchGFX Designer introduces a essential characteristic: compression of L8 photographs. Clicking “Photos” on the left-hand column lists the presently loaded graphical property. For all L8 photographs, a brand new “Compression” dropdown menu is out there, enabling customers to decide on between three strategies: L4, LZW9 (Lempel-Ziv-Welch), and Run Size Encoding (RLE). All three are lossless, with L4 and LZW9 creating compression tables that assign a colour to an entry, whereas RLE merely elements repeated sequences. All have advantages and disadvantages, which is why we additionally supply an “Auto” possibility that lets the compiler select essentially the most optimized compression methodology primarily based on the brand new file dimension and its rendering time.

On common, customers can anticipate a discount in file dimension between 20% to 80%. Mileage varies, nevertheless it’s simple to know why so many customers requested such a characteristic. Most often, the picture takes twice as lengthy to render. Nonetheless, since builders would use this characteristic for static interfaces, icons, or smaller property, the impression isn’t noticeable since rendering would nonetheless take solely milliseconds. Moreover, in lots of situations, the drastically smaller file dimension means a shorter fetching time from reminiscence, which compensates for the longer rendering time. Put merely, the storage optimization balances out the decompression penalty, thus providing similar or near-identical efficiency as with an uncompressed L8 asset whereas utilizing much less reminiscence.

Customers upgrading to TouchGFX Designer 4.22 should manually choose their compression methodology. Our groups stored the uncompressed format because the default conduct as a result of we didn’t need builders to see a drastic change in how the framework dealt with their L8 photographs with out understanding why it was occurring. Nonetheless, we imagine the characteristic is very symbolic because it explicitly communicates our need to optimize reminiscence footprint, particularly within the flash, whereas maintaining efficiency in thoughts.

Stay Callouts

The compression of L8 photographs can also be an instance of the necessity to higher talk with our customers to tell them of recent potentialities. TouchGFX receives frequent updates. Nonetheless, designers aren’t all the time conscious of what’s occurring. We have already got e mail campaigns, this weblog, and the ST.com web site, amongst different issues, but many are nonetheless asking us to determine a extra direct line of communication. To reply their plea, we're launching Stay Callouts, that are little containers that seem solely on the backside of the foyer display to direct customers to options, occasions, or an answer from a companion. Clicking on a Stay Callout will generate a popup with extra particulars or open a browser window to ST.com.

Because the identify suggests, Stay Callouts will name particular options or alternatives to the customers’ consideration. They solely exist within the foyer to keep away from distracting builders whereas they're engaged on their interface. Stay Callouts are additionally completely different from notifications that solely alert customers to a brand new model of the framework or an vital message. They're much less delicate in nature, which implies builders received’t be burdened in the event that they don’t see them immediately. We're additionally prioritizing our customers’ privateness. We customise the Stay Callouts for every area however don’t acquire person knowledge. Location knowledge stays on native machines, and TouchGFX Designer decides what to show primarily based on the system’s location.

Offline mode

TouchGFX 4.22 is introducing a brand new offline mode, which allows customers to obtain demos and examples to run with out an Web connection. We additionally ship a extra highly effective proxy configuration instrument to fulfill advanced setups. In lots of situations, an internet connection will not be potential or tough to acquire. Some customers face points that hinder their workflow, whether or not on a aircraft or as a consequence of bandwidth or firewall restrictions. Due to the brand new offline mode and proxy configuration instrument, it’s simpler and extra sensible to make use of TouchGFX Designer and profit from a extra fluid workflow.

What Options Are Already in TouchGFX?

Assist for X-NUCLEO-GFX01M2 and X-NUCLEO-GFX02Z1

When engineers resolve to have a graphical person interface, the show typically turns into the costliest part of their invoice of supplies. A easy 2-inch show with no contact layer will considerably enhance the person expertise, nevertheless it’s nonetheless extra pricey than the rest. Sourcing an reasonably priced show when aiming for a BoM of 5 {dollars} or much less is thus problematic. Because of this, ST is delivery show enlargement boards to assist engineers discover cost-effective components, and we're providing help for the {hardware} inside TouchGFX Designer. Customers select the show’s configuration and might begin engaged on an interface that matches its specs.

The primary enlargement 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 will 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 purposes extra accessible.

Equally, the X-NUCLEO-GFX02Z1 is our first show enlargement board to help 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 provide larger bandwidths. Builders can use the X-NUCLEO-GFX02Z1 with the NUCLEO-U575ZI-Q that got here out with the primary STM32U5s. It thus allows engineers to reap the benefits of the higher performance-per-watt ratio of the brand new MCU to create person interfaces that weren’t potential on earlier generations of STM32s.

Embedding Movies in UIs

The need to carry movies to extra UIs is a pure consequence of the rising recognition of shows on embedded techniques. Sadly, displaying a video on an embedded system with a microcontroller is difficult. There isn't a working system with a default media participant and codecs. Equally, writing an internet web page displaying a YouTube video is unattainable. Builders should do all of the heavy lifting, reminiscent of implementing a video buffer, determining what format would work greatest on their microcontroller, and figuring out easy methods to reap the benefits of {hardware} acceleration if obtainable. TouchGFX Designer provides a video widget to resolve this problem. Therefore, including a video now solely requires three easy steps.

Vector Optimizations

Most static interfaces on microcontrollers use bitmaps as a result of they require little computational throughput. Comparatively, vector photographs are much less frequent as a result of they want way more computing energy. The problem is that vectors are important for animations. Because of this, builders could select to make use of extra sources to get the next variety of frames per second or use much less energy and have a much less clean animation. To sort out this subject, TouchGFX provides vital 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 components. Nonetheless, builders will see essentially the most vital efficiency features on extra intensive animations.

The brand new optimization makes use of Chrom-ART to dump the microcontroller throughout sure operations like colour fills. ST additionally up to date the best way the framework computes the perimeters of a form. Furthermore, because the updates pertain to the framework’s dealing with of vector graphics, customers routinely profit from them. Builders will thus see efficiency boosts instantly and might plan accordingly. Some could decrease their software’s reminiscence requirement or add new animations to their interface. Groups may must evaluate their UI as a result of some components could run sooner than anticipated.

Exporting Customized Containers

In its most simplistic type, TouchGFX Designer depends on widgets, a illustration of a characteristic drawn on the display. The software program comes with many predefined widgets, reminiscent of a gauge, clock, or graph, and builders can even design customized ones. To make widgets extra easy, 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 a container impacts each display utilizing it, vastly simplifying developments. TouchGFX additionally has predefined containers to hasten the most typical design operations, and builders can create customized containers.

Customized containers are extremely widespread as a result of they allow builders to tweak their interface and flesh out a exact imaginative and prescient. Nonetheless, the inherent problem behind any design instrument is that the work spent on one venture can seldom be exported to a different UI. Certainly, a customized container consists of code, graphical property, texts, dependencies, and extra that ties it to its present venture. Since model 4.20, TouchGFX Designer solved this subject by providing an export characteristic that creates a bundle (.tpkg file) reusable on different tasks. The utility will add all property, together with fonts, to the bundle, and an XML file lists its content material. Builders can subsequently verify and modify that file to pick what they need to export.

Importing Customized Containers

To import a customized container, customers choose Edit -> Import -> Customized Container. TouchGFX 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 venture or ignores them. The system may also 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 an alternative 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 adjustments inside the unique venture ensures consistency throughout UIs.

CacheableContainers

Because the identify 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 easy 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 use this characteristic to make sure a seamless person expertise regardless of the numerous {hardware} limitations inherent to their type issue and the necessity for extra battery life. Past animations, CacheableContainers can optimize advanced widgets, reminiscent of texture mappers or small dynamic components 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 as a bitmap the system retains within the RAM. As a substitute of rendering the animation, the system retrieves the 2 photographs from reminiscence utilizing DMA and exhibits them at completely different locations due to a easy DynamicBitmap methodology. The MCU now not generates each body, thus considerably optimizing efficiency. Builders solely have to tick the Cacheable field in TouchGFX Designer, choose the placement in reminiscence of the containers they need to cache, and name them when wanted. This system drops the render time from 100 ms to five ms.

Partial Framebuffer

A body buffer is a contiguous reminiscence area that shops a illustration of every pixel that can 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 (((390times390times24)div8)), which is greater than 70% of the SRAM obtainable on the STM32L4+ that excels on smartwatches and wearables. And this quantity can explode if an software requires a couple of body buffer. Past the capability limitations, a big body buffer takes longer to fetch as extra knowledge should journey from the reminiscence to the show, slowing down efficiency.

Because the identify signifies, Partial Framebuffer solely shops a portion of the body buffer, thus lowering its reminiscence footprint by 10. Builders can configure its dimension based on the part of the display that can 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 use an embedded controller as it should instantly 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 carry UIs to resource-constrained microcontrollers. Historically, a minimal graphical interface would require a body buffer of about 200 KB. Nonetheless, 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 updates. The performance enhances partial body buffering to optimize the order of updates on the display. The method saves sources, thus permitting extra updates throughout the identical interval.

Assist for scalable vector graphics (SVG)

TouchGFX 4.21 inaugurated help for SVG. Historically, the framework shops raster photographs, reminiscent of PNG information, as a result of they're simple to entry and show. Conversely, SVG information don’t embrace a render however directions on how to attract them. It makes them extremely scalable however considerably extra demanding. And whereas it’s not an issue on a laptop computer or desktop, it’s a complete completely different story on a low-power microcontroller. The issue is that designers are more and more creating animated interfaces and trying to scale one UI onto completely different show sizes. Consequently, groups need to use SVG information to save lots of sources since one file may be drawn in many alternative methods and takes much less area in reminiscence.

ST makes use of its new NeoChrom 2.5D accelerator obtainable on sure STM32U5s to fulfill this new problem. The {hardware} optimizing drawing animations offloads among the computations related to SVG information, thus fixing the efficiency subject. The IP additionally depends on sooner reminiscence interfaces, hastening fetching operations, and the file is commonly smaller. Consequently, there’s much less of a penalty when storing information in exterior reminiscence. In the end, the announcement is very symbolic as a result of SVG wasn’t on the listing of options once we mentioned NeoChrom in Might 2022. Nonetheless, right this moment’s launch exhibits that the IP has a variety of potentials, and ST will proceed to launch new options exploiting its capabilities.

XML File for Textual content

Design groups typically retailer textual content in an Excel file to work with varied translators worldwide. Nonetheless, as an alternative of utilizing model management techniques, reminiscent of Git, editors must manually deal with adjustments and guarantee nobody inadvertently overwrites another person’s work, which may be cumbersome. To unravel this drawback, TouchGFX shops all textual content in an XML file. The format makes merging operations and battle resolutions lots less complicated. TouchGFX additionally consists of an XML to Excel converter to suit present 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 due to small venture information. Their dimension makes them simpler to merge and doubtlessly share. Beforehand, venture information saved all parameters in a JSON format. The issue is that such a file can get fairly giant. ST, subsequently, determined to optimize venture 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 easy and sooner.

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. Nonetheless, 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 vital. It prevents filling up the database with irrelevant texts and helps prototype sooner. Certainly, the single-use textual content characteristic routinely generates an ID and erases the useful resource from the database if deleted from the UI, in contrast to common textual content sources. TouchGFX additionally makes use of a random string generator for ID creation. Because of this, it’s practically unattainable for 2 single-use textual content IDs in the identical venture to be similar.

TouchGFX Inventory

Free picture library

TouchGFX Inventory is the most important library of free graphical property for person interfaces supplied by a framework destined for microcontrollers. It consists of icons, GUI components, themes, photographs, and extra. For the reason that icons are from Google’s free-to-use library and ST owns the rights to all the opposite sources, TouchGFX Inventory has a beneficiant license that enables groups to make use of the property totally free, even for industrial tasks, so long as they run on STM32 units. Customers can seize the property to resize them for his or her interface or edit them to suit their particular wants. The license even covers utilizing these property with one other graphical framework so long as this system runs on an ST microcontroller.

Just lately, many startups have been reusing TouchGFX placeholders or instance property of their design. The brand new development stems from the proliferation of smaller groups that don’t have the sources to put money into designers. Consequently, as they undertake TouchGFX, some builders discover the placeholders elegant and add them to their last interfaces. It’s why we determined to put money into TouchGFX Inventory and have become the MCU vendor with essentially the most intensive royalty-free graphical asset library. It additionally explains our licensing strategy. Over time, we’ve strived to make GUIs on MCUs extra accessible. That is one other stone on high of this edifice, and we're dedicated to rising this library over time with new themes, photographs, and extra.

A free designer at your service

Within the meantime, TouchGFX Inventory comes with UI components, like bars, popups, clocks, gauges, and a lot extra. We additionally present gentle and darkish variations of some property. In the end, TouchGFX 4.21 serves as a lesson in design. Engineers don’t have to fret about mismatching colour palettes or counting on antiquated design notions. We offer units to maintain UIs cohesive and fashionable. We additionally supply varied sizes to suit most shows, so many received’t even have to do the resizing themselves. TouchGFX Inventory comes with 5 themes at launch. Nonetheless, switching themes isn’t computerized as a result of nature of GUIs on MCUs. As there isn’t a one-to-one relation with all property, customers should manually change them.

Animations and Widgets

Slide-in Transitions and Dynamic Graphs

The problem for builders is to reap the benefits of all of the options we hold including to TouchGFX. Therefore, we provide optimized animations that already use the options above. As an example, whereas a conventional slide-in transition requires a complete display refresh, TouchGFX’s wipe animation makes use of far fewer sources. Equally, the dynamic graph widget exhibits sequential knowledge higher with much less impression on the RAM and the microcontroller.

Static Graphs

As wearables observe environmental or bodily knowledge, customers need 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 purposes. Certainly, knowledge that doesn’t have to evolve continually or is aware of solely slight variation over time higher fits a static illustration. The brand new graphs work barely in another way. Builders solely have to ship one knowledge level on a dynamic one because the time interval is fixed. Nonetheless, on static ones, programmers should enter data for the X and Y axes.

Clocks and Texture Mapper

TouchGFX additionally has widgets that mimic purposes, reminiscent of analog and digital clocks. There’s additionally a texture mapper, that means builders can begin creating their mapping program with a easy drag and drop. They may nonetheless have to enter their C++ code, however it should make the entire course of lots smoother. Texture Mapper can also be an incredible instance of TouchGFX optimizations on resource-constrained MCUs. It could 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 can even change its background, the needle’s orientation, the vary of values, and extra. The demo beneath exhibits how programmers can swap between their IDE and TouchGFX Designer for a extra fluid workflow. Groups can verify the gauge quickly, tweak it on the fly, and take a look at their code instantaneously. As an example, the video exhibits how the handleTickEvent() perform controls the gauge’s conduct. With only a few strains of code, builders can change the vary of values and the way typically the indicator receives an replace, amongst different issues. Such optimizations can save a variety of sources in purposes that don’t have to renew the worth displayed continually.

Superior Textual content Administration

Textual content is crucial to most graphical person interfaces, which explains why designers work a lot on it. They customise it, translate it, and form it. Some purposes created on TouchGFX Designers can have hundreds of textual content sources, every translated into many languages. The issue is that working with textual content may be cumbersome. Therefore, to cut back friction, TouchGFX now provides teams that builders can outline based on a bit or characteristic of their purposes. The brand new characteristic makes it less complicated to indicate translated textual content side-by-side in TouchGFX Designer. It additionally helps bundle related data to verify for consistency and accuracy. Lastly, teams make looking and discovering particular sources sooner.

TouchGFX Designer additionally features a Typographies choice to set default parameters inside teams. The part lets customers select font specs, fallback characters, wildcards, alignment, and many others. Beforehand, builders needed to overwrite parameters for every textual content useful resource, which may very well be a variety of work. Due to teams, it’s potential to concurrently set parameters for a lot of sources, 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 allows their promotion to a useful resource if essential.