stm32基于TouchGFX的GUI开发（一）：创建第一个你自己的应用程序

最新推荐文章于 2024-04-29 11:02:49 发布
最新推荐文章于 2024-04-29 11:02:49 发布
阅读量9k 收藏 84
点赞数 31
分类专栏： TouchGFX 文章标签： c++ stm32 单片机 gui c语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014627020/article/details/109837567
版权

-----stm32基于TouchGFX的GUI开发-----

先上最终效果图：

在这里插入图片描述

本章我们将介绍创建基于stm32的TouchGfx应用。第一步将介绍如何安装stm32Cubemx和TouchGfx。笔者试用了stm32CubeIDE，其集成了stm32Cubemx，类似于Eclipse开发环境，功能及其强大，但是因为是新的开发环境，会有一些bug，对中文的支持也不友好。之前在做IPS显示的时候就因为keil5和CubeIDE中文编码的问题导致显示有问题，所以暂时还是不打算用IDE。有需要的可以下载安装。stm32CubeMx需要安装java运行环境JRE，记住JRE版本一定不要安装太高，会导致Cubemx运行不起来。
1、stm32CubeMx下载地址
2、Java运行环境JRE下载地址
3、stm32CubeIDE下载地址
4、stm32CubeIDE代码自动补全插件网盘链接 提取码:v2zc（下载后如何安装自动补全Jar包参考这篇文章）
5、VisualStudio2015破解版下载地址提取码:jufa。touchGFX会生成visualStudio仿真工程可以直接运行
6、VisualStudio2017安装包下载地址提取码:tiyq。touchGFX会生成visualStudio仿真工程可以直接运行
总结：
7、本例程所用图片素材单击直接下载地址

提示：下载完成后，安装步骤可自行搜索，很简单的，不需要什么特别的操作基本上就是一路next。CubeMx和CUbeIDE都安装在一台电脑里。而且CubeIDE生成的工程里也会生成CubeMx的工程。

文章目录

前言

本章我们将介绍创建基于stm32的TouchGfx应用，会手把手教你创建一个GUI实例。

提示：以下是本篇文章正文内容，下面案例可供参考

一、TouchGFX安装

1.从stm32Cubemx下载TouchGFX

在这里插入图片描述

2.找到下载路径

这个路径是可以更改的，默认在C盘。

在stm32Cubemx的上方工具栏里依次选择Help->Updater settings(快捷键Alt+S)
找到touchGFX的下载目录。

在这里插入图片描述

3.为MDK5安装touchGFX插件

找到MDK5的TouchGFX安装包位置,具体位置在第2步的Packs文件夹下。
...\Packs\STMicroelectronics\X-CUBE-TOUCHGFX\4.15.0\
STMicroelectronics.X-CUBE-TOUCHGFX.4.15.0.exe

在这里插入图片描述

安装完成后可以在 keil5的Pack Installer里看到已经安装好了。

在这里插入图片描述

4.安装touchGFX

安装包目录：...\Packs\STMicroelectronics\X-CUBE-TOUCHGFX\
4.15.0\Utilities\PC_Software\TouchGFXDesigner\TouchGFX-4.15.0.exe。
也是在第2步的下载目录下。

在这里插入图片描述
至此，安装工作已经完成。

二、创建第一个示例工程

1.创建工程

创建工程，选择Blank UI，并设置你需要的屏幕大小。这里屏幕设置为480*272

在这里插入图片描述

2.添加背景

1、TouchGFX 应用程序由多个屏幕组成。屏幕包含许多组成用户界面的小部件。
屏幕覆盖整个显示器，因此一次只向用户显示一个屏幕。要做的第一件事是
将初始屏幕的名称更改为Main，如下图所示。这样做的目的是以后有多屏幕
应用的时候可以很好区分，对于程序维护和开发来说非常适合。
2、通常，用Box或Image给屏幕添加一个背景。此例子中，我们将使用
Image给屏幕添加一个背景。TouchGFX支持BMP和PNG，尽量使用PNG，
因为PNG更小而且支持透明度

