TouchGFX 4.19現(xiàn)在可供下載。新版本包括靜態(tài)圖形功能和 TouchGFX Designer 中改進(jìn)的文本管理系統(tǒng)，具有分組功能和處理排版設(shè)置的新方法。推動(dòng)這個(gè)新版本的主旨是工作流程優(yōu)化。多虧了這些新功能，創(chuàng)建靜態(tài)圖形只需單擊幾下，而不是一行一行的自定義代碼。同樣，新的文本管理界面將使類似資源的搜索和分組變得更加簡(jiǎn)單。無(wú)論是加快翻譯操作還是協(xié)助為 UI 做出貢獻(xiàn)的作者，新功能都應(yīng)該有助于節(jié)省時(shí)間并使用戶體驗(yàn)更有意義。

什么是 TouchGFX？

框架

TouchGFX 是 ST 的免費(fèi)使用框架，有助于在 STM32 微控制器上創(chuàng)建圖形用戶界面。該引擎用 C++ 編寫，利用了 ST 設(shè)備上的優(yōu)化。TouchGFX 的工作假設(shè)是用戶界面由用戶導(dǎo)航的屏幕組成。因此，該框架是直觀的并反映了用戶體驗(yàn)。它也很廣泛，因?yàn)樗梢蕴幚?2D 和 3D 對(duì)象、視頻、動(dòng)畫、過(guò)渡等。此外，訪問(wèn)生成的代碼的能力允許專家工程師優(yōu)化他們的代碼。TouchGFX文檔通常是開(kāi)發(fā)人員找到有關(guān)框架的 API 或可用開(kāi)發(fā)工具之一的信息的第一個(gè)地方。

TouchGFX 設(shè)計(jì)師

TouchGFX Designer 通常是開(kāi)發(fā)人員在啟動(dòng)他們的 UI 時(shí)使用的第一個(gè)工具。它是一種采用所見(jiàn)即所得方法的設(shè)計(jì)實(shí)用程序，設(shè)計(jì)師可以在其中創(chuàng)建用戶將看到并與之交互的內(nèi)容。開(kāi)發(fā)人員可以從示例項(xiàng)目開(kāi)始，例如時(shí)鐘、儀表或動(dòng)畫圖像。還有更多成熟的演示，如骰子動(dòng)畫、場(chǎng)景轉(zhuǎn)換或游泳池監(jiān)控系統(tǒng)。啟動(dòng)屏幕幫助選擇演示應(yīng)用程序、ST 開(kāi)發(fā)板，然后配置所有內(nèi)容。因此，運(yùn)行示例代碼和演示需要幾分鐘，這意味著更快地創(chuàng)建概念驗(yàn)證。TouchGFX Designer 中的 UI 元素通常采用通過(guò)實(shí)用程序界面添加和配置的小部件的形式。

TouchGFX Designer 是 TouchGFX 生態(tài)系統(tǒng)的一個(gè)組成部分。例如，只要用戶選擇3.0模板，就可以在Designer中啟動(dòng)項(xiàng)目，然后將其帶到STM32CubeMX，設(shè)置Discovery板或MCU，讓TouchGFX Generator（見(jiàn)下文）更新.IOC文件為立即應(yīng)用新設(shè)置。同樣，開(kāi)發(fā)人員可以從 TouchGFX Generator 開(kāi)始，移至 TouchGFX Designer，然后返回 STM32CubeMX 以更改顯示分辨率。系統(tǒng)會(huì)自動(dòng)更新 TouchGFX Designer，無(wú)需關(guān)閉應(yīng)用程序。

TouchGFX 模擬器

TouchGFX Simulator 可幫助開(kāi)發(fā)人員在將圖形用戶界面運(yùn)行到他們的 MCU 之前對(duì)其進(jìn)行模擬。它的部分吸引力在于它提供了鍵盤快捷鍵來(lái)簡(jiǎn)化工作流程。例如，更容易拍攝各種屏幕截圖并逐幀研究動(dòng)畫。同樣，按 F2 會(huì)突出顯示無(wú)效區(qū)域，即系統(tǒng)必須更新的幀部分。因此，開(kāi)發(fā)人員可以檢查他們的動(dòng)畫是否通過(guò)不必要地使資產(chǎn)無(wú)效來(lái)浪費(fèi) MCU 資源。

TouchGFX 發(fā)生器

