STM32第二十三课：GUI-Guider安装使用及项目移植(7.11版本)

---

目标

1.安装GUI-guider。
2.学会使用GUI-guider设计界面。
3.学会将GUI-guider设计后的界面移植到项目工程中。

---

一、GUI-Guider获取与安装

  GUI-Guider（也称为GUI-Designer或GUI Builder）是一种用于嵌入式系统开发的图形用户界面（GUI）设计工具。它的主要功能是帮助开发者快速创建和设计嵌入式设备上的用户界面，通常用于液晶显示屏（LCD）等显示设备的应用程序开发。

我的理解：GUI-Guider就是一个LVGL界面辅助设计工具，通过GUI-Guider我们可以快速创建多个屏幕，导入多个字体，图片，图标等。GUI-Guider能让我们不用计算坐标，直接拖拽界面上的元件。该功能大大提高了我们设计界面布局的效率。

1.GUI-Guider获取

通过恩智浦官网下载：恩智浦官网
官方使用说明：官方手册

2.安装

安装时需要先安装java环境，安装完java环境后再安装GUI-Guider。
安装好java环境后，直接双击GUI-Guider的安装，最好安装到c盘（主要GUI-Guider也没多大，1个G都不到），之后全点同意后，一路走完就安装好了。

二、使用步骤

在使用之前一定要在项目中移植好LVGL环境，要不然GUI-Guider界面设计的再好也用不了。

1.创建一个新项目

打开GUI-Guider点击创建新项目

选择适配自己LVGL的版本，自己之前移植的LVGL是什么版本就是选V几，要不然设计好了，移植到项目中也无法使用。

我这里用的是v7版本，因为在上一节中我移植到工程中的LVGL版本为7.11。

点击下一步，进行设备面板的选择。这里要按照使用的硬件屏幕规格来进行选择。
我这里用的是320x240的屏幕，所以就直接点击Simulator。

点击下一步，会弹出模版选择界面，GUI-Guider给出了多个实例。但说实话都不咋好用，我选择使用空模版，即EmptyUI。

选好模版了，点击下一步

接下来就到了项目配置信息了。
项目信息和项目地址自己填，面板类型看硬件分辨率进行选择。
色彩深度按照屏幕硬件规格进行选择。
色彩深度（Color Depth），也称为位深度（Bit Depth），是指用于表示和存储图像中每个像素颜色的信息量。它影响了图像的颜色精度和色彩表现能力。
最后，点击完成就创建完成了。

2.快速使用

创建完成后的界面会发现是全英的。
想要修改语言就点击软件的右上角English，将其换成中文。

组件

组件里的东西直接拖拽即可。

组件添加到屏幕上后，会在blog中显示。

点击组件，可以在右边属性框中设置该组件的各个部分。

添加图片
点击导入就能添加了

字体生成及导入字体
字体生成官方网站：字体生成点击这里

name：生成字体文件的文件名
size：生成字体的大小

点击Browse，选择想要生成的是什么字体
Range和Symbols选填。
最后点击submit生成即可。
但是在GUI-Guider软件中我们不用一个一个取字体。
直接点击左上角的文件，点击导入字体，将想要导入的字体导入即可。
界面设计好后点击右上角的绿色播放按钮可以进行界面模拟

模拟后，感觉和自己设想的效果差不多时就可以点击绿色播放按钮隔壁的按钮生成代码即可

三、项目移植

找到建立项目时设置的地址文件夹，打开并复制generated文件夹

该文件就是生成的代码文件。

打开想要移植的目标文件，打开LVGL文件夹，找到我们之前创建的app文件夹。将generated文件夹复制进去即可。

复制完成后，打开工程，将generated文件全部添加到工程中，头文件也要一一添加。

打开gui-guider.c，将所有的"lvgl\lvgl.h"替换为"lvgl.h"，然后Ctrl+F搜索custom.h,将所有的custom.h文件删掉。

将setup_ui中的前三条屏蔽掉，声明一下lv_ui guider_ui;
如果有多个屏幕，需要将多个屏幕加载一下，如红框里的。

添加一下头文件

extern lv_ui guider_ui;

外部声明一下lv_ui guider_ui，之后想要修改或者调用GUI-Guider中设计部件，都需要使用guider_ui.部件。

使用时不要忘记初始化：

此时，我们就将GUI-Guider中设计好的界面移植到工程中了。

---

注意事项

1.GUI-Guider部件设计时，取名一定要简介明了，方便后续移植到工程中进行修改。
2.想要放置图标，而GUI-Guider界面中没有，可以去阿里矢量图标库中查找，然后当做字体导入到项目中。
3.字体图标越大，越占用空间，cpu资源紧张的情况下，一定一定要能省则省，尽量不使用图片。