在这里插入图片描述

工具栏左侧点击Add Widget 选择添加一个Image插件，同时别忘记更改控件名称

在这里插入图片描述

1、选择"Image"选项卡并单击蓝色加号图标。
2、找到下载的图片素材并选择"background.png"，为了防止重复工作
把其他需要的图片一起添加进去。可以多选一起添加。
3、导入后左侧会显示添加的图片

在这里插入图片描述

1、回到画布视图
2、右侧选择image给控件添加背景图片

在这里插入图片描述

3.添加按钮

1、单击"小部件"选项卡中的"按钮"小部件，向屏幕添加两个按钮，
并更改名字为	ButtonUp和ButtonDown
2、ButtonUp定位在 x=40，y=60。
3、ButtonDown定位在 x=40，y=150。

在这里插入图片描述

更改按钮的外观。在右侧更改按钮松开和按下时的背景图片。

在这里插入图片描述

添加完成后，运行simulator，在PC模拟一下界面是否有问题。

在这里插入图片描述

4.添加文本

1、添加一个Image 控件
2、给它添加背景图片"counter_box.png"
3、坐标：x=250，y=59。
4、名字改为：counter_box

在这里插入图片描述

1、添加文本控件
2、坐标：x=250，y=90
3、右侧AutoSize取消勾选，设置W=152  H=90（必须先取消Autosize
否则没法改宽度和高度）
4、名字设置countTxt
5、对其方式设置：center

在这里插入图片描述

按照下图设置TextArea的字体

在这里插入图片描述

我们希望 TextArea 显示一个数字，我们可以用按钮更改该数字。
为此，更改文本以包括"通配符"。通配符是文本中的标记<d>，
在运行时用其他内容替换。我们只想显示一个数字，因此我们
将文本更改为"<d>"。在其他项目中，可以将动态部件与固定文本相结合，
例如"温度：<temp> °C"。另外，<...> 通配符是可选的。
1、添加通配符
2、设置通配符符号
3、设置初始化值
4、设置buffer

在这里插入图片描述

运行模拟器

在这里插入图片描述

5.添加代码

我们将创建两个InterActions，每个按钮一个。
1、添加交互
2、设置触发方式
3、设置触发源
4、设置触发时调用虚函数
5、增加虚函数名称，方便区分维护
6、为"交互"提供信息性名称，以便以后可以识别它，也可以默认不修改它

在这里插入图片描述

检查无误后点击右上角Generate Code生成代码

在这里插入图片描述

然后依次找到simulator\msvs\Application.sln并打开代码

在这里插入图片描述

直接编译工程或者按快捷键F5，中间有任何提示均选择是。

在这里插入图片描述

最终结果和TouchGfx仿真结果一样

在这里插入图片描述

6.生成的代码

虚方法位于类MainViewBase.hpp的公共部分。生成的方法具有空实现，需要重写。此文件不要更改，有touchGFX自动生成

/*********************************************************************************/
/********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
/*********************************************************************************/
#ifndef MAINVIEWBASE_HPP
#define MAINVIEWBASE_HPP

#include <gui/common/FrontendApplication.hpp>
#include <mvp/View.hpp>
#include <gui/main_screen/MainPresenter.hpp>
#include <touchgfx/widgets/Box.hpp>
#include <touchgfx/widgets/Image.hpp>
#include <touchgfx/widgets/Button.hpp>
#include <touchgfx/widgets/TextAreaWithWildcard.hpp>

class MainViewBase : public touchgfx::View<MainPresenter>
{
public:
    MainViewBase();
    virtual ~MainViewBase() {}
    virtual void setupScreen();

    /*
     * Virtual Action Handlers
     */
    virtual void ButtonUpClick()
    {
        // Override and implement this function in Main
        //需要重写
    }

