RT-Thread ART-PI 学习笔记：TouchGFX 屏幕按钮控件控制LED亮灭

Posted 2022-12-01 张竞豪

前言

本篇正式进入touchgfx的学习.通过在屏幕上创建一个按钮控件，控制板子上LED灯的亮灭，熟悉touchgfx的MVP(model-view-presenter)框架。本文主要是实践内容，MVP框架的原理只做大概说明，详细原理见相关参考链接。

参考链接

https://support.touchgfx.com/4.16/docs/basic-concepts/rendering

上面链接是官方文档，也是之后touchgfx的主要参考资料

15.RT-thread项目实战–TouchGFx控制LED亮灭及图标切换

TouchGFX使用心得（2）—Touchgfx 代码组织结构

13RT-thread项目实战–TouchGFx页面布局

使用TouchGFX开发STM32界面应用之入门篇（三）-- 多屏呈现与MVP框架(1)

上面一篇有对MVP的讲解可以借鉴，另外touchgfx涉及到了一些c++的知识，需要对c++有基础的了解，同时要知道如何在c++中调用c

代码下载

本文演示代码

前期准备

软件准备

• RT-Thread Studio 2.1.1：一站式的 RT-Thread 开发工具，通过简单易用的图形化配置系统以及丰富的软件包和组件资源，让物联网开发变得简单和高效。官网链接
• touchgfx designer 4.16：touchgfx 界面设计工具，去官网上下载就可以了,版本不能低于4.15 官网链接
• PS：用于图片裁剪

硬件准备

• RT-Thread 推出的ART-PI STM32H750开发板
• 正点原子 800*480 4.3寸 RGBLCD屏，搭载GT9147触摸芯片

在进行本篇操作之前必须配置文件系统，wifi功能和ftp服务器，并且使能touchgfx库，这几个操作在我之前的学习笔记中都有讲

同时我使用1.10版本的BSP

配置步骤

打开之前配置好touchgfx的工程，点击art_pi.touchgfx进入touchgfx designer软件

import GUI 导入一个新的页面

选择blank UI，选择空白界面

网上找一张图片，可以不用必须是800x480的，导入PS中，用图像大小设置，将其设置为800x480

将图片导出

将导出的图片添加进touchgfx工程中

将导出的图片作为背景图片，同时新建一个按钮，在软件右侧新建一个interactions,创建一个按键点击时的回调函数

点击generate code,并回到rtt studio中，刷新touchgfx中的文件

刷新后别忘了更新软件包，不然编译会报错

别忘了更新软件包，不然编译会报错

下面就开始改界面代码层面的逻辑，在改之前简单介绍下MVP框架

• View层负责界面的显示，和界面显示效果的切换
• Model层负责操作底层硬件
• Presenter负责沟通两者，并负责逻辑部分。沟通体现在View接收到用户的输入信息后，不直接调用硬件，而是上报给Presenter，Presenter通知Model，Model最终完成硬件的处理。而View要获得传感器数据等信息，也是通过Presenter来调用Model读取硬件相关信息。而Presenter负责逻辑部分，可以在改变视图的同时不改变逻辑，并且便于测试

首先找到Screen1ViewBase.cpp和Screen1ViewBase.hpp 这个是View的基类，可以发现里面有我们设计界面时定义的toggleLED();函数

它在按键按下时被调用

找到Screen1View.cpp和Screen1View.hpp

在这里我们定义toggleLED();这个函数，在函数体里调用了 presenter->setLED(toggleButton2.getState());

相当于把状态上报给了Presenter，让Presenter调用setLED函数进行处理

而在presenter->setLED里，因为是涉及到硬件的操作，于是调用model的相关函数

最后找到

发现最后是model调用了底层硬件

这样逻辑就很清楚了，整个MVP架构，调用硬件的顺序就是

view->toggleLED ==> presenter->setLED ==> model->userSetLED