最简单快速的ESP-IDF使用LVGL教程

已于 2024-03-18 10:09:28 修改
阅读量1.3k 收藏 20
点赞数 19
分类专栏： esp32 文章标签： linux 嵌入式硬件 单片机
于 2024-03-12 23:18:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30479517/article/details/136657568
版权

最简单快速的ESP-IDF使用LVGL教程


最近在研究如何使用esp-idf来在esp32上使用lvgl。在网上查看到的许多教程都是基于lv_port_esp32完成的，但是这个库已经很久没更新了，并且使用的是idf4.2；然后还有一些教程需要修改许多地方，看着就头疼。

但是最后发现，其实官方已经给我们了一个LVGL的demo，如果屏幕驱动芯片和demo里的一样的话，是直接可以编译运行的，不需要什么额外的配置。而且LVGL其实是可以作为工程的一个component，并且支持通过menuconfig直接进行配置，十分的方便。下面就来介绍一下实现流程。

操作环境

操作系统：Ubuntu
IDF：5.1
LVGL：8.3.11
芯片：ESP32S3

我这里采用操作系统是Ubuntu，在Linux环境下使用idf是十分的丝滑，并且编译速度很快。

LVGL采用的是8.3.11版本，按理来说应该是支持更高版本的LVGL，但是由于Squareline Studio里最大支持的lvgl版本为8.3.11，因此我们这里也默认使用8.3.11版本。

移植步骤

新建工程

我们首先将demo工程“spi_lcd_touch”复制出来。
在这里插入图片描述
我们可以在main文件夹中的“idf_component.yml”文件中可以看到这个工程需要用到的库。
在这里插入图片描述
其中"esp_lcd_ili9341"、“esp_lcd_gc9a01”、"esp_lcd_touch_stmpe610"分别为两个屏幕ic和一个触摸ic。

之后我们要根据我们开发板芯片的不同设置不同的target

idf.py set-target esp32 #设置目标芯片为esp32
idf.py set-target esp32s3 #设置目标芯片为esp32s3

在构建工程的时候这些需要的库将会自动下载到“manage_components”文件夹中，我们可以打开看一下，在文件夹中我们可以看到其中包含，以及屏幕和触摸的驱动。
在这里插入图片描述

我们先执行命令构建一下工程。

idf.py build

可以看到项目构建成功。
在这里插入图片描述
虽然在前面步骤中我们已经添加了相关的库文件，但是在我们需要清理工程文件，也就是执行“idf.py fullclean”的时候，“manage_components”文件夹也会被清理掉，在下次构建工程的时候还需要下载，十分的不方便。

因此我们可以将该文件夹下的文件移动到“components”文件夹下（如果没有该文件夹可以自行新建一个），该文件夹下的文件在清理工程的时候不会被删除。并且如果我们需要什么其它的库文件，也都可以直接添加到该文件夹中，十分的方便。
在这里插入图片描述

适配屏幕及触摸

该demo中默认支持的屏幕驱动为gc9a01、ili9341，触摸ic为stmpe610。由于每个人使用的屏幕尺寸和驱动ic以及触摸ic的型号都有所不同，因此在很多情况下我们还要对屏幕驱动以及触摸驱动进行修改。

寻找驱动

首先我们需要找到与我们屏幕对应的驱动，这个其实已经有很多前辈给我们写过了，我们只用站在巨人的肩膀上即可。这里推荐一个官方的下载网站esp components，这里面有很多我们可以用到的库，包括屏幕驱动，触摸驱动，cam驱动等各种可能会用到的库。
在这里插入图片描述

在使用时，我们只需要在其中搜索并将下载的文件夹放到我们的“components”文件夹中即可；也可以使用官方推荐的

idf.py add-dependency "*****"

后一种方式还是在编译工程的时候自动下载到“manage_components”文件夹。

个人还是推荐第一种方法。

修改屏幕驱动

在下载好对应驱动之后，我们需要将demo中的驱动修改为我们自己屏幕对应的驱动。

由于我这里屏幕驱动为demo中已经包含的ili9341，因此这里我只简要介绍一下修改方法。

  • 首先添加对应的头文件
    在这里插入图片描述
  • 将”esp_lcd_new_panel_ili9341“改为”esp_lcd_new_panel_“，其中就是你自己使用的屏幕ic型号。
    在这里插入图片描述

修改触摸驱动

如果我们的屏幕还有触摸功能的话，我们还要修改对应的触摸驱动。我的屏幕触摸ic为xpt2046。demo中的默认驱动为stmpe610，这里我们首先要下载xpt2046的驱动到components文件夹中，并将其头文件包含进来。由于该ic也是使用spi进行驱动，并且参考其驱动示例发现，使用方法和stmpe610类似，但函数名称有所不同，因此仅需要将文件中的函数名称进行修改即可

