【STM32H735-DK 测评】⑦TouchGFX显示图片与文本

eefocus_3880118

之前已经创建了一个TouchGFX的空白模板，今天就先从最简单的显示图片和文本开始玩TouchGFX。

一.图片
  在以前学习STM32时，使用LCD显示图片需要对图片进行取模，然后放在一个数组中，再放入代码中编译成固件或者放到外置Flash中。或者是把图片的源文件放在SD卡中，然后程序去解析图片再显示。总之是很麻烦，做的需要做的调试也很多。而且如果没有画好UI的效果图，微调界面也是一件很麻烦的事。
  这些问题在TouchGFX中都不存在，我们可以直接把图片丢进去，在TouchGFX Desinger中像做PPT一样，直接拖拽，立刻看到效果，然后直接生成代码即可编译下载，我这个开发板自带外部flash，且工程已经配好了烧录算法，用起来很方便，完全不需要我考虑太多其他的事情。
  首先我们需要把图片添加到图片资源库（就是软件左侧的Images，直接翻译叫图片感觉怪怪的，所以我自作主张给他起了个新名字）中

然后选中你要添加的图片即可，需要注意的是TouchGFX只支持PNG、SVG两种格式，如果你是JPG等需要转格式才行。其次是图片名称需要符合规则，如果图片不符合规则，就会像下图所示，有个**色感叹号

鼠标放上去就可以看到具体的提示，提示内容就是图片文件的命名规则

图片文件名字只能包含数字和大小写英文字母，并且数字不能做开头
  如果要从图片资源库中删除图片，直接右键，点击删除即可。

  右键还可以直接打开图片和打开图片所在文件夹（不过这个路径不是你添加图片时图片所在的路径，在你添加图片时，就会复制一份到工程路径下），如下图所示

  添加好图片后，你可以直观的看到图片的名称、分辨率等信息，同时还可以为这个图片配置一些参数，例如图片颜色格式、压缩、抖动散发、阿尔法抖动、旋转角度、存放位置等等，并且像颜色格式等专业参数，右上角还很贴心的放了问号，点击可以直接跳转教程，里面详细解释了这个参数的含义，十分有利于新手

  图片加入资源库后，接下来就是把它放到我们的屏幕上，在编辑界面的中上方，有一排按钮，是各种组件，其中第三个就是今天要用的图片

在图片组件中有很多种细分的图片，我这边就简单的用一下最基础的image，点击image后，可以看到，中间的预览界面出现了一个矩形，这个就是添加进去的组件。在左侧的Screen1下，也出现了一个image1，这就表示这个图片组件在screen1中。右边是这个image组件的各个参数

  第一个参数就是组件名字。第二个是组件的位置、是否锁定、是否可以看见。第三个就是这个组件具体显示的内容。第四个是阿尔法参数。第五个是一些高级的属性参数，例如是否可拖动、点击等。

  点击第三个参数后，就可以看到有一个新的框弹出来，默认显示的是project，也就是刚才在图片资源库中添加过的图片

在project的旁边就是stock，这个是ST为我们准备的资源库，里面的资源都可以free use！可以商用！真的太良心了，有一些小图标我再也不用去各种网站找了，种类也很丰富

那我就两种各添加一个，添加好效果如下

并且在移动图片时还会有辅助线和自动吸附，有点PPT的味道，但是他辅助还是比较基础的，只能靠边、居中，无法做到像ppt那样丰富

二.文本

  文本在倒数第二个中

  文本的右边参数会相比图片跟多一点，但也不多，主要涉及的基本上就是文本内容编辑、字体、大小、居左/居中/居右、颜色等等，我就不一一介绍了。

  我在文本编辑区写入了我B站账号的UID，但是在预览界面中，所有的中文字符都变成了问号

  之前学习过STM32 LCD显示文本的同学肯定知道，这就是没有字库，图片要取模，文字也要取模。可以看到，默认的是把ASCII字符取模了，但是中文字符没有（我没有尝试其他语言的字符，应该也是一样没有取模的）。

  那么现在目的很明确了，把中文字库给他整上，完成取模的工作。在左边image图片资源库的下方还有一个texts，那个就是管理所有文字的地方，我就叫他文本资源库吧，点击进来后他长这样

首先要添加一个Typographies，翻译过来叫排版，但是我感觉怪怪的，直观点我还是叫他字库，他的界面长这样

可以看到，里面有默认的三个字库，分别是default、large、small。
添加一个新的字库

  每个字库有好多参数可以设置，但是主要的就是我红框的这三个，名字、字体、大小。

  这里的字体就是你电脑默认安装哪些字体，就可以选择那些字体。但是我很想吐槽一下，有很多字体明明在word中可以显示他的中文名称，但是在这里就不行，只有很少的几个字库字体是中文，其他都是英文，这让我选择起来很痛苦，真心希望ST可以改进一下（虽然这个从我最一开始的4.16.1版本到现在一直没有改过，但是我真的每用一次我就想吐槽一次）

  （悄悄说一下，制作字库时，size参数没改，是默认的20，用了才发现，20会导致中文下面缺一节，回想起以前的中文字库取模，都是8的整数倍，我改成24就正常了，这里的截图我就沿用之前截的了，不更换了）

  再回到编辑界面，为这个文本重新选择一下字库，选择我刚才新增的幼圆，这样中文字符就可以显示了

  这是固定的文本显示，那么如果我要显示变量怎么办呢？例如日期，那就要用到“通配符”，如红框所示

点击加号，文本编辑框中就会显示<value>，然后再输入固定字符，即可实现固定字符和变量的共同显示。不过在一个文本框中只能添加2个通配符，感觉使用受到了限制，例如我想显示年月日，就不行

在预览界面中我们可以看到，固定的文本是显示的，通配符是不显示的，那我如果看一下正常的排版或者想要默认就显示怎么办？那就要给通配符增加一个初始值。点击需要编辑的通配符，然后给他分配一个ID，我直接点加号，让他自动分配

添加ID后就可以设定默认值了

然后需要添加一下通配符buffer，这个buffer为你要显示的最大数字的个数再+1（数字时采用ASCII字符编码，一个数字只要一字节。中文没试过，中文可能要*2或者*3，具体看其采用什么编码），我个人理解往大了定应该也没问题，就是浪费资源（下图的2参数不对，如果是2，那么就只会显示0，而不是04，后面的4被抛掉了，至少要为3）

我把默认值设置为今天，最终效果如下

然后是最后一步，把通配符可能显示的文字添加一下。我的理解是TouchGFX不会把整个font全部取模，只取你用的，那么如果是会变化的，那你就要给他变化范围，这样才可以取模。回到字库编辑界面，里面有一个通配符范围的参数，我这边是日期，那我就取0-9这10个数字即可

三.烧录到开发板

  本来应该再展示一下代码如何让通配符变化，但是生成code后用keil编译，会有“Error: L6218E: Undefined symbol”，查了一下应该是keil编译C和C++的混合代码时，C里面的函数无法被C++直接访问，需要加一层extern "C"的皮 ，我还得改文件，好麻烦，再加上之前无法直接烧录的问题。我打算转cubemx IDE了，但是这新工具得学习学习，所以这篇我就不进行代码修改了，在**的其他文章中再展示。

  还好TouchGFX Desinger中的编译下载是好用的，就用它暂时顶一下