[GUI]

【STM32H750B-DK评测】炫酷丝滑,电机控制GUI (STM32 TouchGFX)

[复制链接]
1127|17
手机看帖
扫描二维码
随时随地手机跟帖
moticsoft|  楼主 | 2022-9-8 08:45 | 显示全部楼层 |阅读模式
本帖最后由 moticsoft 于 2022-9-10 09:01 编辑

封面2.jpg

模拟器效果看这里 https://bbs.21ic.com/forum.php?mod=viewthread&tid=3251720&page=1&extra=#pid12993350

【STM32H750B-DK评测】电机控制节点维护设备设计实现

1. 项目介绍

  参加二姨家的STM32H750B-DK评测活动,刚好也有点想法,就利用二姨家提供的开发板做一个前期验证项目。验证项目是做一个手持的电机运动节点维护设备,方便携带到现场对电机进行维护,这里暂且称为PAD。(最下方有实物演示视频)
PAD通过UART与电机控制节点连接通讯(如下图所示),当检测到设备接入,PAD获取其设备信息状态,包括固件版本、PCB版本、运行日志等。通过PAD还可以控制电机做一些简单的运动测试,配置电机的运动参数,如加速度、速度、电流等。由于时间有限,目前仅实现上述功能。

框图.png

2. 开发板STM32H750B-DK

开发板资源丰富,这里不在累述,本项目比较关注的资源情况:
  • Arm® Cortex®-M7 内核(带双精度浮点单元),400MHz主频
  • 4.3英寸RGB LCD,电容屏
  • 外扩2 x 512Mbit Flash
  • 128 Mbit SDRAM
  • UART接口
  • Chrom-ART图形加速

3. 设计工具

  • STM32CubeMX
  • STM32CubeIDE 1.9.0
  • TouchGFX Designer V4.20
touchgfx.png

项目中用到的TouchGFX资源
1)控件(Widget)
  • Box
  • Button
  • Image
  • Slider
  • Static Graph
  • Swipe Container
  • Text Area
  • Texture Mapper
2)实现UI动效使用到的TouchGFX内置的交互动作(Interactions Action)
  • Call new virtual function
  • Change screen
  • Move Widget
  • Fade Widget
  • Wait for

4. 界面设计

  不会UI设计的电子工程师不是好厨师,所以这一次亲自操刀设计,大家看的时候喷轻一点。。。整体设计风格采用我喜欢的“毛玻璃效果”,之前也做过类似的尝试,发过视频,这次用上喽。TouchGFX Designer的模拟器非常实用,大大提高了调试效率,以下图片均来自模拟器的截图。实际上,模拟器的显示效果与直接目视比较接近,视频拍出来的效果比实际差了不少,屏幕颜色不对,还有条纹。。。截图只能看静态效果,动态效果请大家移步到下方视频演示观看。
目前实现了5个界面:开机、连接、功能选择、信息显示、电机控制。

4.1. 开机动画

图片1.png

4.2. 连接界面
图片2.png

4.3. 功能选择界面

图片3.png

4.4. 信息显示界面

图片4.png

图片5.png


图片6.png

图片7.png

这个二维码是本人的主页,主要是些GUI相关的内容,欢迎关注浏览。
图片8.png

4.5. 电机控制界面

图片9.png

图片10.png

图片11.png

图片12.png

5. 硬件交互

  使用TouchGFXMVP框架实现GUI与硬件的双向交互。MVP的全称为Model-View-PresenterModel提供数据,View负责显示,Controller/Presenter负责逻辑的处理。在本项目中主要是检测用户在触摸屏上的操作,转换成相应的UART命令发送至外部电机控制板;当外部电机控制板的状态发生变化时,也会主动发送数据到开发板,此时GUI负责刷新界面显示的相关内容。
       MVP框架应该是TouchGFX中不易掌握的部分,UI怎么和硬件交互?这个是根本,每个项目都会涉及到。这里以本项目中的UART为例说明一下,如何通过操作屏幕上的按钮来控制UART发送数据。

图片13.png

   以上述界面截图中的STOP按钮为例。在TouchGFX Designer中,我们给Screen1添加STOP按钮,命名为con_stop(很多资料中介绍了这些基本操作,这里不再累述),我们要实现通过电击此按钮向UART发送数据。
   在界面右侧的Interactions中添加con_stop按钮的点击事件。如图上所示,触发条件为按钮点击(序号1);触发源选择为con_stop按钮(序号2);触发执行的动作为调用一个虚函数,虚函数的名称我们设定为con_stop_clicked(序号3)。然后按下F4执行Generate Code生成代码。TouchGFX Designer会自动生成这个函数的定义,在STM32cubeIDE中查看Screen1VeiwBase.hpp文件,可以看到此虚函数的声明:
  virtual void con_stop_clicked()   { }

1)手动在Screen1View.hpp文件中给Screen1View类添加此虚函数:
  virtual void con_stop_clicked();

手动在Screen1View.cpp中添加此虚函数的实现部分:
   voidScreen1lView::con_stop_clicked()
  {
        presenter->con_stop_clicked();
  }
  上面这个函数调用了presenter中的con_stop_clicked()函数(函数名可以自己定),实际上这个函数我们还没有实现,接下来给presenter添加这个函数。

