TouchGFX 4.21隨TouchGFX Stock一起發布，這是有史以來最大的圖形資源庫，由用于微控制器的GUI設計工具提供。新版本旨在為開發人員帶來便利。在其眾多錯誤修復和生活質量改進中，它確保用戶可以更輕松地創建 UI。有了TouchGFX Stock，不再需要尋找資產和支付昂貴的許可費。想要創建更充實的原型的團隊或那些負擔不起設計師的團隊現在有一個解決方案，隨著時間的推移會不斷增長。同樣，TouchGFX現在支持SVG文件和NeoChrom GPU加速器，以幫助可擴展性和動畫。

什么是TouchGFX？

A. 框架

TouchGFX是意法半導體的免費使用框架，有助于在STM32微控制器上創建圖形用戶界面。該引擎以C++編寫，利用了意法半導體器件上的優化。TouchGFX的工作原理是，界面由用戶導航的屏幕組成。因此，該框架是直觀的，反映了一個人的經驗。它也很廣泛，因為它處理 2D 和 3D 對象、視頻、動畫、過渡等。此外，訪問生成的代碼的能力允許專家工程師對其進行優化。為了幫助他們完成這個過程，TouchGFX文檔提供了有關框架API或可用開發工具的信息。

TouchGFX設計師

TouchGFX Designer通常是開發人員在啟動UI時使用的第一個工具。這是一個具有所見即所得方法的實用程序，設計人員可以在其中創建用戶將看到并與之交互的內容。開發人員可以從示例項目開始，例如時鐘、儀表或動畫圖像。還有更多成熟的演示，如骰子動畫、場景過渡或池監控系統。啟動屏幕有助于選擇演示應用、意法半導體開發板，然后配置所有內容。因此，運行示例代碼和演示只需幾分鐘，這意味著可以更快地創建概念驗證。TouchGFX Designer中的UI元素通常采用通過實用程序界面添加和配置的小部件的形式。

TouchGFX Designer是TouchGFX生態系統不可或缺的一部分。例如，只要用戶選擇3.0模板，就可以在Designer中啟動項目，然后將其帶到STM32CubeMX，設置探索板或MCU，并讓TouchGFX生成器（見下文）更新。IOC 文件以立即應用新設置。同樣，開發人員可以從TouchGFX生成器開始，轉到TouchGFX Designer，然后返回STM32CubeMX來更改顯示分辨率。系統將自動更新TouchGFX Designer，而無需關閉應用程序。

觸摸GFX模擬器

TouchGFX模擬器可幫助開發人員在將圖形用戶界面運行到MCU之前預覽其圖形用戶界面。它的部分吸引力在于它提供了鍵盤快捷鍵來簡化工作流程。例如，更容易拍攝各種屏幕截圖并逐幀研究動畫。同樣，按 F2 會突出顯示無效區域，即系統必須更新的幀部分。因此，開發人員可以通過不必要地使資產失效來檢查他們的動畫是否浪費了 MCU 資源。

觸摸GFX發生器

TouchGFX生成器與STM32CubeMX配合使用，生成TouchGFX抽象層的重要部分。我們支持幾乎所有帶顯示屏的STM32探索套件，新插件可與任何配備Cortex-M32+、M0或M4的STM7 MCU配合使用。開發人員仍然需要用他們的用戶代碼填充一些空白并執行優化，但這個新插件使啟動項目變得更加簡單。事實上，Generator創建了空函數來指導開發人員并促進電路板初始化。意法半導體開發板也有現有的默認設置，以加快開發速度并作為示例。

TouchGFX 4.21 有什么新功能？

觸摸GFX股票

TouchGFX Stock 是最大的免費用戶界面圖形資產庫，由面向微控制器的框架提供。它包括圖標、GUI 元素、主題、圖像等。由于這些圖標來自谷歌的免費使用庫，而意法半導體擁有所有其他資源的權利，因此TouchGFX Stock擁有慷慨的許可，允許團隊免費使用這些資源，即使是商業項目，只要它們在STM32設備上運行。用戶可以抓取資產以針對其界面調整其大小或對其進行編輯以滿足其特定需求。該許可證甚至涵蓋將這些資產與另一個圖形框架一起使用，只要該程序在意法半導體微控制器上運行即可。

