【Funpack2-3】基于FireBeetle 2 ESP32-E开发板的LVGL移植及传感器显示

内容介绍

项目介绍

本项目基于FireBeetle 2 ESP32-E开发板，使用VSCode+Arduino插件开发，通过TFT_eSPI驱动LCD屏幕，并移植LVGL。搭配SHT40温湿度传感器与VL53L0激光测距传感器，将检测的数据较为美观地显示在屏幕上。

👉 Github-lvgl/lvgl

硬件介绍

FireBeetle ESP32-E是一款基于ESP-WROOM-32E双核芯片的主控板，它专为IoT设计。它支持WIFI和蓝牙双模通信并具有体积小巧、超低功耗、板载充电电路、接口易用等特性。可灵活的用于家庭物联网改装、工业物联网改装、可穿戴设备等等。

硬件资源：

Type-C: USB接口：4.75v-5.5v
pH2.0锂电池接口：3.5-4.2v
2/D9 LED灯：使用2/09号脚控制的LED灯
充电指示灯：指示充电方式的红色LED，通过三种方式指示充电状态：1充满电或末充电时熄灭2、充电时常亮3、USB供电，末连接锂电池时高频闪烁
RST复位引脚：单击复位按钮，将程序复位
5/D8 WS2812指示灯：使用5/D8引脚控制的WS2812RGB灯珠
低功耗焊盘：此焊盘专为低功耗设计，默认为连接状态，使用小刀轻轻刮粉中间的细线即可断开，断开后可降低500u4静态功耗，通过程序控制主控进入睡眠模式后可将功耗降低至131A。注意：焊盘断开后仅UsE方式供电可驱动RGE灯
GDI显示接口：DFRobot专用显示屏接口，详情后文GD显示接口
ESP32模组：乐鑫公司推出的最新ESP32-E模组
按钮：连接27/D4的按钮

👉 更多介绍

此外，介绍本工程内的两款传感器。MIKROE TEMP&HUM 15 CLICK 为一款SHT40温湿度传感器，I²C模式通信，可以获取温度、湿度信息。本工程通过Adafruit SHT4x库实现数据的读取，可直接在Arduino搜索下载该库。

👉 MIKROE-TEMP&HUM 15 CLICK产品介绍
👉 Github-adafruit/Adafruit_SHT4X

DFRobot的VL53L0激光测距传感器是一款基于意法半导体（STMicroelectronics）新出的基于飞行时间测距 (ToF) 原理设计的高精度测距传感器，通过I²C通信，其Arduino库文件通过官网帮助页面可直接获得，也可直接在Arduino内搜索下载该库。

👉 DFRobot-VL53L0

硬件结构说明

SHT40及VL53L0直接连在FireBeetle2的两路硬件I²C上，如此可直接调用库函数实现对传感器数据的读取，十分方便。两个传感器通过I²C地址查询，所以无所谓I²C1、I²C2的区分。

此外，TFT LCD 240x320通过硬件SPI驱动，具体连接关系如下（除电源与地外）：

引脚	含义	引脚编号
I²C SCL	SHT40的数据信号	开发板左侧22
I²C SDA	SHT40的时钟信号	开发板左侧21
I²C SCL	VL53L0的数据信号	开发板右侧22
I²C SDA	VL53L0的时钟信号	开发板右侧21
SCL	LCD的时钟信号	18，SPI SCK
MOSI	LCD的数据信号	23，SPI MOSI
MISO	不用	19
CS	LCD的片选信号	16，普通IO
DC	LCD的D/C信号	17，普通IO
RST	LCD的复位信号	连接至开发板RESET
BL	LCD的背光信号	4，普通IO

上述LCD与开发板的连接关系需要在配置TFT_eSPI驱动时再次用到。

LVGL移植

首先在Arduino内，安装TFT_eSPI库，再在TFT_eSPI库内找到User_Setup.h，并根据屏幕实际配置做修改，注意看注释的说明。主要需要修改的地方有：

👉 Github-Bodmer/TFT_eSPI

屏幕驱动IC
对于ST7789，可能出现RGB颜色交换的问题
屏幕尺寸
颜色反色的问题，根据实际问题开启或关闭反色
SPI等引脚对应
如果有背光控制，可设置
启动的字体，如果内存大可全部启用
SPI速率，根据实际需求即可

例如，本工程的LCD屏幕为ST7789，对应保留的宏定义有：

#define ST7789_DRIVER
#define TFT_RGB_ORDER TFT_BGR 
#define TFT_WIDTH  240
#define TFT_HEIGHT 320
#define TFT_INVERSION_OFF
#define TFT_BL   4            // LED back-light control pin
#define TFT_BACKLIGHT_ON HIGH  // Level to turn ON back-light (HIGH or LOW)
#define TFT_MISO 19
#define TFT_MOSI 23
#define TFT_SCLK 18
#define TFT_CS   16  // Chip select control pin
#define TFT_DC   17  // Data Command control pin
#define TFT_RST  -1  // Set TFT_RST to -1 if display RESET is connected to ESP32 board RST
#define SPI_FREQUENCY  27000000

