TouchGFX使用教程

前言

大家好,本人最近在做項目開發,項目中使用TouchGFX工具進行開發界面,同時使用stm32系列的芯片操作系統使用的是FreeRTOS,之前沒有接觸過帶有界面開發的stm32,也同樣沒有接觸過TouchGFX界面開發工具,所以在開發過程中也遇見過一些坑,對於開發TouchGFX+stm32+stm32cubeMX有一些體會,給大家展示出來希望有一些作用吧。

TouchGFX背景

TouchGFX作爲X-Cube-TouchGFX的一個X-Cube軟件包提供。
有了這些,您就可以爲基於STM32的硬件完整地實現GUI應用程序。TouchGFX包括三個主要部分-兩個工具和一個框架。

1、TouchGFX Designer:TouchGFX中易於使用的GUI構建器,可讓您創建TouchGFX應用程序的視覺外觀。
2、TouchGFX Generator:一個CubeMX插件,用戶可以在其中爲基於STM32的硬件配置並生成自定義的TouchGFX抽象層(AL)。
3、TouchGFX引擎:驅動UI應用程序的TouchGFX C ++框架。處理屏幕更新,用戶事件和計時。先進的TouchGFX技術針對STM32微控制器進行了優化,以最小的CPU負載和內存使用量爲您提供最佳性能。
在這裏插入圖片描述
在這裏TouchGFX的安裝和入門就不給大家介紹了,從網上任意地方都可以找到。

TouchGFX工程的結構

在這裏插入圖片描述
在上圖中需要注意的是COLOR DEPTH 選項,該部分定義了色彩的位深,所以創建工程時需要根據需要修改該部分的值,個人建議最好時24 bit。其次,如果需要使用官方demo做演示,點擊Blank UI框進行選擇demo,但是注意的是不知道是網絡原因還是服務器本身原因,demo下載不太正常,有時可以正常下載有時卻不行,越是大的demo越容易出現問題。當然使用st的官方評測版可在simulator側直接選擇出來。
在這裏插入圖片描述
創建好工程後點擊Generate Code按鈕可以生成相應的代碼,生成的代碼可以通過多種方式打開:keil、IAR、STM32CUBEIDE、VS,如果只是做界面邏輯開發的話可以選擇VS的IDE,因爲VS的IDE可以抽象出UI部分的邏輯,層次感更清晰解耦更徹底。如果需要測試一下界面顯示及邏輯則可以用Simulator模式顯示。
在這裏插入圖片描述
在TouchGFX界面上點擊browse Code按鈕則彈出文件夾,有心的朋友可以看一下這些文件夾中放的是些什麼,如果創建的是帶有硬件平臺的上一層的文件夾下還有寫驅動及協議層的東西。
選擇simulator文件夾通過VS打開工程,則可以看見TouchGFX界面程序的結構。
在這裏插入圖片描述
現在具體的說一下工程的結構,在工程中包括gui文件夾和generated文件夾,重點說下這兩個文件夾下的內容。generated文件夾下放的都是通過TouchGFX生成的文件,如果用VS打開的話,其中的文件是不能更改的,但是用ST的IDE或者IAR之類的工具是可以更改的,本人不建議手動更改其中的內容,因爲再次通過TouchGFX生成代碼是其中手動更改的內容會被刪掉。
在說一下gui文件夾下的內容吧,在gui文件夾下放着的是每個界面相應產生的子文件夾,同時還包括model文件夾及common、containers、這三個文件夾,model文件夾的作用是TouchGFX特有的結構模式MVP其中的一環,其中的model文件可以通過後臺更新前臺的數據,也可以通過前臺向後臺刷新數據。具體後面會給大家做細緻的講解。
common文件夾中放置的是通用的類文件,如果需要些自定義的算法處理則可以將其放入該文件內。
containers文件夾上面的圖片中沒有,但是如果通過TouchGFX創建自定義控件時則會創建該文件。
具體如何使用後續會給大家做細緻的講解。
除去上述的文件夾還有由於界面創建產生的文件夾該種文件夾以_screen結尾,此種文件夾中包含兩種文件,第一種是包含View的文件,該文件是用於界面的邏輯事件開發,在文件中包含着事件的處理函數。
第二種是包含Presenter的文件,該文件也是MVP模式中的一類文件,在給大家講述MVP章節是會給具體的介紹該文件的內容。

後記

由於是第一章,主要給大家介紹了TouchGFX的文件結構,方便大家梳理工程邏輯,同時,最重要的是在開發過程中慢慢的體會工程結構。我會把我參考的文章放在下方的鏈接上,有需要的可以參照。也希望大家有意見和建議的話,在下方留言,本着共同學習,共同發展的目的,之後會細節的給大家介紹一些個人的理解。
[1]: http://www.waveshare.net/study/portal.php?mod=list&catid=63
[2]: https://github.com/draupnergraphics/touchgfx-widgets
[3]: http://www.waveshare.net/study/article-629-1.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章