最近，許多初創公司一直在他們的設計中重復使用TouchGFX占位符或示例資產。新趨勢源于小型團隊的崛起，這些團隊沒有資源投資于設計師。因此，當他們采用TouchGFX時，一些開發人員發現占位符很優雅，只需將它們添加到最終界面中即可。 這就是為什么我們決定投資TouchGFX股票，并成為擁有最廣泛的免費圖形資源庫的MCU供應商。它還解釋了我們的許可方法。多年來，我們一直在努力使MCU上的GUI更易于訪問。這是這座大廈之上的另一塊石頭。意法半導體還致力于隨著時間的推移，通過新的主題、圖像等來發展這個庫。

與此同時，TouchGFX Stock 帶有 UI 元素，如條形圖、彈出窗口、時鐘、儀表等等。我們還提供某些資產的淺色和深色版本。最終，TouchGFX 4.21是設計方面的一課。工程師不必擔心調色板不匹配或依賴過時的設計理念。我們提供的設置使 UI 保持凝聚力和現代性。我們還提供各種尺寸以適應大多數顯示器，因此許多人甚至不需要自己調整大小。TouchGFX Stock在發布時有五個主題。但是，由于 MCU 上 GUI 的性質，切換主題不是自動的。由于并非所有資產都存在一對一關系，因此用戶必須手動替換它們。

支持可縮放矢量圖形 （SVG）

TouchGFX開始支持SVG。傳統上，框架存儲光柵圖像，例如 PNG 文件，因為它們易于訪問和顯示。相反，SVG 文件不包含渲染，但包含有關如何繪制它們的說明。它使它們具有高度可擴展性，但要求更高。雖然這在筆記本電腦或臺式機上不是問題，但在低功耗微控制器上卻是完全不同的情況。問題在于，設計人員越來越多地創建動畫界面，并希望將一個UI擴展到不同的顯示尺寸。因此，團隊希望使用 SVG 文件來節省資源，因為一個文件可以通過多種不同的方式繪制。

為了應對這一日益嚴峻的挑戰，意法半導體在某些STM2U5上采用了新的NeoChrom 32.5D加速器。硬件優化繪圖動畫卸載了一些與 SVG 文件相關的計算，從而解決了性能問題。該 IP 還依賴于更快的內存接口，從而加快了獲取操作。因此，將文件存儲在外部存儲器中時，損失較小。最終，該公告具有高度的象征意義，因為當我們在 2022 年 《》 月討論 NeoChrom 時，SVG 不在功能列表中。然而，今天的發布表明該IP具有很大的潛力，意法半導體將繼續支持其功能產生的新功能。

TouchGFX已經有哪些功能？

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

當工程師決定使用圖形用戶界面時，顯示器通常會成為其物料清單中最昂貴的組件。沒有觸摸層的簡單2英寸顯示屏將顯著改善用戶體驗，但它仍然比其他任何東西都貴。因此，當目標是五美元或更少的BoM時，采購負擔得起的顯示器是有問題的。因此，意法半導體正在出貨顯示器擴展板，以幫助工程師找到具有成本效益的器件，并且我們為TouchGFX Designer中的硬件提供支持。用戶可以選擇顯示器的配置，并可以開始在符合其規格的界面上工作。

工程師可以選擇的第一個擴展板是X-NUCLEO-GFX01M2。它使用支持SPI閃存的SPI 2.2英寸QVGA（320 x 240）顯示器，對于帶有外部閃存和兩層PCB的典型嵌入式系統來說，這將適合大約五美元的BOM。X-NUCLEO-GFX01M2 與各種 64 引腳 NUCLEO 板兼容。例如，工程師可以在NUCLEO-WB55RG上使用它，以幫助使藍牙應用更易于訪問。

同樣，X-NUCLEO-GFX02Z1是我們第一款支持并行接口、QSPI閃存和144引腳Nucleo板的顯示擴展板。該平臺面向功率更大的微控制器，這解釋了與提供更高帶寬的接口的兼容性。開發人員可以將X-NUCLEO-GFX02Z1與第一批STM575U32一起推出的NUCLEO-U5ZI-Q一起使用。因此，它使工程師能夠利用新型MCU更好的每瓦性能比來創建前幾代STM32無法實現的用戶界面。

