TouchGFX 又升級了！意法半導體最近發布了 TouchGFX 4.22，進一步優化了UI構建工具（如TouchGFX Designer），以便開發者能更便捷地使用這些工具。

TouchGFX 4.22有了新的實時標注功能，用戶更方便去了解和熟悉還未被發現的功能；有了新的壓縮功能，開發團隊可實現更小的系統，而不會損失任何UI質量或性能；有了新的離線模式和代理配置工具，解決網絡離線和鏈接問題，工作流程將更加靈活、中斷更少。這次更新更強調用戶如何與平臺交互，不僅是開發團隊可以用TouchGFX做什么，而是通過TouchGFX怎樣做到最好。

TouchGFX 4.22 重要更新

L8 壓縮格式

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

L8圖像壓縮

TouchGFX Designer的新版本引入了一個關鍵功能：L8圖像的壓縮。單擊左側欄的“圖像”可列出當前加載的圖形資源。對于所有L8圖像，軟件都提供一個新的“壓縮”下拉菜單，用戶可以在三種方法之間進行選擇：L4、LZW9（Lempel-Ziv-Welch）和游程編碼（RLE）。這三個都是無損的，L4和LZW9創建壓縮表，為條目分配顏色，而RLE只是對重復序列進行因子計算。這些方法都有優缺點，因此我們還提供了一個“自動”選項，讓編譯器根據新文件大小及其渲染時間選擇最優化的壓縮方法。用戶平均可將圖像文件大小減少20%到80%。多數情況下，圖像所需的時間是渲染的兩倍。然而，由于開發人員會將此功能用于靜態界面、圖標或較小的資產，因此影響并不明顯，渲染只需幾毫秒。此外，文件更小意味著從內存中讀取時間更短，這就抵消了較長的渲染時間。因此，對存儲的優化平衡了解壓縮的代價，在使用更少內存的同時，能提供與未壓縮L8資產相同或幾乎相同的性能。 升級到TouchGFX Designer 4.22 的用戶必須手動選擇他們的壓縮方法。ST仍將未壓縮格式設置為默認格式，因為我們不希望開發人員在還不了解的情況下看到平臺處理L8圖像的方式發生了這么大的變化。該功能充分體現了我們在優化內存占用（尤其是在閃存中）的同時還要考慮到性能所做出的努力。

Live Callouts 實時標注

TouchGFX 一直在不斷地迭代更新，但開發者并不一定總能注意到這些更新，盡管我們通過電子郵件、博客和ST.com網站等渠道通知訂閱用戶，但很多開發者仍希望建立更直接的溝通渠道。為了回應這些請求，我們推出了Live Callouts 實時標注功能，這是一種僅出現在主頁屏幕底部的小框，用于引導用戶了解功能、活動或合作伙伴的解決方案。點擊 Live Callouts 將彈出一個包含更多詳細信息的窗口，或打開ST.com的瀏覽器窗口。Live Callouts 會提醒用戶注意特定的功能。該功能僅出現在首頁，避免分散開發人員的注意力。Live Callouts 與那些只是提醒用戶新版本或重要消息通知不同，它們不是緊急必要事件，而是一個引導用戶了解新功能的增項方案，如果開發者沒有立即看到，也可以選擇更適合的時間觀看。我們同時將保護用戶隱私放在首位，為每個地區定制實時標注，但不收集用戶數據。位置數據只保留在本地機器上，TouchGFX Designer 會根據系統的位置決定顯示什么。

離線模式

TouchGFX 4.22 推出了一種新的離線模式，用戶可以在沒有互聯網連接的情況下下載 demo 和示例。ST還提供了一個更強大的代理配置工具，以滿足復雜的設置要求。很多時候，用戶可能沒法上網，比如在飛機上，或由于帶寬或防火墻限制，但同時又遇到了工作上的難題需要解決。有了新的離線模式和代理配置工具，用戶在使用 TouchGFX Designer 時就更輕松、更實用，能享受更流暢的工作流程。 TouchGFX 4.22 現在可以從www.st.com/TouchGFX 下載。 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 Designer PC Simulator

TouchGFX 主要特性

支持 X-NUCLEO-GFX01M2 和 X-NUCLEO-GFX02Z1 顯示擴展板

當工程師已決定使用圖形用戶界面時，顯示器就會成為其物料清單中最貴的組件。即便是沒有觸屏功能的簡單的 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開發板，從而簡化了藍牙應用的開發。同樣，X-NUCLEO-GFX02Z1 是首款支持并行接口、QSPI 閃存和 144 引腳 Nucleo 板的顯示擴展板。該平臺面向功能更強的微控制器，可兼容更高帶寬的接口。開發人員可以將 X-NUCLEO-GFX02Z1 與基于 STM32U5 的 NUCLEO-U575ZI-Q 搭配使用，工程師能夠利用新 MCU 更出色的效率及性能創建出前幾代 STM32 無法實現的用戶界面。此外，ST正在更新 X-CUBE-DISPLAY 擴展軟件包，無需 TouchGFX 即可使用顯示擴展板。

