一.前言
上节我们已经在板卡上成功运行了官方的demo,接下来我们要基于demo开始我们自己的项目布局了,因为TouchGfx 应用层和硬件层实现了很好的分离,所以我们将这部分的学习分为三个阶段:
- 页面布局(添加需要的页面,图标等)
- 页面与硬件的交互逻辑添加
- 整体联调,进行优化
二.准备工作
1.界面所需要的背景图片下载
好看的背景可以提升显示的效果,一般项目的开发都会有专门的美工,但是我们就只能使用丑陋的图片,当然不,网上一搜,有很多美化好的背景图,选几张,自己调整下分辨率。
这里推荐一下我背景图下载的网站:
https://588ku.com/tuku/269879.html
当然好的图片肯定不是免费的,需要花钱下载。我们倡导正版。。。(咳咳,网页F12你懂得)
下载好的图片,需要进行一下加工。
推荐使用PS,首先图片是PNG格式,800*480分辨率大小,然后在保证效果的时候尽量压缩一下文件大小,不然刷新会比较卡。
不会压缩???
https://blog.csdn.net/hetongun/article/details/78121062
2.界面上的图标下载
背景图有了,想要类似demo的图标。同样可以下载。
非常的好用,我们要用到的电池电量图标,wifi图标,按钮图标都有,无背景。
可能下载下来的背景图片是白色,改为透明使用下小工具
https://www.52pojie.cn/thread-1159244-1-1.html
不过还是觉得PS的魔法棒工具好用
3.touchgfx工具下载(使用4.1.5.0及以上)
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轴等信息。
本节的页面布局先说到这,下节我们要将界面先存到文件系统中,提高页面的切换流畅度,然后进行逻辑交互部分的编写。