【STM32H750B-DK评测】电机转速检测UI

2018年秋季，STM32正式收购了TouchGFX -- 嵌入式GUI界面中间件软件领先的开发商。从此广大嵌入式工程师拥有了优质的免费的正式版TouchGFX ，用过TouchGFX的都知道，TouchGFX在MCU系统上运行的界面非常炫，堪比手机的APP界面，可以直接在TouchGFX拖拽式开发UI界面，且可以直接用模拟器查看显示效果，不用每次调试必须烧录到MCU，所见即所得，同时ST收购后直接嵌入开发板例程，用户购买开发板后直接便可以进行UI开发，方便快捷。

TouchGFX是一款免费的GUI工具，可以在STM32上运行。在您的产品中包含GUI（图形用户界面）将有助于您设计对用户更友好、更安全、更现代化的设备。STM32系列提供在嵌入式设备中添加类似智能手机的图形用户界面（GUI）所需的工具，加速了 “HMI of Things” 革命。

TouchGFX框架的架构允许仅使用一个帧缓冲区在内部存储器上运行，即使使用全屏动画和智能效果，仍然可以获得高帧速率。

当设备仅使用一个帧缓冲区时，重要的是图形框架不能在TFT控制器将像素输出到屏幕的同时绘制新图像到帧缓冲区。否则，结果将是旧帧和新帧的混合（图像撕裂）。

TouchGFX通过增量算法来控制帧缓冲区的使用，该算法可以与输出像素的TFT控制器同时更新帧缓冲，但总是只更新TFT控制器已传输的像素。

TouchGFX负责所有这一切，允许应用程序员专注于实现设计，实现高达60 Hz帧率的平滑动画。

开发环境：

如果只关注GUI的开发，不进行MCU开发，在使用开发板的情况下只需要使用如下两个软件：

TouchGFX Designer：TouchGFX Designer是GUI的集成开发环境，所有与界面布局有关的工具都整合到了一起。

TouchGFX Designer软件可直接在ST官网获取，目前最新版本是4.20.0，本人使用4.20.0不好用，很容易报错，不知道为啥，于是回退到了4.19.1。

下载完成后是一个集合包，其中包含一个完整的例程和TouchGFX Designer的安装软件，然后在这个路径下双击安装程序，一步步傻瓜安装便可。

Microsoft Visual Studio:VS是美国微软公司的开发工具包系列产品。VS是一个基本完整的开发工具集，它包括了整个软件生命周期中所需要的大部分工具，如UML工具、代码管控工具、集成开发环境(IDE)等等。直接跳转官网下载免费版，无需激活。

开始第一个例程

打开TouchGFX Designer软件，依次点击左边菜单栏：Examples->Select Board Setup。

选择对应开发板后可看到ST提供的各种例程，便可快速搭建一个基础例程。

动手开发：

整个系统分为两个页面：

开始页面：上电加载初始画面，点击画面切换到电机转速页面。

速度检测页面：以折线图的形式显示实时的电机旋转速度，当一页显示完清屏显示下一屏数据。

开始页面：

新建一个Screen,开机需要一张图片全屏显示，先找一张.PNG图片，将分辨率改为屏幕分辨率480*272。并将图片放在项目目录：TouchGFX->assets->images下。此时在TouchGFX Designer软件中便会自动加载进来。

选择添加图片，将图片框放大到整个页面大小，选择需要的图片。

为了配合开机页面的效果，在图片中的齿轮中心添加一个按钮，并将按钮的透明度调到最低，这样再画面中按钮相当于隐藏起来，再给按键加一个交互事件，使之可以点击跳转下一个页面。

594463578cb112888.png (40.43 KB )

下载附件

2022-10-25 15:13 上传

电机旋转速度检测页面：

该页面由官方例程修改而来，进行了一定的美化，并将图表类型进行更改，使之显示完一屏之后进行清屏，便于显示下一页数据。上方有一个进度条，用于显示进度，该精度条用于后续扩展编码器校正用。

页面部分基本都是拖拽并设置参数，不做赘述，如果想要进行数据的显示以及按键的响应则需要进行底层的代码编写。在设计完页面效果及响应属性后点击右下角Generate Code按钮生成代码，然后点击左下角的File打开工程文件夹，在该文件路径下使用Visual Studio打开.sln文件

2698363578ee524060.png (17.17 KB )

下载附件

2022-10-25 15:23 上传

在Scree1View.cpp文件中编写页面中按键按下后需要响应的函数：

下面要在 Screen1ViewBase 类的子类 Screen1View 中添加按钮响应函数的声明和函数体：

然后编写实际的函数实现，因为此处需要实际的转速，该部分需要MCU提供，因为开发板不好外接电机输入，此处采用随机数转化为速度值显示。

int point = 2900;



static uint16_t randomish(int32_t seed)

{

    static uint16_t last = 0;

    const uint16_t num = (seed * (1337 + last)) % 0xFFFF;

    last = num;

    return num;

}



Screen1View::Screen1View()

{

    tickCounter = 0;

  /*  staticGraph.setTouchable(true);*/

    dynamicGraph1.setTouchable(true);

}



void Screen1View::setupScreen()

{

    Screen1ViewBase::setupScreen();

}



void Screen1View::tearDownScreen()

{

    Screen1ViewBase::tearDownScreen();

}



void Screen1View::addRandomPoint()

{

    int xIntervalSize = dynamicGraph1.getGraphRangeXMaxAsInt() - dynamicGraph1.getGraphRangeXMinAsInt();

    int yIntervalSize = dynamicGraph1.getGraphRangeYMaxAsInt() - dynamicGraph1.getGraphRangeYMinAsInt();

    if (point == 3101)

    {

        point = 2900;

        dynamicGraph1.clear();

    }

    //int randomX = (randomish(tickCounter) % xIntervalSize) + staticGraph.getGraphRangeXMinAsInt();

    int randomX = point++;

    int randomY = (randomish(tickCounter) % yIntervalSize) + dynamicGraph1.getGraphRangeYMinAsInt();



    dynamicGraph1.addDataPoint(randomY);

    boxProgress1.setValue((point-2900)/2);

    /*staticGraph.addDataPoint(randomX, randomY);*/



    // Update Text with inserted point

    Unicode::snprintf(insertedPointTextBuffer, INSERTEDPOINTTEXT_SIZE, "(%i, %i)", randomX, randomY);

    insertedPointText.invalidate();

}



void Screen1View::clearGraph()

{

   /* staticGraph.clear();*/

    dynamicGraph1.clear();

}



void Screen1View::handleTickEvent()

{

    if (tickCounter++ % 2 == 0 && autoModeButton.getState())

    {

        addRandomPoint();

    }

实际显示效果如下。