在 UI 中嵌入視頻

將視頻帶到更多UI的愿望是嵌入式系統上顯示器日益普及的自然結果。不幸的是，在帶有微控制器的嵌入式系統上顯示視頻具有挑戰性。沒有具有默認媒體播放器和編解碼器的操作系統。同樣，編寫顯示YouTube視頻的網頁也是不可能的。開發人員必須完成所有繁重的工作，例如實現視頻緩沖區，確定哪種格式最適合其微控制器，并確定如何利用硬件加速（如果可用）。TouchGFX Designer提供了一個視頻小部件來解決這一挑戰。因此，現在添加視頻只需要三個簡單的步驟。

矢量優化

微控制器上的大多數靜態接口都使用位圖，因為它們需要很少的計算吞吐量。相比之下，矢量圖像不太常見，因為它們需要更多的計算能力。挑戰在于矢量對于動畫至關重要。因此，開發人員可能會選擇使用更多資源來獲得更高的每秒幀數，或者使用更少的功率并且動畫不太流暢。為了解決這個問題，TouchGFX在處理矢量圖形時進行了重大優化，在某些情況下效率提高了70%。因此，開發人員可以在較小的MCU上提供更流暢的動畫或使用更多的矢量元素。但是，開發人員將在大型動畫上看到最大的性能提升。

新的優化利用Chrom-ART在某些操作（如顏色填充）期間卸載微控制器。ST還更新了框架計算形狀邊緣的方式。此外，由于更新與框架對矢量圖形的處理有關，因此用戶會自動從中受益。因此，開發人員將立即看到性能提升，并可以相應地進行規劃。有些人可能會選擇降低其應用程序的內存要求或決定向其界面添加新動畫。團隊可能還必須查看其 UI，因為某些元素的運行速度可能比預期快。

導出自定義容器

在最簡單的形式中，TouchGFX設計器依賴于小部件，即在屏幕上繪制的特征的表示形式。該軟件帶有許多預定義的小部件，例如儀表，時鐘或圖形，開發人員還可以設計自定義小部件。為了使小部件更直接，設計人員可以將它們分組到容器中。容器通常是接口的構建塊。它們使程序員能夠在多個屏幕上重用一組小部件，而無需每次都重新配置它們。此外，修改容器會影響使用它的每個屏幕，從而大大簡化開發。TouchGFX還具有預定義的容器，以加速最常見的設計操作，開發人員可以創建自定義容器。

自定義容器非常受歡迎，因為它們使開發人員能夠調整其界面并充實精確的愿景。然而，任何設計工具背后的固有挑戰是，花在一個項目上的工作很少可以導出到另一個UI。實際上，自定義容器包括代碼、圖形資產、文本、依賴項等，將其與現有項目相關聯。從版本 4.20 開始，TouchGFX Designer 通過提供導出功能解決了這個問題，該功能可以創建一個可在其他項目上重用的捆綁包（.tpkg 文件）。該實用程序會將所有資產（包括字體）添加到捆綁包中，并且 XML 文件會列出其內容。因此，開發人員可以檢查該文件并對其進行修改以選擇要導出的內容。

導入自定義容器

若要導入自定義容器，用戶請選擇“編輯”-》“導入”-》“自定義容器”。TouchGFX包括一個新的導入實用程序，可指導用戶完成整個過程。例如，軟件檢測自定義容器定義的語言，并將它們與新項目中可用的語言進行匹配或忽略它們。如果通用名稱之間存在沖突，或者問題可能導致新界面內部出現問題，系統還將停止導入過程。TouchGFX Designer強制用戶修復原始自定義容器上的問題，而不是在導入過程中創建解決方法。由于該功能的目的是保留跨產品界面的外觀，因此強制在原始項目中進行更改可確保跨 UI 的一致性。

可緩存容器

顧名思義，它使用位圖緩存來加速圖形性能并實現更高的幀速率以實現更平滑的過渡。下面的演示在STM32F429I探索套件上運行。如果沒有 CacheableContainers，簡單的全屏（240 × 320）幻燈片動畫將以每秒 60 幀的速度運行。借助TouchGFX技術，系統達到每秒《》幀。一些智能手表目前使用此功能來確保無縫的用戶體驗，盡管其外形固有的重大硬件限制以及對更長電池壽命的需求。除了動畫之外，CacheableContainers 還可以優化復雜的小部件，例如紋理映射器或顯示在靜態背景前面的小動態元素。

