【家用智能仪表盘】使用GUI Guider设计界面

pomin

【家用智能仪表盘】使用GUI Guider设计界面 [复制链接]

<i class="pstatus"> 本帖最后由 pomin 于 2022-8-29 20:47 编辑 </i>

# esp32 s2 运行 guider 生成的 lvgl 代码

> 用 NXP 推出的 gui guider 的设计界面，生成代码到 ESP-IDF 工程中，编写 CMakeLists.txt 来完成代码的编译工具链的适配。

## 🌐 获取 gui guider

官方下载链接：[https://www.nxp.com/design/software/development-software/gui-guider:GUI-GUIDER](https://www.nxp.com/design/software/development-software/gui-guider:GUI-GUIDER)

软件仿真界面：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_637095_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>guider-debug.png</strong> <em class="xg1">(222.69 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_637095" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=637095&handlekey=savephoto_637095">保存到相册</a>

</p>

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

</ignore_js_op>

gui guider 工程的文件目录

<ignore_js_op>

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

</p>

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

</ignore_js_op>

## 🔎 Cmake 支持

需要纳入到 ESP-IDF 中编译的有 generated 和 custom 文件夹

1. 在ESP32 项目中 components 下新建一个 myui 文件夹
2. 把 gui guider 的工程放在 myui 文件夹中命名为 guider
3. 在 myui 下编写一个 CMakeLists.txt 文件

```cmake
set(GEN_DIR ./guider/generated)
file(GLOB SOURCES ${GEN_DIR}/*.c ${GEN_DIR}/images/*.c ${GEN_DIR}/guider_fonts/*.c ${GEN_DIR}/../custom/*.c)
set(INCLUDE_DIRS ${GEN_DIR} ${GEN_DIR}/guider_fonts ${GEN_DIR}/guider_customer_fonts ${GEN_DIR}/../custom)

idf_component_register(SRCS ${SOURCES}
       INCLUDE_DIRS ${INCLUDE_DIRS}
       REQUIRES lvgl)
```

## 💥 直接编译

```bash
idf.py build
```

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_637094_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>build.png</strong> <em class="xg1">(207.33 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_637094" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=637094&handlekey=savephoto_637094">保存到相册</a>

</p>

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

</ignore_js_op>

可以看到 myui 已经被纳入工程被编译