真正厉害的，都在“自我进化” | 来看看TouchGFX的新模样

“进化论”普适于万事万物。ST的经典嵌入式GUI开发工具TouchGFX，历经数轮迭代创新，逐渐演变成了如今强大而精巧的模样。

TouchGFX 是 ST 的免费开发工具，帮助用户在 STM32 微控制器上创建图形用户界面。 该引擎用 C++ 编写，充分利用了 ST 器件上的优化功能。TouchGFX 工作在假定用户界面是由用户导航的屏幕组成的情况下，很直观地反映了用户体验。它应用广泛，可以处理 2D 和 3D 对象、视频、动画、过渡等。此外，它还能访问生成代码，让专家级工程师可以优化他们的代码。开发人员如果想查找该工具的某个 API 或可用的开发工具信息，一般会先从TouchGFX 文档开始。

TouchGFX Designer 通常是开发人员启动UI 设计时使用的第一个工具。它采用所见即所得的方法，设计者可以在其中创建用户会看到并与之交互的内容。 开发人员可以从示例项目开始，例如时钟、仪表或动画图像，以及更多成熟的演示，如骰子动画、场景转换或池监控系统。选择演示应用程序、ST 开发板，并配置所有内容都是通过一个启动屏幕进行的。因此，只需要几分钟即可运行示例代码和演示，从而更快地创建概念验证。TouchGFX Designer 中的 UI 元素通常采用通过实用程序界面添加和配置的小组件的形式。

▲ TouchGFX Designer 为咖啡机创建 UI

TouchGFX Designer 是 TouchGFX 生态系统的一部分。例如，只要用户选择3.0模板，就可以在Designer中启动项目，然后将其转到STM32CubeMX，设置Discovery板或MCU，让TouchGFX Generator更新.IOC文件以立即启用新设置。

开发人员也可以从 TouchGFX Generator 开始，再移至 TouchGFX Designer，然后返回 STM32CubeMX 以更改显示分辨率。系统会自动更新 TouchGFX Designer，无需关闭应用程序。

在开发人员将图形用户界面运行到他们的 MCU 之前，TouchGFX Simulator 可对其进行模拟仿真。它的一个优点是提供了键盘快捷键，简化了工作流程，比如更容易进行各种截屏并逐帧研究动画。同样，按 F2 会突出显示无效区域，即系统必须更新的帧。因此，开发人员可以检查他们的动画是否因为带来了无效资产从而浪费了 MCU 资源。

TouchGFX Generator 与 STM32CubeMX 一起生成 TouchGFX 抽象层 (AL) 的重要部分。 我们支持几乎所有带显示屏的 STM32 探索套件，新插件适用于任何基于 Cortex-M0+、M4 或 M7 的 STM32 MCU。尽管工程师仍需添加他们的用户代码并进行执行优化，这个新插件使启动项目变得简单易行。Generator通过创建空函数指导开发人员并加快开发板初始化。ST 对开发板也进行了默认设置，可加速开发并用作示例。

▲ TouchGFX Generator 和 Designer 在智能手表上协同工作

当工程师已决定使用图形用户界面时，显示器就会成为其物料清单中最贵的组件。一个没有触屏功能的简单的 2 英寸显示屏都会显著地提升用户体验，但它还是比其他部件都贵。如果BOM目标在5 美元以下，想找到一个价格合理的显示器很难。 因此，ST 推出了显示扩展板， 帮助工程师找到性价比更高的组件，同时还为 TouchGFX Designer 中的硬件提供支持。用户只需选择显示器的配置，即可在与其规格匹配的界面上开始工作。

第一个扩展板是 X-NUCLEO-GFX01M2。它搭载了支持 SPI 闪存的 SPI 2.2 英寸 QVGA (320 x 240) 显示器，非常适合BOM在5美元左右、带外部闪存和两层 PCB 的典型嵌入式系统。X-NUCLEO-GFX01M2 与各种 64 针 NUCLEO 板兼容，例如 NUCLEO-WB55RG开发板，从而简化了蓝牙应用的开发。

▲ The X-NUCLEO-GFX01M2

