總的來(lái)說(shuō)，使用TouchGFX開(kāi)發(fā)STM32界面，有2種方法：一是利用TouchGFX Designer軟件，支持圖片和控件拖拽、可快速生成在KEIL或IAR等IDE中可打開(kāi)的項(xiàng)目工程；另一種方法是，STM32CUBEMX 5.0版本增加了對(duì)TouchGFX的支持，可以使用CubeMX開(kāi)發(fā)TouchGFX應(yīng)用（后續(xù)文章詳述）。本文先介紹TouchGFX Designer的使用。

TouchGFX Designer下載地址：TouchGFX Designer下載地址 。  需要在st官網(wǎng)上先注冊(cè)一個(gè)用戶名、然后login，下載頁(yè)面的最下方是下載鏈接。

圖一

下載完成后得到安裝包 TouchGFX-4.10.0.msi，安裝目錄推薦使用默認(rèn)路徑，或者安裝到D盤(pán)根目錄也可以，注意：路徑不要帶空格！

啟動(dòng) TouchGFX Designer ，初始畫(huà)面如下：

圖二

功能區(qū)主要分為2個(gè)部分：MY APPLICATION，創(chuàng)建自己的界面應(yīng)用；ONLINE APPLICATION，應(yīng)該是GFX預(yù)置好的項(xiàng)目文件，目前只有一個(gè)關(guān)于洗衣機(jī)的DEMO，本文不做描述。下面以STM32F769I-DISCO官方開(kāi)發(fā)板為例來(lái)具體演示第一個(gè)圖形界面例程。

首先在 APPLICATION TEMPLATE 中選擇我們要使用的開(kāi)發(fā)板。移動(dòng)鼠標(biāo)到Simulator那個(gè)畫(huà)面位置，自動(dòng)出現(xiàn)一個(gè) CHANGE 按鈕：

圖三

鼠標(biāo)點(diǎn)擊這個(gè)按鈕：

圖四

選擇 STM32F769I Discovery Kit ，修改項(xiàng)目文件存儲(chǔ)路徑（例如：D:\TouchGFXProjects），命名例程名稱：MyTest，如圖：

圖五

點(diǎn)擊 CREATE ，

圖六

軟件自動(dòng)從網(wǎng)上下載本項(xiàng)目需要用到的GUI和模板代碼（有時(shí)下載很慢；如果出現(xiàn)紅字提示失敗，就再嘗試 create 一次、直到成功），出現(xiàn)軟件的設(shè)計(jì)畫(huà)面：

圖七

為了設(shè)計(jì)此例程的界面，還需要先做一個(gè)準(zhǔn)備工作：準(zhǔn)備要顯示的圖片（png格式）、并放置到該項(xiàng)目的文件目錄下。本例程只需要一個(gè)圖片：

圖八

這是一個(gè)預(yù)先畫(huà)好的圖片（可以使用畫(huà)筆等制圖工具，然后生成png格式的圖片），STM32F769I-DISCO開(kāi)發(fā)板的屏幕分辨率是800x480，所以圖片也是要這個(gè)尺寸。TouchGFX Designer自動(dòng)生成的項(xiàng)目文件包含一個(gè)子目錄images，我們就把做好的圖片放到這個(gè)目錄下：

圖九

回到TouchGFX Designer，點(diǎn)擊左邊中部的“圖片資源”Tab：

圖十

可以看到系統(tǒng)自動(dòng)把我們剛才準(zhǔn)備好的圖片文件添加了進(jìn)來(lái)：

圖十一

鼠標(biāo)點(diǎn)擊圖片 stm32logo.png ：

圖十二

上面的操作等價(jià)于添加了一個(gè)IMAGE控件、并且將該控件的主要的“圖片”屬性設(shè)置成了 stm32logo.png （關(guān)于控件、屬性等術(shù)語(yǔ)，將在后續(xù)文章中介紹），所以呈現(xiàn)出上面的圖片。點(diǎn)擊右上方的 Run Simulator ，系統(tǒng)將生成在PC上可運(yùn)行的模擬畫(huà)面：

圖十三

等待一會(huì)兒時(shí)間，電腦屏幕上出現(xiàn)模擬界面：

圖十四

這個(gè)模擬界面功能非常強(qiáng)大，還可以在PC上打印調(diào)試信息，后文還將對(duì)模擬器做詳細(xì)介紹。模擬界面成功后，就可以生成代碼并燒寫(xiě)到目標(biāo)反上看實(shí)際運(yùn)行結(jié)果了！

點(diǎn)擊右上角的 Generate Code：

圖十五

此時(shí)，確認(rèn) STM32F769I-DISCO開(kāi)發(fā)板 通過(guò)USB線已經(jīng)與PC連接好了，然后點(diǎn)擊 Run Target：

圖十六

左下角顯示提示信息：Compiling target code （時(shí)間較長(zhǎng)，請(qǐng)耐心等待）：

圖十七

之后，提示信息變成：Flashing target code ，并且板子上ST-LINK的指示燈閃爍（正在燒寫(xiě)代碼！）：

圖十八

幾十秒鐘之后，燒寫(xiě)完成，板子上正確顯示出STM32的logo圖片，這是GUI模式的 hello，world！  圖片還是很漂亮的：

圖十九

正如你所看到的，整個(gè)顯示圖片的操作過(guò)程中，不需要敲入一行代碼！這個(gè) TouchGFX Designer 不一般吧？！

小結(jié)：

系統(tǒng)配置與版本：

1）宿主機(jī)：win10

2）TouchGFX Designer 版本4.10

3）目標(biāo)板： STM32F769I-DISCO開(kāi)發(fā)板，主芯片為 STM32F769NIH6U

4）ST-LINK-V2.1的驅(qū)動(dòng)是必不可少的

5）最好預(yù)裝 Visual Studio 2013（或VS的其他版本），后面的 TouchGFX Designer 進(jìn)階文章中就要用到VS來(lái)添加、修改代碼了，VS是TouchGFX Designer 開(kāi)發(fā)必備的IDE開(kāi)發(fā)環(huán)境。本人安裝的是VS社區(qū)版，是可以免費(fèi)下載、使用的：