6.3.1學(xué)習(xí)DynamicGraph Example UI template

（1）打開(kāi)touchGFX 4.18.1軟件，選擇“應(yīng)用模板”“STM32F469I Discovery Kit”，選擇UI TEMPLATE 為“DynamicGraph Example UI template”，新建工程。

（2）進(jìn)入編輯界面，查看“DynamicGraph”UI模板，包含了四個(gè)主要控件：滾動(dòng)工具條（sliderResolution）、動(dòng)態(tài)圖（graph）、動(dòng)態(tài)圖背景圖片（graphBackground）、整體背景圖（background），下面逐一說(shuō)明。

1）滾動(dòng)工具條（sliderResolution）

關(guān)于滾動(dòng)工具條控件的具體說(shuō)明，可以點(diǎn)擊右上角“sliderResolution”左邊的鏈接，可以通過(guò)在線文檔，查看Slider滾動(dòng)條控件的功能及使用方法。如下圖所示：

從在線文檔可得知，滾動(dòng)條控件主要功能是：

“滾動(dòng)條使用三個(gè)圖像以垂直或水平方向顯示滑塊?？梢酝蟿?dòng)滾動(dòng)條的指示器圖像來(lái)修改回調(diào)函數(shù)的內(nèi)部整數(shù)值。數(shù)值在整數(shù)范圍內(nèi)運(yùn)行，例如0到100。”在線文檔給出了該控件的動(dòng)畫(huà)演示，以及調(diào)用方法，在線文檔如下圖所示：

圖 6-5滾動(dòng)工具條的在線說(shuō)明文檔

在本示例中，這個(gè)水平的滾動(dòng)條，用來(lái)調(diào)節(jié)圖形縱向顯示區(qū)域的大小。

2）動(dòng)態(tài)圖（graph）控件

這是本項(xiàng)目使用的主要控件，是touchGFX4.15及以上版本增加的新功能。該控件可以用動(dòng)態(tài)圖形方式，展示動(dòng)態(tài)數(shù)據(jù)，類似示波器界面。點(diǎn)擊該控件的在線文檔，可以查看動(dòng)態(tài)圖控件的主要功能：

“TouchGFX中的DynamicGraph是一個(gè)小部件，它允許應(yīng)用程序在單調(diào)的x軸上顯示數(shù)據(jù)點(diǎn)。DynamicGraph支持三種類型的動(dòng)態(tài)行為，它們定義了當(dāng)圖形在x軸上的空間用完時(shí)會(huì)發(fā)生什么。選擇的動(dòng)態(tài)行為也會(huì)極大地影響DynamicGraph的性能，因?yàn)檫x擇的行為會(huì)影響插入數(shù)據(jù)點(diǎn)時(shí)需要重新繪制的區(qū)域?！?。在線文檔詳細(xì)描述了該控件的主要功能及使用方法，還提供了動(dòng)畫(huà)演示，請(qǐng)讀者自行查看。在線文檔如下圖所示：

圖 6-7動(dòng)態(tài)圖在線文檔界面

3）動(dòng)態(tài)圖背景（graphBackground）

該控件選用的是“BOX WITH BORDER”控件，可以選擇box顏色、邊界顏色等模式，可以通過(guò)鼠標(biāo)可對(duì)graphBackground拖拉拽，調(diào)整大小和位置。

4）整體背景（background）

這是該模板的背景圖，讀者可以自行更改合適的背景圖，使得背景圖的分辨率與開(kāi)發(fā)板適配（800*480）。調(diào)整sliderResolution、graph和graphBackground控件大小和位置，使顯示的內(nèi)容和顯示器適配：

圖?6-8調(diào)整后的動(dòng)態(tài)圖界面

（3）生成MDK工程代碼，并編譯下載。

1）點(diǎn)擊軟件右下角的“Generate Code”，生成代碼。

2）點(diǎn)擊左下角“Files”，進(jìn)入代碼文件夾，并返回上一級(jí)目錄，使用cubeMX6.40打開(kāi)生成的“STM32F469I_DISCO”工程。