▲The X-NUCLEO-GFX01M2（左）

▲The X-NUCLEO-GFX02Z1（右）

在 UI 中嵌入視頻

隨著嵌入式系統中屏幕的日益普及，開發者希望在用戶界面（UI）中引入視頻，更好地實現與用戶互動。但在嵌入式系統 UI 中應用視頻，實現起來是有相當難度的。操作系統沒有自帶默認的媒體播放器和編解碼器。同樣，編寫一個能顯示視頻社交平臺網頁也很難實現。開發人員需要自行完成所有繁瑣復雜的工作，例如部署視頻緩存，挑選出最適合工作在他們的微控制器上的編解碼器；此外，還要考慮“如果設備運行硬件加速，如何實施？”等問題。TouchGFX Designer 提供了一個視頻控件來應對這一挑戰，添加視頻只需要三個簡單的步驟。

向量優化

微控制器上的大多數靜態接口都使用位圖，它們需要的計算吞吐量非常小。相比之下，矢量圖像并不常見，因為它們需要更多的算力。UI開發的挑戰在于矢量對于動畫至關重要。因此，由于每秒幀數較高，開發人員可能會選擇使用更多資源來實現更平滑流暢的動畫。另一方式是，動畫可以采用較低功率、減少畫面的流動性。TouchGFX 在處理矢量圖形時提供了顯著的優化，在某些場景下效率提高了70%。得益于TouchGFX 不斷的版本優化，開發人員可以在更小的MCU上提供更平滑的動畫或使用更多的矢量元素；還將在較大的動畫上獲得最大的性能提升。新的優化利用Chrom-ART在某些操作（如顏色填充）期間降低微控制器負載。ST還更新了TouchGFX計算形狀邊緣的算法。此外，功能更新涉及到框架對矢量圖形的處理，用戶也將從中受益。開發人員不僅能立即看到性能提升，還可以據此進行規劃。有的開發者會選擇降低應用程序的內存需求，有的會在界面中添加新動畫。團隊協作開發時，必須注意檢查他們的UI，因為某些元素的運行速度可能比預期的快。

導出定制容器功能

在極簡模式下，TouchGFX Designer 通過各個控件，在屏幕實現繪制功能。該軟件附帶了許多預定義的控件，如儀表、時鐘或圖表，開發人員可以設計他們的自定義控件。為了使控件更簡潔直觀，設計者可以將它們分組歸類到容器中。容器通常是用戶界面的構建模塊，幫助程序員在跨多個屏幕的場景下，復用一組控件，而無需每次重新配置它們。此外，容器的修改更新會影響映射到使用它的每個屏幕，這一功能大大簡化了開發工作。 TouchGFX 還提供了預定義的容器，以加快最常見的設計操作，開發人員也可以創建自定義容器。自定義容器非常受歡迎，開發人員通過使用它們實現用戶界面的快速調整并呈現出精美的視覺效果。以往，設計師都不得不面對設計工具背后的固有挑戰，即在一個項目上耗時精心打磨的 UI 無法導出到另一個項目。而涵蓋代碼、圖形資源、文本、附屬項、甚至更多資源的自定義容器可以將這些資源打包并關聯到待開發項目中。TouchGFX Designer 通過提供導出功能解決了這個設計開發難題，該功能創建了一個可在其他項目上復用的文件包（.tpkg文件）。開發者可使用該工具向文件包添加諸如字體等各類資源，并通過一個XML文件列出所有內容。該列表便于開發者檢查該文件并對其進行修改，以選擇要導出的內容。

導入自定義容器功能

導入自定義容器的操作路徑是：用戶選擇編輯->導入->自定義容器。TouchGFX 包括一個新的導入實用程序，可引導用戶完成導入過程。例如，軟件檢測自定義容器定義的語言，并將其與新項目中可用的語言進行匹配或忽略它們。如果通用名之間存在沖突，或可能引發新接口內部出現問題，系統將會停止導入過程。TouchGFX Designer 強制用戶修復原始自定義容器上的問題，而不是在導入過程中創建工作區。由于該功能的目的是保留跨產品界面的外觀和體驗，因此在原始項目中強制更改可確保跨UI的一致性。

CacheableContainers

