目录

说明

先决条件

硬件部分

软件部分

Button

lv_btn_create

背景知识

lv_scr_act

背景知识

触摸部分

背景知识

实现过程

---

说明

官方文档:

Widgets — LVGL documentation

中文版翻译:

🎨百问网LVGL中文教程手册文档 — 百问网LVGL中文教程手册文档 1.0 文档 (100ask.net)

先决条件

硬件部分

ESP32, 240x320电容触摸LCD屏,驱动IC为ILI9341.

软件部分

ESP32 Aruduino移植好了LVGL, 使用TFT_eSPI库作为LCD驱动库.

(其实在此之前我还做了一系列的准备活动,但是篇幅有限不一一展开,有兴趣的可以自行摸索)

Button

按键的一般行为有如下几种:

1. pressed;

2. released;

3. long pressed.

官方example的实例

实现代码

static void event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
 
    if(code == LV_EVENT_CLICKED) {
        LV_LOG_USER("Clicked");
    }
    else if(code == LV_EVENT_VALUE_CHANGED) {
        LV_LOG_USER("Toggled");
    }
}
 
void lv_example_btn_1(void)
{
    lv_obj_t * label;
 
    lv_obj_t * btn1 = lv_btn_create(lv_scr_act());
    lv_obj_add_event_cb(btn1, event_handler, LV_EVENT_ALL, NULL);
    lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -40);
 
    label = lv_label_create(btn1);
    lv_label_set_text(label, "Button");
    lv_obj_center(label);
 
    lv_obj_t * btn2 = lv_btn_create(lv_scr_act());
    lv_obj_add_event_cb(btn2, event_handler, LV_EVENT_ALL, NULL);
    lv_obj_align(btn2, LV_ALIGN_CENTER, 0, 40);
    lv_obj_add_flag(btn2, LV_OBJ_FLAG_CHECKABLE);
    lv_obj_set_height(btn2, LV_SIZE_CONTENT);
 
    label = lv_label_create(btn2);
    lv_label_set_text(label, "Toggle");
    lv_obj_center(label);
}

lv_btn_create

函数原型:

背景知识

 关于该函数的parent参数,需要先通过下面的说明了解基础概念:

对象(Objects) — 百问网LVGL中文教程手册文档 1.0 文档 (100ask.net)

其中描述到LVGL的Object的工作机制:

1. 亲子结构:

2. 追随原则:

3. 子对象仅在父对象的范围内可见

lv_scr_act

在这里调用的时候使用的lv_scr_act函数,函数原型如下:

背景知识

需要先阅读下面两篇文章有基础概念:

显示接口 — 百问网LVGL中文教程手册文档 1.0 文档 (100ask.net)

显示(Displays) — 百问网LVGL中文教程手册文档 1.0 文档 (100ask.net)

这里面涉及到了Multiple display,而一般来说只用默认的一个显示使用lv_src_act获取当前活跃显示的屏幕即可.

触摸部分

这部分非常关键,可以分为两个部分,第一个部分:如果不是触摸屏,只有硬件的按键应该怎么将Button控件和硬件的按键关联起来;第二个部分:触摸屏如何点击按键触发.

下面这篇博文基本把以上两个问题都覆盖到了,这里就不展开:

 ESP32 LVGL8.1 ——Input devices 输入设备 (Input devices 18)_请叫我啸鹏的博客-CSDN博客_lvgl输入设备

背景知识

在 LVGL 中输入设备，有下面几种类型：

• 指针式输入设备，如触摸板或鼠标

• 键盘，如普通键盘或简单的数字键盘

• 带有左/右转向和推入选项的编码器

• 外部硬件按钮，分配给屏幕上的特定点

详细的介绍查看如下两篇文章:

​​​​​输入设备接口 — 百问网LVGL中文教程手册文档 1.0 文档 (100ask.net)

输入设备(Input devices) — 百问网LVGL中文教程手册文档 1.0 文档 (100ask.net)

实现过程

初始化输入设备:

其中touch pad的type为LV_INDEV_TYPE_POINTER; 注册touch pad的回调函数,

    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 );

my_touchpad_read的实现:

注册回调的时候,如果是touch pad类型的输入, 需要将触摸的x, y坐标通过data参数传给LVGL,我这里使用的是TFT_eSPI库的接口getTouch,可以直接获取点击的坐标:

void my_touchpad_read( lv_indev_drv_t * indev_driver, lv_indev_data_t * data )
{
    uint16_t touchX, touchY;
 
    bool touched = tft.getTouch( &touchX, &touchY );
 
    if( !touched )
    {
        data->state = LV_INDEV_STATE_REL;
    }
    else
    {
        data->state = LV_INDEV_STATE_PR;
 
        /*Set the coordinates*/
        data->point.x = touchX;
        data->point.y = touchY;
    }
}