touchGFX安装与初识

touchGFX安装与初识

前言

本系列文章由萧萧宵小(wurendikunn@outlook.com)编写，转载请注明出处。

文章链接：https://blog.csdn.net/qq_33350808/article/details/108311032

本文涉及到的软件为touchGFX Designer 4.13.0，本文学习如何安装并简单地认识touchGFXDesigner地界面布局。

1.touchGFX安装

touchGFX的开发流程一般是这样：cubeMX->touchGFXDesigener->Keil或者IAR，除了touchGFXDesigener其他都是嵌入式常用软件。

touchGFX的下载直接到ST的官方即可，我选的版本是4.13的，之后也会以这个版本的内容进行学习记录。下面是网址：

https://www.st.com/content/st_com/en/products/embedded-software/mcu-mpu-embedded-software/stm32-embedded-software/stm32cube-expansion-packages/x-cube-touchgfx.html

下载下来之后会获得一个"en.x-cube-touchgfx"的压缩包，解压缩之后在"en.x-cube-touchgfx\Utilities\PC_Software"文件夹中可以找到touchGFXDesigener的安装包，直接双击安装，看好安装路径（最好不要有中文，凡是国外软件路径一律不给中文，鬼知道会发生什么），一路next安装完毕即可。

同时最好下载一个官方文档，以便之后查询（纯英文，2500+页，文件贼大，网页下载困难）。所以我直接下好了：https://download.csdn.net/download/qq_33350808/12782562

2.初识界面

开始界面

首先打开touchGFXDesigener，可以看到如下的界面

其中重要的是3.项目模版和4.UI模版，打开项目模版看到：

一共有三种模版：纯软件仿真、显示器适配和开发板适配。

1. 纯软件仿真：字面意思，程序只能在PC机上仿真运行，一般用来UI前期开发的，使得UI开发可以先于硬件设计。

2. 显示器适配：如果选用指定显示器型号，touchGFX在产生代码时会顺便链接好显示驱动。

3. 开发板适配：如果选用指定开发板，touchGFX产生的MDK-ARM即Keil项目文件就可以直接打开编译运行了。（初学者可以直接买开发板学习，毕竟所见即所得才能激发学习兴趣，硬件配置还挺麻烦）

打开UI模版可以看到：

里面一共有三种，空白模版、例程模版和演示模版（后两者都是学习使用，打开可以直接看到原码，对学习挺重要的）：

1. 空白模版：开发的情况下就使用空白模版
2. 例程模版：主要是演示各种控件的使用
3. 演示模版：需要配合开发板，演示实际项目。（也可以理解为炫技，展示touchGFX的可能性）

设计界面

创建完项目之后可以看到如下所示的图：

这里就是主要的设计界面了，依次介绍界面内的各个工作区域：

1. 用来切换不同资源的设置：画布资源、图片资源、文字资源、项目资源。

2. 用来仿真和产生代码，一般在设计完UI界面点击生成代码之后就可以用7号区域中的"Browse Code"打开vs项目工程文件进行后台逻辑的编写了。

3. 切换控件、界面和自定义容易的tab按钮

4. 可以选中控件拖入界面，或者选中控件对象进行设置

5. 设置控件的前后位置关系和后撤前进键

6. 设置对象的属性，包括外观属性和逻辑相互动作

7. 浏览生成的文件和查看编译日志

资源界面

除了主界面外还有两个重要的界面，分别是图片资源界面和文字资源界面：

在图片资源界面中，会默认读取工程目录下的"\TouchGFX\assets\images"文件夹，推荐添加图片资源的时候直接复制到此文件夹下。注意：图片名不支持中文，同时因为touchGFX在显示图片时支持修改透明度即图片中的α通道，所以需要PNG格式的图片。

在右边的图片属性设置中还有一些重要的设置，比如设置图片资源在实际硬件中时存放在外置flash还是内置flash（因为一般MCU自带的flash容量较小，在图片资源过多的情况下就需要将其放置在外置flash中），图片的显示格式设置（这个取决于你的显示屏支持的格式），是否使用dither算法（也称抖动算法，可以牺牲分辨率为代价，通过颜色值的抖动来增加可用颜色数量），是否使用α通道（一般图片有RGB三个通道，多加一个α通道就可以实现透明效果，但是也会增加图片占用的空间），图片是否反转等等。
在字体资源设置中，touchGFX将其分为三类，这里理解它需要知道touGFX对文字资源管理的策略。

一般在一个带显示屏的MCU中想要显示文字通常需要一个字库，显示一个文字时会依据文字编码从字库中寻找其相对应的点阵图。这样的解决方案会产生资源浪费，因为字库中所有的点阵图只使用了一部分，在寸金寸土的flash中这么做很不明智。

touchGFX会只对界面中使用到的文字进行存储，或者说将用到的文字做出单个点阵图的格式单个调用，这样就避免使用字库时的浪费。

1. 单次使用：表面意思，在UI拖拽直接生成的文字控件就会统一在这里管理。
2. 文字资源：代表这些文字资源会多次使用，一般在这里定义的文字会在之后的后台逻辑编辑中使用。
3. 字体设置：设置使用的字体，比如宋体之类的。同时可以设置通配符的范围，这个很重要，详情之后讲解。（通配符的应用场景可参照手环的通知显示功能，即显示出外界给予的未知信息）

后记

本文讲解了touchGFX的安装和界面的初步认识，之后会讲解一些常用的控件使用。
本系列文章总目录：touchGFX学习记录