feat(gui): 自动隐藏配置面板。

main/CMakeLists.txt

@@ -18,7 +18,7 @@ idf_component_register(
     "light.c"
     "led_strip_encoder/led_strip_encoder.c"
     "gui.c"
-    "lvgl_demo_ui.c"
+   
     "app_icon_8.c"
   INCLUDE_DIRS "."
 )

main/gui.c

@@ -38,6 +38,8 @@ static const char *GUI_TAG = "LVGL_GUI";
 // EE 8A 9E
 #define APP_TIMER_SYMBOL "\xEE\x8A\x9E"
 
+#define GUI_PANEL_TIMEOUT_US 3000000  // 3s
+
 extern void example_lvgl_demo_ui(lv_disp_t *disp);
 
 static void example_lvgl_flush_cb(lv_disp_drv_t *drv, const lv_area_t *area,
@@ -64,6 +66,14 @@ static void example_lvgl_set_px_cb(lv_disp_drv_t *disp_drv, uint8_t *buf,
   }
 }
 
+typedef struct value_setting_panel {
+  lv_obj_t *panel;
+  lv_obj_t *bar;
+  lv_obj_t *label;
+  lv_obj_t *value_label;
+  int64_t last_updated_at;
+} value_setting_panel_t;
+
 static lv_obj_t *wifi_label;
 static lv_anim_t wifi_animate;
 
@@ -73,10 +83,7 @@ static lv_anim_t timer_animate;
 static lv_obj_t *desktop_label;
 static lv_anim_t desktop_animate;
 
-static lv_obj_t *value_setting_panel;
-static lv_obj_t *value_setting_bar;
-static lv_obj_t *value_setting_label;
-static lv_obj_t *value_setting_value_label;
+value_setting_panel_t *value_setting_panel = NULL;
 
 static lv_obj_t *scr;
 