顧名思義，CacheableContainers 使用位圖緩存加速圖形性能，以更高的幀速率實現更平滑的過渡。如果沒有 CacheableContainers，簡單的全屏 (240 × 320) 幻燈片動畫運行速度是每秒 9 幀。借助 TouchGFX 性能，系統可以達到每秒 60 幀。智能手表通過這個功能已實現無縫絲滑的用戶體驗，盡管其外形尺寸還存在很大的硬件限制，且需要更長的電池壽命。除動畫之外， CacheableContainers 還可以優化復雜的小控件，例如紋理映射器或在靜態背景前顯示的小型動態元素。如果沒有 CacheableContainers，動畫的每一幀都必須重繪，計算量非常大。CacheableContainer 將第一幀和最后一幀存儲在單獨的容器中，并以位圖形式保存在 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 將部分幀緩沖區優化到僅6KB，解決了這個難題。考慮到該工具的應用數據，入門級 UI 只需要 16 KB 的 RAM 即可運行。TouchGFX 還具有智能部分屏更新功能。該功能補充了部分幀緩沖，以優化屏幕上的更新順序。這個過程節省了大量資源，可以在同一時間段進行更多更新。

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

TouchGFX 推出了對SVG的支持。以往，TouchGFX 架構存儲的是光柵圖像，如PNG文件，因為它們易于訪問和顯示。而SVG文件不包含渲染，但包含繪制說明。它們的可擴展性更好，但要求更高。這對于筆記本電腦或臺式機不是問題，但對于低功耗微控制器就不同了。其難點在于，設計師正在創建越來越多的動畫界面，他們希望一個UI可以通過縮放適應不同尺寸的顯示器。因此，設計團隊希望使用SVG文件節省資源，因為一個文件可以用多種不同的方式繪制。

? 掃碼觀看視頻：TouchGFX Stock和SVG小部件

為了應對這一日益增長的挑戰，ST在某些STM32U5產品上集成了新的NeoChrom 2.5D加速器。該硬件對繪圖動畫進行了優化，減輕了與SVG文件相關的一些計算負擔，從而解決了性能問題。該IP還具有更快的內存接口，加快了提取操作。因此，將文件存儲在外部存儲器中時，損失更小。SVG IP具有很大應用潛力，ST將繼續基于其特性為用戶帶來更多新功能。

文本的 XML 文件

設計團隊通常將所有文本存儲在可以導出的 Excel 文件中，這種格式更容易與全球開發人員協作。但管理改動非常不便，開發者必須手動處理更改，而不是使用Git這樣的版本控制系統，并確保沒有人無意疏忽覆蓋其他人的工作，這就很麻煩。為了解決這個問題，TouchGFX 將所有文本存在一個 XML 文件中。這個格式簡化了合并操作和沖突的解決。為了兼顧開發者的以往工作習慣，TouchGFX還包括一個 XML 到 Excel 轉換器。因此，開發人員仍然可以導出到 Excel，然后將他們的 Excel 文件傳回 TouchGFX 生成 XML 格式。

優化的項目文件

TouchGFX 還通過小型項目文件促進協作。小尺寸更容易合并和共享。通常，文本文件以 JSON 格式存儲所有參數，這會讓文件變得很大。因此，ST 通過僅存儲自定義設置進行優化，所有文件中沒有內容時都被視為使用默認值。這樣大大縮小了文件尺寸，使 Git 上的合并操作更加簡單和快捷。

一次性文本及隨機 ID

希望使用文本的開發人員必須在 TouchGFX Designer 的文本面板中創建資源，然后在 UI 中使用文本的 ID。但是，TouchGFX 也支持 “一次性文本”，它不會作為典型的文本資源出現。開發人員在測試期間或文本不重要時使用它。它可以防止數據庫被不相關的文本填滿，以加速原型制作。實際上，一次性文本功能與常規文本資源不同，它會自動生成 ID 并在從 UI 中刪除資源時從數據庫中刪除。TouchGFX 還使用隨機字符串生成器來生成 ID。因此，同一項目中的兩個一次性文本 ID 幾乎不可能相同。

TouchGFX Stock

