TouchGFX 4.18 & 4.19：解锁嵌入式UI美学新技能

[复制链接]

STMCU-管管发布时间：2022-4-6 13:52

技术帖
文章封面:
文章简介:	TouchGFX是ST力推的GUI应用软件，可实现从简单到与智能手机媲美的GUI设计，具备针对STM32优化的GUI库，采用C++语言编程，支持1/2/4/16和24 bpp，具有可生成完整代码的GUI构建器。目前，TouchGFX已完全集成在CubeMX中。

TouchGFX 4.18 & 4.19：解锁嵌入式UI美学新技能

6 h( v% X3 X8 d9 E
华丽，流畅，强劲，这是属于TouchGFX的三个关键词。

TouchGFX是ST力推的GUI应用软件，可实现从简单到与智能手机媲美的GUI设计，具备针对STM32优化的GUI库，采用C++语言编程，支持1/2/4/16和24 bpp，具有可生成完整代码的GUI构建器。目前，TouchGFX已完全集成在CubeMX中。

发掘嵌入式美学之路，ST一直在前进。近期，ST相继推出TouchGFX的两个新版本， TouchGFX 4.18和TouchGFX 4.19，丰富的新功能将再次激发出更多可能性。

TouchGFX 4.18：视频+协作，解锁与用户/开发者互动的新技能

TouchGFX 4.18 带有一个新的小组件，可帮助开发人员在他们的设计中运行视频，并提供新功能，使文本相关的协作更容易。同时，还发布了两款新的显示扩展板。X-NUCLEO-GFX01M2 兼容SPI Display 和 64 针 NUCLEO 板（如 NUCLEO-WB55RG）。X-NUCLEO-GFX02Z1 支持并行接口、QSPI 闪存和 144 针 NUCLEO 板，如新的 NUCLEO-U575ZI-Q。如果用一个词来概括新版 TouchGFX的特点，那就是“交互”。

TouchGFX 4.18 提升与用户/开发人员之间交互的秘笈是什么？让我们一探究竟。

增加视频功能，加强与用户互动

在嵌入式系统 UI 中使用视频实现有难度

随着嵌入式系统中屏幕的日益普及，开发者希望通过屏幕更好地实现与用户互动，在用户界面（UI）中引入视频是个创新的想法。在很多情况下，视频形式的交互胜过任何其他形式。例如，一个如何清洁咖啡机的小视频远比列在纸上的步骤更生动有效，而一个如何清理打印机的小动画比警告图片能更有效地为客户提供服务。

如果无法播放，请点击此处在新窗口打开

在 TouchGFX 4.18 嵌入视频小组件之前，开发人员需要自行完成所有繁琐复杂的工作。实现在用户界面（UI）中播放视频不难，但编码人员必须自己管理全流程。面对这些挑战，开发团队需要部署视频缓存，挑选出最适合工作在他们的微控制器上的编解码器；此外，如果设备运行硬件加速，如何实施等问题。这项工作要求非常高，因此许多 TouchGFX 用户都希望能使用一个视频小组件来简化工作流程。

在嵌入式系统 UI 中实现视频功能，只需三步

有了视频小组件，现在在 UI 中插入视频只需要三个基本步骤。

首先，用户进入TouchGFX Designer的顶部组件菜单，选择“Miscellaneous”，然后选择“Video”。开发人员可以从这里选择视频的大小和位置以及它的基本属性。例如，他们可以选择视频源以便在 TouchGFX Designer 中查看文件播放，还可以设置播放形式，例如循环播放或自动播放。

其次，STM32CubeMX 中的实用程序使开发者能够配置视频缓存。如果系统的RAM资源受限，也可以完全不用缓存，但这种情况下，应用程序就无法在视频顶部安装任何按钮。为避免不能再顶部安装按钮的情况，开发者需要使用一至两个视频缓存。一个缓存可以部署一个按钮，两个缓存能提供更好的性能，但也需要更多的 RAM。因此，插件系统可以帮助开发人员尽可能有效地测试他们的 UI，为嵌入式系统提供最适合的方案。

第三，开发人员进入代码生成阶段，他们将决定视频文件放在何处。当使用组件插入视频时，TouchGFX Designer 会加载具有其他图形资源的文件供参考，极大简化了原型设计。但大多数情况下，开发者希望将他们的文件存储在 SD 卡或嵌入式闪存模块上，仅在需要时才获取。在这个过程中，为避免系统过载，优化非常重要。

将兼容视频导入 TouchGFX Designer 4.18，只需三步

TouchGFX 4.18 视频小组件还简化了视频处理工作流程。许多开发人员都在努力为他们的嵌入式系统找到最适用的编解码器、数据速率和分辨率。微控制器既有的受限资源，无法实现将视频从智能手机或相机中导出并播放。随着新组件的推出，ST 更新了 TouchGFX 文档以提供重要参考。主要规范之一是视频必须使用 AVI 容器中的 Motion JPEG 编解码器。许多不同的工具都可以获取这样的文件，这里有一个工作流示例：
1.下载测试文件
要快速测试新的 TouchGFX 4.18 视频小组件，请下载名为 Coffee-Demo.mp4 的 MP4 文件。它可以320 x 240 分辨率填满我们其中一款扩展板的 2.2 英寸显示屏。
2.将文件转换为 MJPEG 并使用 AVI 容器
下一步是将该文件转换为兼容的 MJPEG 格式。为此，我们将使用免费的应用程序 FFmpeg。不熟悉的可以访问https://www.wikihow.com/Install-FFmpeg-on-Windows，依照指南进行安装。该应用程序是免费的，非常实用，只用一个命令行就可以转换演示 MP4 文件：

ffmpeg -i Coffee-Demo.mp4 -c:v mjpeg -q:v 10 -an Coffee-Demo.avi

复制代码

对于不熟悉 FFMPEG 的人，-c:v 选择编解码器，-q:v 定义质量。对于 Motion JPEG，数字从 2 到 31，数值越小，质量越好。最后，-an 选项阻止应用程序导入音频流。那些现在不能使用 FFmpeg 的用户可以下载我们转换后的演示文件（https://blog.st.com/wp-content/uploads/Coffee-Demo-QVGA.avi）。

3. 将视频文件加载到 TouchGFX Designer 4.18

最后一步是在 TouchGFX Designer 4.18 中调用视频小组件并插入新视频。我们很难为每个微控制器都提供精确的视频规格。使用的资源（例如后台进程和内存利用率）不同，功能可能会有很大差异。但据估算，只要文件使用 JPEG 编解码器，使用 STM32H7 开发人员可获得800 x 480 的分辨率，而 STM32F7 支持 480 x 272 的分辨率。

优化协作，加强与开发者互动

文本的新 XML 文件

为了改善开发人员之间的交互，TouchGFX 4.18 优化了文本相关的协作。以往，所有文本都存储在开发者可以导出的 Excel 文件中，这种格式更容易与全球开发人员协作。但管理改动非常不便，，开发者必须手动处理更改，而不是使用Git这样的版本控制系统，并确保没有人无意疏忽覆盖其他人的工作，这就很麻烦。为了解决这个问题，TouchGFX 4.18 现在将所有文本存在一个 XML 文件中。新格式简化了合并操作和冲突的解决。为了兼顾开发者的以往工作习惯，TouchGFX 4.18 还包括一个 XML 到 Excel 转换器。Excel 文件在导出文本供审阅或编译时仍然很受欢迎。因此，我们确保开发人员仍然可以导出到 Excel，然后将他们的 Excel 文件传回 TouchGFX 生成 XML 格式。
) L5 {; V$ G& z9 S& g

新的一次性文本 ID 策略

优化开发人员之间的协作还包括更新一次性文本。TouchGFX Designer 通常将文本存储在为特定内容分配参考 ID 的数据库中。因此，当开发人员想要调用特定文本时，他们会使用这个ID。但当文本只有一个目的时，将其存储在数据库中是一种浪费。因此，TouchGFX 为其分配一个“特殊 ID”，实现一次性使用文本。但在以前的系统里，在同一个项目上工作的程序员可能会生成相同的“特殊 ID”，从而产生冲突。因此，TouchGFX 4.18 引入了一个新系统，可以产生更多随机字符串。这样，同一个项目中的两个一次性文本 ID 现在几乎不可能完全相同。

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

TouchGFX 4.19：静态图+高级文本管理，轻松搞定文本和图形处理

TouchGFX 4.19具有静态图形功能和 TouchGFX Designer 中优化的文本管理系统，以及分组功能和新的排版设置方法。推出这个新版本主要是为了优化工作流程。有了这些新功能后，创建静态图形只需点击几下，再也不需要一行行的自定义代码了。同样，新的文本管理界面将简化类似资源的搜索和分组。这些新功能加快了编译过程，为UI编写者提供了协助，节省时间并提升了用户体验。

如果无法播放，请点击此处在新窗口打开

静态图

可穿戴设备会追踪环境或人体的物理数据，而用户希望看到这个追踪的过程。图表可以跟踪心率、温度、步数等数据。TouchGFX 开发人员首先要求提供动态图形，因为它们很难实现，而TouchGFX从 TouchGFX 4.15 版本起就支持这一功能了。现在，我们推出静态图表功能以支持新的应用程序。实际上，不需要不断变化或只随时间发生轻微变化的数据更适合静态展示。新图表的工作方式略有不同。由于时间间隔是固定的，开发人员只需在动态数据点上发送一个数据点。但对于静态数据点，程序员必须输入 X 轴和 Y 轴信息。

高级文本管理

文本对于大多数图形用户界面来说是不可或缺的，因此开发者对其进行定制、编译和加工，花费了大量的精力。有些在 TouchGFX Designers 上创建的应用程序可以有数千个文本资源，每个资源都被翻译成多种语言。这让文本的使用变得非常繁琐。为了解决这个问题，TouchGFX 提供了开发人员可以根据其应用程序的部分或功能定义的组。这个新功能简化了编译文本在 TouchGFX Designer 中的并排显示，还可结合相关信息检查一致性和准确性，最终加快了搜索和查找特定资源的速度。

TouchGFX Designer 还具有一个排版功能选项，可在组内设置默认参数。用户可以通过该功能选择字体规范、备用字符、通配符、对齐方式等。以前，开发人员必须重写每个文本资源的参数，工作非常繁重。有了组这个功能，就可以同时为许多资源设置参数，极大地优化了开发过程。带自定义排版的现有项目的设置被转移到这个新的部分。新的文本界面还可显示一次性文本，并在必要时将其升级为资源。