RT-Thread-RT-Thread Studio上移植GUI-Guider-1.4开发LVGL8.2RT-Thread问答社区

RT-Thread Studio上移植GUI-Guider-1.4开发LVGL8.2

发布于 2023-11-01 22:45:18 浏览：1801 订阅该版

[tocm]

# 1.创建一个rttthread工程
创建一个rttthread工程，选择出厂带好LVGL配置的demo，或者自己已经搭建好了LVGL环境的工程。我刚好手上有一块HMI-Board的板子，就直接用这个了。

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/d83a8f9beb93ff71ec50ef61798eeb1f.png.webp)
由于LVGL的环境是现成的，所以我们就只需要将自带的demo给关闭掉就行了，这样就可以省下很多空间来进行设计。首先转到music_demo的配置项上去，将LVGL版本修改8.2。
![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/67978c9966ac14c37b351af96bbfa0de.png.webp)

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/0e822a546ff99fbcce1dae590b589829.png.webp)
此时保存设置进行编译，没有报错。进入board文件夹，来到LVGL的demo调用函数里面，将原先的内容都注释或者删除掉。

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/76b263d84698a7e620883727b1b36ca0.png.webp)
然后编译后就无报错了，并且我们的Flash开支减小到一半252KB多一点。这时候我们的工程没有GUI函数进行调用了，我们需要开始自己设计，所以我们打开GUI-Guider-1.4来进行对LVGL8.2的GUI设计，本篇主要讲解如何移植，具体GUI-Guider-1.4的使用方法大家还是上网自己学习。
# 2.使用GUI-Guider-1.4设计界面和导出代码
创建一个GUI Guider工程。不同版本的GUI Guider可以创建的LVGL版本不一样，按照自己移植的LVGL来选择安装GUI Guider软件即可。我移植的是LGVL8.2版本，所以下载的是GUI Guider-1.4.0版本。

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/d9fa0e46351783e47bda5c1fd068e2a5.png)
进入下一步，来到选择开发板环节，大部分都是NXP的板子，所以我们不选择。

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/5b254e2746359fe553b9b9d8a8abe58b.png)
继续下一步，来到选择画布模板环节。我使用的是一块480*272的屏幕，可以用很多demo模板，但是本次教如何使用空白模板来做GUI。

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/6c20f762028ba1ca209d4f39246df82a.png.webp)
开始最重要的环节，设置我们的屏幕参数了。我的屏幕参数为480*272，面板类型我是随便填的。然后就开始创建就行了。

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/f13355d1da27c39b5ba54a3d666f6074.png.webp)

进入到设计界面，我们可以开始拖拽组件放到我们的屏幕上了。具体的如何将界面搞得好看就需要自己去熟悉这个软件和提高自己的美学境界了。本教程只记录如何简单使用该软件进行LVGL简单设计。

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/78f22ede33bd12c5e08bfa069977fe9c.png.webp)

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/843ffcacaef7ab4077fd2e06ea59b627.png.webp)
要想显示图片的话，先将图片上传到资源上，图片名字不能出现中文。然后上传完后就回到组件将图片拖到屏幕上。

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/045fde619a78b5d3a88351c81799c685.png)
选择好我们之前上传的图片后，就可看到我们的屏幕上有图片了。接下来就随便放点其他组件就行了。

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/da9e31ae268334764b0435b8b6e338da.png.webp)
放置好界面后可以试着编译一下，看看有没有报错啥的。没报错的话，就可导出代码准备移植到RTT工程里。

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/945a488a28982e0b6abbd1c1a5a5c3ea.png.webp)

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/eeb3a693930e2d87eb6cc6adee912604.png.webp)
导出到指定文件夹后有两个文件夹。

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/50e6ade21734c63412b5a71f76c3030f.png)
# 3.开始移植到RT-Thread Studio上
接下来就是在已经移植好LVGL8.2版本的工程里面开始添加啊导出文件。首先在工程里面创建一个GUI文件夹我习惯建立在board文件夹里面，并且将导出的这俩文件夹里面的所有文件打散了复制粘贴进去。

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/434fff8a7cc0e4866c5cb5bfdb55dd08.png)
最重要的我们还需要到其他文件夹下复制粘贴一个SConscript文件，并且简单修改以下。我到\board\lvgl下复制了SConscript文件，最后文件夹内容如下：

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/a7abbfa33130ec2ef52df270216d96b7.png)
进入工程后右键同步scons到工程，这时候我们的GUI文件夹就出现了。修改一下SConscript文件。

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/77d2048dc664fafd87f30a61a5f12ce4.png.webp)
开始编写我们的lv_demo.c文件来调用我们设计的GUI界面。

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/c02536f64bae1a022c59680409528338.png)

```c
#include "rtconfig.h"
#include "lvgl.h"
#include "events_init.h"
#include "gui_guider.h"

lv_ui guider_ui;
void lv_user_gui_init(void)
{
    /* display demo; you may replace with your LVGL application at here */
    setup_ui(&guider_ui);
    events_init(&guider_ui);

}
```
下载到开发板后和我们实际设计的一模一样。

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20231101/0fe955227332e9f4322b208fe5c38511.png.webp)