TouchGFX Stock 是基于微控制器框架提供的最大的免費UI圖形資產庫。它包括圖標、GUI元素、主題、圖像等。由于圖標來自谷歌或百度的免費使用庫，而ST擁有其他資源的所有權，TouchGFX Stock 開源了這些圖形資產的使用許可，只要用戶的項目在STM32設備上運行，即使是商業項目也可免費使用這些資產。用戶可以抓取圖形資產，調整大小以適應自己的界面，或對其進行編輯以滿足特定的需求。TouchGFX Stock甚至還支持將這些圖形資產與另一個圖形框架一起使用，只要程序是在ST微控制器上運行的即可。簡潔明了的 TouchGFX 占位符或示例資產，對于缺少設計資源的小型開發團隊或初創公司非常友好，他們在開發中大量使用，只需將其添加到應用界面，即可快速實現UI開發。正因為這一點，ST決定投入開發 TouchGFX Stock，并成為擁有最廣泛的免費圖形資產庫的MCU供應商。多年來，ST一直努力讓MCU上的GUI更易于使用，并不斷地增加新的主題、圖像等來擴展這個庫。TouchGFX Stock 提供了很多UI元素，如條形圖、彈出窗口、時鐘、儀表等，還為某些圖形資產提供亮版和暗版。工程師無需擔心調色板不匹配或設計理念過時等問題。我們提供的圖形資產能夠保持UI連貫性和美觀性。我們還提供各種尺寸以匹配大多數的顯示器，許多顯示器甚至不需要自己調整大小。TouchGFX Stock 上市時包含五個主題，但限于MCU上GUI的性質，還無法實現自動切換主題。由于沒有與所有資產形成一一對應的關系，用戶必須手動替換它們。 ▲TouchGFX Stock 預覽

動畫和控件

如何充分利用TouchGFX 中不斷增加的新功能，滑入過渡和動態圖，是開發人員面臨的挑戰。因此，我們提供了使用上述功能后得到優化的動畫。例如，雖然傳統的滑入式過渡需要刷新整個屏幕，但 TouchGFX 擦除動畫使用的資源要少得多。同樣，動態圖標控件可以更好地顯示序列數據，而不會給 RAM 和微控制器帶來太大影響。

靜態圖表

當可穿戴設備跟蹤環境或物理數據時，用戶希望看到進展情況。圖表可以跟蹤心率、溫度、步行步數等。TouchGFX 很早之前就具備動態圖表功能；近期，新增了靜態圖表功能，可以更好地適應新的應用程序。有很多應用不需要不斷演化或隨時間變化很小的數據，這樣的場景更適合靜態呈現。靜態圖表的工作方式略有不同。呈現動態圖表時，開發人員只需要在動態數據點上發送一個數據點，因為時間間隔是恒定的；然而，對于靜態圖表，程序員必須輸入X軸和Y軸的信息。

時鐘和紋理映射器

TouchGFX 還具有模仿應用程序的控件，如模擬和數字時鐘，以及一個紋理映射器，開發人員只需通過簡單的拖放即可創建他們的映射程序。他們仍然需要輸入C++ 代碼，但整個過程會更加順暢。紋理映射器也是在資源有限的 MCU 上進行 TouchGFX 優化的一個很好的例子。只要圖形資源在 RAM 中而不是閃存中，它就可以幫助把對象制作成動畫，甚至可以工作在 STM32G0 上。

儀表

儀表模板繪制針和弧度可以幫助用戶監控值。開發人員還可以更改背景、針的方向、值的范圍等。

? 掃碼觀看視頻：TouchGFX Designer widget Gauge組件

上方視頻展示了程序員如何在 IDE 和 TouchGFX Designer 之間切換以獲得更流暢的工作流程。團隊可以快速檢查量表，即時調整，并立即測試他們的代碼。視頻還展示了 handleTickEvent() 函數如何控制儀表的動作。只需幾行代碼，開發人員就可以更改值的范圍以及指示器接收更新的頻率等。這些優化可以給不需要不斷更新顯示值的應用節省大量資源。

先進文本管理

文本是大多數圖形用戶界面的重要組成部分，這解釋了為什么設計師對其如此關注。他們定制、編譯并改進它。在 TouchGFX Designers 上創建的一些應用程序可以擁有數千個文本資源，每個文本資源都被翻譯成多種語言。如何更高效處理文本？為了減少損耗，TouchGFX 現在提供新功能，開發人員可以根據其應用程序的部分或功能定義的組。如果您想在 TouchGFX Designer 中并排顯示編譯文本，新功能使這一過程變得更簡單。它還幫助打包相關信息以檢查一致性和準確性。最后，分組使搜索和查找特定資源更快速。TouchGFX Designer 還包括一個排版選項，用于設置組內的默認參數。該部分允許用戶選擇字體規格、回退字符、通配符、對齊方式等。以前，開發人員必須覆蓋每個文本資源的參數，這可能帶來大量工作。而由于有了組，可以同時為許多資源設置參數，從而極大地優化了開發。具有自定義排版的現有項目將看到其設置移動到新部分。新的文本界面還顯示一次性文本，并在必要時將其升級為資源。

?掃碼觀看視頻：TouchGFX 產品特性 文本管理

THE END

長按掃碼關注公眾號

更多資訊，盡在STM32

▽點擊“閱讀原文”，下載TouchGFX