ESP32系列之LVGL(一):ESP32S3+ST7789点屏

系列文章目录



前言

第一次使用lvgl做ui,屏幕类的外设之前也鲜有使用,所以也讲不出个一二三四的原理来,只是站在前辈们的肩膀上摸索一下。本系列文章基于ESP32系列ESP-IDF框架下对lcd屏和lvgl的使用,仅用于笔者使用过程记录和参考,如果在使用过程中遇到了一些问题也会提出来希望各路大神不吝赐教。


一、LCD硬件

本人手中有一块ESP32S3-WROOM的开发板(8MBflash+2MBpsram)以及240*320大小、16 bit 色深的TFT屏幕两块。LCD屏幕使用的控制器都是ST7789,但接口略有不同,一块为SPI接口,一块为8080接口,下面为lcd的引脚描述:

SPI:

SPI LCD 引脚连接
LCDESP32S3
GNDGND
VCC3v3
SCL13(PCLK)
SDA12(MOSI)
RST11(不使用填-1)
DC10
CS9
BL46

8080:

这里讲一下8080接口接线:

1,2为背光灯控制,1为背光灯阴极,直接接地,2为阳极,接esp32s3的io;电源只需接4脚3.3v;7、8、9、10分别接入esp32s3对应io,11脚RD最好接3.3v拉高(看其它帖子说RD浮空会导致花屏);同时笔者由于初次接线时没有注意到12-19引脚对应的是D7-D0导致数据线12对应到了D0,因此这一点也需格外注意。

二、点屏代码

由于是初次点屏,因此先从IDF里的example/peripherals/lcd示例走起,spi接口先跑tjpgd示例,8080接口跑i80_controller示例。如果idf里没有这个示例,可以先升级一下IDF版本,当然也可以直接跑lvgl示例。

以下仅展示例程中的代码修改部分:

spi接口:

1.修改对应引脚io和屏幕大小:

#define EXAMPLE_LCD_BK_LIGHT_ON_LEVEL  1
#define EXAMPLE_LCD_BK_LIGHT_OFF_LEVEL !EXAMPLE_LCD_BK_LIGHT_ON_LEVEL
// #define EXAMPLE_PIN_NUM_DATA0          23  /*!< for 1-line SPI, this also refereed as MOSI */
// #define EXAMPLE_PIN_NUM_PCLK           19
// #define EXAMPLE_PIN_NUM_CS             22
// #define EXAMPLE_PIN_NUM_DC             21
// #define EXAMPLE_PIN_NUM_RST            18
// #define EXAMPLE_PIN_NUM_BK_LIGHT       5
#define EXAMPLE_PIN_NUM_PCLK           13       //SCL
#define EXAMPLE_PIN_NUM_DATA0          12  /*!< for 1-line SPI, this also refereed as MOSI */   //SDA
#define EXAMPLE_PIN_NUM_RST            11
#define EXAMPLE_PIN_NUM_DC             10
#define EXAMPLE_PIN_NUM_CS             9
#define EXAMPLE_PIN_NUM_BK_LIGHT       46

2,设置芯片类型及menuconfig参数配置:开启psram支持,速率为80M 

3.编译和烧录查看运行效果:

屏幕不亮的话修改背光电平。

8080接口:

1.修改对应引脚io和屏幕大小:

#define EXAMPLE_LCD_BK_LIGHT_ON_LEVEL  1

#define EXAMPLE_LCD_BK_LIGHT_OFF_LEVEL !EXAMPLE_LCD_BK_LIGHT_ON_LEVEL

#define EXAMPLE_PIN_NUM_DATA0          36       //19

#define EXAMPLE_PIN_NUM_DATA1          16

#define EXAMPLE_PIN_NUM_DATA2          37

#define EXAMPLE_PIN_NUM_DATA3          15

#define EXAMPLE_PIN_NUM_DATA4          38

#define EXAMPLE_PIN_NUM_DATA5          7

#define EXAMPLE_PIN_NUM_DATA6          39     //13

#define EXAMPLE_PIN_NUM_DATA7          6   //12



#define EXAMPLE_PIN_NUM_CS             42       //7

#define EXAMPLE_PIN_NUM_RST            4       //8

#define EXAMPLE_PIN_NUM_DC             41  //RS(9)

#define EXAMPLE_PIN_NUM_PCLK           5   //WR(10)



#define EXAMPLE_PIN_NUM_BK_LIGHT       20



// The pixel number in horizontal and vertical

#define EXAMPLE_LCD_H_RES              240

