lcd: add lvgl demo ui

examples/peripherals/lcd/lvgl/main/CMakeLists.txt

@@ -1,2 +1,4 @@
-idf_component_register(SRCS "lvgl_example_main.c" "lvgl_demo_ui.c"
+file(GLOB_RECURSE IMAGE_SOURCES images/*.c)
+
+idf_component_register(SRCS "lvgl_example_main.c" "lvgl_demo_ui.c" ${IMAGE_SOURCES}
                        INCLUDE_DIRS ".")

examples/peripherals/lcd/lvgl/main/lvgl_demo_ui.c

@@ -6,14 +6,94 @@
    software is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
    CONDITIONS OF ANY KIND, either express or implied.
 */
+
+#include <math.h>
 #include "lvgl.h"
 
+#ifndef PI
+#define PI  (3.14159f)
+#endif
+
+// LVGL image declare
+LV_IMG_DECLARE(esp_logo)
+LV_IMG_DECLARE(esp_text)
+
+static lv_obj_t *arc[3];
+static lv_obj_t *img_logo;
+static lv_obj_t *img_text;
+static lv_color_t arc_color[] = {
+    LV_COLOR_MAKE(232, 87, 116),
+    LV_COLOR_MAKE(126, 87, 162),
+    LV_COLOR_MAKE(90, 202, 228),
+};
+
+static void anim_timer_cb(lv_timer_t *timer)
+{
+    static int32_t count = -90;
+    lv_obj_t *scr = (lv_obj_t *) timer->user_data;
+
+    // Play arc animation
+    if (count < 90) {
+        lv_coord_t arc_start = count > 0 ? (1 - cosf(count / 180.0f * PI)) * 270 : 0;
+        lv_coord_t arc_len = (sinf(count / 180.0f * PI) + 1) * 135;
+
+        for (size_t i = 0; i < sizeof(arc) / sizeof(arc[0]); i++) {
+            lv_arc_set_bg_angles(arc[i], arc_start, arc_len);
+            lv_arc_set_rotation(arc[i], (count + 120 * (i + 1)) % 360);
+        }
+    }
+
+    // Delete arcs when animation finished
+    if (count == 90) {
+        for (size_t i = 0; i < sizeof(arc) / sizeof(arc[0]); i++) {
+            lv_obj_del(arc[i]);
+        }
+
+        // Create new image and make it transparent
+        img_text = lv_img_create(scr);
+        lv_img_set_src(img_text, &esp_text);
+        lv_obj_set_style_img_opa(img_text, 0, 0);
+    }
+
+    // Move images when arc animation finished
+    if ((count >= 100) && (count <= 180)) {
+        lv_coord_t offset = (sinf((count - 140) * 2.25f / 90.0f) + 1) * 20.0f;
+        lv_obj_align((lv_obj_t *) timer->user_data, LV_ALIGN_CENTER, 0, -offset);
+        lv_obj_align(img_text, LV_ALIGN_CENTER, 0, 2 * offset);
+        lv_obj_set_style_img_opa(img_text, offset / 40.0f * 255, 0);
+    }
+
+    // Delete timer when all animation finished
+    if (++count >= 180) {
+        lv_timer_del(timer);
+    }
+}
+
 void example_lvgl_demo_ui(lv_obj_t *scr)
 {
-    // Create a Label on the currently active screen
-    lv_obj_t *label =  lv_label_create(scr);
-    // Modify the Label's text
-    lv_label_set_text(label, "Hello World");
-    // Align the Label to the center
-    lv_obj_align(label, LV_ALIGN_TOP_MID, 0, 0);
+    // Create image
+    img_logo = lv_img_create(scr);
+    lv_img_set_src(img_logo, &esp_logo);
+    lv_obj_center(img_logo);
+
+    // Create arcs
+    for (size_t i = 0; i < sizeof(arc) / sizeof(arc[0]); i++) {
+        arc[i] = lv_arc_create(scr);
+
+        // Set arc caption
+        lv_obj_set_size(arc[i], 220 - 30 * i, 220 - 30 * i);
+        lv_arc_set_bg_angles(arc[i], 120 * i, 10 + 120 * i);
+        lv_arc_set_value(arc[i], 0);
+
+        // Set arc style
+        lv_obj_remove_style(arc[i], NULL, LV_PART_KNOB);
+        lv_obj_set_style_arc_width(arc[i], 10, 0);
+        lv_obj_set_style_arc_color(arc[i], arc_color[i], 0);
+
+        // Make arc center
+        lv_obj_center(arc[i]);
+    }
+
+    // Create timer for animation
+    lv_timer_create(anim_timer_cb, 20, (void *) scr);
 }