【STM32H7】第14章 GUIX Studio設計視窗切換
最新教程下載：http://www.armbbs.cn/forum.php?mod=viewthread&tid=98429
第14章 GUIX Studio設計視窗切換
本章節為大家講解GUIX Studio設計視窗切換。
14.1初學者重要提示
14.2 GUIX Studio建立三個視窗
14.3 視窗的Screen Flow介面介紹
14.4 視窗的Screen Flow介面設定
14.5 移植程式到硬體平臺注意事項
14.6 實驗例程設計框架
14.7 實驗例程
14.8 總結
14.1 初學者重要提示
- 務必看第11章學習GUIX Studio的使用方法和第12章學習GUIX Studio生成的程式碼移植到硬體平臺的方法。
- Screen Flow配置是實現視窗切換的關鍵，也是本章節的重點。通過Screen Flow可以實現各種視窗切換效果。
14.2 GUIX Studio建立三個視窗
GUIX Studio的設定方法與第11章一樣，我們這裡僅把控制元件的位置和大小做了調整。
14.2.1 第1步：建立視窗1及其子控制元件
建立的視窗1，新增Text Button控制元件和Prompt控制元件，然後選中建立的視窗1，再重點看下面截圖中標記的三個地方：
- 視窗名為window，此名字後面要在開發板程式建立時使用。
- 設定視窗ID為GUIX_ID_WINDOW0。
- 設定視窗1為啟動視窗。
設定完了視窗部分，再看按鈕控制元件的配置，滑鼠左擊選中按鈕，重點看Properties View：
設定按鈕ID為GUIX_ID_TextButton0，設定Screen Flow時要使用。而prompt控制元件設定顯示內容為：The First Window即可，方便切換不同視窗時區分。
14.2.2 第2步：建立視窗2及其子控制元件
按照如下方法建立視窗2：
建立後，新增Text Button控制元件和Prompt控制元件，然後選中建立的視窗2，同樣重點看下面截圖中標記的兩個地方：
- 視窗名為window_1，此名字後面要在開發板程式建立時使用。
- 設定視窗ID為GUIX_ID_WINDOW1。
設定完了視窗部分，再看按鈕控制元件的配置，滑鼠左擊選中按鈕，重點看Properties View：
設定按鈕ID為GUIX_ID_TextButton1，設定Screen Flow時要使用。而prompt控制元件設定顯示內容為：The Second Window即可，方便切換不同視窗時區分。
14.2.3 第3步：建立視窗3及其子控制元件
按照如下方法建立視窗3：
建立後，新增Text Button控制元件和Prompt控制元件，然後選中建立的視窗3，同樣重點看下面截圖中標記的兩個地方：
- 視窗名為window_2，此名字後面要在開發板程式建立時使用。
- 設定視窗ID為GUIX_ID_WINDOW2。
設定完了視窗部分，再看按鈕控制元件的配置，滑鼠左擊選中按鈕，重點看Properties View：
設定按鈕ID為GUIX_ID_TextButton2，設定Screen Flow時要使用。而prompt控制元件設定顯示內容為：The Third Window即可，方便切換不同視窗時區分。
14.3 視窗的Screen Flow介面介紹
建立完畢三個視窗後，開始本章節最重要的Screen Flow設定，視窗的切換主要是通過Screen Flow來配置的：
按照上圖方式開啟Screen Flow：
可以看到前面建立的視窗window，window_1和window_2都以矩形框的形式呈現，這三個方框可以隨意調節位置，隨意放縮大小。
14.3.1 支援的觸發事件
這裡滑鼠左擊選中視窗window，然後滑鼠右擊，彈出如下對話方塊：
再點選Add New Trigger按鈕，彈出如下對話方塊：
1、System Event
系統事件，支援的系統事件如下：
2、Child Signal
子控制元件支援的事件如下：
這裡的子控制元件就是前面建立視窗1時新增的Text Button子控制元件和Prompt子控制元件。預設都是支援三個事件，CLICKED點選事件，FOCUS_GAINED獲取聚焦事件，FOCUS_LOST失去聚焦事件。
3、User Event
使用者自定義事件。
14.3.2 事件動作處理
這裡以建立的第1個視窗的Child Signal事件中Text Button點選事件為例進行說明：
儲存後，就可以編輯此按鈕按下事件的處理方式：
點選Edit Action(s)按鈕，彈出如下對話方塊：
繼續點選Add New Action按鈕，彈出的對話方塊如下：
Animation：視窗切換的動畫效果。
Attach：將目標視窗附件到它的父視窗上，如果未指定父視窗，則目標視窗將附加到根視窗。
Detach：將目標視窗與其父視窗分離。
Hide：隱藏目標視窗。
Screen Stack Pop：從內部視窗堆疊彈出一個視窗指標。
Screen Stack Push：將視窗指標推到內部視窗堆疊。
Screen Stack Reset：從內部視窗堆疊中刪除所有視窗指標。
Show：顯示目標視窗。
Toggle：將目標視窗附加到當前視窗的父視窗，然後將當前視窗與其父視窗分離。
Window Execute：以模態方式執行目標視窗。
Window Execute Stop：退出當前視窗的模態執行。
14.3.3 視窗切換的動畫效果配置
這裡我們以Animation動畫切換效果為例進行說明，選擇Animation，點選儲存：
儲存後彈出如下對話方塊：
1、這裡可以新增多個動作方式進來，當前我們這裡僅添加了Animation一種方式。
2、設定動作名字，隨意設定，我們這裡使用預設。
3、設定Animation動作方式應用到的目標視窗或控制元件。
4、設定目標視窗切換後附加到那個視窗下（即使用那個視窗作為父視窗），或者設定為None的話，會被附加到root根視窗下。
5、設定目標視窗的動作前的起始位置，結束位置等：
- StartX，StartY
起始座標位置。
- EndX，EndY
結束座標位置。
- Steps
從起始位置到結束位置需要的步數。
- Tick Rate
滴答頻率（注，未摸清準確作用，待後續繼續測試）
- Delay Before
動作前的延遲，延遲單位由GX_SYSTEM_TIMER_TICKS定義。
- Start Alpha，End Alpha
啟動前的Alpha值和啟動後的Alpha值，0表示完全透明，255表示完全不透明。
6、用於設定視窗切換時，動態切換效果
當前支援的動畫效果如下：
點選這個小按鈕可以檢視動畫效果：
7、動畫完成後的處理
- Detach Target
表示將目標視窗與其父視窗分離。
- Push Target to Screen Stack
將目標視窗指標壓如到視窗堆疊中。
14.4 視窗的Screen Flow介面設定
瞭解了Screen Flow的基礎配置後，將三個視窗都做配置。
14.4.1 第1步：設定視窗1
右擊選擇視窗window：
彈出視窗選擇Child Signal中的按鈕按下事件：
儲存後選擇Edit Action(s)：
點選Edit Action(s)後，彈出如下對話方塊，並選擇Add New Action按鈕，再選擇Animation並儲存。
最終配置如下：
我們這裡僅修改了Target目標視窗，其它地方的設定全部預設不動。這裡選擇window_1表示操作前面建立的window_1，實際執行效果是由視窗window切換到window_1。
14.4.2 第2步：設定視窗2
右擊選擇視窗window_1：
彈出視窗選擇Child Signal中的按鈕按下事件：
儲存後選擇Edit Action(s)：
點選Edit Action(s)後，彈出如下對話方塊，並選擇Add New Action按鈕，再選擇Animation並儲存。
最終配置如下：
我們這裡僅修改了Target目標視窗，其它地方的設定全部預設不動。這裡選擇window_2表示操作前面建立的window_2，實際執行效果是由視窗window_1切換到window_2。
14.4.3 第3步：設定視窗3
右擊選擇視窗window_2：
彈出視窗選擇Child Signal中的按鈕按下事件：
儲存後選擇Edit Action(s)：
點選Edit Action(s)後，彈出如下對話方塊，並選擇Add New Action按鈕，再選擇Animation並儲存。
最終配置如下：
我們這裡僅修改了Target目標視窗，其它地方的設定全部預設不動。這裡選擇window表示操作前面建立的window，實際執行效果就是由視窗window_2切換到window。
14.4.4 第4步：整體設定效果
三個視窗的Screen Flow配置好之後，可以看到如下效果：
三個視窗已經互聯到一起，即我們要實現的功能可以實現三個視窗之間來回切換。至此就完全了視窗切換的實現。
14.5 移植程式到硬體平臺注意事項
本教程第12章講解了移植方法，本章重點注意建立的三個視窗都要單獨建立，建立程式碼放在了MainTask.c檔案的MainTask函式裡面：
/* ********************************************************************************************************* * 函 數 名: MainTask * 功能說明: GUI主函式 * 形 參: 無 * 返 回 值: 無 ********************************************************************************************************* */ void MainTask(void) { 其它省略未寫 /* 建立視窗 */ gx_studio_named_widget_create("window", (GX_WIDGET *)root, (GX_WIDGET **)&pScreen); gx_studio_named_widget_create("window_1", (GX_WIDGET *)root, (GX_WIDGET **)&pScreen); gx_studio_named_widget_create("window_2", (GX_WIDGET *)root, (GX_WIDGET **)&pScreen); }
特別注意，這裡window，window_1和window_2就是前面建立三個視窗時所使用的名字。
14.6 實驗例程設計框架
本章例程的重點是GUIX Studio視窗切換的實現：
14.7 實驗例程
（注，如果是電阻屏，需要做觸控校準，校準方法看本教程附件章節A）
配套例子：
本章節配套了如下兩個例子供大家移植參考：
- V7-2013_GUIX Window Switch
GUIX Studio生成的程式碼在硬體平臺實際執行的工程，含有GCC，IAR，MDK AC5和AC6四個版本工程。
- V7-2014_GUIX Studio Window Switch
GUIX Studio工程模板，設計介面後，生成的檔案可直接新增到MDK，IAR和GCC軟體平臺使用。
實驗目的：
- 本章主要學習GUIX Studio設計視窗切換
實驗內容：
- 共建立瞭如下幾個任務，通過按下按鍵K1可以通過串列埠列印任務堆疊使用情況
App Task Start任務 ：啟動任務，這裡用作BSP驅動包處理。
App Task MspPro任務 ：訊息處理，這裡用作浮點數串列埠列印。
App Task UserIF任務 ：按鍵訊息處理。
App Task GUI任務 ：GUI應用任務。
App Task STAT任務 ：統計任務。
App Task IDLE任務 ：空閒任務。
GUIX System Thread ：GUI系統任務。
System Timer Thread任務：系統定時器任務。
實驗效果：
一共建立了三個視窗來回切換：
GUIX Studio的介面設計如下：
串列埠列印任務執行情況：
IAR，MDK AC5和AC6工程可以串列埠列印任務執行情況：按開發板的按鍵K1可以列印，波特率 115200，資料位 8，奇偶校驗位無，停止位 1：
Embedded Studio（GCC）平臺的串列埠列印是通過其除錯元件SEGGER RTT做的串列埠列印，速度也非常快，列印效果如下：
展示裡面有亂碼是因為Embedded Studio不支援中文。
14.8 總結
本章節主要為大家講解了GUIX Studio設計視窗切換，涉及到的知識點比較多，需要大家多做測試，觀察各種效果。