Arduino应用开发——使用GUI-Guider制作LVGL UI并导入ESP32运行

这篇具有很好参考价值的文章主要介绍了Arduino应用开发——使用GUI-Guider制作LVGL UI并导入ESP32运行。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Arduino应用开发——使用GUI-Guider制作LVGL UI并导入ESP32运行

前言

GUI Guider是一个专门针对LVGL开发了一个上位机GUI设计工具,可以通过拖放控件的方式设计LVGL GUI页面,加速GUI的设计。设计完成的UI页面可以在PC上仿真运行,确认设计完毕之后可以生成C代码,再整合到MCU项目中。

1 使用GUI-Guider设计UI

1.1 创建工程

打开GUI-Guider,选择自己要使用的LVGL版本,V7或者V8,两个版本差别较大,有些控件不兼容,这点需要注意。
gui guider lvgl 多级菜单控件,ui,LCD,lvgl,esp32,GUI-Guider
注:我使用的GUI-Guider版本是1.6.1。其他版本应该是基本一样的。

gui guider lvgl 多级菜单控件,ui,LCD,lvgl,esp32,GUI-Guider
设备模板选择空白,因为ESP32并不包含在这个软件的模板里面。
gui guider lvgl 多级菜单控件,ui,LCD,lvgl,esp32,GUI-Guider
应用模板可以根据自己的需要选择空白模板或者测试demo。
gui guider lvgl 多级菜单控件,ui,LCD,lvgl,esp32,GUI-Guider
项目配置根据自己的情况设置。
注:如果你屏幕的尺寸跟测试demo的尺寸不一致,里面的布局可能会被打乱,素材可能也会被拉伸。
空白模板如下:
gui guider lvgl 多级菜单控件,ui,LCD,lvgl,esp32,GUI-Guider
测试demo如下:
gui guider lvgl 多级菜单控件,ui,LCD,lvgl,esp32,GUI-Guider

1.2 设计UI

创建项目之后就可以开始设计自己的UI了。
空白模板如下:
gui guider lvgl 多级菜单控件,ui,LCD,lvgl,esp32,GUI-Guider
测试demo如下:
gui guider lvgl 多级菜单控件,ui,LCD,lvgl,esp32,GUI-Guider
UI设计好以后,点击C编译。编译成功后会在PC上仿真运行。
gui guider lvgl 多级菜单控件,ui,LCD,lvgl,esp32,GUI-Guider
仿真结果如下:
gui guider lvgl 多级菜单控件,ui,LCD,lvgl,esp32,GUI-Guider

2 ESP工程导入UI

2.1 移植LVGL

关于这个,我之前发过博客,不懂的同学可以先看下。
Arduino应用开发——esp32 lvgl v8.3环境搭建

2.2 移植UI文件

打开上面GUI-Guider的工程目录,customgenerated文件夹里面全部都是UI相关的文件,我们把这些文件移植到ESP32的工程里面即可。
gui guider lvgl 多级菜单控件,ui,LCD,lvgl,esp32,GUI-Guider
在ESP32工程的src文件夹(也就是main.cpp所在目录),新建一个文件夹用来存放UI文件,名字随意(我这里命名为lvgl_ui)。
把上面说的customgenerated文件夹里面的文件全部放到ESP32工程这个新建的文件夹(lvgl_ui)里面。
gui guider lvgl 多级菜单控件,ui,LCD,lvgl,esp32,GUI-Guider
拷贝完成后,用VScode打开ESP32的工程,编译。

注意几个容易出错的点:
1、根据设计UI的不同,有些文件需要进行修改才能编译通过,比如一些图像素材文件,需要将#include "lvgl/lvgl.h"改成#include "lvgl.h"。可以先编译一下,看看有没有报错。
2、制作UI时用到的控件,需要在ESP32工程的lv_conf.h里面打开相应的宏。
3、有些控件在GUI-Guider上面有,但是ESP32工程上移植的LVGL可能没有,如果出现这种情况,可以把GUI-Guider工程上面对应控件的几个文件也移植到ESP32工程对应的位置即可。

如果报错如下:
gui guider lvgl 多级菜单控件,ui,LCD,lvgl,esp32,GUI-Guider
#include "lvgl/lvgl.h"改成#include "lvgl.h",然后重新编译即可。
gui guider lvgl 多级菜单控件,ui,LCD,lvgl,esp32,GUI-Guider

2.3 调用UI文件

1)添加头文件
在main.cpp里面把前面加的UI文件包含进去。

