實戰(zhàn)經驗 | STM32GUI TouchGFX 屏幕切換功能簡介

TouchGFX 是專用于 STM32 的圖形界面設計軟件，可基于低成本開發(fā)優(yōu)秀的圖形界面，而且它已變的越來越流行。為了幫助客戶更加深入地理解和使用 TouchGFX ，本文針對TouchGFX 屏幕切換的實現方式進行了介紹。通過簡析基本例程“Transition Example”的源碼，剖析其中切屏實現的流程；并簡介了如何使用 TouchGFX Designer 快捷地修改屏幕切換模式，希望能幫助客戶更好地使用 TouchGFX 切屏特色與功能。

2.1. TouchGFX Transition 類介紹

TouchGFX 框架中關于屏幕切換功能，實現了一個 Transition 基類和五個派生類，其關系如下圖圖 1 所示。其中，Transition 是切屏的抽象基類，定義了屏幕切換期間發(fā)生的基本事務。虛函數主要包括：Init（初始化）、tearDown（銷毀，切屏完成需要的清理過程）、handleTickEvent（Tick 事件處理函數，主要用于完成切屏的動畫效果）、invalidate（失效，用于重繪）等。五個派生類，其中 NoTransition 是最基本的派生類，它沒有任何視覺效果，當前屏幕會直接被新屏內容替換。另外四個派生類則具有動畫效果：BlockTransition、CoverTransition、SlideTransition 和 WipeTransition。

圖1.TouchGFX Transition 類繼承關系

BlockTransition 將屏幕分成 8x6 份塊，在屏幕切換時會每次隨機重繪其中的 2 個塊，比較節(jié)省 MCU 資源，適合性能不高的 MCU；CoverTransition 的動畫效果是“新屏畫面從一個方向移動過來，直至完全覆蓋原屏幕內容”；SlideTransition 的動畫效果是“新屏與原屏拼接在一起，（原屏在前，新屏在后）從指定的方向滑過來”；WipeTransition 的動畫效果是“新屏內容從一個方向展開（有一種擦除原屏，露出新屏的效果）”。BlockTransition、CoverTransition、SlideTransition 和 WipeTransition 均在 handleTickEvent 函數中實現各自風格的動畫效果，tearDown 函數中則銷毀切屏過程中創(chuàng)建的用于動畫的臨時快照控件等。下面我們首先生成Transition 例程，并對例程源碼相關部分做進一步的分析。

2.2. TouchGFX Transition 例程

運行 TouchGFX Designer，選擇 Examples；通過 Select Board Setup 選擇 STM32H735G DK 板（也可以是 TouchGFX 適用的其它板件）；從眾多例程中選擇“Transition Example”例程；將 Application name 改為 Transition_Example，如下圖圖 2 所示，然后點擊 Create 創(chuàng)建工程。

圖2.TouchGFX Designer 生成 Transition Example 例程

進入 TouchGFX Designer 主界面后，會看到畫布上有四個方向按鈕和一個背景圖片，如下 圖圖 3 所示。我們對界面不做更改，直接選擇 Designer 右下角 (Run Target)在目標板上運行。該操作將會復制 TouchGFX 框架文件，生成配置文件、makefile、代碼及資源文件（images、fonts、texts），然后編譯鏈接、燒錄目標板并運行。程序運行起來后，您可以熟悉一下該例程應用，該應用有 5 個屏幕畫面，一個主屏及上下左右 4 個屏幕。點擊方向按鈕會進行相關方向的切屏。例程中切屏方式是 SlideTransition 模式。下面我們解讀一下相關代碼，再對Transition 模式進行修改。

圖3.TouchGFX Designer Transition Example 設計界面

2.3. 例程代碼解讀與切屏模式修改

2.3.1. 關鍵代碼流程

切屏操作是由點擊按鈕觸發(fā)的，我們以右向按鈕 為例，一步步查看調用過程。首先我們可以確定當前屏幕是 MainView 類，MainView 繼承自 MainViewBase，該 MainViewBase 由Designer 自動生成。它已經包含了四個按鈕、一個背景框和一個背景圖片。按鈕點擊的處理函數為 buttonCallbackHandler。詳細代碼如下：

我們再來看該按鈕處理函數，這里右向按鈕調用了 application 對象的gotoRightScreenSlideTransitionEast 函數：

在 FrontendApplicationBase 中，gotoRightScreenSlideTransitionEast 接口通過transitionCallback 跳轉到 gotoRightScreenSlideTransitionEastImpl 函數。具體過程，首先application 事務處理過程中會調用 handlePendingScreenTransition，再轉至函數evaluatePendingScreenTransition，經 transitionCallback 完成對函數gotoRightScreenSlideTransitionEastImpl 的調用（更多的關于 Callback 的介紹請參閱相關文檔或 LAT）。如下圖圖 4 所示：

圖4.Transition Callback 的應用過程

具體代碼如下：

函數 gotoRightScreenSlideTransitionEastImpl 中調用了屏幕切換的關鍵模板函數makeTransition。

2.3.2. 模板函數 makeTransition

下面我們來看一看實現屏幕切換功能的關鍵模板函數 makeTransition。該函數在MVPApplication.hpp 中，源碼如下：

我們知道 TouchGFX 應用架構是 MVP 架構（這里不做過多介紹，需要了解的客戶請參考相關文檔），這里的 makeTransition 函數將 TouchGFX 應用中的 View&Presenter 和 model 綁定，并與 transition 聯(lián)系在一起，進而實現切屏功能。具體來說，首先 prepareTransition 函數對當前的 View/Presenter/Transition 進行銷毀；然后以模板參數 touchgfx::SlideTransition（用戶指定的方向）創(chuàng)建 Transition 派生類對象；以模板參數 ScreenType 類進行新 View 的創(chuàng)建（這里是 RighView）；再以模板參數 PresenterType 類創(chuàng)建新的 Presenter（這里是RightPresenter）。將 Presenter 與 Model 綁定并將 View 與 Presenter 綁定（以保證可以正常調用各自接口，實現 MVP 架構功能）；最后調用 finalizeTransition 函數，在 finalizeTransition 中進行新 View 的 SetupScreen，綁定新 Transition, 并激活新 Transition。

2.3.3. Transition 動畫效果的實現

具體的 Transition 動畫效果是在 Transition 派生類的 handleTickEvent 中實現的。我們例程中是 SlideTransition，其 handleTickEvent 中實現了滑動的效果。將原有屏幕的快照，在滑動方向的來向上與新 View 的快照連接，一起沿滑動方向移動，實現動畫效果。具體請見下面handleTickEvent 函數源碼：

2.3.4. Transition 風格的修改

模板配合 C++編程給予了 TouchGFX 框架極大的簡潔性和適配的便利性，對于切屏風格的增加或修改也是非常的簡便。客戶甚至不需要理解前面介紹的 Transition 具體原理，也能夠非常方便地修改切屏模式。使用 TouchGFX Designer，僅需點擊幾下鼠標即可實現。如下圖圖 5 所示，這里我們在關聯(lián)右向按鈕的 Interaction 中，將 Transition 模式改為了 Wipe 模式，編譯運行即可查看效果。

圖5.TouchGFX Designer Transition 模式的修改

TouchGFX 是針對 STM32 產品的專用優(yōu)秀界面設計工具，功能強大易用。本文對屏幕切換功能進行了簡介，從基本示例“Transition Example”出發(fā)，對切屏部分的源代碼進行了淺析，并介紹了如何使用 TouchGFX Designer 實現切屏模式的修改。希望本文能夠幫助客戶更深入地理解 STM32 TouchGFX。