ESP_ERROR_CHECK(esp_lcd_touch_new_spi_xpt2046(tp_io_handle, &tp_cfg, &tp));

我这里是参考stmpe610的方法添加了宏。

  • 首先在main函文件夹下的”Kfconfig.projbuild“的“EXAMPLE_LCD_TOUCH_CONTROLLER“选项中添加我们自己的触摸ic：XTP2046
    在这里插入图片描述

  • 在“spi_lcd_touch_example_main.c”文件中出现“STMPE610”的地方，仿照其格式添加我们自己的触摸ic配置。（没记错的话应该就以下三处）
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 在menuconfig的Example Configuration中修改触摸ic的选择（menuconfig如何进入在下一节的“LVGL相关设置”中会介绍）
    在这里插入图片描述
    设置完成后保存退出即可。

此外，在“spi_lcd_touch_example_main.c”文件中我们可以看到，触摸ic和屏幕驱动ic是共用CLK、MISO、MOSI三根线的，如果你的屏幕上触摸ic和屏幕驱动ic这三根线是相互独立的话，需要用烙铁分别将它们连接起来，才能够正常使用触摸。

此外，在实际测试中，发现我的触摸会关于屏幕短边镜像，修改tp_cfg中的mirror_x也没有用，具体原因不明，我是在example_lvgl_touch_cb函数中进行了如下修改才得以更正(大家如果知道是什么原因的话欢迎指正)在这里插入图片描述

LVGL相关设置

在ESP-IDF中，我们是可以直接使用menuconfig图形化界面来设置LVGL的相关参数的，进入图形化界面的命令为

idf.py menuconfig

之后在Component config中就能找到lvgl配置选项如下：
在这里插入图片描述
在其中我们选择显示CPU和内存状态
在这里插入图片描述

下载测试

在以上工作完成后，我们将程序烧录到我们的开发板上，就能看到效果了。
在这里插入图片描述

更换我们自己设计的UI

UI的设计这里我采用的是SquareLine Studio，版本为1.4.0。该软件有个人版本，不收费，能免费使用，但是创建的页面个数和控件个数会有所限制。具体的使用方法可以在b站上搜索相关教程。
这里我创建了一个测试的demo，项目设置、界面和导出的文件夹如下：
项目设置
在这里插入图片描述
导出的文件夹

这里我将其作为一个库放进了esp-idf的工程中的“components”文件夹下。
在这里插入图片描述
这里我们要修改其中的CMakeist.txt文件，使其符合idf工程要求
在这里插入图片描述
之后我们将原demo中的显示示例“example_lvgl_demo_ui(disp)”注释掉并添加我们自己创建的界面“ui_init()”。
在这里插入图片描述

重新下载测试

重新编译下载后的效果如下，说明我们移植成功
在这里插入图片描述

需要完整代码请在公众号：通信电子坊，回复：“ESP-IDF移植LVGL”获取。

