当前位置：首页 > news >正文

ESP32-IDF LVGL UI 设计工具的使用

news 2025/7/19 17:17:27

概述

本文首先会简单讲解一下LVGL的特点以及两款常见的UI设计工具，本文主要讲解的是恩智浦开发的GUI-Guider软件，另外一个lvgl官网开发的SquareLine Studio软件本文不做讲解。
UI设计软件：Gui-Guider
LVGL版本：8.3.10
平台：ESP32-S3
IDE：ESP32-IDF

简介

LVGL 简介

官网文档：LVGL官网参考文档
LVGL是由Gabor Kiss-Vamosi在2016年创建的一个开源项目。LVGL是用C语言编写的，支持多种操作系统，例如Linux、Window、RTOS等。随着越来越多的志愿者参与到该项目中，LVGL开始提供更多的语言绑定，例如Python、Micropython等，以及多种开发工具。
LVGL主要特点：
轻量级：只需要少量的记忆体和运算资源，可以在低端的微控制器上运行。
跨平台：可以在不同的硬件和软件平台上运行
开发简单：采用了面向对象的设计，可以方便创建和管理GUI的组件和属性。
软硬件需求
1）16、32或64位微控制器或处理器
2）运行主时钟速率 >16MHz
3）Flash/Rom基本要求 >64KB(推荐：>180KB)
4）RAM基本要求：
5）堆栈：>2KB（建议>8KB）
6）动态数据（堆）：>4KB（如果使用对象过多，建议>32KB。
7）显示缓冲区： >“水平分辨率”像素（推荐：> 10 X“水平分辨率”）

UI设计工具

目前常用的LVGL UI设计工具有两个，第一个是恩智浦（NXP）官网提供的GUI-Guider，第二个是LVGL官网提供的SquareLine Studio。

GUI-Guider

截至本文编写时，软件版本已经更新到1.9.1版本，下载使用该软件需要NXP账号。软件初始化页面如下图所示，Gui-Guider支持lvgl源码版本为9.2.1和8.3.10。
在这里插入图片描述

SquareLine Studio

截至本文编写时，软件版本为1.5.3版本。该设计工具的优势在于比NXP的组件更多，示例更更富。缺点就是个人学习使用免费，不得用于商业。不登陆账号直接使用可以试用30天，之后需要登陆账号获取许可证才能继续使用。软件初始化界面如下图示，SquareLine Studio支持的lvgl版本有8.3、9.1、9.2。由于示例的程序不一样，所以其支持的详细版本也不一样。
在这里插入图片描述

Gui-Guider 软件使用

由于NXP提供的Gui-Guider 软件是免费使用的所以笔者也直接果断的选择了该软件来设计UI页面，设计好的UI页面编译成功后会直接生成lvgl源码，只需要将生成的源码移植到lvgl工程中即可。

创建工程

点击“创建新项目->v8.3.10->Simulator->EmptyUI->选择对应工程目录和配置点击创建”，最有一项的配置需要根据屏幕驱动IC和软件驱动去修改，不同屏幕选项不同笔者在这里不做过多描述。笔者的屏幕为240X240的分辨率且为圆屏，色彩深度为16bit。
在这里插入图片描述
如何修改背景形状可以拖拽该标志，向上拖拽增加弧度，向下增加角度。

然后根据需求修改和增加组件和图形，增加后如图所示两个页面main和control。无需和笔者一样，可以自由添加组件。

按照想法修改UI后点击右上角的编译选项并选择c语言，等待编译后切换到代码编辑页面就可以看到生成的源码。
在这里插入图片描述

将custom文件夹下的文件和Generated文件夹下的文件全部复制到lvgl工程中去，然后修改cmake添加编译链接。编译后烧录即可。