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

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

相关文章
快速入门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元/天 解锁文章
mucherry
关注
专栏目录
如何将使用GUI-Guider生成的LVGL移植到ESP32
嘉禾天成‘s Blog
04-12 3316
ESP32移植GUI-Guider制作的图形界面
ESP32学习笔记 -- ESP32使用GUI-Guider制作LVGL图形界面
热门推荐
EmbedIoT Studio
11-18 2万+
上一篇文章讲述了如何移植嵌入式图形界面库LVGL到ESP32芯片平台，并成功在ESP32上面运行LVGL的官方demo，上一篇文章请参考以下链接。 ESP32学习笔记 - 移植LVGL_EmbedIoT Studio-CSDN博客 截止至2021年11 月，LVGL官方尚未推出PC端的GUI设计工具，因此，在大多数情况下使用LVGL开发图形界面的时候，都是用代码的方式进行界面布局设计的，而不是使用拖曳控件的方式进行设计，这样会让工程师的工作量增加不少。 有痛点就有工程师想办法解决，恩智浦（NXP）为了
【ESP32+LVGL】Vscode+platformio之GUI-Guider工程代码移植
ArsenLupin的博客
01-03 5566
【ESP32+LVGL】Vscode+platformio之GUI-Guider工程代码移植笔记
Arduino应用开发——使用GUI-Guider制作LVGL UI并导入ESP32运行
ShenZhen_zixian的博客
03-03 5442
GUI Guider是一个专门针对LVGL开发了一个上位机GUI设计工具，可以通过拖放控件的方式设计LVGL GUI页面，加速GUI的设计。设计完成的UI页面可以在PC上仿真运行，确认设计完毕之后可以生成C代码，再整合到MCU项目中。
ESP32移植Zephyr RTOS（二）-----使用LVGL
最新发布
godmial的博客
10-15 844
478208286你可能会好奇，上一章还是hello world呢，怎么一下子就跳到lvgl了？其实这就是zephyr，你只需要知道怎么配置设备树，很多东西都是拿来即用的，使用zephyr开发说明白了就是配置配置东西，跟Linux很像，所以本篇文章最主要是讲解一下怎么配置。
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 1560
按照上面的文章，使用Gui-Guider软件生成C代码之后，custom和generated是我们要使用到的文件， 其中custom是用来存放gui工程中我们自定义的一些代码，实际上如果没有自定义代码的话也可以不用，generated则是Gui-Guider工程生成的C代码，我们主要将这部分导入到我们的esp32s3工程中。到esp32的工程main目录下(已经移植好LVGL的工程)，创建一个ui文件夹，将custom和generated放入此文件夹内。这块很主要，设置正确才能编译通过。
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
ESP32+PIO+LGVL+gui_guider
Dwyer的博客
11-05 2294
本文基于VScode上安装platform插件（简称PIO）来开发ESP32，屏幕显示使用LVGL+gui_guider。
Gui-Guider-1.4.1
01-17
Gui-Guider-1.4.1是针对LVGL8.2.0版本的一个图形化开发工具，它为开发者提供了一个更直观、便捷的方式来设计和实现LVGL的GUI应用。 Gui-Guider 1.4.1的主要功能可能包括以下几点： 1. **图形化设计界面**：Gui-...
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-Arduino开发》GUI设计 LVGL 开发环境搭建教程（从工程目录到模拟器）
MGodmonkey的专属博客
08-13 1万+
前言：最近闲着无聊，看到手头正好有一块tft彩屏，想着拿来玩玩。既然用到了显示屏，自然是离不开ui设计，lvgl是嵌入式一个开源图形库，具备“Light”(轻量)和"Versatile"(可用性强)等特点。对于我而言，最难的莫过于最初的环境搭建了，许多学习的热情在此刻被逐渐浇灭。但功夫不负有心人，花了一天终于是学会了个大概。 跟随我的步伐，教你从0到1搭建LVGL开发环境！ 文章目录1.准备工作2.工程创建（基于VScode+PlatformIO）1.创建Platform工程2.向platform工程中.
【ESP32S3学习笔记】LVGL开发之导入GUI-GUIDER工程
lunzilx的博客
10-14 5399
利用GUI-GUIDER 方便的进行LVGL UI的开发
Gui Guider 生成代码移植到匠芯创平台系列--手动添加移植代码
Dazed_peg的博客
06-07 2486
Gui Guider 生成代码移植到匠芯创平台系列--手动添加移植代码
[LVGL]GUI gui 生成图形界面代码移植到esp32
amimax的博客
10-15 2881
LVGL配置，GUI gui 一直到 LVGL当中，使用platformio进行开发
ESP32+PIO+LGVL+gui_guider之【BUTTON实体按键】
Dwyer的博客
11-16 1996
LVGL 实体按键
GUI Guider（V1.7.2） 设计UI在嵌入式系统上的应用（N32G45XVL-STB）
mftang的博客
06-17 2365
本文主要介绍使用GUI Guider工具设计UI，该UI的底层实现方式是基于lvgl。文中详细介绍了使用GUI Guider创建项目的全部过程，包括生成代码，编译和仿真。重点介绍了如何将GUI Guider 生成的UI代码移植到嵌入式系统中，笔者使用N32G45XVL-STB板块，通过实操的方式介绍了完整的实现过程。
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、付费专栏及课程。

余额充值