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

前言

本篇正式进入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软件

image-20210818103910363

import GUI 导入一个新的页面

image-20210818152705878

选择blank UI,选择空白界面

image-20210818152757226

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

image-20210818152837398

将图片导出

image-20210818152900797

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

image-20210818152933258

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

image-20210818115725100

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

image-20210818112804074

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

image-20210818113136129

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

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

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

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

它在按键按下时被调用

image-20210818115901964 image-20210818115923925

找到Screen1View.cpp和Screen1View.hpp

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

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

image-20210818155731232 image-20210818155657015

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

image-20210818160032208 image-20210818160203496

最后找到

image-20210818160310876 image-20210818160327098

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

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

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

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2021 张竞豪的小岛 All Rights Reserved.

UV : | PV :