#define EXAMPLE_LCD_V_RES              320

2,设置芯片类型及menuconfig参数配置:开启psram支持,速率为80M

idf.py set-target esp32s3

idf.py menuconfig

3.编译和烧录查看运行效果:

有花屏且图标颜色不对。

4.问题解决

关于颜色不对的问题我一开始参照其它帖子在lvgl里设置颜色交换,但未解决问题。

后来查找代码,在esp_lcd_panel_dev_config_t 配置中将LCD_RGB_ENDIAN_RGB换成LCD_RGB_ENDIAN_BGR,图标从蓝色变成了黄色,但还是不对。最终在查找花屏原因的时候看到了这两行代码:

 // Set inversion, x/y coordinate order, x/y mirror according to your LCD module spec

 // the gap is LCD panel specific, even panels with the same driver IC, can have different gap value

    esp_lcd_panel_invert_color(panel_handle, true);

    esp_lcd_panel_set_gap(panel_handle, 0, 20);

发现这是进行颜色交换和设置屏幕间隙的API,将颜色交换改为false,间隙改为0,demo终于正常

演示。

esp_lcd_panel_invert_color(panel_handle, false);
esp_lcd_panel_set_gap(panel_handle, 0, 0);

显示效果(红色横杠为屏幕硬件上有条纹):

 

三、其它问题

1.之前使用另一款不带psram的esp32开发板通过8080驱动屏幕时屏幕一直处于花屏状态。因此暂不清除该现象是否与硬件有关。


总结

对lcd驱动的spi接口和8080接口只能说各有各的好处,目前笔者对此暂时理解不深,也就不多妄言,下次有机会再深入探讨。

### 如何在LCD显示上使用LVGL库实现GUI开发 #### 选择合适的硬件和软件环境 为了成功地在LCD显示上使用LVGL进行图形界面开发,需要准备支持的硬件设备和相应的开发环境。对于嵌入式系统来说,通常会选择带有适当处理器性能和支持外设接口(如SPI或I2C)的微控制器来连接LCD[^3]。 #### 安装配置LVGL库 安装LVGL库是项目启动的第步。可以从官方GitHub仓库获取最新版本源码,并按照文档说明完成编译设置。确保所选MCU有足够的内存空间用于存储字体、图片等资源文件;同时也要考虑目标平台的操作系统特性及其对多线程的支持情况[^2]。 #### 编写初始化代码 编写初始化函数以加载所需的驱动程序和服务组件。这包括但不限于: - 初始化底层硬件抽象层(HAL),以便能够访问具体的物理地址; - 设置好帧缓冲区(Frame Buffer)大小及颜色模式; - 调用`lv_init()`方法创建默认上下文对象并注册输入设备回调处理例程。 ```c // 假定已经完成了HAL初始化工作... static lv_disp_draw_buf_t draw_buf; static lv_color_t buf[DISP_BUF_SIZE]; void init_lvgl(void){ /* Initialize the LVGL library */ lv_init(); /* Allocate a buffer for drawing operations */ lv_disp_draw_buf_init(&draw_buf, buf, NULL, DISP_BUF_SIZE); /* Register display driver to LVGL */ static lv_disp_drv_t disp_drv; lv_disp_drv_init(&disp_drv); disp_drv.draw_buf = &draw_buf; disp_drv.flush_cb = my_display_flush; // 自定义刷新回调函数 lv_disp_drv_register(&disp_drv); } ``` #### 设计UI布局与交互逻辑 利用GUI Guider这样的可视化编辑工具可以帮助快速构建复杂的用户界面原型。它允许开发者拖拽控件至画布区域,调整属性参数直至满意为止。之后导出成兼容于LVGL框架下的C语言描述形式供后续集成操作之用[^1]。 #### 实现事件响应机制 针对每个按钮击或其他类型的触发动作都需要精心规划对应的业务流程走向。下面给出了段简单的例子展示了当按下某个按键后执行特定任务的过程[^4]: ```c static void button_click_event(lv_event_t * e) { lv_obj_t * btn = lv_event_get_target(e); // 获取当前被按下的按钮实例句柄 printf("Button clicked!\n"); // 更改背景色作为视觉反馈 lv_obj_set_style_bg_color(btn, lv_color_hex(0xFFCC00), LV_PART_MAIN | LV_STATE_PRESSED); // 添加更多自定义行为... } /* 将上述事件绑定给实际的对象 */ lv_obj_add_event_cb(button_object, button_click_event, LV_EVENT_ALL, NULL); ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值