用FireBeetle ESP32-E和LVGL 自制动态温湿度仪计

【点击上方「蓝字」关注DF创客社区，一起成为技术颜控】

在这个项目中，作者利用 FireBeetle-E（ESP32-E）开发板，搭配 DHT22 温湿度传感器与 1.54″ TFT 显示屏，将开源图形库 LVGL 成功移植并实现动态温湿度仪表盘。仪表盘实时显示环境数据，并通过标签精准呈现读数，让嵌入式 UI 成为现实。

硬件连接

FireBeetle-E开发板与Gravity IO扩展板相连接，显示屏通过GDI接口与扩展板相连，传感器与扩展板的7号数字端口相连。

软件实现

1. FireBeetle Board ESP32 E的环境搭建

这部分主要是根据DFRobot官方的wiki说明进行操作，包括Arduino IDE 编译环境配置和测试等。初始环境以及一些外设demo测试都可以在这个页面找到答案。

2. LVGL移植

LittlevGL是一个免费的开放源代码图形库，它提供创建嵌入式GUI所需的一切，它具有易于使用的图形元素，精美的视觉效果和低内存占用。它是一个开源的图像库，旨在为嵌入式设备提供一个精美的界面，当然嵌入式设备只是一部分，由于它是使用标C所写，你可以很轻松的移植到更多设备上，包括但不局限于嵌入式设备。

2.1 安装依赖

lvgl在GitHub上已经有了Arduino上的库支持，库名字为 lv_arduino。我们选择lv_arduino V3.0.1的版本，该版本对应的 LVGL 版本为V7版本。

GitHub地址：https://github.com/lvgl/lv_arduino/releases

lv_arduino给出的 examples 使用的是TFT_eSPI库，所以也要同时安装TFT_eSPI库，因为我这里用的显示屏是没有触摸功能的所以就不安装TFT_Touch库了，如果需要触摸功能则需要同时安装这个依赖库。

GitHub地址：https://github.com/Bodmer/TFT_eSPI/releases

2.2 修改屏幕驱动库TFT_eSPI

本项目使用的显示屏采用的驱动芯片型号是ST7789，需要按照如下调整进行显示驱动的适配。

打开Arduino的Library文件夹下的TFT_eSPI目录，打开 User_Setup_Select.h 文件：

将第30行的：

#include<User_Setup.h> // Default setup is root library folder

注释掉为：

//#include <User_Setup.h> // Default setup is root library folder

将第60行的：

//#include <User_Setups/Setup24_ST7789.h>            // Setup file for DSTIKE/ESP32/ESP8266 configured for ST7789 240 x 240

取消注释为：

#include<User_Setups/Setup24_ST7789.h>            // Setup file for DSTIKE/ESP32/ESP8266 configured for ST7789 240 x 240

完成以上操作后打开 User_Setups 目录下的 Setup24_ST7789.h 文件,根据硬件连接引脚进行对应的调整。

// ST7789 240 x 240 display with no chip select line
#define USER_SETUP_ID 24

#define ST7789_DRIVER     // Configure all registers

#define TFT_WIDTH  240
#define TFT_HEIGHT 240

//#define TFT_RGB_ORDER TFT_RGB  // Colour order Red-Green-Blue
//#define TFT_RGB_ORDER TFT_BGR  // Colour order Blue-Green-Red

//#define TFT_INVERSION_ON
//#define TFT_INVERSION_OFF

// DSTIKE stepup
//#define TFT_DC    23
//#define TFT_RST   32
//#define TFT_MOSI  26
//#define TFT_SCLK  27

// Generic ESP32 setup
#define TFT_MISO 19
#define TFT_MOSI 23
#define TFT_SCLK 18
//#define TFT_CS    -1 // Not connected
//#define TFT_DC    2
//#define TFT_RST   4  // Connect reset to ensure display initialises

// For NodeMCU - use pin numbers in the form PIN_Dx where Dx is the NodeMCU pin designation
#define TFT_CS   14      // Define as not used
#define TFT_DC   25  // Data Command control pin
#define TFT_RST  26  // TFT reset pin (could connect to NodeMCU RST, see next line)
//#define TFT_RST  -1    // TFT reset pin connect to NodeMCU RST, must also then add 10K pull down to TFT SCK


#define LOAD_GLCD   // Font 1. Original Adafruit 8 pixel font needs ~1820 bytes in FLASH
#define LOAD_FONT2  // Font 2. Small 16 pixel high font, needs ~3534 bytes in FLASH, 96 characters
#define LOAD_FONT4  // Font 4. Medium 26 pixel high font, needs ~5848 bytes in FLASH, 96 characters
#define LOAD_FONT6  // Font 6. Large 48 pixel font, needs ~2666 bytes in FLASH, only characters 1234567890:-.apm
#define LOAD_FONT7  // Font 7. 7 segment 48 pixel font, needs ~2438 bytes in FLASH, only characters 1234567890:.
#define LOAD_FONT8  // Font 8. Large 75 pixel font needs ~3256 bytes in FLASH, only characters 1234567890:-.
//#define LOAD_FONT8N // Font 8. Alternative to Font 8 above, slightly narrower, so 3 digits fit a 160 pixel TFT
#define LOAD_GFXFF  // FreeFonts. Include access to the 48 Adafruit_GFX free fonts FF1 to FF48 and custom fonts

