【STM32U599J-DK】TouchGFX从零创建自己的应用STM32U599J-DK

lugl4313820

【STM32U599J-DK】TouchGFX从零创建自己的应用STM32U599J-DK [复制链接]

 

【前言】

前面我们体验了用touchGFX创建了一官方的示例，今天学习从官方教程教程2：创建您自己的应用 | TouchGFX Documentation从零开始学习touchGFX创建自己的应用。

第1步：设置背景图像

创建工程：

1）在touchGFX上点击file->new弹出新建项目工程菜单：

2）选择stm32U5A9J DK的示例，输入工程项目名称，选择好工程文件夹，点击create。

3）点击生成代码文件，然后打开项目文件夹。

4）拷入图像素材，到assets下面的image文件夹：

5）重命名屏幕名称：

6）添加图片素材到项目之中，1点击左侧的images；2点击右上角的+号，找到素材图片文件夹内把用到的图片添加进项目中：

7）添加背景图片，点周上侧的image，添加一个图像控制到画布中：

8）选中图片控件，在右侧的属性中点击image，选中背景图片：

到此背景添加好：

第2步：添加按钮

1. 按下图添加两个button到工程中：
   
2. 把控制拖到合适的位置，并重命名为buttonUP、buttonDown:

3）选中按键，指定抬起与按下两种状态的图标：

4）添加一个用于显示数值的背景图片：

5）添加用于显示数值的文本控件，重命名控件为textCouter

6）、修改默认值为0， 以及通配符：

7）修改默认字体为80号字，显示范围为0-9

添加按键名称、触发函数：

同样添加向下按键的虚拟函数：

第4步：添加代码

打开stm32cubeIDE工程：

在打开的工程中，我们看到工程给我们实现了两个按键的虚拟函数：

我们在MainView.hpp中添加虚拟函数，并声明一个计数器：

在MainView.cpp中，我们引用打印函数的头文件，以及添加对数值文件的修改代码：

#include <gui/main_screen/MainView.hpp>
#include <touchgfx/utils.hpp>

MainView::MainView()
{

}

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

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

void MainView::buttonUpClicked()
{
	touchgfx_printf("buttonUpdclicked\n");
	counter++;Unicode::snprintf(textCounterBuffer, TEXTCOUNTER_SIZE, "%d", counter);
	// Invalidate text area, which will result in it being redrawn in next tick.
	textCounter.invalidate();

}

void MainView::buttonDownClicked()
{
	touchgfx_printf("buttonDowdclicked\n");
	counter--;
	if(counter<0)
	{
		counter = 0;
	}
	Unicode::snprintf(textCounterBuffer, TEXTCOUNTER_SIZE, "%d", counter);
	  // Invalidate text area, which will result in it being redrawn in next tick.
	textCounter.invalidate();
}

效果：

 

【总结】

touchGFX设计器非常人性化的设计，再加上官方的教程，使得入门比较容易。但是我编写文档，加录制视频花费了一整天。

 

 

Jacktang

touchGFX创建自己的应用这个有用，先收藏

lugl4313820

Jacktang 发表于 2023-12-3 08:35 touchGFX创建自己的应用这个有用，先收藏

多谢大佬的关注，前面看了一个星期的教程，到自己体验，一步一步实验，就是耗时间。