總的來說，使用TouchGFX開發(fā)STM32界面，有2種方法：一是利用TouchGFX Designer軟件，支持圖片和控件拖拽、可快速生成在KEIL或IAR等IDE中可打開的項目工程；另一種方法是，STM32CUBEMX 5.0版本增加了對TouchGFX的支持，可以使用CubeMX開發(fā)TouchGFX應用（后續(xù)文章詳述）。本文先介紹TouchGFX Designer的使用。
TouchGFX Designer下載地址：TouchGFX Designer下載地址 。 需要在st官網上先注冊一個用戶名、然后login，下載頁面的最下方是下載鏈接。
圖一
下載完成后得到安裝包 TouchGFX-4.10.0.msi，安裝目錄推薦使用默認路徑，或者安裝到D盤根目錄也可以，注意：路徑不要帶空格！
啟動 TouchGFX Designer ，初始畫面如下：
圖二
功能區(qū)主要分為2個部分：MY APPLICATION，創(chuàng)建自己的界面應用；ONLINE APPLICATION，應該是GFX預置好的項目文件，目前只有一個關于洗衣機的DEMO，本文不做描述。下面以STM32F769I-DISCO官方開發(fā)板為例來具體演示第一個圖形界面例程。
首先在 APPLICATION TEMPLATE 中選擇我們要使用的開發(fā)板。移動鼠標到Simulator那個畫面位置，自動出現一個 CHANGE 按鈕：
圖三
鼠標點擊這個按鈕：
圖四
選擇 STM32F769I Discovery Kit ，修改項目文件存儲路徑（例如：D:\TouchGFXProjects），命名例程名稱：MyTest，如圖：
圖五
點擊 CREATE ，
圖六
軟件自動從網上下載本項目需要用到的GUI和模板代碼（有時下載很慢；如果出現紅字提示失敗，就再嘗試 create 一次、直到成功），出現軟件的設計畫面：
圖七
為了設計此例程的界面，還需要先做一個準備工作：準備要顯示的圖片（png格式）、并放置到該項目的文件目錄下。本例程只需要一個圖片：
圖八
這是一個預先畫好的圖片（可以使用畫筆等制圖工具，然后生成png格式的圖片），STM32F769I-DISCO開發(fā)板的屏幕分辨率是800x480，所以圖片也是要這個尺寸。TouchGFX Designer自動生成的項目文件包含一個子目錄images，我們就把做好的圖片放到這個目錄下：
圖九
回到TouchGFX Designer，點擊左邊中部的“圖片資源”Tab：
圖十
可以看到系統(tǒng)自動把我們剛才準備好的圖片文件添加了進來：
圖十一
鼠標點擊圖片 stm32logo.png ：
圖十二
上面的操作等價于添加了一個IMAGE控件、并且將該控件的主要的“圖片”屬性設置成了 stm32logo.png （關于控件、屬性等術語，將在后續(xù)文章中介紹），所以呈現出上面的圖片。點擊右上方的 Run Simulator ，系統(tǒng)將生成在PC上可運行的模擬畫面：
圖十三
等待一會兒時間，電腦屏幕上出現模擬界面：
圖十四
這個模擬界面功能非常強大，還可以在PC上打印調試信息，后文還將對模擬器做詳細介紹。模擬界面成功后，就可以生成代碼并燒寫到目標反上看實際運行結果了！
點擊右上角的 Generate Code：
圖十五
此時，確認 STM32F769I-DISCO開發(fā)板 通過USB線已經與PC連接好了，然后點擊 Run Target：
圖十六
左下角顯示提示信息：Compiling target code （時間較長，請耐心等待）：
圖十七
之后，提示信息變成：Flashing target code ，并且板子上ST-LINK的指示燈閃爍（正在燒寫代碼�。�
圖十八
幾十秒鐘之后，燒寫完成，板子上正確顯示出STM32的logo圖片，這是GUI模式的 hello，world！ 圖片還是很漂亮的：
圖十九
正如你所看到的，整個顯示圖片的操作過程中，不需要敲入一行代碼！這個 TouchGFX Designer 不一般吧？！
小結：
系統(tǒng)配置與版本：
1）宿主機：win10
2）TouchGFX Designer 版本4.10
3）目標板： STM32F769I-DISCO開發(fā)板，主芯片為 STM32F769NIH6U
4）ST-LINK-V2.1的驅動是必不可少的
5）最好預裝 Visual Studio 2013（或VS的其他版本），后面的 TouchGFX Designer 進階文章中就要用到VS來添加、修改代碼了，VS是TouchGFX Designer 開發(fā)必備的IDE開發(fā)環(huán)境。本人安裝的是VS社區(qū)版，是可以免費下載、使用的：