// 前面的lvgl_ui是文件夹名称,根据自己的文件夹修改
#include "lvgl_ui\events_init.h"
#include "lvgl_ui\gui_guider.h"
#include "lvgl_ui\custom.h"

2)创建一个UI

lv_ui guider_ui;

3)初始化UI

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

完整的示例代码如下:

#include <Arduino.h>
#include <SPI.h>
#include <TFT_eSPI.h>
#include "lvgl.h"
#include "lvgl_ui\events_init.h"
#include "lvgl_ui\gui_guider.h"
#include "lvgl_ui\custom.h"

lv_ui guider_ui;

TFT_eSPI tft = TFT_eSPI(); 

static lv_disp_draw_buf_t draw_buf;


/* Display flushing */
void my_disp_flush(lv_disp_drv_t *disp_drv, const lv_area_t *area, lv_color_t *color_p)
{
  uint32_t w = ( area->x2 - area->x1 + 1 );
  uint32_t h = ( area->y2 - area->y1 + 1 );

  tft.startWrite();
  tft.setAddrWindow( area->x1, area->y1, w, h );
  tft.pushColors( ( uint16_t * )&color_p->full, w * h, true );
  tft.endWrite();

  lv_disp_flush_ready( disp_drv );
}

/*Read the touchpad*/
void my_touchpad_read( lv_indev_drv_t * indev_drv, lv_indev_data_t * data )
{
}

void lvgl_user_init(void)
{
  lv_init();
  
  /*Set the touchscreen calibration data,
    the actual data for your display can be acquired using
    the Generic -> Touch_calibrate example from the TFT_eSPI library*/
  // uint16_t calData[5] = { 275, 3620, 264, 3532, 1 };
  // tft.setTouch( calData );
  
  lv_color_t* buf1 = (lv_color_t*) heap_caps_malloc(240 * 240, MALLOC_CAP_SPIRAM);
  // lv_color_t* buf2 = (lv_color_t*) heap_caps_malloc(240 * 240, MALLOC_CAP_SPIRAM);
  lv_disp_draw_buf_init( &draw_buf, buf1, NULL, 240 * 240);

  /*Initialize the display*/
  static lv_disp_drv_t disp_drv;
  lv_disp_drv_init( &disp_drv );
  /*Change the following line to your display resolution*/
  disp_drv.hor_res = 240;
  disp_drv.ver_res = 240;
  disp_drv.flush_cb = my_disp_flush;
  disp_drv.full_refresh = 1;
  disp_drv.draw_buf = &draw_buf;
  lv_disp_drv_register(&disp_drv);

  /*Initialize the (dummy) input device driver*/
  static lv_indev_drv_t indev_drv;
  lv_indev_drv_init(&indev_drv);
  indev_drv.type = LV_INDEV_TYPE_POINTER;
  indev_drv.read_cb = my_touchpad_read;
  lv_indev_drv_register(&indev_drv);

  setup_ui(&guider_ui);
  events_init(&guider_ui);
  custom_init(&guider_ui);
}

void setup() 
{
  Serial.begin(115200);
  tft.begin();
  tft.setRotation(0);
  tft.fillScreen(TFT_BLACK);

  lvgl_user_init();
}

void loop()
{
  lv_timer_handler(); /* let the GUI do its work */
  delay(5);
}

2.4 烧录测试

运行结果如下,手机拍照有失真,将就着看吧。
gui guider lvgl 多级菜单控件,ui,LCD,lvgl,esp32,GUI-Guider

结束语

关于使用GUI-Guider工程导入esp32运行就讲到这里,我这里只是简单介绍了一下整个移植的流程,具体的一些细节和问题,还需要根据实际情况处理,有什么问题的欢迎评论区留言。

想了解更多Arduino的内容,可以关注一下博主,后续我还会继续分享更多的经验给大家。
Arduino的开发教程汇总:
https://blog.csdn.net/ShenZhen_zixian/article/details/121659482

如果这篇文章能够帮到你,就…你懂得。
gui guider lvgl 多级菜单控件,ui,LCD,lvgl,esp32,GUI-Guider文章来源地址https://www.toymoban.com/news/detail-841489.html

