本项目是采用用FireBeetle-E开发板作为控制单元，搭配1.54‘’TFT显示屏移植lvgl图形库，动态显示温湿度传感器DHT22采集到的数据。FireBeetle ESP32-E深度支持ArduinoIDE编程，所以项目采用的ArduinoIDE的编程方式进行开发的。

项目介绍

硬件连接

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

软件实现

1 FireBeetle Board ESP32 E的环境搭建

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

2 LVGL移植

lvgl简介：

2.1安装依赖

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

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

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;
 void lv_ex_linemeter_1(void)
 {
    static lv_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);
 }

void lvgl_guage_value_needle_test(void)
{
    static lv_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);
}

功能展示及说明

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

参考链接；

• FireBeetle Board ESP32 E产品Wiki
• 1.54寸显示屏 Wiki
• DHT22传感器 Wiki
• FireBeetle 2：Gravity IO扩展板 (dfrobot.com.cn)
• 《ESP32 学习笔记》之 Arduino环境下玩转 LVGL-搭建环境_慕容流年的博客-CSDN博客_arduino lvgl
• ESP32 DHT11/DHT22 Web Server using Arduino IDE | Random Nerd Tutorials
• Line meter (lv_lmeter) — LVGL documentation
• LVGL lv_linemeter刻度指示器（19）_jiang_2018的博客-CSDN博客_lv_linemeter
• 制作一个GUI仪表盘，安排！LVGL『Gauge仪表盘控件』介绍-面包板社区 (eet-china.com)