能手表上協(xié)同工作

TouchGFX Generator 與STM32CubeMX一起生成 TouchGFX 抽象層 （AL） 的重要部分。我們支持幾乎所有帶顯示屏的 STM32 探索套件，新插件適用于任何配備 Cortex-M0+、M4 或 M7 的 STM32 MCU。開(kāi)發(fā)人員仍然需要用他們的用戶代碼來(lái)填補(bǔ)一些空白并進(jìn)行優(yōu)化，但是這個(gè)新插件讓開(kāi)始一個(gè)項(xiàng)目變得更加簡(jiǎn)單。實(shí)際上，Generator 創(chuàng)建了空函數(shù)來(lái)指導(dǎo)開(kāi)發(fā)人員并促進(jìn)電路板初始化。ST 開(kāi)發(fā)板也有現(xiàn)有的默認(rèn)設(shè)置，以加速開(kāi)發(fā)并用作示例。

TouchGFX 4.19 有什么新功能？

靜態(tài)圖

隨著可穿戴設(shè)備跟蹤環(huán)境或物理數(shù)據(jù)，用戶希望看到進(jìn)展。圖表可以跟蹤心率、溫度、步行步數(shù)等。TouchGFX 開(kāi)發(fā)人員首先要求提供動(dòng)態(tài)圖形，因?yàn)樗鼈兒茈y實(shí)現(xiàn)，而且該功能自 TouchGFX 4.15 起就可用?，F(xiàn)在，我們的團(tuán)隊(duì)正在發(fā)布靜態(tài)圖表以適應(yīng)新的應(yīng)用程序。事實(shí)上，不需要不斷演變或只知道隨時(shí)間發(fā)生輕微變化的數(shù)據(jù)更適合靜態(tài)表示。新圖表的工作方式略有不同。由于時(shí)間間隔是恒定的，因此開(kāi)發(fā)人員只需在動(dòng)態(tài)數(shù)據(jù)點(diǎn)上發(fā)送一個(gè)數(shù)據(jù)點(diǎn)。但是，對(duì)于靜態(tài)的，程序員必須輸入 X 軸和 Y 軸的信息。

高級(jí)文本管理

文本是大多數(shù)圖形用戶界面的重要組成部分，這解釋了為什么設(shè)計(jì)師在它上面工作如此之多。他們對(duì)其進(jìn)行定制、翻譯和塑造。在 TouchGFX Designers 上創(chuàng)建的一些應(yīng)用程序可以有數(shù)千個(gè)文本資源，每個(gè)資源都被翻譯成多種語(yǔ)言。問(wèn)題是使用文本可能很麻煩。因此，為了減少摩擦，TouchGFX 現(xiàn)在提供了開(kāi)發(fā)人員可以根據(jù)其應(yīng)用程序的部分或功能定義的組。新功能使在 TouchGFX Designer 中并排顯示翻譯文本變得更加簡(jiǎn)單。它還有助于捆綁相關(guān)信息以檢查一致性和準(zhǔn)確性。最后，小組可以更快地搜索和查找特定資源。

TouchGFX Designer 還包括Typographies在組內(nèi)設(shè)置默認(rèn)參數(shù)的選項(xiàng)。該部分允許用戶選擇字體規(guī)范、備用字符、通配符、對(duì)齊方式等。以前，開(kāi)發(fā)人員必須覆蓋每個(gè)文本資源的參數(shù)，這可能是很多工作。多虧了組，可以同時(shí)為許多資源設(shè)置參數(shù)，從而極大地優(yōu)化開(kāi)發(fā)。具有自定義排版的現(xiàn)有項(xiàng)目將看到其設(shè)置移至新部分。新的文本界面還顯示一次性文本，并在必要時(shí)將其提升為資源。

TouchGFX 中已有哪些功能？

支持 X-NUCLEO-GFX01M2 和 X-NUCLEO-GFX02Z1

當(dāng)工程師決定使用圖形用戶界面時(shí)，顯示器通常會(huì)成為其物料清單中最昂貴的組件。一個(gè)沒(méi)有觸摸層的簡(jiǎn)單 2 英寸顯示屏將顯著改善用戶體驗(yàn)，但它仍然比其他任何東西都更昂貴。因此，當(dāng)以 5 美元或更少的 BoM 為目標(biāo)時(shí)，采購(gòu)價(jià)格合理的顯示器是有問(wèn)題的。因此，ST 推出了顯示擴(kuò)展板以幫助工程師找到具有成本效益的部件，并且我們?yōu)?TouchGFX Designer 中的硬件提供支持。用戶選擇顯示器的配置，并可以開(kāi)始在與其規(guī)格相匹配的界面上工作。

