【STM32H7】第22章 ThreadX GUIX視窗圖示滑動操作實現方法
最新教程下載:http://www.armbbs.cn/forum.php?mod=viewthread&tid=98429
第22章 ThreadX GUIX視窗圖示滑動操作實現方法
本章節為大家講解GUIX視窗圖示滑動操作實現方法,類似手機介面圖示滑動效果。
22.1初學者重要提示
22.2 GUIX Studio滑動介面佈局設計
22.3 GUIX視窗滑動效果實現
22.4 實驗例程設計框架
22.5 實驗例程
22.6 總結
22.1 初學者重要提示
- 務必看第11章學習GUIX Studio的使用方法和第12章學習GUIX Studio生成的程式碼移植到硬體平臺的方法。
- 本章僅作了800*480解析度大小的介面設計。
- 本章使用的圖示是帶透明通道的PNG格式圖片,測試發現GUIX Studio不支援帶透明通道的BMP格式圖片。
- 大家滑動的時候,可以看到圖示輕微的撕裂感(細看才能看出來),下一章節為大家分享GUIX雙緩衝的實現,配套例子介面效果和本章一樣。
22.2 GUIX Studio滑動介面佈局設計
與前章節略有不同,本章需要大家建立一個背景視窗和兩個透明的圖示視窗。實現類似手機的滑動效果,滑動切換兩個圖示介面。
22.2.1 整理需要的背景圖和圖示
需要的背景圖片和圖示都存到了工程V7-2029_GUIX Studio Window Sliding(only 800x480)裡面:
22.2.2 新增背景圖片和圖示到GUIX Studio
注:GUIX Studio工程的建立方法在本教程第11章有詳細說明。
新增背景圖和圖示到GUIX Studio:
新增進來的效果如下(部分截圖):
雙擊任意新增的圖片,大家可以更新需要修改輸出格式,我們這裡使用預設配置:
22.2.3 建立背景視窗併為其新增背景圖片
背景視窗設定如下:
ID設定:GUIX_ID_WINDOW0
事件回撥:slide_win_event_process。
22.2.4 建立第1個桌面圖示視窗
建立的第1個桌面圖示視窗配置如下:
設定透明效果很重要,這樣可以僅顯示桌面視窗上的圖示控制元件,實現類似手機的介面效果。新增Pixelmap button:
Pixelmap Button設定如下:
主要是將正常顯示效果設定為點陣圖。然後在此點陣圖下面新增文字控制元件prompt:
Prompt控制元件的配置如下:
主要是設定為透明,並設定字型為NewFont1。NewFont1的設定如下:
整體新增完畢的效果如下:
22.2.5 建立第2個桌面圖示視窗
第2個桌面視窗的建立方法和第1個桌面視窗是一樣的,整體新增完畢的效果如下:
22.3 GUIX視窗滑動效果實現
22.3.1 第1步:建立背景視窗和兩個桌面視窗並啟動Animation動畫
實現的程式碼如下:
/* ********************************************************************************************************* * 函 數 名: MainTask * 功能說明: GUI主函式 * 形 參: 無 * 返 回 值: 無 ********************************************************************************************************* */ void MainTask(void) { /* 避免上電後瞬間的撕裂感 */ LCD_SetBackLight(0); /* 觸控校準函式預設是註釋掉的,電阻屏需要校準,電容屏無需校準。如果使用者需要校準電阻屏的話,執行 此函式即可,會將觸控校準引數儲存到EEPROM裡面,以後系統上電會自動從EEPROM裡面載入。 */ #if 0 LCD_SetBackLight(255); LCD_InitHard(); TOUCH_Calibration(2); #endif /*初始化配置 */ gx_initconfig(); /* 配置顯示屏 */ gx_studio_display_configure(DISPLAY_1, stm32f4_graphics_driver_setup_565rgb, LANGUAGE_ENGLISH, DISPLAY_1_THEME_1, &root); /* 建立視窗 */ gx_studio_named_widget_create("window", (GX_WIDGET *)root, (GX_WIDGET **)&pScreen); gx_studio_named_widget_create("window_1", (GX_WIDGET *)GX_NULL, (GX_WIDGET **)&pScreen1); gx_studio_named_widget_create("window_2", (GX_WIDGET *)GX_NULL, (GX_WIDGET **)&pScreen2); /* pScreen2附加到pScreen,即作為其子視窗 */ gx_widget_attach((GX_WIDGET *)pScreen, (GX_WIDGET *)pScreen2); /* 建立動畫功能並啟動 */ gx_animation_create(&slide_animation); slide_animation_start((GX_WINDOW *)pScreen); /* 顯示根視窗 */ gx_widget_show(root); /* 啟動GUIX */ gx_system_start(); tx_thread_sleep(100); LCD_SetBackLight(255); while(1) { tx_thread_sleep(20); } }
- gx_studio_named_widget_create
通過此函式建立了三個視窗。
- gx_widget_attach
pScreen2附加到pScreen,即作為其子視窗。
- gx_animation_create
建立Animation動畫功能。
- slide_animation_start
啟動Animation動畫功能,這裡要特別注意,啟動的動畫視窗是pScreen。這個函式是我們使用者自己建立,詳細實現看下一步。
22.3.2 第2步:Animation動畫功能實現
程式碼如下:
/* ********************************************************************************************************* * 函 數 名: slide_animation_start * 功能說明: 啟動滑動 * 形 參: 無 * 返 回 值: 無 ********************************************************************************************************* */ static VOID slide_animation_start(GX_WINDOW *window) { GX_ANIMATION_INFO slide_animation_info = {0}; slide_animation_info.gx_animation_parent = (GX_WIDGET *)window; slide_animation_info.gx_animation_style = GX_ANIMATION_SCREEN_DRAG | GX_ANIMATION_HORIZONTAL | GX_ANIMATION_WRAP | GX_ANIMATION_CUBIC_EASE_OUT; slide_animation_info.gx_animation_id = GX_NEXT_ANIMATION_ID; slide_animation_info.gx_animation_frame_interval = 2; slide_animation_info.gx_animation_steps = 10; slide_animation_info.gx_animation_slide_screen_list = win_list; gx_animation_drag_enable(&slide_animation, (GX_WIDGET *)window, &slide_animation_info); }
- GX_ANIMATION_INFO slide_animation_info = {0}
將結構體區域性變數清零,防止部分沒有初始化的結構體成員是隨機值。
- 成員gx_animation_style
- GX_ANIMATION_SCREEN_DRAG
使能滑動功能。
-
- GX_ANIMATION_HORIZONTAL
使能水平方向滑動。
-
- GX_ANIMATION_WRAP
將多個滑動介面設定成環形的,依次執行滑動。
-
- GX_ANIMATION_WRAP
將多個滑動介面執行順序設定成環形的,依次執行滑動。
-
- GX_ANIMATION_CUBIC_EASE_OUT
動畫執行效果,當前GUIX支援的動畫效果如下:
/* flag that can be used in combination with translate animation */ #define GX_ANIMATION_PUSH_STACK 0x4000U #define GX_ANIMATION_DETACH 0x8000U #define GX_ANIMATION_EASING_FUNC_MASK 0x10f0U #define GX_ANIMATION_BACK_EASE_IN 0x0010U #define GX_ANIMATION_BACK_EASE_OUT 0x0020U #define GX_ANIMATION_BACK_EASE_IN_OUT 0x0030U #define GX_ANIMATION_BOUNCE_EASE_IN 0x0040U #define GX_ANIMATION_BOUNCE_EASE_OUT 0x0050U #define GX_ANIMATION_BOUNCE_EASE_IN_OUT 0x0060U #define GX_ANIMATION_CIRC_EASE_IN 0x0070U #define GX_ANIMATION_CIRC_EASE_OUT 0x0080U #define GX_ANIMATION_CIRC_EASE_IN_OUT 0x0090U #define GX_ANIMATION_CUBIC_EASE_IN 0x00a0U #define GX_ANIMATION_CUBIC_EASE_OUT 0x00b0U #define GX_ANIMATION_CUBIC_EASE_IN_OUT 0x00c0U #define GX_ANIMATION_ELASTIC_EASE_IN 0x00d0U #define GX_ANIMATION_ELASTIC_EASE_OUT 0x00e0U #define GX_ANIMATION_ELASTIC_EASE_IN_OUT 0x00f0U #define GX_ANIMATION_EXPO_EASE_IN 0x1000U #define GX_ANIMATION_EXPO_EASE_OUT 0x1010U #define GX_ANIMATION_EXPO_EASE_IN_OUT 0x1020U #define GX_ANIMATION_QUAD_EASE_IN 0x1030U #define GX_ANIMATION_QUAD_EASE_OUT 0x1040U #define GX_ANIMATION_QUAD_EASE_IN_OUT 0x1050U #define GX_ANIMATION_QUART_EASE_IN 0x1060U #define GX_ANIMATION_QUART_EASE_OUT 0x1070U #define GX_ANIMATION_QUART_EASE_IN_OUT 0x1080U #define GX_ANIMATION_QUINT_EASE_IN 0x1090U #define GX_ANIMATION_QUINT_EASE_OUT 0x10a0U #define GX_ANIMATION_QUINT_EASE_IN_OUT 0x10b0U #define GX_ANIMATION_SINE_EASE_IN 0x10c0U #define GX_ANIMATION_SINE_EASE_OUT 0x10d0U #define GX_ANIMATION_SINE_EASE_IN_OUT 0x10e0U
大家在GUIX Studio的ScreenFlow上可以產看實際執行曲線效果:
- 成員gx_animation_frame_interval
定義每幀執行的時間間隔,單位GUIX Timer執行週期,預設值在gx_port.h。
- 成員gx_animation_steps
配置整個滑動需要的幀數,或者說步數,即從動畫開始到動畫結束需要的幀數。數值越大,效果越細膩,但對效能要求也越高。
- 成員gx_animation_slide_screen_list
定義要執行滑動的視窗列表。
- 函式gx_animation_drag_enable
使能滑動功能。
22.3.3 第3步:優化Animation動畫效果
程式碼如下,主要功能是避免使用者觸控圖示時也影響圖示滑動。
/* ********************************************************************************************************* * 函 數 名: slide_win_event_process * 功能說明: 一定程度上可以避免觸控圖示時也引起圖示滑動 * 形 參: -- * 返 回 值: 無 ********************************************************************************************************* */ UINT slide_win_event_process(GX_WINDOW *window, GX_EVENT *event_ptr) { switch (event_ptr->gx_event_type) { case GX_EVENT_SHOW: slide_animation_start(window); return gx_widget_event_process(window, event_ptr); case GX_EVENT_HIDE: gx_animation_drag_disable(&slide_animation, (GX_WIDGET *)window); return gx_widget_event_process(window, event_ptr); default: return gx_window_event_process(window, event_ptr); } }
22.4 實驗例程設計框架
本章例程的重點是視窗滑動效果的實現。
22.5 實驗例程
(注,如果是電阻屏,需要做觸控校準,校準方法看本教程附件章節A)
配套例子:
本章節配套了如下兩個例子供大家移植參考:
- V7-2028_Window Sliding(only 800x480)
GUIX Studio生成的程式碼在硬體平臺實際執行的工程,含有MDK AC5和AC6四個版本工程。
- V7-2029_GUIX Studio Window Sliding(only 800x480)
GUIX Studio工程模板,設計介面後,生成的檔案可直接新增到MDK,IAR和GCC軟體平臺使用。
實驗目的:
- 本章主要學習視窗圖示滑動功能。
實驗內容:
- 共建立瞭如下幾個任務,通過按下按鍵K1可以通過串列埠列印任務堆疊使用情況
App Task Start任務 :啟動任務,這裡用作BSP驅動包處理。
App Task MspPro任務 :訊息處理,這裡用作LED閃爍。
App Task UserIF任務 :按鍵訊息處理。
App Task GUI任務 :GUI應用任務。
App Task STAT任務 :統計任務。
App Task IDLE任務 :空閒任務。
GUIX System Thread :GUI系統任務。
System Timer Thread任務:系統定時器任務。
實驗效果:
GUIX Studio的介面設計如下:
串列埠列印任務執行情況:
MDK AC5和AC6工程可以串列埠列印任務執行情況:按開發板的按鍵K1可以列印,波特率 115200,資料位 8,奇偶校驗位無,停止位 1:
22.6 總結
本章節主要為大家講解了滑動效果的實現,推薦大家熟練掌握本章節的函式用法。