同样，X-NUCLEO-GFX02Z1 是我们首款支持并行接口、QSPI 闪存和 144 针 Nucleo 板的显示扩展板。 该平台面向功率更大的微控制器，可兼容更高带宽的接口。开发人员可以将 X-NUCLEO-GFX02Z1 与基于 STM32U5 的 NUCLEO-U575ZI-Q 一起使用，使工程师能够利用新 MCU 更出色的效率及性能创建前几代 STM32 无法实现的用户界面。此外，ST正在更新 X-CUBE-DISPLAY 扩展软件包，无需 TouchGFX 即可使用显示扩展板。

▲ The X-NUCLEO-GFX02Z1

随着嵌入式系统中屏幕的日益普及，开发者希望在用户界面（UI）中引入视频，更好地实现与用户互动。但在嵌入式系统 UI 中使用视频实现起来是有难度的。操作系统没有自带默认的媒体播放器和编解码器。同样，编写一个能显示 YouTube 视频的网页也实现不了。开发人员需要自行完成所有繁琐复杂的工作，例如部署视频缓存，挑选出最适合工作在他们的微控制器上的编解码器；此外，如果设备运行硬件加速，如何实施。TouchGFX Designer 提供了一个视频小组件来解决这一挑战。添加视频只需要三个简单的步骤。

顾名思义，CacheableContainers 使用位图缓存加速图形性能，以更高的帧速率实现更平滑的过渡。下面的演示在 STM32F429I 探索套件上运行。如果没有 CacheableContainers，简单的全屏 (240 × 320) 幻灯片动画运行速度是每秒 9 帧。借助 TouchGFX 技术，系统可以达到每秒 60 帧。现在有些智能手表通过这个功能已实现无缝丝滑的用户体验，尽管其外形尺寸还存在很大的硬件限制，且需要更长的电池寿命。除了动画之外，CacheableContainers 还可以优化复杂的小组件，例如纹理映射器或在静态背景前显示的小型动态元素。

如果没有 CacheableContainers，动画的每一帧都必须重绘，计算量非常大。CacheableContainer 将第1帧和最后1帧存储在单独的容器中，并以位图形式保存在 RAM 中。系统无需渲染动画，而是使用 DMA 从内存中检索这两个图像，并采用一个简单的 DynamicBitmap 方法将它们显示在不同的位置。MCU 无需生成每一帧，显著优化了性能。开发者只需在 TouchGFX Designer 中勾选 Cacheable 框，选择要缓存的容器在内存中的位置，需要时调用即可。采用这种技术，渲染时间可从 100 ms 缩短到 5 ms。

帧缓冲区是一个连续的内存空间，用于存储将出现在显示器上的每个像素的代表。例如，用于智能手表显示屏的标准 24 位 390 x 390 图像需要 3,650,400 位或 456.3 KB (（390×390×24）÷8 ) 的帧缓冲区，这是 STM32L4+ （适用于智能手表和可穿戴设备）上可用SRAM 的 70% 以上。如果应用程序需要多个帧缓冲区，这个数字可能会激增。如果超出容量限制，较大的帧缓冲区需要更长的获取时间，因为需要从内存传输到显示器的数据更多，因此性能也会降低。

顾名思义，Partial Framebuffer 只存储了部分帧缓冲区，因此占用的内存减少了 10 倍。开发者可以根据屏幕会变化的那一部分来配置它的大小，然后再存储多个部分缓冲区。随后工具将选择合适的那个并将其发送到显示器。这个技术最适用于短动画，例如时钟、加载条或随时间自行构建的图形。它要求屏幕使用嵌入式控制器，因为它会直接从 MCU 的 RAM 接收部分帧缓冲区，从而绕过闪存以提高性能。这一技术适用于并行/8080、DSI 和 SPI 显示器。

