快速入门ESP32——使用GUI-Guider生成工具

已于 2024-02-23 10:20:51 修改
阅读量2.5k 收藏 22
点赞数 8
分类专栏： ESP32 文章标签： ESP32 LVGL GUI-guider
于 2024-02-23 10:18:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mucherry/article/details/136210921
版权
本文将指导如何使用GUI-Guider工具将生成的GUI代码移植到ESP32项目中。首先介绍GUI-Guider的作用，然后详细说明新建工程、布局界面、代码移植及配置修改的步骤，包括dclock文件的处理、platformio.ini的更新、screen.c和main.cpp的修改。最后，提供下载验证和错误修改指南。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

相关文章
快速入门ESP32——开发环境配置Arduino IDE
快速入门ESP32——开发环境配置PlatformIO IDE
快速入门ESP32—— platformIO添加开源库和自己的开发库
快速入门ESP32—— 解决platformIO添加开源库下载失败的问题
快速入门ESP32——点亮你的第一个LCD屏幕
快速入门ESP32——移植LVGL

快速入门ESP32——使用GUI-Guider

前言

 在上一期我们移植了LVGL，本期就教大家怎么移植GUI-Guide生成的代码。GUI Guider 是恩智浦为 LVGL 开发了一个上位机GUI 设计工具，可以通过拖放控件的方式设计 LVGL GUI 页面，加速 GUI 的设计，提供c语言代码，可以很方便的嵌入到自己的项目中来。

 不知道的怎么下载GUI-Guide 看这里快速入门GUI-guider

 不知道的怎么移植LVGL看这里快速入门ESP32——移植LVGL

 我的硬件是：ESP32S3+1.69LCD（无触摸），

一、新建工程

  • 创建一个新的工程
    在这里插入图片描述

  • 选择v8.2.0版本
    在这里插入图片描述

  • 选择电脑仿真
    在这里插入图片描述

  • 选择一个空白的模版
    在这里插入图片描述

  • 填入工程的基本信息（名称要英文），选好屏幕的基本信息
    在这里插入图片描述

二、布局界面

  • 界面基本布局认识
    在这里插入图片描述
  • 简单来个布局
    在这里插入图片描述

三、代码移植

  • 仿真运行一下

在这里插入图片描述

  • 编译生成代码

在这里插入图片描述

  • 找到生成代码的文件，我们只需要移植这三个文件（custom、generated和dclock）即可，把它复制到我们移植好的LVGL代码中
    在这里插入图片描述
    在这里插入图片描述
  • 复制到ESP32 lib目录下
    在这里插入图片描述

四、修改配置

1、dclock文件

  • 使能lv_dclock.c 并且修改头文件路径
    在这里插入图片描述
  • 使能lv_dclock.h 并且修改头文件路径
    在这里插入图片描述

2、platformio.ini文件

  • 添加编译路径，有用到LVGL的组件，需要添加编译路径
