【DigiKey“智造万物，快乐不停”创意大赛】智能家居中控屏 4. 适配 GUI Guider

pomin

【DigiKey“智造万物，快乐不停”创意大赛】智能家居中控屏 4. 适配 GUI Guider [复制链接]

> 前文中使用的 Keil 的 RTE 软件包里的 LVGL 版本为 8.3.0，比较旧了，在本文中为了匹配GUI Guider最新版本，所以LVGL更新到使用较多的8.3.5版本

## GUI Guider 使用

#### 创建一个 Demo

打开 GUI Guider 软件，然后创建一个新工程

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_760169_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>Pasted image 20231205200639.png</strong> <em class="xg1">(41.14 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_760169" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=760169&handlekey=savephoto_760169">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

然后选择右上角3D打印机的Demo，之

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_760168_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>Pasted image 20231205200738.png</strong> <em class="xg1">(127.71 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_760168" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=760168&handlekey=savephoto_760168">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

选择色深为24bit，分辨率为开发板屏幕的480\*272

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_760167_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>Pasted image 20231205201206.png</strong> <em class="xg1">(83.65 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_760167" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=760167&handlekey=savephoto_760167">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

#### 生成代码

直接点击生成C代码

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_760166_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>Pasted image 20231205201352.png</strong> <em class="xg1">(200.81 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_760166" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=760166&handlekey=savephoto_760166">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

## 适配到 keil 工程

删除之前文章使用的 RTE 中旧版本的 LVGL，GUI Guider 生成的代码中包含有 LVGL的源代码，直接把这个源代码添加到工程中，并且把前文的 3D 打印机生产的代码添加到工程中

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_760165_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>Pasted image 20231205203314.png</strong> <em class="xg1">(44.98 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_760165" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=760165&handlekey=savephoto_760165">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

然后添加包含路径

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_760164_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>Pasted image 20231205203408.png</strong> <em class="xg1">(28.34 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_760164" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=760164&handlekey=savephoto_760164">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

还需要添加一个宏定义 LV_LVGL_H_INCLUDE_SIMPLE

#### 载入页面

现在页面的创建、绘制代码已经配备整齐了，只需要在 main 中载入即可，在 main 函数中添加如下代码

```c
  setup_ui(&guider_ui);
  events_init(&guider_ui);
  custom_init(&guider_ui);
```

同时需要在 user_main.c 文件中定义一个全局变量

```c
lv_ui guider_ui;
```

编译、烧录到开发板，可以看到复杂的页面跳转、丰富的动画下，依旧丝滑。

至此，已经对接好了 GUI Guider、Keil、STM32CubeMX 几个软件的联动，后面就开始在硬件上下功夫然后适配喽