6.3.1学习DynamicGraph Example UI template

（1）打开touchGFX 4.18.1软件，选择“应用模板”“STM32F469I Discovery Kit”，选择UI TEMPLATE 为“DynamicGraph Example UI template”，新建工程。

（2）进入编辑界面，查看“DynamicGraph”UI模板，包含了四个主要控件：滚动工具条（sliderResolution）、动态图（graph）、动态图背景图片（graphBackground）、整体背景图（background），下面逐一说明。

1）滚动工具条（sliderResolution）

关于滚动工具条控件的具体说明，可以点击右上角“sliderResolution”左边的链接，可以通过在线文档，查看Slider滚动条控件的功能及使用方法。如下图所示：

从在线文档可得知，滚动条控件主要功能是：

“滚动条使用三个图像以垂直或水平方向显示滑块。可以拖动滚动条的指示器图像来修改回调函数的内部整数值。数值在整数范围内运行，例如0到100。”在线文档给出了该控件的动画演示，以及调用方法，在线文档如下图所示：

图 6-5滚动工具条的在线说明文档

在本示例中，这个水平的滚动条，用来调节图形纵向显示区域的大小。

2）动态图（graph）控件

这是本项目使用的主要控件，是touchGFX4.15及以上版本增加的新功能。该控件可以用动态图形方式，展示动态数据，类似示波器界面。点击该控件的在线文档，可以查看动态图控件的主要功能：

“TouchGFX中的DynamicGraph是一个小部件，它允许应用程序在单调的x轴上显示数据点。DynamicGraph支持三种类型的动态行为，它们定义了当图形在x轴上的空间用完时会发生什么。选择的动态行为也会极大地影响DynamicGraph的性能，因为选择的行为会影响插入数据点时需要重新绘制的区域。”。在线文档详细描述了该控件的主要功能及使用方法，还提供了动画演示，请读者自行查看。在线文档如下图所示：

图 6-7动态图在线文档界面

3）动态图背景（graphBackground）

该控件选用的是“BOX WITH BORDER”控件，可以选择box颜色、边界颜色等模式，可以通过鼠标可对graphBackground拖拉拽，调整大小和位置。

4）整体背景（background）

这是该模板的背景图，读者可以自行更改合适的背景图，使得背景图的分辨率与开发板适配（800*480）。调整sliderResolution、graph和graphBackground控件大小和位置，使显示的内容和显示器适配：

图 6-8调整后的动态图界面

（3）生成MDK工程代码，并编译下载。

1）点击软件右下角的“Generate Code”，生成代码。

2）点击左下角“Files”，进入代码文件夹，并返回上一级目录，使用cubeMX6.40打开生成的“STM32F469I_DISCO”工程。

3）在“Projec Manager”工具栏选择“MDK-ARM”工具,点击“GENERATE CODE”,生成MDK工程。

4）touchGFX软件会弹出是否重载代码的对话框，选择“Yes”，然后点击右下角的“Generate Code”，重新生成代码。

5）使用MDK打开生成的工程，并编译，使用st-link下载生成的HEX文件，如下图所示：

图 6-9 动态图下载效果

读者可以发现，在触摸屏中，出现了一个正弦波图形（不规范），并不断更新，调节右边的“sliderResolution”控件，可以调节正弦波纵轴的上限的大小。

（4）程序分析

本程序主要在MainView.cpp中，产生了一个正弦波，并在正弦曲线上添加了一些随机的点，并使用DynamicGraph控件显示这个正弦波。打开MainView.cpp，如下图所示：

图 6-10 使用 MDK打开MainView.cpp文件

通过阅读代码，我们发现，主要有randomish(int32_t )、handleTickEvent()、sliderValueChanged(int )函数来实现功能。

1）randomish(int32_t )作用是产生一个随机数。

2）handleTickEvent()是定时随屏幕刷新执行，定期在正弦波上增加数据点。代码注释如下：

void MainView::handleTickEvent()

{

    tickCounter++;//每个屏幕刷新周期计数器加一

    // Insert each second tick

    if (tickCounter % 2 == 0)//每两个屏幕刷新周期执行一次

    {

//取得当前graph对象的y轴的最大显示范围

    float yMax = graph.getGraphRangeYMaxAsFloat();

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

        }

}

graph.addDataPoint（）函数每次给graph对象增加一个数据点，数据主要来自于正弦波sinf函数，并加上了随机函数randomish产生的随机值；所以曲线并非标准正弦波。查看“动态图（DynamicGraph）控件”在线文档，或者touchgfx的数据手册“touchgfx-documentation”1398页，了解graph.addDataPoint函数的介绍：“int16_t addDataPoint(int y)  Adds a new data point to the end of the graph.”

该函数作用是在graph的结尾增加一个新的数据点，它是继承自 AbstractDataGraphWithY类的公有函数。详细说明参见在线文档或数据手册1397-1398页。

3）MainView::sliderValueChanged(int value)的作用是，当用户滑动sliderResolution滚动条的时候，触发的消息响应函数，作用是调节正弦波纵轴的上限的大小，返回值为滚动条的值，在touchGFX中可以查看该交互。消息响应函数中涉及到的动态图设置的相关函数，读者可以查看数据手册或在线文档详细了解。

图 6-11 滚动条触发的交互响应函数