工程師可以選擇的第一個(gè)擴(kuò)展板是X-NUCLEO-GFX01M2。它使用支持 SPI 閃存的 SPI 2.2 英寸 QVGA （320 x 240） 顯示器，對(duì)于帶有外部閃存和兩層 PCB 的典型嵌入式系統(tǒng)來(lái)說(shuō)，這將適合大約 5 美元的 BOM。X-NUCLEO-GFX01M2 與各種 64 針 NUCLEO 板兼容。例如，工程師可以在NUCLEO-WB55RG上使用它來(lái)幫助使藍(lán)牙應(yīng)用更易于訪問(wèn)。

同樣，X-NUCLEO-GFX02Z1是我們第一款支持并行接口、QSPI 閃存和 144 針 Nucleo 板的顯示擴(kuò)展板。該平臺(tái)以功率更大的微控制器為目標(biāo)，這解釋了與提供更高帶寬的接口的兼容性。開(kāi)發(fā)人員可以將 X-NUCLEO-GFX02Z1 與首批 STM32U5 推出的NUCLEO-U575ZI-Q一起使用。因此，它使工程師能夠利用新 MCU 更好的每瓦性能比來(lái)創(chuàng)建前幾代 STM32 無(wú)法實(shí)現(xiàn)的用戶界面。

在 UI 中嵌入視頻

將視頻帶入更多 UI 的愿望是嵌入式系統(tǒng)顯示器日益普及的自然結(jié)果。不幸的是，在帶有微控制器的嵌入式系統(tǒng)上顯示視頻具有挑戰(zhàn)性。沒(méi)有帶有默認(rèn)媒體播放器和編解碼器的操作系統(tǒng)。同樣，編寫顯示 YouTube 視頻的網(wǎng)頁(yè)也是不可能的。開(kāi)發(fā)人員必須完成所有繁重的工作，例如實(shí)現(xiàn)視頻緩沖區(qū)、確定哪種格式最適合他們的微控制器，以及確定如何利用硬件加速（如果可用）。TouchGFX Designer 提供了一個(gè)視頻小部件來(lái)解決這一挑戰(zhàn)。因此，現(xiàn)在添加視頻只需要三個(gè)簡(jiǎn)單的步驟。

可緩存容器

顧名思義，CacheableContainers 使用位圖緩存來(lái)加速圖形性能并啟用更高的幀速率以實(shí)現(xiàn)更平滑的過(guò)渡。下面的演示在STM32F429I 探索套件上運(yùn)行。如果沒(méi)有 CacheableContainers，簡(jiǎn)單的全屏 （240 × 320） 幻燈片動(dòng)畫將以每秒 9 幀的速度運(yùn)行。借助 TouchGFX 技術(shù)，系統(tǒng)達(dá)到每秒 60 幀。一些智能手表目前使用此功能來(lái)確保無(wú)縫的用戶體驗(yàn)，盡管其外形尺寸固有的重大硬件限制以及需要更長(zhǎng)的電池壽命。除了動(dòng)畫之外，CacheableContainers 還可以優(yōu)化復(fù)雜的小部件，例如紋理映射器或靜態(tài)背景前顯示的小型動(dòng)態(tài)元素。

如果沒(méi)有 CacheableContainers，動(dòng)畫必須重繪每一幀，這會(huì)導(dǎo)致計(jì)算量大。CacheableContainer 通過(guò)將第一幀和最后一幀以系統(tǒng)保存在 RAM 中的位圖形式存儲(chǔ)在單獨(dú)的容器中來(lái)繞過(guò)這個(gè)問(wèn)題。系統(tǒng)不是渲染動(dòng)畫，而是使用 DMA 從內(nèi)存中檢索兩個(gè)圖像，并通過(guò)一個(gè)簡(jiǎn)單的 DynamicBitmap 方法將它們顯示在不同的位置。MCU 不再生成每一幀，從而顯著優(yōu)化性能。開(kāi)發(fā)者只需在 TouchGFX Designer 中勾選 Cacheable 框，選擇要緩存的容器在內(nèi)存中的位置，需要時(shí)調(diào)用即可。使用這種技術(shù)，渲染時(shí)間從 100 ms 下降到 5 ms。

