【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 初學者重要提示

1.   務必看第11章學習GUIX Studio的使用方法和第12章學習GUIX Studio生成的代碼移植到硬件平臺的方法。
2.   Screen Flow配置是實現窗口切換的關鍵，也是本章節的重點。經過Screen Flow能夠實現各類窗口切換效果。

14.2 GUIX Studio建立三個窗口

GUIX Studio的設置方法與第11章同樣，咱們這裏僅把控件的位置和大小作了調整。

14.2.1        第1步：建立窗口1及其子控件

建立的窗口1，添加Text Button控件和Prompt控件，而後選中建立的窗口1，再重點看下面截圖中標記的三個地方：

1. 窗口名爲window，此名字後面要在開發板程序建立時使用。
2. 設置窗口ID爲GUIX_ID_WINDOW0。
3. 設置窗口1爲啓動窗口。

 

設置完了窗口部分，再看按鈕控件的配置，鼠標左擊選中按鈕，重點看Properties View：

 

設置按鈕ID爲GUIX_ID_TextButton0，設置Screen Flow時要使用。而prompt控件設置顯示內容爲：The First Window便可，方便切換不一樣窗口時區分。

14.2.2        第2步：建立窗口2及其子控件

按照以下方法建立窗口2：

 

建立後，添加Text Button控件和Prompt控件，而後選中建立的窗口2，一樣重點看下面截圖中標記的兩個地方：

1. 窗口名爲window_1，此名字後面要在開發板程序建立時使用。
2. 設置窗口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，一樣重點看下面截圖中標記的兩個地方：

1. 窗口名爲window_2，此名字後面要在開發板程序建立時使用。
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按鈕，彈出以下對話框：

 

一、System Event

系統事件，支持的系統事件以下：

 

二、Child Signal

子控件支持的事件以下：

 

這裏的子控件就是前面建立窗口1時添加的Text Button子控件和Prompt子控件。默認都是支持三個事件，CLICKED點擊事件，FOCUS_GAINED獲取聚焦事件，FOCUS_LOST失去聚焦事件。

三、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，點擊保存：

 

保存後彈出以下對話框：

 

一、這裏能夠添加多個動做方式進來，當前咱們這裏僅添加了Animation一種方式。

二、設置動做名字，隨意設置，咱們這裏使用默認。

三、設置Animation動做方式應用到的目標窗口或控件。

四、設置目標窗口切換後附加到那個窗口下（即便用那個窗口做爲父窗口），或者設置爲None的話，會被附加到root根窗口下。

五、設置目標窗口的動做前的起始位置，結束位置等：

•   StartX，StartY

起始座標位置。

• EndX，EndY

結束座標位置。

•   Steps

從起始位置到結束位置須要的步數。

•   Tick Rate

滴答頻率（注，未摸清準確做用，待後續繼續測試）

•   Delay Before

動做前的延遲，延遲單位由GX_SYSTEM_TIMER_TICKS定義。

•   Start Alpha，End Alpha

啓動前的Alpha值和啓動後的Alpha值，0表示徹底透明，255表示徹底不透明。

六、用於設置窗口切換時，動態切換效果

當前支持的動畫效果以下：

 

點擊這個小按鈕能夠查看動畫效果：

 

七、動畫完成後的處理

•   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軟件平臺使用。

實驗目的：

1. 本章主要學習GUIX Studio設計窗口切換

實驗內容：

1. 共建立了以下幾個任務，經過按下按鍵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設計窗口切換，涉及到的知識點比較多，須要你們多作測試，觀察各類效果。