之后，下载LVGL release 源码，并通过zip包安装至Arduino库内。主要步骤可参考LVGL on Arduino帮助页面，主要进行：

转到安装的Arduino库的目录
转到lvgl并复制lv_conf_template.h到与Arduino 库目录中lvgl同级的地方，改名为lv_conf.h。
打开lv_conf.h并将第一个更改为启用文件的内容#if 1
设置显示的颜色深度LV_COLOR_DEPTH 16（根据屏幕实际，本工程为16）
设置LV_TICK_CUSTOM 1
如果需要开启LVGL 日志功能，则修改对应宏开关LV_USE_LOG 1
如果想启用LVGL的demo 或 exmaples，除了修改对应宏开关LV_BUILD_EXAMPLES 1外，参见LVGL on Arduino进行一些额外的步骤

在代码上，需要为LVGL实现一个my_disp_flush()函数，使用TFT_eSPI库的函数进行包装，即可将绘图功能打包给LVGL实现。Arduino实现的最简单的例子（LVGL库内可找到该例）：

#include <lvgl.h>
#include <TFT_eSPI.h>
#include <lv_demo.h>

/*Change to your screen resolution*/
static const uint16_t screenWidth  = 480;
static const uint16_t screenHeight = 320;

static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[ screenWidth * 10 ];

TFT_eSPI tft = TFT_eSPI(screenWidth, screenHeight); /* TFT instance */

/* Display flushing */
void my_disp_flush( lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p )
{
    uint32_t w = ( area->x2 - area->x1 + 1 );
    uint32_t h = ( area->y2 - area->y1 + 1 );

    tft.startWrite();
    tft.setAddrWindow( area->x1, area->y1, w, h );
    tft.pushColors( ( uint16_t * )&color_p->full, w * h, true );
    tft.endWrite();

    lv_disp_flush_ready( disp );
}

void setup()
{
    Serial.begin( 115200 ); /* prepare for possible serial debug */

    String LVGL_Arduino = "Hello Arduino! ";
    LVGL_Arduino += String('V') + lv_version_major() + "." + lv_version_minor() + "." + lv_version_patch();

    Serial.println( LVGL_Arduino );
    Serial.println( "I am LVGL_Arduino" );
    lv_init();

#if LV_USE_LOG != 0
    lv_log_register_print_cb( my_print ); /* register print function for debugging */
#endif

    tft.begin();          /* TFT init */
    tft.setRotation( 3 ); /* Landscape orientation, flipped */

    lv_disp_draw_buf_init( &draw_buf, buf, NULL, screenWidth * 10 );

    /*Initialize the display*/
    static lv_disp_drv_t disp_drv;
    lv_disp_drv_init( &disp_drv );
    /*Change the following line to your display resolution*/
    disp_drv.hor_res = screenWidth;
    disp_drv.ver_res = screenHeight;
    disp_drv.flush_cb = my_disp_flush;
    disp_drv.draw_buf = &draw_buf;
    lv_disp_drv_register( &disp_drv );
    
    lv_demo_widgets();
    Serial.println( "Setup done" );
}

void loop()
{
    lv_timer_handler(); /* let the GUI do its work */
    delay( 5 );
}

综合实现

首先，实现两款传感器数据的读取函数，便于之后在lvgl事务内直接获取数据。对于SHT40，在初始化后，读取温度及湿度信息

Adafruit_SHT4x sht4 = Adafruit_SHT4x(); /* Global instance */

void sht40_get_measured(sensors_event_t *humidity, sensors_event_t *temp) {
	sht4.getEvent(humidity, temp);// populate temp and humidity objects with fresh data

	Serial.print("Temperature: "); Serial.print(temp->temperature); Serial.println(" degrees C");
	Serial.print("Humidity: "); Serial.print(humidity->relative_humidity); Serial.println("% rH");
}

对于VL53L0，TOF测距，在初始化后，读取测量的距离信息：

DFRobot_VL53L0X sensor; /* Global instance */
float vl53l0x_get_measured() {
    float distance = sensor.getDistance();
    Serial.print("Distance: ");Serial.println(distance);
    return distance;
}

屏幕主要分为三块地方：

左上角显示温湿度信息，并且每秒刷新
右上角通过判断开发板按键是否按下，实现TOF测距的开/关
下方将TOF测距以折线图显示，并且每250ms更新动态显示

主要地，通过lvgl实现三个定时器事务，温湿度定时器，每秒获取并刷新显示文字：

lv_timer_t *sht4x_update_timer;
sht4x_update_timer = lv_timer_create(temperature_update, 1000, NULL); /* Always working */
static void temperature_update(lv_timer_t *timer) {
    sht40_get_measured(&sht4x_humidity, &sht4x_temp);
    lv_label_set_text_fmt(temp_label, "Temp: %.1f °C", sht4x_temp.temperature);
    lv_label_set_text_fmt(humd_label, "Humidity: %.1f% rH", sht4x_humidity.relative_humidity);
}