    virtual void ButtonDownClick()
    {
        // Override and implement this function in Main
        //需要重写
    }

protected:
    FrontendApplication& application() {
        return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    }

    /*
     * Member Declarations
     */
    touchgfx::Box __background;
    touchgfx::Image Background;
    touchgfx::Button ButtonUp;
    touchgfx::Button ButtonDown;
    touchgfx::Image counter_box;
    touchgfx::TextAreaWithOneWildcard countTxt;

    /*
     * Wildcard Buffers
     */
    static const uint16_t COUNTTXT_SIZE = 10;
    touchgfx::Unicode::UnicodeChar countTxtBuffer[COUNTTXT_SIZE];

private:

    /*
     * Callback Declarations
     */
    touchgfx::Callback<MainViewBase, const touchgfx::AbstractButton&> buttonCallback;

    /*
     * Callback Handler Declarations
     */
    void buttonCallbackHandler(const touchgfx::AbstractButton& src);

};

#endif // MAINVIEWBASE_HPP

7.实现虚方法

在MainView.hpp中手动增加虚方法声明
 virtual void ButtonUpClick();//添加
 virtual void ButtonDownClick();//添加

#ifndef MAIN_VIEW_HPP
#define MAIN_VIEW_HPP

#include <gui_generated/main_screen/MainViewBase.hpp>
#include <gui/main_screen/MainPresenter.hpp>

class MainView : public MainViewBase
{
public:
  MainView();
  virtual ~MainView() {}
  virtual void setupScreen();
  virtual void tearDownScreen();
  virtual void ButtonUpClick();//添加
  virtual void ButtonDownClick();//添加
}

然后在MainView.cpp中增加ButtonUp和ButtonDown按下时打印提示

#include <gui/main_screen/MainView.hpp>

MainView::MainView()
{

}

void MainView::setupScreen()
{
  MainViewBase::setupScreen();
}

void MainView::tearDownScreen()
{
  MainViewBase::tearDownScreen();
}

void MainView::ButtonUpClick()
{
	touchgfx_printf("buttonUpClicked\n");
}

void MainView::ButtonDownClick()
{
	touchgfx_printf("buttonDownClicked\n");
}

在这里插入图片描述

在MainView.cpp的按键按下方法中，我们增加计数器值。然后，新值将转换为字符串，
并复制到我们为上一步中的文本配置的 10 个字符缓冲区。

#include <gui/main_screen/MainView.hpp>

MainView::MainView()
{

}

void MainView::setupScreen()
{
    MainViewBase::setupScreen();
}

void MainView::tearDownScreen()
{
    MainViewBase::tearDownScreen();
}
void MainView::ButtonUpClick()
{
	touchgfx_printf("buttonUpClicked\n");
	counter++;
	Unicode::snprintf(countTxtBuffer, COUNTTXT_SIZE, "%d", counter);
	countTxt.invalidate();
}

void MainView::ButtonDownClick()
{
	touchgfx_printf("buttonDownClicked\n");
	counter--;
	Unicode::snprintf(countTxtBuffer, COUNTTXT_SIZE, "%d", counter);
	countTxt.invalidate();
}


运行发现并没有按预期显示数字

在这里插入图片描述

我们需要告诉 TouchGFX 设计器在"默认"排版中包含字符 0-9。
为此，请返回 TouchGFX 设计器，然后单击"Text"选项卡，
然后单击"Typographies"选项卡。在默认排版"WildCard Ranges"列中，
添加范围"0-9"。为了能表示负数还需要在WildCard characters 添加负号“-”。

在这里插入图片描述

重新运行发现实现了我们预期的功能

在这里插入图片描述
至此，我们已经完成了第一个实例。

总结