TouchGFX 还优化了部分帧缓冲区，让资源受限的微控制器也能实现 UI功能。过去，最小的图形界面也需要大约 200 KB 的帧缓冲区。而像 STM32G071 这样的微控制器只有 36 KB 的 RAM ，怎么办？TouchGFX 将部分帧缓冲区优化到只有6 KB， 解决了这个难题。考虑到该工具的应用数据，入门级 UI 只需要 16 KB 的 RAM 即可运行。TouchGFX 还具有智能部分屏更新功能。该功能补充了部分帧缓冲，以优化屏幕上的更新顺序。这个过程节省了资源，可以在同一时间段进行更多更新。

图形资产占用大量内存空间，但降低图形质量也就意味着UI的降级。因此L8 是一项必不可少的功能，它可以将图像文件压缩 75% 而无需降级，这要归功于 STM32 微控制器中的 ChromART 加速器。 图形资产最多使用 256 种颜色，这在基于 STM32 MCU 的小型嵌入式系统上很常见，开发人员只需在 TouchGFX Designer 中勾选一个框，就可以选择使用 L8 格式压缩图形。解压缩的算法也很高效，因为它使用 ChromART 引擎在表中查找颜色，并在不损失质量的情况下对图形进行渲染。

设计团队通常将所有文本存储在可以导出的 Excel 文件中，这种格式更容易与全球开发人员协作。但管理改动非常不便，开发者必须手动处理更改，而不是使用Git这样的版本控制系统，并确保没有人无意疏忽覆盖其他人的工作，这就很麻烦。为了解决这个问题，TouchGFX将所有文本存在一个 XML 文件中。这个格式简化了合并操作和冲突的解决。为了兼顾开发者的以往工作习惯，TouchGFX还包括一个 XML 到 Excel 转换器。因此，开发人员仍然可以导出到 Excel，然后将他们的 Excel 文件传回 TouchGFX 生成 XML 格式。

TouchGFX 还通过小型项目文件促进协作。小尺寸更容易合并和共享。通常，文本文件以 JSON 格式存储所有参数，这会让文件变得很大。因此，ST 通过仅存储自定义设置进行优化，所有文件中没有内容时都被视为使用默认值。这样大大缩小了文件尺寸，使 Git 上的合并操作更加简单和快捷。

希望使用文本的开发人员必须在 TouchGFX Designer 的文本面板中创建资源，然后在 UI 中使用文本的 ID。但是，TouchGFX 也支持 “一次性文本”，它不会作为典型的文本资源出现。 开发人员在测试期间或文本不重要时使用它。它可以防止数据库被不相关的文本填满，以加速原型制作。实际上，一次性文本功能与常规文本资源不同，它会自动生成 ID 并在从 UI 中删除资源时从数据库中删除。TouchGFX 还使用随机字符串生成器来生成 ID。因此，同一项目中的两个一次性文本 ID 几乎不可能相同。

滑入过渡和动态图

如何充分利用TouchGFX 中不断增加的新功能，是开发人员面临的挑战。因此，我们提供了使用上述功能后得到优化的动画。例如，虽然传统的滑入式过渡需要刷新整个屏幕，但 TouchGFX 擦除动画使用的资源要少得多。同样，动态图小组件可以更好地显示序列数据，而不会给 RAM 和微控制器带来太大影响。

时钟和纹理映射器

TouchGFX 还具有模仿应用程序的小组件，如模拟和数字时钟，以及一个纹理映射器，开发人员只需通过简单的拖放即可创建他们的映射程序。他们仍然需要输入C++ 代码，但整个过程会更加顺畅。Texture Mapper 也是在资源有限的 MCU 上进行 TouchGFX 优化的一个很好的例子。只要图形资产在 RAM 中而不是闪存中，它就可以帮助把对象制作成动画，甚至可以工作在 STM32G0 上。

仪表

仪表模板绘制针和弧可以帮助用户监控值。开发人员还可以更改背景、针的方向、值的范围等。下面的演示展示了程序员如何在他们的 IDE 和 TouchGFX Designer 之间切换以获得更流畅的工作流程。团队可以快速检查量表，即时调整，并立即测试他们的代码。例如，这个视频展示了 handleTickEvent() 函数如何控制仪表的动作。只需几行代码，开发人员就可以更改值的范围以及指示器接收更新的频率等。这些优化可以给不需要不断更新显示值的应用节省大量资源。

© THE END