如果沒有 CacheableContainers，動畫必須重繪每一幀，這可能會產生計算成本。CacheableContainer 通過將第一幀和最后一幀以系統保存在 RAM 中的位圖的形式存儲在單獨的容器中來繞過此問題。系統不使用渲染動畫，而是使用 DMA 從內存中檢索兩個圖像，并通過簡單的 DynamicBitmap 方法在不同位置顯示它們。MCU不再生成每一幀，從而顯著優化了性能。開發者只需要勾選 TouchGFX Designer 中的 Cacheable 框，選擇要緩存的容器在內存中的位置，并在需要時調用它們。使用此技術，渲染時間從 100 毫秒縮短到 5 毫秒。

部分幀緩沖

幀緩沖區是一個連續的內存空間，用于存儲將顯示在顯示器上的每個像素的表示形式。例如，智能手表顯示器的標準 24 位 390 x 390 圖像需要 3，650，400 位或 456.3 KB ，這是STM70L32+上SRAM的4%以上，在智能手表和可穿戴設備上表現出色。如果應用程序需要多個幀緩沖區，則此數字可能會爆炸。除了容量限制之外，大型幀緩沖區需要更長的時間來獲取，因為必須從內存傳輸到顯示器，從而降低性能。

顧名思義，部分幀緩沖僅存儲幀緩沖區的一部分，從而將其內存占用量減少了 10。開發人員可以根據將要更改的屏幕部分配置其大小，然后存儲多個部分緩沖區。然后，框架將選擇合適的框架并將其發送到顯示器。該技術最適合短動畫，如時鐘、加載條或隨時間推移自行構建的圖形。它還要求屏幕使用嵌入式控制器，因為它將直接從MCU的RAM接收部分幀緩沖區，從而繞過閃存以增加性能。該技術適用于并行/8080、DSI 和 SPI 顯示器。

TouchGFX還優化了部分幀緩沖區，將UI引入資源受限的微控制器。傳統上，最小的圖形界面需要大約 200 KB 的幀緩沖區。但是，當像STM32G071這樣的微控制器只有36 KB的RAM時，這可能是一個真正的問題。TouchGFX通過將部分幀緩沖區優化為僅16KB來解決此問題。考慮到框架的應用程序數據，入門級 UI 只需要 《》 KB 的 RAM 即可運行。TouchGFX還使用智能部分屏幕更新。該功能補充了部分幀緩沖，以優化屏幕上的更新順序。該過程可節省資源，從而允許在同一時間段內進行更多更新。

L8 壓縮格式

圖形資產會占用大量內存空間，降低其質量意味著降級用戶界面。因此，L8是一個必不可少的功能，因為它可以將圖像文件壓縮高達75%，而不會降級，這要歸功于STM32微控制器中的Chrom-ART加速器。只要資產最多使用256種顏色（在配備STM32 MCU的小型嵌入式系統上很常見），開發人員只需在TouchGFX Designer中勾選一個框，就可以選擇使用L8格式壓縮資產。解壓縮在計算上也很高效，因為它使用 Chrom-ART 引擎在表格中查找顏色并在不損失質量的情況下渲染資產。

文本的 XML 文件

設計團隊經常將文本存儲在 Excel 文件中，以便與世界各地的各種翻譯人員合作。但是，編輯者必須手動處理更改，并確保沒有人無意中覆蓋其他人的工作，而不是使用版本控制系統，例如 Git，這可能很麻煩。為了解決這個問題，TouchGFX將所有文本存儲在XML文件中。該格式使合并操作和沖突解決變得更加簡單。TouchGFX還包括一個XML到Excel轉換器，以適應現有的工作流程。開發人員可以導出到Excel，然后將他們的Excel文件導入回TouchGFX及其XML格式。

優化的項目文件