以上就是今天要讲的内容，本文简单介绍了touchGFX的使用，并演示了如何生成自己第一个GUI应用。希望大家多多支持，关注一下！！！你们的支持是我更新的动力。如果有任何问题可以直接私信我哦！！！！！！ 如果私信没回可以加本人QQ：1458356834
YZW0123
关注
专栏目录
TouchGFX界面开发 | 使用STM32CubeMX移植TouchGFX
安迪西_嵌入式攻城狮
05-03 2452
介绍如何使用STM2CubeMX移植TouchGFX
基于TouchGFX的stm32显示界面开发——显示篇
wzp0324的博客
04-30 4735
最近做的那个啥玩意要做UI界面，正好ST有个自家的UI生成器，也算个好东西。就拿来做个ui。 结果亮屏就快做了一周,蚌埠住了 好,这就来记录一下这个点亮屏幕的过程罢,好时代来临力。 LTDC 首先我们说一下什么是LTDC,这就不得不说屏幕接口的几种形态。 MCU屏，这种屏幕和主机连接的方法一般是用8080端口或者spi端口，这种屏幕有一种好处，那就是不用占用主机的RAM（运行内存），这是因为MCU屏自带了显存，我们只要把数据传输过去就行了 RGB屏幕：这种屏幕就是我们今天要用到的屏幕，这种屏幕不带显存，所
STM32CbueMX轻松开发GUI项目
06-27
STM32的CUBEMX设计GUI简介，文档简单描述了各个UI的功能
STM32 - TouchGFX学习: 1.简介和入门
guoqx的专栏
11-22 6537
STM32 TouchGFX和STemWin类似，都是一个GUI框架，可以更方便的在STM32 Cortex-M4芯片上创建GUI应用程序。 其性能和功能更加吸引人，在我们项目开发中，选择使用这个框架是个不错的选择。 目前支持的芯片包括STM32L4、STM32F4等等芯片。 它的当前最新版为4.18。 概要 分为以下几部分： * 简介 - TouchGFX的初级信息和安装指南。 * 基本概念 - 关键图形概念的介绍。 * 开发 - 如何开发TouchGFX应用程序，包括结构..
TouchGFX界面开发 | 添加触摸屏驱动
安迪西_嵌入式攻城狮
09-28 574
一文中介绍了如何用TouchGFX点亮屏幕，但是此时屏幕还没有触摸的功能。下面将介绍如何添加触摸屏驱动到TouchGFX中。
在stm32f429discovery上基于TouchGFX的GUI开发1：显示图片及按键实现加减操作
weixin_44451446的博客
06-14 1022
生成的方法具有空实现，需要重写。此文件不要更改，由touchGFX自动生成，可以看到functionUp（），functionDown（）为新添加的函数。3、点击F4生成代码，生成代码后在工程目录打开CubeMX文件STM32F429I_DISCO_REV_D01.ioc，这里要设置IDE为MDK-ARM，然后点击生成代码即可。keil编译完之后，再次更改界面编译的话，会出现不通过的问题，但是再次打开keil编译的话是更改后的界面，而且编译可以通过。4、在工程目录打开keil文件，可以添加自己的代码了。
stm32基于TouchGFX的GUI开发（十三）:Clicklistener之 Callback模板实现原理
u014627020的博客
01-24 1460
Touchgfx:Clicklistener之 Callback模板实现原理前言一、使能控件ClickListener功能二、回调函数的定义以及使用1.声明回调函数2.定义与初始化3.将回调函数与控件进行绑定4.实现后续逻辑功能 前言 使用Touchgfx时需要自己单独单加一个点击事件的回调函数，例如Box控件想要点击然后处理的话此时就需要使用CallBack类模板来实现点击触发事件的效果。 提示：以下是本篇文章正文内容，下面案例可供参考 一、使能控件ClickListener功能 如下图所示：
stm32基于TouchGFX的GUI开发（十二）:多屏幕数据共享
u014627020的博客
01-14 525
Touchgfx：多屏幕数据共享 提示：以下是本篇文章正文内容，下面案例可供参考 效果如下图： 代码已经上传到Gitee上，需要的自取。文件名Class01.MVP.7z 代码链接: Class01.MVP.7z
stm32基于TouchGFX的GUI开发（五）：(Scroll Wheel)滚轮容器的使用
u014627020的博客
03-18 1653
stm32基于TouchGFX的GUI开发（五）：(Scroll Wheel)滚轮容器的使用 最终效果图： 文章目录stm32基于TouchGFX的GUI开发（五）：(Scroll Wheel)滚轮容器的使用前言一、界面布局以及资源添加 1、创建自定义控件 2、创建主screen界面 3、Scroll Wheel关键参数设置二、功能实现 1、自定义控件设置文本 2、实现Scroll Wheel自带的更新虚函数3、主界面的构造函数中添加界面初始化代码总结 前言 本章我们将介绍List Layout控
STM32 TouchGFX的使用【四】TouchGFX控制LED灯
最新发布
cat_milk的博客
04-29 359
使用TouchGFX 插件来点亮一个LED。
stm32+ucGUI+LCD(5420)+FSMC
10-24
stm32的lcd+fsmc+ucGUI
stm32 touchgfx显示太空人动画
01-17
stm32 touchgfx显示太空人动画
野火STM32F4开发板适配TouchGFX
10-08
野火stm32f429开发板移植适配TouchGFX图形界面，dome例子
STM32F469TouchGFX配置.docx
05-27
由STM32CubeMX创建的STM32F469的TouchGFX工程，教程由本人试验通过，Keil5工程
基于STM32CubeMX的GUI应用开发——TouchGFX版_v03.pdf
05-13
使用STM32F系列MCU，基于STM32CubeMX的GUI应用开发——TouchGFX版
stm32基于TouchGFX的GUI开发（九）:Touchgfx图片资源存储在外部Flash教程(SPI和QSPI方法一）
u014627020的博客
08-15 3144
前言 使用Touchgfx时当做的应用比较复杂的时候，图片资源比较多比较大就需要将图片资源存储到外部Flash中，否则的话默认没有配置外部下载区域就是默认放在芯片内存，会提示内存不够。通过本文章的学习后可以轻松的实现图片资源存在外部Flash中。 硬件：STM32F429IGT6(正点原子阿波罗开发板) + W25Q256(32MB字节) 接口：SPI。W25Q256 Flash芯片支持SPI和QSPI接口，但是F429不存在QSPI接口所以只能采用SPI方式。SPI比较QSPI加载图片的区别是，
stm32基于TouchGFX的GUI开发（十）:Touchgfx图片资源存储在外部Flash教程(SPI和QSPI方法二）
u014627020的博客
08-15 2315
前言 本文是在上一篇文章的基础上继续介绍第二种将Touchgfx的图片文件存到外部Flash的方法。采用的是.FLM下载算法。直接在keil内添加算法然后像普通下载程序那样下载。 提示：以下是本篇文章正文内容，下面案例可供参考 Touchgfx图片资源存储在外部Flash教程（SPI和QSPI方式）:方法二前言一、准备工作二、移植工程模板1、准备工程模板2、准备驱动文件三、修改Keil配置将程序下载到外部Flash中总结 一、准备工作 一、Keil 管方下载连接 https://www2.k
【STM32F429】通过STM32CubeMX移植TouchGFX
热门推荐
sinat_31039061的博客
07-23 1万+
实验内容： 1.通过STM32CubeMX从零驱动STM32F429，并创建一个TouchGFX工程 2.更改代码，添加驱动 3.使用TouchGFX MVP来实现和硬件的双向交互 4.通过STM32CubeMX添加SD、USB和FAFT组件 5.通过STM32CubeMX添加CAN，实现汽车诊断仪功能 实验平台： 硬件： 野火挑战者STM32F429开发版 软件： 最新版本的STM32C...
TouchGFX开发(2)-触摸屏幕组件点亮LED
05-22
这篇文章是 "TouchGFX开发系列"的第二部分，我们将探讨如何使用TouchGFX开发工具来创建和控制触摸屏幕组件，并通过它来点亮LED。我们将从基础出发，逐步深入到具体实现，带你进入触摸屏幕和嵌入式系统的奇妙世界。 ...
stm32 touchgfx基础教程
06-28
您好，以下是关于STM32 TouchGFX基础教程的回复： TouchGFX是一款用于嵌入式系统的图形用户界面（GUI）框架，它可以帮助开发人员快速构建出具有高度交互性和美观度的用户界面。而STM32则是一款广泛应用于嵌入式系统的微控制器，它与TouchGFX的结合可以为开发人员提供更加完整的解决方案。 关于STM32 TouchGFX的基础教程，可以从以下几个方面入手： 1. 硬件准备：首先需要准备好一款支持TouchGFX的STM32微控制器，以及一块触摸屏和相应的驱动电路。 2. 软件安装：安装TouchGFX Studio和相应的STM32开发环境，以及TouchGFX的库文件和驱动程序。 3. 项目创建：在TouchGFX Studio中创建一个新的项目，并进行基本的配置，如选择STM32的型号、屏幕分辨率等。 4. 界面设计：使用TouchGFX Studio提供的图形化界面设计工具，设计出所需的用户界面，并添加相应的控件和交互逻辑。 5. 代码生成：在TouchGFX Studio中生成相应的代码，并将其导入到STM32开发环境中进行编译和下载。 6. 调试测试：将STM32连接到触摸屏和电源，进行调试和测试，确保界面和交互逻辑的正常运行。 以上是关于STM32 TouchGFX基础教程的简要介绍，希望能对您有所帮助。如有更多问题，欢迎随时咨询。 ### 回答2： STM32 TouchGFX是一种用于嵌入式系统中创建口感显式图形用户界面（GUI）的开放源码框架。它为创建丰富的用户界面提供了各种工具和功能，这包括图形和字体渲染、微调和部分动画、按键和触摸事件、音频和声音效果等。下面是STM32 TouchGFX的基础教程： 1. 环境设置：在开始自己的STM32 TouchGFX项目之前，需要向IDE添加TouchGFX插件并创建一个新项目，该插件包含GUI代码生成器、设计器和仿真器。您可以安装TouchGFX插件并创建应用程序的空白项目，然后选择一个合适的板配置。 2. 图形资源：一旦创建了项目，选择要使用的图像资源和字体。TouchGFX GUI Designer为这些资源提供了一个图形用户界面，在其中以可视化方式编辑、排列和组织元素。您可以将其导入TouchGFX代码生成器中用于代码生成。 3. GUI设计：使用TouchGFX中包含的GUI Designer设计器，您可以为您的应用程序创建自定义的GUI设计。这个工具可以很好地协助您的工作，使用GUI Designer，开发者可以轻松地布置和调整重要元素和部件，创建想要的样式和布局，实现自定义功能，确保您的界面能够正常运行。 4. 代码生成与部署：一旦GUI和图形资产被设计和定义，就可以使用代码生成器为指定的目标平台生成C ++代码。生成的代码具有TouchGFX库的功能、特性和API，用于处理各种GUI操作和交互。最后，部署应用程序时，可以将生成的C ++代码导入您的项目中，确保在目标嵌入式平台上实现预期的界面效果。 5. 触摸事件处理：TouchGFX库提供了用于处理触摸事件的代码和API。处理触摸事件通常涉及向GUI Designer添加顶点、按下和释放事件，并定义相应操作。在TouchGFX中，通过处理touchgfx::ClickEvent事件来响应屏幕上的点击操作。 6. 多语言支持：TouchGFX库允许您在应用程序中支持多种语言，以适应全球用户。它提供了一个称为touchgfx::Unicode及其他API的类集合，可以在多种语言中执行必要的文本操作和转换。 总结：以上是STM32 TouchGFX的基础教程，可以协助新手更好地理解和学习TouchGFX概念和工作流程，为嵌入式界面设计提供更多灵活性、生产力和创造力。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YZW0123

谢谢大家的支持，请关注我哦！！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值