部分幀緩沖

幀緩沖區(qū)是一個(gè)連續(xù)的內(nèi)存空間，用于存儲(chǔ)將出現(xiàn)在顯示器上的每個(gè)像素的表示。例如，用于智能手表顯示屏的標(biāo)準(zhǔn) 24 位 390 x 390 圖像需要 3，650，400 位或 456.3 KB 的幀緩沖區(qū)（

），這是STM32L4+ 上可用 SRAM 的 70% 以上，在智能手表和可穿戴設(shè)備上表現(xiàn)出色。如果應(yīng)用程序需要多個(gè)幀緩沖區(qū)，這個(gè)數(shù)字可能會(huì)激增。超出容量限制，較大的幀緩沖區(qū)需要更長(zhǎng)的時(shí)間來(lái)獲取，因?yàn)楦嗟臄?shù)據(jù)必須從內(nèi)存?zhèn)鬏數(shù)斤@示器，從而降低性能。

顧名思義，Partial Framebuffer 只存儲(chǔ)了部分幀緩沖區(qū)，從而減少了 10 倍的內(nèi)存占用。開(kāi)發(fā)者可以根據(jù)屏幕的哪一部分來(lái)配置它的大小，然后再存儲(chǔ)多個(gè)部分緩沖區(qū)。然后框架將選擇合適的并將其發(fā)送到顯示器。該技術(shù)最適用于短動(dòng)畫，例如時(shí)鐘、加載條或隨時(shí)間自行構(gòu)建的圖表。它還要求屏幕使用嵌入式控制器，因?yàn)樗鼘⒅苯訌?MCU 的 RAM 接收部分幀緩沖區(qū)，從而繞過(guò)閃存以提高性能。該技術(shù)適用于并行/8080、DSI 和 SPI 顯示器。

TouchGFX 還優(yōu)化了部分幀緩沖區(qū)，為資源受限的微控制器帶來(lái) UI。傳統(tǒng)上，最小的圖形界面需要大約 200 KB 的幀緩沖區(qū)。然而，當(dāng)像 STM32G071 這樣的微控制器只有 36 KB 的 RAM 時(shí)，這可能是一個(gè)真正的問(wèn)題。TouchGFX 通過(guò)將部分幀緩沖區(qū)優(yōu)化為僅 6 KB 解決了這個(gè)問(wèn)題?？紤]到框架的應(yīng)用程序數(shù)據(jù)，入門級(jí) UI 只需要 16 KB 的 RAM 即可運(yùn)行。TouchGFX 還使用智能部分屏幕更新。該功能補(bǔ)充了部分幀緩沖以優(yōu)化屏幕上的更新順序。該過(guò)程節(jié)省了資源，從而允許在同一時(shí)期進(jìn)行更多更新。

L8 壓縮格式

圖形資產(chǎn)占用大量?jī)?nèi)存空間，降低其質(zhì)量意味著降級(jí)用戶界面。因此，L8 是一項(xiàng)基本功能，因?yàn)樗梢詫D像文件壓縮高達(dá) 75% 而無(wú)需降級(jí)，這要?dú)w功于 STM32 微控制器中的 ChromART 加速器。只要資產(chǎn)使用最多 256 種顏色，這在配備 STM32 MCU 的小型嵌入式系統(tǒng)上很常見(jiàn)，開(kāi)發(fā)人員只需在 TouchGFX Designer 中勾選一個(gè)框，就可以選擇使用 L8 格式壓縮資產(chǎn)。解壓縮在計(jì)算上也很高效，因?yàn)樗褂?ChromART 引擎在表格中查找顏色并在不損失質(zhì)量的情況下渲染資產(chǎn)。

文本的 XML 文件

設(shè)計(jì)團(tuán)隊(duì)經(jīng)常將文本存儲(chǔ)在 Excel 文件中，以便與世界各地的各種翻譯人員合作。然而，與使用 Git 等版本控制系統(tǒng)不同，編輯人員必須手動(dòng)處理更改，并確保沒(méi)有人無(wú)意中覆蓋了其他人的工作，這可能很麻煩。為了解決這個(gè)問(wèn)題，TouchGFX 將所有文本存儲(chǔ)在一個(gè) XML 文件中。該格式使合并操作和沖突解決變得更加簡(jiǎn)單。TouchGFX 還包括一個(gè) XML 到 Excel 轉(zhuǎn)換器，以適應(yīng)現(xiàn)有的工作流程。開(kāi)發(fā)人員可以導(dǎo)出到 Excel，然后將他們的 Excel 文件重新導(dǎo)入 TouchGFX 及其 XML 格式。

