前言

工程基礎：RT-Thread Studio TouchGFX驅動顯示屏（可以參考著構建本文所需工程，文末附代碼鏈接）
技術要點：TouchGFX MVP 架構、C++中呼叫C語言，
參考視頻：TouchGFX教程（強烈建議新手觀看，后半段有硬體雙向互動原理講解及演示）
參考博客：TouchGFX使用MVP架構來實作GUI和硬體的雙向互動（原理也可參考這里，本文不再復述）
實驗目的：

• 前一章已成功在7寸LCD上顯示影像，繼續加深對TouchGFX的學習，
• 單片機的圖形界面相比電腦上位機的優勢在于硬體資源豐富，硬體互動勢在必行，
• 在公司產品做長時間運行測驗時解放電腦，單片機采集到的資料實時決議處理并顯示，

一、創建/匯入工程

?創建/匯入工程二選一，目的是為了得到本次工程所需的基礎代碼，

(一)、新建工程

1、參考例子

使用RT-Thread Studio先創建出能正常顯示和觸摸的RT-Thread工程，可參考RT-Thread Studio TouchGFX驅動顯示屏，

2、工程效果

?隨便跑的一個例程代碼，加了個背景，

(二)、匯入工程

?若根據上述教程創建不出來，可以在本篇博客下方留言（都是小弟寫的），會第一時間回答疑問并修改完善博客，當然，如果只對硬體互動感興趣或其他原因也可以從這里下載我的代碼快速上手，

1、先把下載的壓縮包解壓，

2、匯入設定

?打開RT-Thread Studio后點擊左上角的檔案、匯入打開匯入界面，選擇RT-Thread檔案夾下的RT-Thread Studio專案到作業空間中，

3、選擇工程匯入

?點擊右上角的瀏覽切換到解壓檔案所在的目錄下點擊確定，其他配置不需要改動，

4、編譯下載

?成功匯入工程后，選中工程點擊編譯和下載即可，如果你用的螢屏尺寸和我的不同，請注意修改螢屏尺寸引數（之前的博客有交代），

二、開發板 --> 顯示屏

1、程序說明

?如圖所示，當開發板的按鍵被按下時，通過Model檔案下的void Model::tick()函式獲取到按鍵的事件，該函式在每一幀影像渲染前都會執行一遍；獲取到事件之后需要通過MainPresenter.hpp和MainPresenter.cpp中自定義的虛函式將資料傳到MainView.cpp和MainView.hpp的自定義函式中完成最終的顯示，

2、按鈕硬體

?用戶按鈕PH4，

?當用戶按鍵按下時PH4為低電平，彈起時為高電平，

3、注冊按鈕

?工程是在art_pi_blink_led基礎上建立的，所以有LED燈的閃爍控制代碼，

?修改代碼，驗證按鍵是否能被正常捕獲，（當按鍵按下LED燈亮，反之滅）

4、修改螢屏

?打開TouchGFX工程，點擊添加一個圓控制元件（Circle）并通過右側的Color將控制元件改成其他顏色，

?至此螢屏顯示界面的修改完成，

5、Model.cpp

?Model.cpp所在目錄:

?該目錄下的Model::tick()函式在螢屏每次渲染顯示前都會先執行一次，因此可以在這里實作按鍵的掃描，（之前main函式中的按鍵掃描測驗可以刪了）

?修改后的代碼：

• SIMULATOR：TouchGFX Designer模擬仿真時會定義該宏，使用該宏可以在模擬時將我們引入的函式屏蔽掉，避免無法仿真，
• external “C”：C函式在C++檔案中被呼叫時需要以此宣告才能被正確編譯，其實這兩個頭檔案里面已經有此宣告了，
• Model::tick()邏輯：當按鍵被按下時，之前畫的綠色圓形將被取反（隱藏/顯示），
• toggleLed()：實作螢屏的控制函式，實際在MainPresenter.cpp中定義，
  

6、ModelListener.hpp

?ModelListener.hpp所在目錄:

?在ModelListener.hpp檔案內的public中toggleLed() 以虛函式的形式被定義， 以便在Model.cpp的tick()函式中被呼叫，因使用虛函式（virtual）定義，所以實際上toggleLed() 至此仍未被定義，

7、MainPresenter.hpp