3）在“Projec Manager”工具欄選擇“MDK-ARM”工具,點(diǎn)擊“GENERATE CODE”,生成MDK工程。

4）touchGFX軟件會(huì)彈出是否重載代碼的對(duì)話框，選擇“Yes”，然后點(diǎn)擊右下角的“Generate Code”，重新生成代碼。

5）使用MDK打開(kāi)生成的工程，并編譯，使用st-link下載生成的HEX文件，如下圖所示：

圖 6-9 動(dòng)態(tài)圖下載效果

讀者可以發(fā)現(xiàn)，在觸摸屏中，出現(xiàn)了一個(gè)正弦波圖形（不規(guī)范），并不斷更新，調(diào)節(jié)右邊的“sliderResolution”控件，可以調(diào)節(jié)正弦波縱軸的上限的大小。

（4）程序分析

本程序主要在MainView.cpp中，產(chǎn)生了一個(gè)正弦波，并在正弦曲線上添加了一些隨機(jī)的點(diǎn)，并使用DynamicGraph控件顯示這個(gè)正弦波。打開(kāi)MainView.cpp，如下圖所示：

圖 6-10 使用 MDK打開(kāi)MainView.cpp文件

通過(guò)閱讀代碼，我們發(fā)現(xiàn)，主要有randomish(int32_t )、handleTickEvent()、sliderValueChanged(int )函數(shù)來(lái)實(shí)現(xiàn)功能。

1）randomish(int32_t )作用是產(chǎn)生一個(gè)隨機(jī)數(shù)。

2）handleTickEvent()是定時(shí)隨屏幕刷新執(zhí)行，定期在正弦波上增加數(shù)據(jù)點(diǎn)。代碼注釋如下：

void MainView::handleTickEvent()

{

????tickCounter++;//每個(gè)屏幕刷新周期計(jì)數(shù)器加一

????// Insert each second tick

????if (tickCounter % 2 == 0)//每?jī)蓚€(gè)屏幕刷新周期執(zhí)行一次

????{

//取得當(dāng)前graph對(duì)象的y軸的最大顯示范圍

????float yMax = graph.getGraphRangeYMaxAsFloat();

?graph.addDataPoint((int)((sinf(tickCounter * .02f) + 1) * (yMax / 2.2f)) + randomish(tickCounter) % (int)(yMax / 10.f));

????????}

}

graph.addDataPoint（）函數(shù)每次給graph對(duì)象增加一個(gè)數(shù)據(jù)點(diǎn)，數(shù)據(jù)主要來(lái)自于正弦波sinf函數(shù)，并加上了隨機(jī)函數(shù)randomish產(chǎn)生的隨機(jī)值；所以曲線并非標(biāo)準(zhǔn)正弦波。查看“動(dòng)態(tài)圖（DynamicGraph）控件”在線文檔，或者touchgfx的數(shù)據(jù)手冊(cè)“touchgfx-documentation”1398頁(yè)，了解graph.addDataPoint函數(shù)的介紹：“int16_t addDataPoint(int y) ?Adds a new data point to the end of the graph.”

該函數(shù)作用是在graph的結(jié)尾增加一個(gè)新的數(shù)據(jù)點(diǎn)，它是繼承自 AbstractDataGraphWithY類的公有函數(shù)。詳細(xì)說(shuō)明參見(jiàn)在線文檔或數(shù)據(jù)手冊(cè)1397-1398頁(yè)。

3）MainView::sliderValueChanged(int value)的作用是，當(dāng)用戶滑動(dòng)sliderResolution滾動(dòng)條的時(shí)候，觸發(fā)的消息響應(yīng)函數(shù)，作用是調(diào)節(jié)正弦波縱軸的上限的大小，返回值為滾動(dòng)條的值，在touchGFX中可以查看該交互。消息響應(yīng)函數(shù)中涉及到的動(dòng)態(tài)圖設(shè)置的相關(guān)函數(shù)，讀者可以查看數(shù)據(jù)手冊(cè)或在線文檔詳細(xì)了解。

圖 6-11 滾動(dòng)條觸發(fā)的交互響應(yīng)函數(shù)