優(yōu)化的項(xiàng)目文件

TouchGFX 還通過(guò)小型項(xiàng)目文件促進(jìn)協(xié)作。它們的大小使它們更容易合并和共享。以前，項(xiàng)目文件以 JSON 格式存儲(chǔ)所有參數(shù)。問(wèn)題是這樣的文件會(huì)變得非常大。因此，ST 決定僅通過(guò)存儲(chǔ)自定義設(shè)置來(lái)優(yōu)化項(xiàng)目文件。因此，文件中沒(méi)有的任何內(nèi)容都被視為使用默認(rèn)值。因此，文件要小得多，從而使 Git 上的合并操作更加直接和快速。

一次性文本及其隨機(jī) ID

希望使用文本的開(kāi)發(fā)人員必須在 TouchGFX Designer 的文本面板中創(chuàng)建資源，然后在 UI 中使用文本的 ID。但是，TouchGFX 也允許“一次性文本”，它不會(huì)作為典型的文本資源出現(xiàn)。開(kāi)發(fā)人員在測(cè)試期間或文本不重要時(shí)使用它。它可以防止用不相關(guān)的文本填滿數(shù)據(jù)庫(kù)，并幫助更快地制作原型。實(shí)際上，與常規(guī)文本資源不同，一次性文本功能會(huì)自動(dòng)生成 ID 并在從 UI 中刪除資源時(shí)從數(shù)據(jù)庫(kù)中刪除。TouchGFX 還使用隨機(jī)字符串生成器來(lái)創(chuàng)建 ID。因此，同一項(xiàng)目中的兩個(gè)一次性文本 ID 幾乎不可能相同。

動(dòng)畫和小部件

滑入過(guò)渡和動(dòng)態(tài)圖

開(kāi)發(fā)人員面臨的挑戰(zhàn)是利用我們不斷添加到 TouchGFX 的所有功能。因此，我們提供已使用上述功能的優(yōu)化動(dòng)畫。例如，雖然傳統(tǒng)的滑入式過(guò)渡需要整個(gè)屏幕刷新，但 TouchGFX 的擦除動(dòng)畫使用的資源要少得多。同樣，動(dòng)態(tài)圖小部件可以更好地顯示順序數(shù)據(jù)，而對(duì) RAM 和微控制器的影響較小。

時(shí)鐘和紋理映射器

TouchGFX 還具有模仿應(yīng)用程序的小部件，例如模擬和數(shù)字時(shí)鐘。還有一個(gè)紋理映射器，這意味著開(kāi)發(fā)人員可以通過(guò)簡(jiǎn)單的拖放來(lái)開(kāi)始創(chuàng)建他們的映射程序。他們?nèi)匀恍枰斎胨麄兊?C++ 代碼，但這會(huì)使整個(gè)過(guò)程更加順暢。Texture Mapper 也是在資源受限的 MCU 上進(jìn)行 TouchGFX 優(yōu)化的一個(gè)很好的例子。只要圖形資產(chǎn)在 RAM 中而不是閃存中，它就可以幫助為對(duì)象設(shè)置動(dòng)畫，甚至可以在STM32G0上工作。

測(cè)量

儀表模板繪制針和弧以幫助用戶監(jiān)控值。開(kāi)發(fā)人員還可以更改其背景、針的方向、值的范圍等。下面的演示展示了程序員如何在他們的 IDE 和 TouchGFX Designer 之間切換以獲得更流暢的工作流程。團(tuán)隊(duì)可以快速檢查量表，即時(shí)調(diào)整它，并立即測(cè)試他們的代碼。例如，視頻展示了該handleTickEvent（）功能如何控制儀表的行為。只需幾行代碼，開(kāi)發(fā)人員就可以更改值的范圍以及指標(biāo)接收更新的頻率等。這樣的優(yōu)化可以在不需要不斷更新顯示值的應(yīng)用中節(jié)省大量資源。

審核編輯：郭婷