zxfeng~
关注
  • 19
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
专栏目录
esp-idf-st7789:ST7789 esp-idf的驱动
03-28
esp-idf-st7789 ST7789 esp-idf的驱动 Dmitry Andreev的演示视频。 ESP32的安装 git clone https://github.com/nopnop2002/esp-idf-st7789 cd esp-idf-st7789/ idf.py set-target esp32 idf.py menuconfig idf.py flash ESP32-S2的安装 git clone https://github.com/nopnop2002/esp-idf-st7789 cd esp-idf-st7789/ idf.py set-target esp32s2 idf.py menuconfig idf.py flash 您必须使用menuconfig设置此配置值。 CONFIG_WIDTH CONFIG_HEIGHT CONFIG_OFF
esp-idf-ftpServer：使用FAT文件系统的esp-idf的ftp服务器
02-16
esp-idf-ftpServer 使用FAT文件系统的esp-idf的FTP服务器。 我找到了信息。 因此，我从移植。 由于它使用FAT文件系统而不是SPIFFS，因此可以执行目录操作。 ESP32的安装 git clone https://github.com/nopnop2002/esp-idf-ftpServer cd esp-idf-ftpServer/ idf.py set-target esp32 idf.py menuconfig idf.py flash monitor ESP32-S2的安装 git clone https://github.com/nopnop2002/esp-idf-ftpServer cd esp-idf-ftpServer/ idf.py set-target esp32s2 idf.py menuconfig idf.py flash mon
ESP32基础应用之使用ESP-IDF自带程序实现LVGL
最新发布
while（1）
04-01 1034
必填
esp-idf-rc522:用于将ESP32与MFRC522 RFID读卡器接口的C库，打包为ESP-IDF组件
05-18
esp-idf-rc522 用于将ESP32与MFRC522 RFID读卡器接口的C库 演示版 如何使用 该目录是ESP-IDF组件。 将其克隆（或将其添加为子模块）到项目的components目录中。 例子 # include " esp_log.h " # include " rc522.h " static const char * TAG = " app " ; void tag_handler ( uint8_t * sn) { // serial number is always 5 bytes long ESP_LOGI (TAG, " Tag: %#x %#x %#x %#x %#x " , sn[ 0 ], sn[ 1 ], sn[ 2 ], sn[ 3 ], sn[ 4 ] ); } void app_main ( void ) {
ESP-IDF构建自定义组件模板，ESP32
08-23
ESP-IDF构建自定义组件模板，ESP32
esp-idf-lua:ESP-IDF 的 Lua 组件
05-29
ESP-IDF 的 Lua 组件 版本 5.4.2 什么是路亚？ Lua 是一种强大、高效、轻量级、可嵌入的脚本语言。 它支持过程编程、面向对象编程、函数式编程、数据驱动编程和数据描述。 Lua 将简单的过程语法与基于关联数组和可扩展语义的强大数据描述结构相结合。 Lua 是动态类型的，通过使用基于寄存器的虚拟机解释字节码来运行，并具有带增量垃圾收集的自动内存管理，使其成为配置、脚本和快速原型设计的理想选择。 如何使用 将此存储库克隆到您项目的components子目录中： cd ~ /my_esp_idf_project mkdir components cd components git clone [email protected]:UncleRus/esp-idf-lua.git 或者将其克隆到任何其他目录并将其添加到您的项目Makefile或CMakeLists.txt ：
ESP32在ESP-IDF框架下使用LVGL（v8.3）
小魏先生
04-15 4586
需要将lvgl_helpers.c的第180行，修改成如下代码，如果是其它芯片比如ESP32S2等，也要做相应的修改，网上有相关的教程。3、在VScode中使用ctrl+shift+p，选择ESP-IDF:创建新的ESP-IDF组件,输入组件文件夹的名字（例如：my_ui），最新版的5.0.1弃用了些东西，而lvgl_esp32_drivers对5以上的版本未适配，所以。可复制下面的c程序中的内容。的主程序修改而来，源程序直接运行会报下图中的错误，需要将。1、设置屏幕尺寸，具体参数如下，注意红框内的内容。
vscode+ESP-IDF：编译网友移植好的LVGL工程(ESP32+ili9341+xpt2046笔记)
hwd00001的博客
09-06 3304
在某宝淘了一个2.8寸TFTLCD，驱动为ili9341+xpt2046，到手后，肯定是先找现成的代码试试显示。
ESP32_esp-idf_lvgl_V8环境搭建移植
叶子丶de花 博客
09-03 2954
ESP32移植LVGL8，把Demo例程中的main.c中的代码复制到ESP-IDF工程的main.c中，包括代码和头文件的包含都要挪过来。出错的过程可能不一样，有的错误在前面，有的在后面，可以朝后看是不是有相同错误。准备一个esp-idf的工程，路径无所谓，esp-idf的官方例程也可以。下面是具体使用的引脚配置，可以根据自己具体使用的配置，并且需要参考。打开设置按照上面的运行Demo例程中的设置，一样设置即可。的可能不会有这个问题。
ESP32 ESP-IDF LVGL8.3.3移植
晨之清风
12-10 5954
ESP32 ESP-IDF LVGL8.3.3移植。
ESP32基础应用之移植LVGL（ESP-IDF-V4.2 ）
while（1）
11-29 6004
必填
espressif-ide-setup-espressif-ide-2.4.0-with-esp-idf-4.4
02-06
乐鑫最新：espressif-ide-setup-espressif-ide-2.4.0；esp-idf-4.4
esp32-Simple-http-server:基本的HTTP服务器能够使用esp-idf和freertos接收HTTP请求
05-12
ESP32：简单的HTTP服务器 该项目是一个基本的HTTP服务器，能够接收http请求并做出相应的响应。 默认情况下，它实现以下HTTP动词：GET，POST，PUT，PATCH和DELETE，因此它也可以轻松地成为RESTfull服务器。 该服务器使用ESP32的（ESP-IDF） 入门 这些说明将为您提供在本地计算机上运行并运行的项目的副本，以进行开发和测试。 先决条件 您需要什么东西来安装软件以及如何安装它们 工具链 最新的ESP-IDF 跑步 编译之前，您应该先指定SSID和密码： #define AP_TARGET_SSID "Your SSID" #define AP_TARGET_PASSWORD "Your password" 默认情况下，ESP32设置为使用动态IP。 如果您希望使用静态IP取消注释，请调整以下设置： #define DEVICE_IP
ESP-IDF环境安装文件
02-22
ESP-IDF环境安装文件，含esp-idf-v4.0.1资源包、Git-2.35.1.2-64-bit安装包、python-3.7
FastLED-idf:ESP-IDF 4.0开发环境的FastLED端口
05-02
FastLED-idf和模式 TL; DR FastLED 3.3的此端口在4.x ESP-IDF开发环境下运行。 享受。 更新：2020年9月： I2S硬件正常工作，现在是默认设置。 RMT界面经过了良好的测试。 WS2812FX库已移植并正在运行。 有一些新的可调参数，如果您还正在解决故障，则需要阅读components/FastLED-idf/ESP-IDF.md 。 请注意，您必须使用ESP-IDF环境和ESP-IDF构建系统。 这就是创建路径和诸如此类的方式。 这是ESP-IDF入门指南的链接。 拉请求欢迎。 为什么我们需要FastLED-idf ESP32是一个非常不错的SOC软件包。 它有两个核心，240Mhz速度，一兆的DRAM（sorta），低功耗模式，wifi和蓝牙，可以在预制模块中使用，价格在24美元（Adafruit，Sparkfun），10美
esp-idf-zh:ESP-IDF 中文文档
05-01
ESP-IDF 编程指南 - 中文版 本文档是 ESP-IDF 官方文档的中文翻译版。 在线阅读： 中文版地址： 英文版地址： 参与翻译： 所有的.rst文件和部分的.h文件是需要翻译的源文件。翻译前求务必阅读 。 同时也欢迎修您正在阅读时发现的错误，例如错别字、格式错误等。 关于如何将.rst文件转换成html文件，请参考 。 翻译进度
esp-idf-json:ESP-IDF中的JSON序列化和反序列化的示例
05-22
esp-idf-json 使用ESP-IDF进行JSON序列化和反序列化的示例。 ESP-IDF包含cJSON库（版本：1.7.12）。 您可以将JSON组件用作标准组件。 但是文档非常差。 JSON组件的官方文档在。 是Dave Gamble的示例。 如何使用 ...
esp-idf-espnow-gateway:使用esp-idf的esp-now和MQTT之间的网关
03-21
esp-idf-espnow-gateway 使用esp-idf的esp-now和MQTT之间的网关。 我的灵感来自于。 ESP-NOW可以与ESP8266 / 8285一起使用，但我们不能同时使用WiFi。该项目将ESP-NOW接收的数据传输到MQTT。 电池寿命 ESP8266 / ...
ESP32开发：IDFV4.4配置LVGL8.3
wcc243588569的博客
07-11 1418
ESP32 IDF V4.4.4配置LVGL V8.3.8，基于官网教程步骤实现。介绍了LVGL可视化开发工具Sqrareline Studio
esp-idf配置lvgl
08-26
根据引用所述，使用Vscode或ESP-IDF CMD打开的设置和配置是一样的，两种方法都可以使用。 根据引用所述，在进行esp-idf配置lvgl时，需要做以下几个步骤： 1. 打开lv_fs_fatfs.c文件（路径：lvgl/src/extra/libs/fsdrv/）。 2. 在第10行的位置添加sd_card.h头文件（#include "sd_card.h")。 3. 将第230行的两个DIR修改为FF_DIR。 4. 在第92行处的fs_init(void)函数中调用sd_init()函数来初始化sd卡。 这样就完成了esp-idf配置lvgl的过程。请注意，使用这种方式移植文件系统与使用lv_fs_if组件的方式不同。在调用lv_init()函数时，已经初始化了SD卡并且挂载了文件系统。因此，不需要更改main.c的任何内容，就可以实现初始化SD卡和文件系统。 如果出现错误，说明下载的lv_esp32_drivers仓库可能不是指定的仓库（不是master主分支仓库）。可以在线查看lv_esp32_drivers/lvgl_helpers.c的内容，确认是否符合要求。由于LVGL的目录结构变化，lvgl_helpers.c文件的内容也可能发生变化。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [ESP32_esp-idf_lvgl_V8环境搭建移植](https://blog.csdn.net/qq_43588817/article/details/126680595)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [ESP32在ESP-IDF框架下为LVGL(v8.3)配置SD卡文件系统](https://blog.csdn.net/weixin_42181820/article/details/130199337)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zxfeng~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值