@@ -147,7 +154,9 @@ static void gui_set_wifi_connecting() {
 
 static void gui_set_wifi_connected() {
   lv_anim_del(wifi_label, NULL);
-  vTaskDelay(300 / portTICK_PERIOD_MS);
+  lv_obj_clear_flag(wifi_label, LV_OBJ_FLAG_HIDDEN);
+  lv_label_set_text(wifi_label, APP_WIFI_GOOD_SYMBOL);
+  vTaskDelay(100 / portTICK_PERIOD_MS);
   lv_obj_clear_flag(wifi_label, LV_OBJ_FLAG_HIDDEN);
   lv_label_set_text(wifi_label, APP_WIFI_GOOD_SYMBOL);
 }
@@ -165,7 +174,9 @@ static void gui_set_server_connecting() {
 
 static void gui_set_server_connected() {
   lv_anim_del(desktop_label, NULL);
-  vTaskDelay(300 / portTICK_PERIOD_MS);
+  lv_obj_clear_flag(desktop_label, LV_OBJ_FLAG_HIDDEN);
+  lv_label_set_text(desktop_label, APP_CONNECTED_SYMBOL);
+  vTaskDelay(100 / portTICK_PERIOD_MS);
   lv_obj_clear_flag(desktop_label, LV_OBJ_FLAG_HIDDEN);
   lv_label_set_text(desktop_label, APP_CONNECTED_SYMBOL);
 }
@@ -178,6 +189,12 @@ static void gui_set_server_disconnected() {
 }
 
 static void gui_bar_value_update_cb(lv_event_t *e) {
+  if (value_setting_panel == NULL) {
+    ESP_LOGW(GUI_TAG, "value_setting_panel is NULL");
+    return;
+  }
+  lv_obj_t *value_label = value_setting_panel->value_label;
+
   lv_obj_draw_part_dsc_t *dsc = lv_event_get_param(e);
   if (dsc->part != LV_PART_INDICATOR) return;
 
@@ -198,117 +215,107 @@ static void gui_bar_value_update_cb(lv_event_t *e) {
   /*If the indicator is long enough put the text inside on the right*/
   if (lv_area_get_width(dsc->draw_area) > txt_size.x + 20) {
     txt_x = dsc->draw_area->x2 - 8 - txt_size.x + 1;
-    lv_obj_set_style_text_color(value_setting_value_label, lv_color_white(),
-                                LV_PART_MAIN);
+    lv_obj_set_style_text_color(value_label, lv_color_white(), LV_PART_MAIN);
     label_dsc.color = lv_color_white();
   }
   /*If the indicator is still short put the text out of it on the right*/
   else {
     txt_x = dsc->draw_area->x2 - 8 + txt_size.x - 1;
-    lv_obj_set_style_text_color(value_setting_value_label, lv_color_black(),
-                                LV_PART_MAIN);
+    lv_obj_set_style_text_color(value_label, lv_color_black(), LV_PART_MAIN);
   }
 
-  lv_obj_align(value_setting_value_label, LV_ALIGN_LEFT_MID, txt_x, 0);
-  lv_label_set_text(value_setting_value_label, buf);
-  lv_obj_set_width(value_setting_value_label, txt_size.x);
+  lv_obj_align(value_label, LV_ALIGN_LEFT_MID, txt_x, 0);
+  lv_label_set_text(value_label, buf);
+  lv_obj_set_width(value_label, txt_size.x);
+}
+
+static void gui_close_value_setting_panel() {
+  if (value_setting_panel == NULL) return;
+  lv_obj_del(value_setting_panel->panel);
+  free(value_setting_panel);
+  value_setting_panel = NULL;
+}
+
+static void gui_check_value_setting_panel_task(void *pvParameters) {
+  vTaskDelay(5000 / portTICK_PERIOD_MS);
+  for (;;) {
+    if (esp_timer_get_time() - value_setting_panel->last_updated_at >
+        GUI_PANEL_TIMEOUT_US) {
+      gui_close_value_setting_panel();
+      vTaskDelete(NULL);
+    }
+    vTaskDelay(1000 / portTICK_PERIOD_MS);
+  }
 }
 
 static void gui_create_value_setting_panel() {
   if (value_setting_panel != NULL) {
+    value_setting_panel->last_updated_at = esp_timer_get_time();
     return;
   }
+  value_setting_panel =
+      (value_setting_panel_t *)malloc(sizeof(value_setting_panel_t));
 
-  value_setting_panel = lv_obj_create(scr);
-  lv_obj_set_size(value_setting_panel, 128, 40);
-  lv_obj_align(value_setting_panel, LV_ALIGN_BOTTOM_MID, 0, 0);
-  lv_obj_set_style_border_width(value_setting_panel, 1, LV_PART_MAIN);
-  lv_obj_set_style_border_color(value_setting_panel, lv_color_black(),
+  xTaskCreate(gui_check_value_setting_panel_task, "G_CHK_VAL_SET", 1024, NULL,
+              configMAX_PRIORITIES - 1, NULL);
+
+  value_setting_panel->panel = lv_obj_create(scr);
+  lv_obj_set_size(value_setting_panel->panel, 128, 40);
+  lv_obj_align(value_setting_panel->panel, LV_ALIGN_BOTTOM_MID, 0, 0);
+  lv_obj_set_style_border_width(value_setting_panel->panel, 1, LV_PART_MAIN);
+  lv_obj_set_style_border_color(value_setting_panel->panel, lv_color_black(),
                                 LV_PART_MAIN);
-  lv_obj_set_style_radius(value_setting_panel, 5, LV_PART_MAIN);
-  lv_obj_set_style_pad_all(value_setting_panel, 2, LV_PART_MAIN);
+  lv_obj_set_style_radius(value_setting_panel->panel, 5, LV_PART_MAIN);
+  lv_obj_set_style_pad_all(value_setting_panel->panel, 2, LV_PART_MAIN);
 
-  value_setting_label = lv_label_create(value_setting_panel);
-  lv_obj_align(value_setting_label, LV_ALIGN_BOTTOM_LEFT, 0, 0);
+  value_setting_panel->label = lv_label_create(value_setting_panel->panel);
+  lv_obj_align(value_setting_panel->label, LV_ALIGN_BOTTOM_LEFT, 0, 0);
 
-  value_setting_bar = lv_bar_create(value_setting_panel);
-  lv_obj_set_size(value_setting_bar, 120, 12);
-  lv_obj_align(value_setting_bar, LV_ALIGN_TOP_MID, 0, 0);
-  lv_bar_set_range(value_setting_bar, 0, 100);
-  lv_bar_set_value(value_setting_bar, 50, LV_ANIM_ON);
-  lv_obj_set_style_bg_color(value_setting_bar, lv_color_white(), LV_PART_MAIN);
-  lv_obj_set_style_border_color(value_setting_bar, lv_color_black(),
+  value_setting_panel->bar = lv_bar_create(value_setting_panel->panel);
+  lv_obj_set_size(value_setting_panel->bar, 120, 12);
+  lv_obj_align(value_setting_panel->bar, LV_ALIGN_TOP_MID, 0, 0);
+  lv_bar_set_range(value_setting_panel->bar, 0, 100);
+  lv_bar_set_value(value_setting_panel->bar, 50, LV_ANIM_ON);
+  lv_obj_set_style_bg_color(value_setting_panel->bar, lv_color_white(),
+                            LV_PART_MAIN);
+  lv_obj_set_style_border_color(value_setting_panel->bar, lv_color_black(),
                                 LV_PART_MAIN);
-  lv_obj_set_style_border_width(value_setting_bar, 1, LV_PART_MAIN);
-  lv_obj_set_style_radius(value_setting_bar, 5, LV_PART_MAIN);
-  lv_obj_set_style_pad_hor(value_setting_bar, 0, LV_PART_MAIN);
-  lv_obj_set_style_pad_ver(value_setting_bar, 2, LV_PART_MAIN);
-  lv_obj_set_style_bg_color(value_setting_bar, lv_color_black(),
+  lv_obj_set_style_border_width(value_setting_panel->bar, 1, LV_PART_MAIN);
+  lv_obj_set_style_radius(value_setting_panel->bar, 5, LV_PART_MAIN);
+  lv_obj_set_style_pad_hor(value_setting_panel->bar, 0, LV_PART_MAIN);
+  lv_obj_set_style_pad_ver(value_setting_panel->bar, 2, LV_PART_MAIN);
+  lv_obj_set_style_bg_color(value_setting_panel->bar, lv_color_black(),
                             LV_PART_INDICATOR);
-  lv_obj_add_event_cb(value_setting_bar, gui_bar_value_update_cb,
+  lv_obj_add_event_cb(value_setting_panel->bar, gui_bar_value_update_cb,
                       LV_EVENT_DRAW_PART_END, NULL);
 
-  value_setting_value_label = lv_label_create(value_setting_bar);
-  lv_obj_align(value_setting_value_label, LV_ALIGN_CENTER, 0, 0);
-  lv_obj_set_style_text_font(value_setting_value_label, &lv_font_montserrat_10,
-                             LV_PART_MAIN);
+  value_setting_panel->value_label = lv_label_create(value_setting_panel->bar);
+  lv_obj_align(value_setting_panel->value_label, LV_ALIGN_CENTER, 0, 0);
+  lv_obj_set_style_text_font(value_setting_panel->value_label,
+                             &lv_font_montserrat_10, LV_PART_MAIN);
 }
 
 static void gui_change_strip_level(int32_t target_value) {
   gui_create_value_setting_panel();
-  lv_label_set_text(value_setting_label, "Strip Level");
-  lv_bar_set_range(value_setting_bar, 0, 255);
-  lv_bar_set_value(value_setting_bar, target_value, LV_ANIM_ON);
+  lv_label_set_text(value_setting_panel->label, "Strip Level");
+  lv_bar_set_range(value_setting_panel->bar, 0, 255);
+  lv_bar_set_value(value_setting_panel->bar, target_value, LV_ANIM_ON);
 }
 
 static void gui_change_display_brightness(int8_t display_index,
                                           int32_t target_value) {
   gui_create_value_setting_panel();
-  lv_label_set_text_fmt(value_setting_label, "Display#%d Brightness",
+  lv_label_set_text_fmt(value_setting_panel->label, "Display#%d Brightness",
                         display_index);
-  lv_bar_set_range(value_setting_bar, 0, 100);
-  lv_bar_set_value(value_setting_bar, target_value, LV_ANIM_ON);
+  lv_bar_set_range(value_setting_panel->bar, 0, 100);
+  lv_bar_set_value(value_setting_panel->bar, target_value, LV_ANIM_ON);
 }
 
 static void gui_change_volume_level(int32_t target_value) {
   gui_create_value_setting_panel();
-  lv_label_set_text(value_setting_label, "Volume Level");
-  lv_bar_set_range(value_setting_bar, 0, 100);
-  lv_bar_set_value(value_setting_bar, target_value, LV_ANIM_ON);
-}
-
-void lv_example_bar_6(lv_obj_t *src) {
-  static lv_style_t style_bar;
-  lv_style_init(&style_bar);
-
-  lv_style_set_bg_color(&style_bar, lv_color_white());
-  lv_style_set_border_width(&style_bar, 1);
-  lv_style_set_border_color(&style_bar, lv_color_black());
-  lv_style_set_pad_hor(&style_bar, 4);
-  lv_style_set_pad_ver(&style_bar, 2);
-
-  static lv_style_t style_indic;
-  lv_style_init(&style_indic);
-
-  lv_style_set_bg_color(&style_indic, lv_color_black());
-
-  lv_obj_t *bar = lv_bar_create(src);
-  lv_obj_set_size(bar, 100, 10);
-  lv_obj_center(bar);
-  lv_obj_add_style(bar, &style_bar, LV_PART_MAIN);
-  lv_obj_add_style(bar, &style_indic, LV_PART_INDICATOR);
-  lv_bar_set_range(bar, 0, 100);
-  lv_bar_set_value(bar, 0, LV_ANIM_ON);
-
-  lv_anim_t a;
-  lv_anim_init(&a);
-  lv_anim_set_exec_cb(&a, set_value);
-  lv_anim_set_time(&a, 3000);
-  lv_anim_set_playback_time(&a, 3000);
-  lv_anim_set_var(&a, bar);
-  lv_anim_set_values(&a, 0, 50);
-  lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
-  lv_anim_start(&a);
+  lv_label_set_text(value_setting_panel->label, "Volume Level");
+  lv_bar_set_range(value_setting_panel->bar, 0, 100);
+  lv_bar_set_value(value_setting_panel->bar, target_value, LV_ANIM_ON);
 }
 
 void gui_status_bar_create(lv_obj_t *scr) {
@@ -350,15 +357,11 @@ void example_lvgl_demo_ui(lv_disp_t *disp) {
   lv_label_set_long_mode(label,
                          LV_LABEL_LONG_SCROLL_CIRCULAR); /* Circular scroll
                                                           */
-  lv_label_set_text(label, "Hello Espressif, Hello LVGL.");
+  lv_label_set_text(label, "Hello Ivan Li!");
   lv_obj_set_width(label, 120);
   lv_obj_align(label, LV_ALIGN_BOTTOM_RIGHT, 0, 0);
 
-  lv_example_bar_6(scr);
-
   gui_status_bar_create(scr);
-
-  gui_create_value_setting_panel();
 }
 
 static void gui_tick(void *pvParameters) {

main/lvgl_demo_ui.c

@@ -1,19 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021-2022 Espressif Systems (Shanghai) CO LTD
- *
- * SPDX-License-Identifier: CC0-1.0
- */
-
-#include "lvgl.h"
-
-void example_lvgl_demo_ui(lv_disp_t *disp) {
-  lv_obj_t *scr = lv_disp_get_scr_act(disp);
-
-  lv_obj_t *label = lv_label_create(scr);
-  lv_label_set_long_mode(label,
-                         LV_LABEL_LONG_SCROLL_CIRCULAR); /* Circular scroll
-                                                          */
-  lv_label_set_text(label, "Hello Espressif, Hello LVGL.");
-  lv_obj_set_width(label, 120);
-  lv_obj_align(label, LV_ALIGN_TOP_MID, 0, 0);
-}

main/ui_input.c

@@ -192,7 +192,7 @@ static void encoder_value_change(encoder_state_t *state) {
     }
   }
   xQueueSend(ui_input_event, &event, NULL);
-  ESP_LOGI(UI_INPUT_TAG, "key: %d, delta: %d. delay: %lld, %lld", state->key,
+  ESP_LOGD(UI_INPUT_TAG, "key: %d, delta: %d. delay: %lld, %lld", state->key,
            event.value, ec0_interval, ec1_interval);
 }