对应的两个标签对象：

lv_obj_t *temp_label = lv_label_create(lv_scr_act());
lv_label_set_text(temp_label, "Temp: 0 °C");
lv_obj_set_style_text_color(lv_scr_act(), lv_color_black(), LV_PART_MAIN);
lv_obj_align(temp_label, LV_ALIGN_TOP_LEFT, 10, 10);

lv_obj_t *humd_label = lv_label_create(lv_scr_act());
lv_label_set_text(humd_label, "Humidity: 0% rH");
lv_obj_set_style_text_color(lv_scr_act(), lv_color_black(), LV_PART_MAIN);
lv_obj_align(humd_label, LV_ALIGN_TOP_LEFT, 10, 30);

按键检测定时器，每30毫秒检测按键是否按下，其中还需要有改变开关控件的交互，当按键按下，开关切换状态，若为打开，则旁边标签显示“TOF measuring”，且TOF开始测距，vl53l0x_update_timer 定时器继续工作；若为关闭，则边标签显示“TOF idle”，且TOF停止工作，vl53l0x_update_timer 定时器暂停：

int last_btn_state = HIGH;
lv_timer_t *btn_state_timer;
btn_state_timer = lv_timer_create(btn_pressed_check, 30, NULL);
static void btn_pressed_check(lv_timer_t *timer) {
    int reading = digitalRead(BTN_PIN);

    if (reading != last_btn_state) {
        if (reading == LOW) {
            if (lv_obj_has_state(tof_measuring_sw, LV_STATE_CHECKED)) {
                lv_obj_clear_state(tof_measuring_sw, LV_STATE_CHECKED);
                vl53l0x_stop();
                lv_timer_pause(vl53l0x_update_timer);
                lv_label_set_text(btn_label, "TOF idle");
            }
            else {
                lv_obj_add_state(tof_measuring_sw, LV_STATE_CHECKED);
                vl53l0x_start();
                lv_timer_resume(vl53l0x_update_timer);
                lv_label_set_text(btn_label, "TOF measuring");
            } 
        }
    }
    last_btn_state = reading;
}

对应的开关控件及标签对象：

lv_obj_t *btn_label = lv_label_create(lv_scr_act());
lv_label_set_text(btn_label, "TOF measuring");
lv_obj_set_style_text_color(lv_scr_act(), lv_color_black(), LV_PART_MAIN);
lv_obj_align(btn_label, LV_ALIGN_CENTER, 50, -100);

lv_obj_t *tof_measuring_sw = lv_switch_create(lv_scr_act());
lv_obj_set_size(tof_measuring_sw, 40, 20);
lv_obj_align(tof_measuring_sw, LV_ALIGN_TOP_RIGHT, -10, 10);
lv_obj_add_state(tof_measuring_sw, LV_STATE_CHECKED); /* switch on in default */

VL530L0定时任务，每250毫秒更新测量，将下一个数据显示在折线图右侧：

lv_timer_t *vl53l0x_update_timer;
vl53l0x_update_timer = lv_timer_create(tof_update, 250, NULL);

static void tof_update(lv_timer_t *timer) {
    float tof_new_data = vl53l0x_get_measured();

    lv_chart_set_next_value(tof_data_chart, tof_data_series, (int)tof_new_data);
    lv_chart_refresh(tof_data_chart);

    lv_label_set_text_fmt(y_next_value_label, "%.1f", tof_new_data);
    if (tof_new_data > 1000) {
        lv_obj_align_to(y_next_value_label, tof_data_chart, LV_ALIGN_OUT_RIGHT_MID, -40, 10);
    }
    else {
        lv_obj_align_to(y_next_value_label, tof_data_chart, LV_ALIGN_OUT_RIGHT_MID, -40, -10);
    }
}

折线图的更新显示，通过LVGL可以很简单的实现，一些标签对象的位置摆放，请参考LVGL帮助文档，查看具体函数的用法即可。

功能展示

上电后，两个传感器即刻开始工作。

当按下按键，关闭TOF测量开关时，折线图停止更新，开关控件关闭且显示“TOF idle”：

当按下按键，开启TOF测量开关时，折线图继续动态更新，开关控件开启且显示“TOF measuring”：

项目总结

此次成功移植了LVGL至LCD上，实现了对SHT40、VL53L0温湿度信息、ToF测距信息的简单显示，使用LVGL显示各种效果都很方便、很好看，代码上也很有条理，通过事件、定时器等功能可以实现多种控件的交互。

美中不足的是，限于时间，原本想实现动态显示ToF测距折线图的纵坐标数据，但是实现起来确实不是想的那么容易，因此目前无法实现折线图纵坐标的灵活切换。当测量数据较大时，数据会绘制在折线图范围之外。