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

一.前言

上节我们已经在板卡上成功运行了官方的demo,接下来我们要基于demo开始我们自己的项目布局了，因为TouchGfx 应用层和硬件层实现了很好的分离，所以我们将这部分的学习分为三个阶段：

1. 页面布局（添加需要的页面，图标等）
2. 页面与硬件的交互逻辑添加
3. 整体联调，进行优化

 

二.准备工作

1.界面所需要的背景图片下载

好看的背景可以提升显示的效果，一般项目的开发都会有专门的美工，但是我们就只能使用丑陋的图片，当然不，网上一搜，有很多美化好的背景图，选几张，自己调整下分辨率。

这里推荐一下我背景图下载的网站：

https://588ku.com/tuku/269879.html

https://818ps.com/album-subject/68435.html?user_source=r41059&sdclkid=AL2G15fGAJDlAJDib-&renqun_youhua=509271&bd_vid=7620529575553756744&route_id=16100990341358&route=424,&after_route=424

 

当然好的图片肯定不是免费的，需要花钱下载。我们倡导正版。。。（咳咳，网页F12你懂得）

下载好的图片，需要进行一下加工。

推荐使用PS，首先图片是PNG格式，800*480分辨率大小，然后在保证效果的时候尽量压缩一下文件大小，不然刷新会比较卡。

不会压缩？？？

https://blog.csdn.net/hetongun/article/details/78121062

 

2.界面上的图标下载

背景图有了，想要类似demo的图标。同样可以下载。

推荐 Iconfont-阿里巴巴矢量图标库

非常的好用，我们要用到的电池电量图标，wifi图标，按钮图标都有，无背景。

可能下载下来的背景图片是白色，改为透明使用下小工具

https://www.52pojie.cn/thread-1159244-1-1.html

不过还是觉得PS的魔法棒工具好用

 

3.touchgfx工具下载（使用4.1.5.0及以上）

https://www.st.com/content/st_com/zh/products/development-tools/software-development-tools/stm32-software-development-tools/stm32-configurators-and-code-generators/touchgfxdesigner.html#get-software

 

4.touchgfx设计资料下载

我们都知道touchgfx被ST收购了，同时也组织过很多次的培训，可以去st官方下载一些教程学习。

https://www.stmcu.com.cn/Index/search?search_keywords=touchgfx

 

 

三.页面布局

1.虽然不用学习原理，但是设计软件还是要学习一下的，虽然都是拖拽拉。

 

2.打开我们上节的工程，加载一个demo

这个demo有两个界面，进行切换，有按键有灯控制和我们最初要做的界面最接近，所以选用这个demo，在这个基础上进行修改，能够省不少力气。

 

3.添加背景图片和图标（先添加到工程中，方便拖拽设置）

把弄好的背景图，矢量图统统的加载上。注意背景图片的命名用英文

 

 

替换背景图片。

先编译看下效果，切换是否顺畅：

 

4.添加中文字库

整个项目中都需要调用定义的字体，它是按类分的，只要修改这里的大小，项目内只要用到的这类都会全部跟着一块替换，字体，大小你需要几类就定义几类。

出现弹框：

 

选择幼圆。

 

下面就多出来个字体类型。

 

 

5.添加按钮

 

添加按钮几个步骤，选择自己需要的按钮类型，取按钮名字，放置位置，替换不按和按下的图片。

 

 

设置下按钮的动作，切换界面和切换方向。

 

注意多个按钮的话要多添加下按钮状态，不能重用

 

 

一个界面里面，包括了图标，按钮，文字，背景，这样就可以先把界面框架搭建起来了。

 

6.添加温度曲线

我们需要做一个温度曲线的功能，先不添加逻辑，先把界面布局好，可以参考下demo

 

 

主要添加这三类组件，滑动按钮，曲线及背景。

曲线的主要，设置下名称，曲线方向，X，Y轴等信息。

 

本节的页面布局先说到这，下节我们要将界面先存到文件系统中，提高页面的切换流畅度，然后进行逻辑交互部分的编写。