到了这里,关于Arduino应用开发——使用GUI-Guider制作LVGL UI并导入ESP32运行的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Python GUI应用程序开发之wxPython库详解

      wxPython是一个强大的跨平台GUI工具包,它使用Python编程语言开发,提供了丰富的控件功能。如果你是一名Python开发者,而且希望创建一个功能齐全的桌面应用程序,那么wxPython是一个值得考虑的选择。wxPython是wxWidgets C++库的Python绑定版本,它支持各种操作系统,包括Windows、

    2024年02月05日
    浏览(43)
  • 痞子衡嵌入式:使用恩智浦GUI Guider快速创建全新LCD屏示例工程的步骤

    大家好,我是痞子衡,是正经搞技术的痞子。今天痞子衡给大家分享的是 使用恩智浦GUI Guider快速创建全新LCD屏示例工程的步骤 。 在痞子衡旧文 《在i.MXRT1170上快速点亮一款全新LCD屏的方法与步骤》 里,痞子衡介绍了在官方 SDK 裸机驱动 elcdif 示例工程基础上做修改以支持一

    2024年03月13日
    浏览(48)
  • GUI Guider设计UI界面移植到STM32

    什么是 GUI-Guider? GUI Guider 是恩智浦为 LVGL 开发了一个上位机GUI 设计工具,可以通过拖放控件的方式设计 LVGL GUI 页面,加速 GUI 的设计。 设计完成的 GUI 页面可以在 PC 上仿真运行,预览自己设计的UI界面。确认设计完毕之后可以生成 C 代码,再整合到 MCU 项目中。 软件下载地址

    2024年02月02日
    浏览(38)
  • GUI——LVGL移植+STM32f407zgt6(正点原子最小系统板+GUI Guider

    首先是GUI Guider的介绍 GUI Guider是NXP公司开发的一个图形化软件,对于初学GUI或者写ui界面的小白们非常合适,也非常方便,现在就示例写一个demo  首先是初始化界面,在相应的位置填写相关信息(文件名,是否使用模板,以及数据位,最重要的 是大小),这个显示的大小要和

    2023年04月24日
    浏览(58)
  • Qt应用开发——QLabel的使用

            QLabel标签继承于QFrame,QFrame继承于QWidget,是Qt中最基础也是最常用的控件。         框架类QFrame介绍         QLabel不提供用户交互功能,标签的视觉外观可以通过多种方式进行配置,并且可以使用它为其他界面的标签,QLabel可以用来显示以下这些内容: 纯文本

    2024年02月17日
    浏览(50)
  • 如何使用Python进行桌面应用开发?

    Python提供了多个库和框架来进行桌面应用开发。以下是使用Python进行桌面应用开发的常用方法之一: PyQt:PyQt是一个用于开发跨平台桌面应用的Python库,它提供了丰富的GUI组件和工具。以下是使用PyQt创建桌面应用的基本步骤: a. 安装PyQt库:使用pip命令安装PyQt库,例如: p

    2024年02月17日
    浏览(43)
  • 使用WPF开发BLE应用

    使用.NET Framework 先上官方文档: 蓝牙 GATT 客户端,文档是关于UWP开发BLE的,WPF如果要使用BLE的API,得手动添加几个引用(可参考这篇文章),该文章说需要添加3个引用,不过我创建的WPF应用默认已经有 WindowBase 引用,只添加了一个 Windows.winmd 引用就可以使用BLE相关的API了,另

    2024年02月03日
    浏览(52)
  • 使用Java来开发物联网应用

    这是Hello, Lithosphere Tutorials系列教程中的其中一篇。 感觉介绍用C/C++,用Python来开发物联网应用的文章比较多,用Java来做物联网的文章比较少。 这篇文章,介绍如何使用Java技术来开发一个物联网的简单例子。我们从手机App上,遥控硬件板上的LED灯亮灯、熄灯、闪灯。 我们学

    2024年02月03日
    浏览(39)
  • 使用STM32进行联网应用开发(代码可取)

    随着互联网技术的普及和物联网应用的兴起,各种设备和系统开始向互联网靠拢,实现互联互通。在这样的背景下,嵌入式系统的联网需求变得愈发迫切。传统的嵌入式系统往往只需实现单机功能,与外界通信的方式也大多是基于串口通信或者局域网通信,而现在越来越多的

    2024年04月09日
    浏览(38)
  • 如何使用Java进行桌面应用的开发?

    使用Java进行桌面应用的开发可以借助JavaFX或Swing框架。下面为你提供一些基本的步骤: 安装Java开发工具包(JDK):首先,确保你已经安装了Java开发工具包(JDK),并正确配置了环境变量。 选择GUI框架:Java提供了两个主要的桌面GUI框架:JavaFX和Swing。JavaFX是Oracle推荐的最新的

    2024年02月09日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包