?MainPresenter.hpp所在目錄:

?因為在ModelListener.hpp檔案中toggleLed()是以虛函式的方式被定義的，所以這里的宣告也要使用virtual進行修飾，值得注意的是這里有對ModelListener.hpp進行包含，

?因為使用了MainView& view，所以Presenter與View的連接可以通過“ view. ”的方式實作，從而在Presenter中呼叫View定義的函式，

8、MainPresenter.cpp

?MainPresenter.cpp所在目錄:

?重點來了，說了這么久終于真正地對toggleLed()函式進行定義了，之前提到Presenter相當于Model和View連接的橋梁，Presenter通過虛函式的形式實作對Model的連接，（tips：點擊函式左側的綠色箭頭可以快速跳轉至被呼叫的地方ModelListener.hpp）
?而Presenter與View的連接則通過“ view. ”的方式實作，

9、MainView.hpp

?MainView.hpp所在目錄:

?在MainPresenter.cpp中想要以“ view.toggleled()； ”的方式呼叫toggleled()先得在此檔案內對其進行宣告，

10、MainView.cpp

?MainView.cpp所在目錄:

?在此定義“ toggleled() ”函式實作控制元件的隱藏/顯示，

11、MainViewBase.cpp

?顯示屏的相關控制元件可以在這里找到，只能看，不要改里面的代碼！！！

12、結果驗證

?按下一次用戶按鍵，實作一次螢屏中圓控制元件顯示/隱藏的翻轉，

三、顯示屏 --> 開發板

1、程序說明

?和之前的開發板控制顯示屏相比，這是一個反向的控制程序，有了前面一些概念和實踐的鋪墊接下來就變得簡單多了，首先使用TouchGFX在顯示屏中添加一個按鈕，然后添加一個事件將其與所添加的按鍵關聯起來；當按下螢屏的按鍵，View中的函式被呼叫然后通過Presenter呼叫Model中我們添加的動作函式完成指定動作，

2、添加按鍵

3、系結按鍵

4、生成代碼

?在完成按鈕的添加及事件的系結后點擊右上角的生成代碼即可自動完成代碼的添加，之后來到MainViewBase.cpp檔案中即可看到新添加的按鍵回呼函式，（前面有每個檔案所在目錄的截圖，之后不再復述）

?MainViewBase.hpp亦可看到自動生成的虛函式，具體的函式名是在系結事件時所修改的，

5、MainView.hpp

?button()函式是當螢屏上的虛擬按鍵被按下時觸發的，但是我們不能在MainViewBase.cpp中去實作它，因此在MainView.hpp中以虛函式的方式進行宣告以便后面在MainView.cpp中定義，

6、MainView.cpp

?在此實作button()函式，而button()函式向前呼叫MainPresenter.cpp中的函式，

7、MainPresenter.cpp

?同理，定義一個中間函式讓MainView去呼叫，

8、MainPresenter.hpp

?老規矩，想要被呼叫得先宣告，

9、Model.cpp

?該檔案中的led函式每呼叫一次開發板上的LED燈就會實作一次翻轉，

10、Model.hpp

?老規矩，懂的都懂，

11、結果驗證

?點擊一次螢屏上的按鍵，開發板上的LED燈實作一次翻轉，（有了前面的開發板 -> 螢屏的理解，這一實踐視乎更容易理解了）代碼下載：art_pi_touchGFX硬體互動（不用積分！！！）

四、進階篇

?雖然單純點個燈也算是與硬體互動了，但是似乎有點太簡單了所以加上了顯示CUP使用率的顯示和頁面的切換，具體步驟就不再詳述了，有了之前的工程應該問題不大，
?現在好像上傳不了視頻，可在嗶哩嗶哩上看效果（小更改，連接LED的IO換到蜂鳴器了），代碼下載：art_pi_touchGFX硬體互動1.1

總結

?上一篇博客似乎反響不錯，所以花了一周的時間把硬體互動的整理了出來，雖然寫博客很耗時間，但是在表達的程序中能加深理解又能幫到其他人還是挺不錯的，
?下一步打算做個串口接收工具，能把串口接收到的資料實時通過EasyFlash保存到SD卡的同時也顯示在螢屏上，但對相關控制元件還不太熟悉，希望感興趣有想法的能留個言給點思路，