功能

  1. dht11 模块测试
  2. esp32s3 获取 dht11模块数据，并且使用 LVGL显示。

代码

获取数据参考了莫跖博主的文章《ESP32+dht11/sht30测温湿度(arduino编程)》。

改bug参考了田园牧师博主的文章《LVGL lv_label_set_text_fmt 显示只有f》。

总体来说思路简单清晰，但是改 bug 尝试了很久😭😭😭。

UI界面后续仍然需要优化。

变量定义

1
2
3
4
5
6
7
8
9
10
11
#include <DHT.h>
#include <DHT_U.h>
#define DHTPIN 11
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);

typedef struct _lv_dht11
{
    lv_obj_t *temperature_label; // 时间标签
    lv_obj_t *humidity_label;    // 日期标签
} lv_dht11_t;

UI设计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
void demo11()
{
    dht.begin();

    static lv_style_t date_time_clock_style;                         // 最外层对象的样式
    lv_style_reset(&date_time_clock_style);                          // 重置样式
    lv_style_init(&date_time_clock_style);                           // 初始化样式
    lv_style_set_radius(&date_time_clock_style, 5);                  // 设置样式圆角
    lv_style_set_bg_opa(&date_time_clock_style, LV_OPA_20);          // 设置样式背景透明度
    lv_style_set_border_width(&date_time_clock_style, 0);            // 设置样式边框宽度
    lv_style_set_bg_color(&date_time_clock_style, lv_color_white()); // 设置样式背景颜色，白色
    lv_style_set_pad_left(&date_time_clock_style, 1);                // 设置样式左边padding填充宽度
    lv_style_set_pad_right(&date_time_clock_style, 1);               // 设置样式右边padding填充宽度
    lv_style_set_pad_top(&date_time_clock_style, 0);                 // 设置样式顶部padding填充宽度
    lv_style_set_pad_bottom(&date_time_clock_style, 0);              // 设置样式底部padding填充宽度

    static lv_style_t time_style; // 时间对象样式
    lv_style_reset(&time_style);
    lv_style_init(&time_style);
    lv_style_set_bg_opa(&time_style, LV_OPA_COVER);
    lv_style_set_border_width(&time_style, 0);
    lv_style_set_radius(&time_style, 5);
    lv_style_set_bg_color(&time_style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_pad_left(&time_style, 0);
    lv_style_set_pad_right(&time_style, 0);
    lv_style_set_pad_top(&time_style, 0);
    lv_style_set_pad_bottom(&time_style, 0);

    static lv_style_t time_label_style;                                // 时间标签样式
    lv_style_reset(&time_label_style);                                 // 重置样式
    lv_style_init(&time_label_style);                                  // 初始化样式
    lv_style_set_text_color(&time_label_style, lv_color_white());      // 设置标签样式文本颜色
    lv_style_set_text_font(&time_label_style, &lv_font_montserrat_32); // 设置字体风格
    lv_style_set_text_opa(&time_label_style, LV_OPA_COVER);            // 设置字体透明度
    lv_style_set_bg_opa(&time_label_style, LV_OPA_0);                  // 设置样式背景透明度

    lv_obj_t *dht11_obj = lv_obj_create(lv_scr_act()); // 基于屏幕创建时间日期对象

    lv_obj_set_size(dht11_obj, 320, 150);
    lv_obj_center(dht11_obj);
    lv_obj_add_style(dht11_obj, &time_style, LV_STATE_DEFAULT);

    static lv_dht11_t lv_dht11 = {0};

    lv_dht11.temperature_label = lv_label_create(dht11_obj);                           // 基于time_obj对象创建时间显示标签对象 lv_clock.time_label
    lv_obj_add_style(lv_dht11.temperature_label, &time_label_style, LV_STATE_DEFAULT); // 给对象 lv_clock.time_label添加样式

    lv_dht11.humidity_label = lv_label_create(dht11_obj);                            
    lv_obj_add_style(lv_dht11.humidity_label, &time_label_style, LV_STATE_DEFAULT); // 给date_obj对象添加样式

    lv_obj_align_to(lv_dht11.temperature_label, lv_obj_get_parent(lv_dht11.temperature_label), LV_ALIGN_TOP_MID, 0, 0);
    lv_obj_align_to(lv_dht11.humidity_label, lv_obj_get_parent(lv_dht11.humidity_label), LV_ALIGN_BOTTOM_MID, 0, 0);

    lv_timer_t *task_timer = lv_timer_create(demo11_my_timer, 2000, (void *)&lv_dht11);
}

定时更新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
void demo11_my_timer(lv_timer_t *timer)
{
    float humidity = dht.readHumidity();
    float temperature = dht.readTemperature();
    Serial.println("humidity");
    Serial.println(humidity);
    Serial.println("temperature");
    Serial.println(temperature);

    if (timer != NULL && timer->user_data != NULL)
    {
        lv_dht11_t *dht11 = (lv_dht11_t *)(timer->user_data);
        if (dht11->temperature_label != NULL)
        {
            lv_label_set_text_fmt(dht11->temperature_label, "%.2f %RH", humidity);
            lv_obj_align_to(dht11->temperature_label, lv_obj_get_parent(dht11->temperature_label), LV_ALIGN_CENTER, 0, 0);
        }

        if (dht11->humidity_label != NULL)
        {
            lv_label_set_text_fmt(dht11->humidity_label, "%.2f °C", temperature);
            lv_obj_align_to(dht11->humidity_label, lv_obj_get_parent(dht11->humidity_label), LV_ALIGN_TOP_MID, 2, 0);
        }
    }
}

修bug

1.主控不断重启

设计 UI 时发现屏幕闪烁，查看串口输出发现是触发看门狗不断重启。发现是错用了 lv_obj_create() 。此处是 label 标签，修改为 lv_label_create() 。

1
2
//lv_dht11.humidity_label = lv_obj_create(dht11_obj); 
lv_dht11.humidity_label = lv_label_create(dht11_obj);

image-20230530213215032

2.LVGL lv_label_set_text_fmt 显示只有f

用 LVGL 显示带浮点数的句子，结果出现只显示 f 但是没有数字的现象。需要在 lv_conf.h 中启用 LV_SPRINTF_CUSTOM。

img

1
#define LV_SPRINTF_CUSTOM 1

最终效果

image-20230530213424374