最低0.47元/天 解锁文章
ESP32学习笔记 -- ESP32使用GUI-Guider制作LVGL图形界面
EmbedIoT Studio
11-18 2万+
上一篇文章讲述了如何移植嵌入式图形界面库LVGL到ESP32芯片平台，并成功在ESP32上面运行LVGL的官方demo，上一篇文章请参考以下链接。 ESP32学习笔记 - 移植LVGL_EmbedIoT Studio-优快云博客 截止至2021年11 月，LVGL官方尚未推出PC端的GUI设计工具，因此，在大多数情况下使用LVGL开发图形界面的时候，都是用代码的方式进行界面布局设计的，而不是使用拖曳控件的方式进行设计，这样会让工程师的工作量增加不少。 有痛点就有工程师想办法解决，恩智浦（NXP）为了
如何将使用GUI-Guider生成的LVGL移植到ESP32
嘉禾天成‘s Blog
04-12 3887
ESP32移植GUI-Guider制作的图形界面
Gui-Guider-1.4.1
01-17
Gui_Guider_1.4.1支持LVGL8.2.0版本，图形化开发LVGL。
ESP32S3在已有的lcd工程拉取lvgl并快速使用
最新发布
2403_84109443的博客
03-16 1132
ESP32S3在已有的lcd工程拉取lvgl并快速使用
【ESP32S3学习笔记】LVGL开发之导入GUI-GUIDER工程
lunzilx的博客
10-14 6474
利用GUI-GUIDER 方便的进行LVGL UI的开发
Arduino应用开发——使用GUI-Guider制作LVGL UI并导入ESP32运行
ShenZhen_zixian的博客
03-03 7451
GUI Guider是一个专门针对LVGL开发了一个上位机GUI设计工具，可以通过拖放控件的方式设计LVGL GUI页面，加速GUI的设计。设计完成的UI页面可以在PC上仿真运行，确认设计完毕之后可以生成C代码，再整合到MCU项目中。
Gui-Guider导出代码到esp32工程
weixin_51498063的博客
01-05 528
在移植好lvgl框架，能正常显示和触摸后，使用Gui-Guider软件绘制ui界面，需要把其生成的代码导入esp32工程。
ESP32-GUI-Flasher
02-05
ESP32-Flasher-GUI 用于将固件刷新到ESP32的GUI工具 最新消息 esptool 2.6-beta Python 3.7。 PyQt5。 修正错误。 仅闪存引导程序/分区/固件或全部。 发送文本到串口。 快捷键。 下面的新更新检查 该软件适合那些完全陌生的人，或者适合那些懒于键入整个代码的人。 该软件非常有用。 首先选择您要刷新的Bootloader，分区和应用程序文件，然后选择适当的“ COM”端口或Linux“ / dev / ttyUSB”端口，然后选择要更改的波特率。 然后，以“ 4MB”格式写入闪存的大小。 现在，您可以按“擦除”并在该闪动之后，成功完成后，
ESP32系列之LVGL（三）：Gui-Guider的使用
热门推荐
m0_55986987的博客
09-22 1万+
Gui-Guider的使用
ESP32 LVGL Gui-Guider的移植
fuluoce的博客
12-04 2070
按照上面的文章，使用Gui-Guider软件生成C代码之后，custom和generated是我们要使用到的文件， 其中custom是用来存放gui工程中我们自定义的一些代码，实际上如果没有自定义代码的话也可以不用，generated则是Gui-Guider工程生成的C代码，我们主要将这部分导入到我们的esp32s3工程中。到esp32的工程main目录下(已经移植好LVGL的工程)，创建一个ui文件夹，将custom和generated放入此文件夹内。这块很主要，设置正确才能编译通过。
【ESP32+LVGL】Vscode+platformio之GUI-Guider工程代码移植
ArsenLupin的博客
01-03 6935
【ESP32+LVGL】Vscode+platformio之GUI-Guider工程代码移植笔记
[LVGL]GUI gui 生成图形界面代码移植到esp32
amimax的博客
10-15 3280
LVGL配置，GUI gui 一直到 LVGL当中，使用platformio进行开发
cfGUI:一个用于M5Stack（ESP32）的简单GUI库
05-27
cfGUI 一个用于M5Stack（ESP32）的简单GUI库 该库旨在在基于ESP32的M5Stack开发板上（ ）上运行。 但是，应该很容易将其移植到带有LCD屏幕和3个物理按钮的任何其他板上。 它由可在屏幕上绘制的简单图形控件组成。 到目前为止，已经创建了以下窗口小部件： 屏幕和AppScreen（具有顶部栏和底部栏的屏幕） 酒吧 StatusBar（带有正常运行时间，时钟和Wifi信号的Bar） ButtonInfoBar（显示物理按钮的功能） 按钮，UpDownButton 小部件的镶嵌 如何（Platform.io） 要将此库与您的platform.io项目一起使用，只需将库克隆或下载到项目的“ lib”目录中即可。 然后，您只需要包含标题（例如#include <Screen>）并编写一些代码。 如果您需要一些启发，请查看示例；-) 这是platf
LVGL NXP GUI-Guider 软件
08-10
LVGL NXP GUI-Guider 软件 ，用于lvgl 的可视化编程，可以配合esp32 lvgl实现
Gui-Guider-Setup-1.7.2-GA
06-02
Gui-Guider-Setup-1.7.2-GA 免费版
ESP32 基于GUI-Guider屏幕UI开发教程
gdyfighting的博客
01-03 2094
ESP32 基于GUI-Guider屏幕UI开发教程
ESP32+PIO+LGVL+gui_guider
Dwyer的博客
11-05 2495
本文基于VScode上安装platform插件（简称PIO）来开发ESP32，屏幕显示使用LVGL+gui_guider。
ESP32S3R8+Gui Guider 运行 LVGL
nixgnauhcuy's blog
12-07 1873
基于 ESP32S3R8 和 Gui Guider 实现 LVGL 显示
Gui Guider 生成代码移植到匠芯创平台
Dazed_peg的博客
06-07 3459
Gui Guider 生成代码移植到匠芯创平台系列--手动添加移植代码
gui-guider1.4.1下载
11-22
gui-guider1.4.1是一款用于创建用户界面的软件开发工具包（SDK）。如果您想下载gui-guider1.4.1，您可以按照以下步骤进行操作。 首先，打开您的网络浏览器，然后在搜索引擎中输入“gui-guider1.4.1下载”。您将会看到一系列相关的搜索结果。 接下来，选择一个可信赖的网站，并点击进入。然后，在网站上搜索gui-guider1.4.1下载的链接。 找到下载链接后，点击下载按钮。可能会弹出下载提示框，您可以选择保存文件的位置。 为了确保您的设备的安全性，建议您只从官方或可信赖的来源下载软件。这可以减少恶意软件或病毒的风险。 一旦下载完成，您可以在保存的位置找到gui-guider1.4.1的安装文件。双击安装文件，按照提示完成软件的安装。 安装完成后，您就可以开始使用gui-guider1.4.1来创建用户界面了。根据您的需求，您可以参考软件的官方文档或在线教程来学习如何使用它。 总的来说，下载gui-guider1.4.1只需要按照上述步骤操作即可。希望对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值