#define SMOOTH_FONT


// #define SPI_FREQUENCY  27000000
#define SPI_FREQUENCY  40000000

#define SPI_READ_FREQUENCY  20000000

#define SPI_TOUCH_FREQUENCY  2500000

// #define SUPPORT_TRANSACTIONS

3. DHT22传感器数据采集

DHT22数字温湿度传感器是一款含有已校准数字信号输出的温湿度复合传感器。DHT22数字温湿度传感器精度较高。

• 温度范围：-40-80℃，分辨率0.1℃，误差±0.5℃

• 湿度范围：0-100%RH，分辨率0.1%RH，误差±2%RH

读取DHT22传感器的温湿度数据需要安装两个依赖库，分别是DHT sensor library和Adafruit Unified Sensor Driver library

安装完依赖库后可以先通过串口调试测试下功能是否正常。

  Humidity = dht.readHumidity();
// Read temperature as Celsius (the default)
  Temperature = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
  Temp_Fahrenheit= dht.readTemperature(true);

// Check if any reads failed and exit early (to try again).
if (isnan(Humidity) || isnan(Temperature) || isnan(Temp_Fahrenheit)) {
    Serial.println(F("Failed to read from DHT sensor!"));
    delay(1000);
    return;
  }

  Serial.print(F("Humidity: "));
  Serial.print(Humidity);
  Serial.print(F("%  Temperature: "));
  Serial.print(Temperature);
  Serial.print(F("°C "));
  Serial.print(Temp_Fahrenheit);
  Serial.println(F("°F "));

4. UI设计及实现

UI设计上采用lvgl的仪表lmeter和仪表盘guage组件进行对传感器数据的动态展示，同时为方便进行数据读取采用两个lvgl-lable进行传感器温湿度数据的精确打印。具体代码实现部分如下所示。

lv_obj_t * lmeter_humi;
lv_obj_t* gauge_temp;
voidlv_ex_linemeter_1(void)
{
    staticlv_style_t style_lmeter;
    lv_style_init(&style_lmeter);
    lv_style_set_line_width(&style_lmeter, LV_STATE_DEFAULT,5);//活跃刻度线宽度
    lv_style_set_line_color(&style_lmeter, LV_STATE_DEFAULT, LV_COLOR_GREEN);//活跃刻度线起始颜色
    lv_style_set_scale_grad_color(&style_lmeter, LV_STATE_DEFAULT, LV_COLOR_RED);//活跃刻度线终止颜色
    //lv_style_set_scale_end_color(&style_lmeter, LV_STATE_DEFAULT, LV_COLOR_YELLOW);//非活跃刻度线颜色
    //lv_style_set_scale_end_line_width(&style_lmeter, LV_STATE_DEFAULT, 6);//非活跃刻度线宽度
    lv_style_set_scale_width(&style_lmeter, LV_STATE_DEFAULT, 15);//设置刻度线长度

     /*Create a line meter */
//    lv_obj_t * lmeter_humi;
    lmeter_humi = lv_linemeter_create(lv_scr_act(), NULL);
    lv_linemeter_set_range(lmeter_humi, 0, 100);                   /*Set the range*/
    lv_linemeter_set_value(lmeter_humi, 80);                       /*Set the current value*/
    lv_linemeter_set_scale(lmeter_humi, 240, 42);                  /*Set the angle and number of lines*/
    lv_obj_set_size(lmeter_humi, 240, 240);
    lv_obj_align(lmeter_humi, NULL, LV_ALIGN_CENTER, 0, 0);

    lv_obj_add_style(lmeter_humi, LV_LINEMETER_PART_MAIN, &style_lmeter);
 }

voidlvgl_guage_value_needle_test(void)
{
    staticlv_color_t needle_colors[3];
    needle_colors[0] = LV_COLOR_ORANGE;
    needle_colors[1] = LV_COLOR_ORANGE;
    needle_colors[2] = LV_COLOR_PURPLE;

    /*Create a gauge*/
    gauge_temp = lv_gauge_create(lv_scr_act(), NULL);
    lv_gauge_set_needle_count(gauge_temp, 1, needle_colors);
    lv_obj_set_pos(gauge_temp, 30, 30);
    lv_obj_set_size(gauge_temp,180, 180);   // 宽度&高度
    lv_gauge_set_value(gauge_temp, 0, 10);
    lv_gauge_set_range(gauge_temp, 0, 100);
}

功能展示

中间仪表盘表示温度传感器温度值，温度变化时通过指针指向变化后的数值刻度。外围仪表表是的是空气湿度值，随着数据的变化仪表对应颜色也会发生变化。同时又两个标签对应温湿度的具体数值打印。