TouchGFX還通過小型項目文件促進了協作。它們的大小使它們更容易合并和潛在共享。以前，項目文件以 JSON 格式存儲所有參數。問題是這樣的文件可能會變得非常大。因此，意法半導體決定通過僅存儲自定義設置來優化項目文件。因此，文件中不存在的任何內容都將被視為使用默認值。因此，該文件要小得多，使 Git 上的合并操作更加簡單和快速。

一次性文本及其隨機 ID

希望使用文本的開發者必須在TouchGFX設計器的文本面板中創建一個資源，然后在UI中使用文本的ID。但是，TouchGFX還允許“一次性文本”，它不顯示為典型的文本資源。開發人員在測試期間或文本不重要時使用它。它可以防止用不相關的文本填充數據庫，并有助于更快地進行原型設計。實際上，與常規文本資源不同，一次性文本功能會自動生成一個 ID，并在從 UI 中刪除資源時從數據庫中刪除資源。TouchGFX還使用隨機字符串生成器來創建ID。因此，同一項目中的兩個一次性文本 ID 幾乎不可能相同。

動畫和小部件

滑入式過渡和動態圖形

開發人員面臨的挑戰是利用我們不斷添加到TouchGFX的所有功能。因此，我們提供已經使用上述功能的優化動畫。例如，傳統的滑入式過渡需要整個屏幕刷新，而TouchGFX的劃像動畫使用的資源要少得多。同樣，動態圖形小部件可以更好地顯示順序數據，對RAM和微控制器的影響更小。

靜態圖形

隨著可穿戴設備跟蹤環境或物理數據，用戶希望看到進展。圖表可以跟蹤心率、溫度、步行步數等。TouchGFX開發人員首先要求提供動態圖表，因為它們可能難以實現，并且該功能自TouchGFX 4.15以來一直可用。現在，我們的團隊正在發布靜態圖形以適應新的應用程序。事實上，不需要不斷發展或只知道隨時間略有變化的數據更適合靜態表示。新圖表的工作方式略有不同。開發人員只需要在動態數據點上發送一個數據點，因為時間間隔是恒定的。但是，在靜態軸上，程序員必須輸入 X 軸和 Y 軸的信息。

時鐘和紋理映射器

TouchGFX還具有模仿應用程序的小部件，例如模擬和數字時鐘。還有一個紋理映射器，這意味著開發人員可以通過簡單的拖放開始創建他們的映射程序。他們仍然需要輸入他們的C++代碼，但這將使整個過程更加順暢。Texture Mapper也是TouchGFX在資源受限的MCU上進行優化的一個很好的例子。它可以幫助對對象進行動畫處理，甚至可以在STM32G0上運行，只要圖形資源位于RAM中而不是閃存中。

軌距

儀表模板繪制針和弧線以幫助用戶監視值。開發人員還可以更改其背景、指針的方向、值范圍等。下面的演示展示了程序員如何在IDE和TouchGFX設計器之間切換，以獲得更流暢的工作流程。團隊可以快速檢查儀表，即時調整它，并立即測試他們的代碼。例如，視頻顯示了該功能如何控制儀表的行為。只需很少的代碼行，開發人員就可以更改值的范圍以及指標接收更新的頻率等。這樣的優化可以在不需要不斷更新顯示的值的應用程序中節省大量資源。

高級文本管理

文本是大多數圖形用戶界面的重要組成部分，這解釋了為什么設計師在文本上工作如此之多。他們定制它，翻譯它，塑造它。在TouchGFX設計器上創建的某些應用程序可以擁有數千個文本資源，每個資源都可以翻譯成多種語言。問題是處理文本可能很麻煩。因此，為了減少摩擦，TouchGFX現在提供了開發人員可以根據其應用程序的部分或功能定義的組。新功能使在TouchGFX設計器中并排顯示翻譯文本變得更加簡單。它還有助于捆綁相關信息以檢查一致性和準確性。最后，組可以更快地搜索和查找特定資源。

TouchGFX Designer還包括一個選項，用于在組中設置默認參數。該部分允許用戶選擇字體規格、回退字符、通配符、對齊方式等。以前，開發人員必須覆蓋每個文本資源的參數，這可能是很多工作。多虧了組，可以同時為許多資源設置參數，從而大大優化開發。具有自定義版式的現有項目將看到其設置移動到新部分。新的文本界面還顯示一次性文本，并在必要時將其提升為資源。

審核編輯：郭婷