一、简介
LittlevGL 是一个免费的开源图形库(GUI),具有易于使用的图形元素、美观的视觉效果,支持触摸屏操作,移植简单方便,适用于 MCU级别的设备,支持各类输入输出接口与芯片,支持使用 GPU。
特性:
- LittlevGL 以 C 语言编写,支持 OS,内存占用低(16K RAM,64K Flash);
- LittlevGL 自带了丰富的控件:窗口、按键、标签、列表、图表等,还可以自定义控件;
- 支持很多特效:透明、阴影、自动显示隐藏滚动条、界面切换动画、图标打开关闭动画、平滑的拖拽控件、分层显示、反锯齿、仅耗少量内存的字体等等。
- 超过 30 多种丰富的用户自定义控件,如按钮,滑条,文本框,键盘等
- 支持各种图片类型,可从 Flash 和 SD 卡中读取图片显示
- 采用 UTF-8 编码,支持多语言,多字体的文本
- 支持 Micropython
资料:
- LVGL官方指南
- lv_port_esp32:LVGL移植到ESP32的示例
- 字模提取工具
- 图片取模工具
二、配置使用
1、获取示例 lv_port_esp32
# 官方github仓库获取
git clone --recurse-submodules https://github.com/lvgl/lv_port_esp32.git
# gitee同步链接,子模块全部同步到了gitee
git clone --recurse-submodules https://gitee.com/JavonPeng/lvgl_port_esp32.git
git submodule update
lv_port_esp32
包含的库:(在components
文件夹)
库 描述 lvgl LVGL库主体 lv_demos LVGL 库的示例、教程和应用程序 lvgl_esp32_drivers 与 LVGL 一起使用的 ESP32 驱动程序。 lvgl_tft
:屏幕驱动适配lvgl_touch
:触摸驱动适配
注意:
目前master分支:
ESP-IDF
版本要求4.2- 使用的
LVGL
版本:7.9 - 使用的
lv_examples
版本:7.9
2、配置
make menuconfig
:
Component config --->
lv_examples configuration ---> # 演示示例选择
LVGL configuration ---> # 关于LVGL库的配置,包括色彩,屏幕大小选择等。是 `lv_conf.h` 文件的相关配置
LVGL TFT Display controller ---> # 关于屏幕显示的配置,包括引脚,显示方向,控制芯片选择等
LVGL Touch controller ---> # 关于屏幕触摸的配置,包括引脚,控制芯片选择等
Component config → lv_examples configuration
:
[ ] Enable printf-ing data in demos and examples. # 在演示和示例中启用打印数据
Select the demo you want to run. (Show demo widgets.) ---> # 选择要运行的示例
(X) Show demo widgets. # 显示演示小部件
( ) Demonstrate the usage of encoder and keyboard. # 演示编码器和键盘的使用
( ) Benchmark your system. # 对系统进行基准测试
( ) Stress test for LVGL. # LVGL压力测试
[*] Slide demo widgets automatically. # 自动滑动演示小部件
Component config → LVGL configuration
:
[ ] Set IRAM as LV_ATTRIBUTE_FAST_MEM # 将IRAM设置为 LV_ATTRIBUTE_FAST_MEM 属性
[ ] LVGL minimal configuration.
(160) Maximal horizontal resolution to support by the library. # 库支持的最大水平分辨率
(128) Maximal vertical resolution to support by the library. # 库支持的最大垂直分辨率
Color depth. (16: RGB565) ---> # 色彩深度
[*] Swap the 2 bytes of RGB565 color. Useful if the display has a 8 bit interface (e.g. SPI).# 交换RGB565颜色的2个字节。如果显示器具有8位接口(例如SPI),则此功能非常有用
[*] Enable anti-aliasing (lines, and radiuses will be smoothed).# 启用抗锯齿(直线和半径将平滑)
(30) Default display refresh period (ms). # 默认显示刷新周期
(130) DPI (Dots per inch in px). # DPI(每英寸像素点数)
(30) Small display limit # 最小显示限制
(50) Medium display limit # 中等显示限制
(70) Large display limit # 最大显示限制
Memory manager settings ---> # 内存管理器设置
Indev device settings ---> # Indev设备设置
Feature usage ---> # 功能使用
Image decoder and cache ---> # 图像解码器和缓存
Compiler Settings ---> # 编译器设置
HAL Settings ---> # HAL设置
Log Settings ---> # Log设置
Debug Settings ---> # Debuf设置
Font usage ---> # 字体使用(自带字体)
Theme usage ---> # 主题使用
Text Settings ---> # 文本设置(编码等)
Widgets ---> # 小部件
Component config → LVGL TFT Display controller
:
Select predefined display configuration (None) ---> # 选择预定义的开发板配置
Display orientation (Landscape) ---> # 显示方向(竖向/竖向倒置/横向/横向倒置)
Select predefined board pinouts (None) ---> # 选择预定义的开发板引脚
Select a display controller model. (ST7735S) ---> # 选择显示芯片型号
[ ] Use custom display buffer size (bytes) # 使用自定义显示缓冲区大小
TFT SPI Bus. (HSPI) ---> # TFT SPI总线模式
TFT Data Transfer Mode (SIO (MOSI/MISO)) ---> # TFT数据传输模式(几线制的SPI)
TFT SPI Duplex Mode (HALF DUPLEX) ---> # TFT SPI双工模式(半双工/全双工)
[ ] Use custom SPI clock frequency. # 使用自定义SPI时钟频率
[ ] Invert colors in display # 反转颜色
[ ] Handle Backlight and TFT power for M5StickC using AXP192. (NEW) # 使用 AXP192 处理 M5StickC 的背光和TFT电源
Display Pin Assignments ---> # 引脚配置(如果选择了开发板就不用配置了)
Component config → LVGL TFT Display controller → Display Pin Assignments
:
(13) GPIO for MOSI (Master Out Slave In)
[ ] GPIO for MISO (Master In Slave Out)
(14) GPIO for CLK (SCK / Serial Clock)
[*] Use CS signal to control the display
(15) GPIO for CS (Slave Select)
[*] Use DC signal to control the display
(2) GPIO for DC (Data / Command)
(4) GPIO for Reset
[*] Enable control of the display backlight by using an GPIO. # 使用GPIO启用显示器背光控制
[*] Is backlight turn on with a HIGH (1) logic level? # 背光是否高电平有效
(27) GPIO for Backlight Control (NEW)
Component config → LVGL Touch controller
:
Select a touch panel controller model. (None) ---> # 触摸驱动芯片选择
(X) None
( ) XPT2046
( ) FT6X06
( ) STMPE610
( ) ADCRAW
( ) FT81X
( ) RA8875
Select a touch panel controller model. (XPT2046) --->
Touch Controller SPI Bus. (VSPI) --->
Touchpanel (XPT2046) Pin Assignments --->
Touchpanel Configuration (XPT2046) --->
Component config → LVGL Touch controller → Touchpanel Configuration (XPT2046)
:
(200) Minimum X coordinate value. # 最小X坐标值
(120) Minimum Y coordinate value. # 最小Y坐标值
(1900) Maximum X coordinate value. # 最大X坐标值
(1900) Maximum Y coordinate value. # 最大Y坐标值
[*] Swap XY. # 交换XY
[*] Invert X coordinate value. # 反转X坐标值
[*] Invert Y coordinate value. # 反转Y坐标值
Select touch detection method. (IRQ pin only) ---> # 选择触摸检测方法(仅中断/中断和按压/仅按压)
Component config → LVGL Touch controller → Touchpanel Configuration (XPT2046) → Select touch detection method.
:
(19) GPIO for MISO (Master In Slave Out) (NEW)
(23) GPIO for MOSI (Master Out Slave In) (NEW)
(18) GPIO for CLK (SCK / Serial Clock) (NEW)
(5) GPIO for CS (Slave Select) (NEW)
(25) GPIO for IRQ (Interrupt Request) (NEW)
如果显示异常,修改显示方向 Display orientation
和 水平分辨率、垂直分辨率。
3、报错与修改
报错修改:
选择 ST7735S
驱动后报错:
/home/pjw/Item/esp32_maix/reference/lvgl_port_esp32/components/lvgl_esp32_drivers/lvgl_tft/st7735s.h:31:22: error: 'CONFIG_LV_AXP192_PIN_SDA' undeclared (first use in this function); did you mean 'CONFIG_LV_DISP_PIN_SDA'?
#define AXP192_SDA CONFIG_LV_AXP192_PIN_SDA
这是因为我没有启用 AXP192
的配置,而代码里面又没有处理导致的。
解决:
st7735s.h
:
增加是否定义了 CONFIG_LV_M5STICKC_HANDLE_AXP192
的判断:
#ifdef CONFIG_LV_M5STICKC_HANDLE_AXP192
#define AXP192_SDA CONFIG_LV_AXP192_PIN_SDA
#define AXP192_SCL CONFIG_LV_AXP192_PIN_SCL
#endif
st7735s.c
:
i2c
和 axp192
相关的函数全部增加 CONFIG_LV_M5STICKC_HANDLE_AXP192
是否定义的判断
示例修改:
create_demo_application
函数默认 st7735s
只显示 hello world
。修改:
// #if defined CONFIG_LV_TFT_DISPLAY_MONOCHROME || defined CONFIG_LV_TFT_DISPLAY_CONTROLLER_ST7735S
#if defined CONFIG_LV_TFT_DISPLAY_MONOCHROME
三、屏幕资料
屏幕外观 | 屏幕接口 |
1、规格
- 1.8’’TFT
- ST7735S
- 3.3V
- CE6209稳压芯片
- LED接的 LED+
每英寸像素点数(DPI)= 像素个数/英寸
1英寸(inch)=2.54厘米(cm)=25.4毫米(mm)