2)手动在Screen1Persenter.hpp中,给Screen1Persenter类中添加函数con_stop_clicked:
   virtual void con_stop_clicked();

  手动在Screen1Persenter.cpp中添加这个函的实现:
   void Screen1Presenter::con_stop_clicked()
   {
    model->con_stop_clicked();
   }

3)上面这个函数调用了model中的函数con_stop_clicked(这个函数名也可以自己定),好吧实际上这个函数我们也还没实现,接下来继续。
手动在model.hpp文件中给Model类添加这个函数:
  void con_stop_clicked();

手动在model.cpp中添加上面函数的实现部分。
   void Model::con_stop_clicked()
   {
    uart_send_cmd_stop();
   }
  uart_send_cmd_stop()函数上就是发送UART数据的部分了,通常情况下是在uart.c中实现的,内容类似下面这个,有没有感到亲切感回来了:)
  HAL_UART_Transmit(&huart1, (const uint8_t*) str, len, 1000);

model.cpp中我们把uart_send_cmd_stop()这个函数作为外部函数引入:
   extern "C"
   {
      extern void uart_send_cmd_stop();
   }
   #endif

  实际上这里偷懒了。项目中使用了FreeRTOS,有一个Uart_Task任务,负责UART的数据收发处理。在多任务的情况下,多个任务涉及同一个硬件应该确保互斥访问。所以这里应该使用信号量,改变信号量的状态来通知Uart_Task任务实际发送数据到UART
  一波操作下来, View  --->  Presenter  --->  Model  --->  UART,千山万水有点麻烦,不过MVP的优点还是很多的,想要了解更多大家可以问问度娘:)

6. 总结
  
  之前一直用LVGL,做过一些项目,也算是比较熟悉了。最近半年才开始使用 TouchGFX。一番体验下来不得不说,在 STM32上做 GUI 应用 TouchGFX 确实很有优势,毕竟是 ST 亲儿子,先天优势,生态全、控件多,实现各种炫酷效果不在话下。最方便的是几乎不需要怎么优化,不用操心什么 DMA2D、LDTC……,底层ST都帮你搞好了,跑起来效果就已经非常流畅。ST 新出的 NeoChrom GPU 看介绍更牛X,有机会到要试试到底有多牛:)
光说不练不行,下方有视频演示,时长四分多,敬请观看,欢迎灌水。。




使用特权

评论回复
belindagraham| | 2022-11-19 12:26 | 显示全部楼层
这个板子可以跑lvgl的gui吗?

使用特权

评论回复
kmzuaz| | 2022-11-20 13:10 | 显示全部楼层
STM32H750B性能真给力,如此流畅呢。

使用特权

评论回复
sdlls| | 2022-11-20 16:28 | 显示全部楼层
这个的控制接口做的非常棒呢。              

使用特权

评论回复
modesty3jonah| | 2022-11-20 17:07 | 显示全部楼层
是不是可以通过电脑设计好gui,然后导入gui呢?

使用特权

评论回复
moticsoft|  楼主 | 2022-11-21 17:40 | 显示全部楼层
modesty3jonah 发表于 2022-11-20 17:07
是不是可以通过电脑设计好gui,然后导入gui呢?

现在貌似还没有从其他ui设计软件直接导入到TouchGFX的功能,不过目前这种方式已经非常方便了,效率挺高。

使用特权

评论回复
moticsoft|  楼主 | 2022-11-21 17:42 | 显示全部楼层
belindagraham 发表于 2022-11-19 12:26
这个板子可以跑lvgl的gui吗?

看来很关注LVGL啊,应该大多数的MCU都是可以跑LVGL的,H750肯定也在其中

使用特权

评论回复
hilahope| | 2022-11-23 22:21 | 显示全部楼层
这个是怎么实现gui和参数交互的呢?

使用特权

评论回复
漫过岁月| | 2022-11-25 20:40 | 显示全部楼层
还得GUI啊,这种GUI真的效果很好

使用特权

评论回复
属实使用STM32 TouchGFX效果好很多,我之前用过,真的很好

使用特权

评论回复
岁月反驳| | 2022-11-25 21:44 | 显示全部楼层
H7跑TouchGFX一点儿都不费劲吧

使用特权

评论回复
討厭和人归類| | 2022-11-25 22:16 | 显示全部楼层
电机+GUI,真的很高大上呀

使用特权

评论回复
地下縱情搖擺| | 2022-11-25 22:48 | 显示全部楼层
还好使用TouchGFXST上可以免费,不然都不敢用呢

使用特权

评论回复
热爱童话世界| | 2022-11-25 23:20 | 显示全部楼层
话说,TouchGFX是不是比lvgl好用啊?

使用特权

评论回复
林间有新绿| | 2022-11-25 23:52 | 显示全部楼层
还得是TouchGFX的模拟器,这个模拟器是可以直接生成代码的吧

使用特权

评论回复
銀河| | 2022-11-26 00:24 | 显示全部楼层
电机控制真的很麻烦的,要有算法才能控制好电机

使用特权

评论回复
偷吻月亮| | 2022-11-26 00:56 | 显示全部楼层
其实lvgl算是轻量级的,感觉TouchGFX效果会更炫酷

使用特权

评论回复
必然有优势,而且TouchGFX还被ST收购了,更强了

使用特权

评论回复
发新帖 我要提问
您需要登录后才可以回帖 登录 | 注册

本版积分规则