diff --git a/examples/peripherals/lcd/mipi_dsi/main/idf_component.yml b/examples/peripherals/lcd/mipi_dsi/main/idf_component.yml index af72aa7525..8e0bcd79b5 100644 --- a/examples/peripherals/lcd/mipi_dsi/main/idf_component.yml +++ b/examples/peripherals/lcd/mipi_dsi/main/idf_component.yml @@ -1,3 +1,3 @@ dependencies: - lvgl/lvgl: "~8.3.0" + lvgl/lvgl: "~9.0.0" esp_lcd_ili9881c: "*" diff --git a/examples/peripherals/lcd/mipi_dsi/main/lvgl_demo_ui.c b/examples/peripherals/lcd/mipi_dsi/main/lvgl_demo_ui.c index 6497f80c83..09fed1a1f5 100644 --- a/examples/peripherals/lcd/mipi_dsi/main/lvgl_demo_ui.c +++ b/examples/peripherals/lcd/mipi_dsi/main/lvgl_demo_ui.c @@ -4,65 +4,153 @@ * SPDX-License-Identifier: CC0-1.0 */ -// This demo UI is adapted from LVGL official example: https://docs.lvgl.io/8.3/widgets/extra/meter.html#a-meter-with-multiple-arcs - #include "lvgl.h" -static lv_obj_t * meter; +static lv_style_t style_bullet; +static lv_obj_t *scale1; +static const lv_font_t *font_normal = &lv_font_montserrat_16; -static void set_value(void *indic, int32_t v) +static lv_obj_t *create_scale_box(lv_obj_t *parent, const char *text1, const char *text2, const char *text3) { - lv_meter_set_indicator_end_value(meter, indic, v); + lv_obj_t *scale = lv_scale_create(parent); + lv_obj_center(scale); + lv_obj_set_size(scale, 600, 600); + lv_scale_set_mode(scale, LV_SCALE_MODE_ROUND_OUTER); + lv_scale_set_label_show(scale, false); + lv_scale_set_post_draw(scale, true); + lv_obj_set_width(scale, LV_PCT(100)); + lv_obj_set_style_pad_all(scale, 30, 0); + + lv_obj_t *bullet1 = lv_obj_create(parent); + lv_obj_set_size(bullet1, 13, 13); + lv_obj_remove_style(bullet1, NULL, LV_PART_SCROLLBAR); + lv_obj_add_style(bullet1, &style_bullet, 0); + lv_obj_set_style_bg_color(bullet1, lv_palette_main(LV_PALETTE_RED), 0); + lv_obj_t *label1 = lv_label_create(parent); + lv_label_set_text(label1, text1); + + lv_obj_t *bullet2 = lv_obj_create(parent); + lv_obj_set_size(bullet2, 13, 13); + lv_obj_remove_style(bullet2, NULL, LV_PART_SCROLLBAR); + lv_obj_add_style(bullet2, &style_bullet, 0); + lv_obj_set_style_bg_color(bullet2, lv_palette_main(LV_PALETTE_BLUE), 0); + lv_obj_t *label2 = lv_label_create(parent); + lv_label_set_text(label2, text2); + + lv_obj_t *bullet3 = lv_obj_create(parent); + lv_obj_set_size(bullet3, 13, 13); + lv_obj_remove_style(bullet3, NULL, LV_PART_SCROLLBAR); + lv_obj_add_style(bullet3, &style_bullet, 0); + lv_obj_set_style_bg_color(bullet3, lv_palette_main(LV_PALETTE_GREEN), 0); + lv_obj_t *label3 = lv_label_create(parent); + lv_label_set_text(label3, text3); + + static int32_t grid_col_dsc[] = {LV_GRID_CONTENT, LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST}; + static int32_t grid_row_dsc[] = {LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST}; + lv_obj_set_grid_dsc_array(parent, grid_col_dsc, grid_row_dsc); + lv_obj_set_grid_cell(scale, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_START, 1, 1); + lv_obj_set_grid_cell(bullet1, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 2, 1); + lv_obj_set_grid_cell(bullet2, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 3, 1); + lv_obj_set_grid_cell(bullet3, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 4, 1); + lv_obj_set_grid_cell(label1, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_START, 2, 1); + lv_obj_set_grid_cell(label2, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_START, 3, 1); + lv_obj_set_grid_cell(label3, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_START, 4, 1); + return scale; } -void example_lvgl_demo_ui(lv_disp_t *disp) +static void scale1_indic1_anim_cb(void *var, int32_t v) { - lv_obj_t *scr = lv_disp_get_scr_act(disp); - meter = lv_meter_create(scr); - lv_obj_center(meter); - lv_obj_set_size(meter, 600, 600); + lv_arc_set_value(var, v); - /*Remove the circle from the middle*/ - lv_obj_remove_style(meter, NULL, LV_PART_INDICATOR); + lv_obj_t *card = lv_obj_get_parent(scale1); + lv_obj_t *label = lv_obj_get_child(card, -5); + lv_label_set_text_fmt(label, "Revenue: %"LV_PRId32" %%", v); +} - /*Add a scale first*/ - lv_meter_scale_t * scale = lv_meter_add_scale(meter); - lv_meter_set_scale_ticks(meter, scale, 11, 2, 10, lv_palette_main(LV_PALETTE_GREY)); - lv_meter_set_scale_major_ticks(meter, scale, 1, 2, 30, lv_color_hex3(0xeee), 15); - lv_meter_set_scale_range(meter, scale, 0, 100, 270, 90); +static void scale1_indic2_anim_cb(void *var, int32_t v) +{ + lv_arc_set_value(var, v); - /*Add a four arc indicator*/ - lv_meter_indicator_t * indic1 = lv_meter_add_arc(meter, scale, 30, lv_palette_main(LV_PALETTE_RED), 0); - lv_meter_indicator_t * indic2 = lv_meter_add_arc(meter, scale, 30, lv_palette_main(LV_PALETTE_GREEN), -30); - lv_meter_indicator_t * indic3 = lv_meter_add_arc(meter, scale, 30, lv_palette_main(LV_PALETTE_BLUE), -60); - lv_meter_indicator_t * indic4 = lv_meter_add_arc(meter, scale, 30, lv_palette_main(LV_PALETTE_YELLOW), -90); + lv_obj_t *card = lv_obj_get_parent(scale1); + lv_obj_t *label = lv_obj_get_child(card, -3); + lv_label_set_text_fmt(label, "Sales: %"LV_PRId32" %%", v); +} - /*Create an animation to set the value*/ +static void scale1_indic3_anim_cb(void *var, int32_t v) +{ + lv_arc_set_value(var, v); + + lv_obj_t *card = lv_obj_get_parent(scale1); + lv_obj_t *label = lv_obj_get_child(card, -1); + lv_label_set_text_fmt(label, "Costs: %"LV_PRId32" %%", v); +} + +void example_lvgl_demo_ui(lv_display_t *disp) +{ + // init default theme + lv_theme_default_init(disp, lv_palette_main(LV_PALETTE_BLUE), lv_palette_main(LV_PALETTE_RED), LV_THEME_DEFAULT_DARK, + font_normal); + // bullet style + lv_style_init(&style_bullet); + lv_style_set_border_width(&style_bullet, 0); + lv_style_set_radius(&style_bullet, LV_RADIUS_CIRCLE); + + lv_obj_t *parent = lv_display_get_screen_active(disp); + + // create scale widget + scale1 = create_scale_box(parent, "Revenue", "Sales", "Costs"); + + // create arc indicators + lv_obj_t *arc; + arc = lv_arc_create(scale1); + lv_obj_remove_style(arc, NULL, LV_PART_KNOB); + lv_obj_remove_style(arc, NULL, LV_PART_MAIN); + lv_obj_set_size(arc, lv_pct(100), lv_pct(100)); + lv_obj_set_style_arc_opa(arc, 0, 0); + lv_obj_set_style_arc_width(arc, 15, LV_PART_INDICATOR); + lv_obj_set_style_arc_color(arc, lv_palette_main(LV_PALETTE_BLUE), LV_PART_INDICATOR); + lv_obj_remove_flag(arc, LV_OBJ_FLAG_CLICKABLE); + + // animation lv_anim_t a; lv_anim_init(&a); - lv_anim_set_exec_cb(&a, set_value); - lv_anim_set_values(&a, 0, 100); - lv_anim_set_repeat_delay(&a, 100); - lv_anim_set_playback_delay(&a, 100); + lv_anim_set_values(&a, 20, 100); lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE); - - lv_anim_set_time(&a, 2000); - lv_anim_set_playback_time(&a, 500); - lv_anim_set_var(&a, indic1); + lv_anim_set_exec_cb(&a, scale1_indic1_anim_cb); + lv_anim_set_var(&a, arc); + lv_anim_set_duration(&a, 4100); + lv_anim_set_playback_duration(&a, 2700); lv_anim_start(&a); - lv_anim_set_time(&a, 1000); - lv_anim_set_playback_time(&a, 1000); - lv_anim_set_var(&a, indic2); + arc = lv_arc_create(scale1); + lv_obj_remove_style(arc, NULL, LV_PART_KNOB); + lv_obj_set_size(arc, lv_pct(100), lv_pct(100)); + lv_obj_set_style_margin_all(arc, 20, 0); + lv_obj_set_style_arc_opa(arc, 0, 0); + lv_obj_set_style_arc_width(arc, 15, LV_PART_INDICATOR); + lv_obj_set_style_arc_color(arc, lv_palette_main(LV_PALETTE_RED), LV_PART_INDICATOR); + lv_obj_remove_flag(arc, LV_OBJ_FLAG_CLICKABLE); + lv_obj_center(arc); + + lv_anim_set_exec_cb(&a, scale1_indic2_anim_cb); + lv_anim_set_var(&a, arc); + lv_anim_set_duration(&a, 2600); + lv_anim_set_playback_duration(&a, 3200); lv_anim_start(&a); - lv_anim_set_time(&a, 1000); - lv_anim_set_playback_time(&a, 2000); - lv_anim_set_var(&a, indic3); - lv_anim_start(&a); + arc = lv_arc_create(scale1); + lv_obj_remove_style(arc, NULL, LV_PART_KNOB); + lv_obj_set_size(arc, lv_pct(100), lv_pct(100)); + lv_obj_set_style_margin_all(arc, 40, 0); + lv_obj_set_style_arc_opa(arc, 0, 0); + lv_obj_set_style_arc_width(arc, 15, LV_PART_INDICATOR); + lv_obj_set_style_arc_color(arc, lv_palette_main(LV_PALETTE_GREEN), LV_PART_INDICATOR); + lv_obj_remove_flag(arc, LV_OBJ_FLAG_CLICKABLE); + lv_obj_center(arc); - lv_anim_set_time(&a, 3000); - lv_anim_set_playback_time(&a, 2000); - lv_anim_set_var(&a, indic4); + lv_anim_set_exec_cb(&a, scale1_indic3_anim_cb); + lv_anim_set_var(&a, arc); + lv_anim_set_duration(&a, 2800); + lv_anim_set_playback_duration(&a, 1800); lv_anim_start(&a); } diff --git a/examples/peripherals/lcd/mipi_dsi/main/mipi_dsi_lcd_example_main.c b/examples/peripherals/lcd/mipi_dsi/main/mipi_dsi_lcd_example_main.c index 4c492e4739..48910abb2a 100644 --- a/examples/peripherals/lcd/mipi_dsi/main/mipi_dsi_lcd_example_main.c +++ b/examples/peripherals/lcd/mipi_dsi/main/mipi_dsi_lcd_example_main.c @@ -64,17 +64,17 @@ static const char *TAG = "example"; static SemaphoreHandle_t lvgl_api_mux = NULL; -extern void example_lvgl_demo_ui(lv_disp_t *disp); +extern void example_lvgl_demo_ui(lv_display_t *disp); -static void example_lvgl_flush_cb(lv_disp_drv_t *drv, const lv_area_t *area, lv_color_t *color_map) +static void example_lvgl_flush_cb(lv_display_t *disp, const lv_area_t *area, uint8_t *px_map) { - esp_lcd_panel_handle_t panel_handle = (esp_lcd_panel_handle_t) drv->user_data; + esp_lcd_panel_handle_t panel_handle = lv_display_get_user_data(disp); int offsetx1 = area->x1; int offsetx2 = area->x2; int offsety1 = area->y1; int offsety2 = area->y2; // pass the draw buffer to the driver - esp_lcd_panel_draw_bitmap(panel_handle, offsetx1, offsety1, offsetx2 + 1, offsety2 + 1, color_map); + esp_lcd_panel_draw_bitmap(panel_handle, offsetx1, offsety1, offsetx2 + 1, offsety2 + 1, px_map); } static void example_increase_lvgl_tick(void *arg) @@ -118,8 +118,8 @@ static void example_lvgl_port_task(void *arg) static bool example_notify_lvgl_flush_ready(esp_lcd_panel_handle_t panel, esp_lcd_dpi_panel_event_data_t *edata, void *user_ctx) { - lv_disp_drv_t *disp_driver = (lv_disp_drv_t *)user_ctx; - lv_disp_flush_ready(disp_driver); + lv_display_t *disp = (lv_display_t *)user_ctx; + lv_display_flush_ready(disp); return false; } @@ -161,9 +161,6 @@ static void example_bsp_set_lcd_backlight(uint32_t level) void app_main(void) { - static lv_disp_draw_buf_t disp_buf; // contains internal graphic buffer(s) called draw buffer(s) - static lv_disp_drv_t disp_drv; // contains callback functions - example_bsp_enable_dsi_phy_power(); example_bsp_init_lcd_backlight(); example_bsp_set_lcd_backlight(EXAMPLE_LCD_BK_LIGHT_OFF_LEVEL); @@ -190,7 +187,7 @@ void app_main(void) // create ILI9881C control panel esp_lcd_panel_handle_t ili9881c_ctrl_panel; esp_lcd_panel_dev_config_t lcd_dev_config = { - .bits_per_pixel = 16, + .bits_per_pixel = 24, .rgb_ele_order = LCD_RGB_ELEMENT_ORDER_RGB, .reset_gpio_num = EXAMPLE_PIN_NUM_LCD_RST, }; @@ -205,7 +202,7 @@ void app_main(void) .virtual_channel = 0, .dpi_clk_src = MIPI_DSI_DPI_CLK_SRC_DEFAULT, .dpi_clock_freq_mhz = EXAMPLE_MIPI_DSI_DPI_CLK_MHZ, - .pixel_format = LCD_COLOR_PIXEL_FORMAT_RGB565, + .pixel_format = LCD_COLOR_PIXEL_FORMAT_RGB888, .video_timing = { .h_size = EXAMPLE_MIPI_DSI_LCD_H_RES, .v_size = EXAMPLE_MIPI_DSI_LCD_V_RES, @@ -221,36 +218,40 @@ void app_main(void) #endif }; ESP_ERROR_CHECK(esp_lcd_new_panel_dpi(mipi_dsi_bus, &dpi_config, &mipi_dpi_panel)); - // register event callbacks - esp_lcd_dpi_panel_event_callbacks_t cbs = { - .on_color_trans_done = example_notify_lvgl_flush_ready, - }; - ESP_ERROR_CHECK(esp_lcd_dpi_panel_register_event_callbacks(mipi_dpi_panel, &cbs, &disp_drv)); ESP_ERROR_CHECK(esp_lcd_panel_init(mipi_dpi_panel)); - // turn on backlight example_bsp_set_lcd_backlight(EXAMPLE_LCD_BK_LIGHT_ON_LEVEL); ESP_LOGI(TAG, "Initialize LVGL library"); lv_init(); + // create a lvgl display + lv_display_t *display = lv_display_create(EXAMPLE_MIPI_DSI_LCD_H_RES, EXAMPLE_MIPI_DSI_LCD_V_RES); + // associate the mipi panel handle to the display + lv_display_set_user_data(display, mipi_dpi_panel); + // create draw buffer void *buf1 = NULL; void *buf2 = NULL; - ESP_LOGI(TAG, "Allocate separate LVGL draw buffers from PSRAM"); - buf1 = heap_caps_malloc(EXAMPLE_MIPI_DSI_LCD_H_RES * EXAMPLE_LVGL_DRAW_BUF_LINES * sizeof(lv_color_t), MALLOC_CAP_SPIRAM); + ESP_LOGI(TAG, "Allocate separate LVGL draw buffers"); + // Note: + // Keep the display buffer in **internal** RAM can speed up the UI because LVGL uses it a lot and it should have a fast access time + // This example allocate the buffer from PSRAM mainly because we want to save the internal RAM + size_t draw_buffer_sz = EXAMPLE_MIPI_DSI_LCD_H_RES * EXAMPLE_LVGL_DRAW_BUF_LINES * sizeof(lv_color_t); + buf1 = heap_caps_malloc(draw_buffer_sz, MALLOC_CAP_SPIRAM); assert(buf1); - buf2 = heap_caps_malloc(EXAMPLE_MIPI_DSI_LCD_H_RES * EXAMPLE_LVGL_DRAW_BUF_LINES * sizeof(lv_color_t), MALLOC_CAP_SPIRAM); + buf2 = heap_caps_malloc(draw_buffer_sz, MALLOC_CAP_SPIRAM); assert(buf2); // initialize LVGL draw buffers - lv_disp_draw_buf_init(&disp_buf, buf1, buf2, EXAMPLE_MIPI_DSI_LCD_H_RES * EXAMPLE_LVGL_DRAW_BUF_LINES); + lv_display_set_buffers(display, buf1, buf2, draw_buffer_sz, LV_DISPLAY_RENDER_MODE_PARTIAL); + // set color depth + lv_display_set_color_format(display, LV_COLOR_FORMAT_RGB888); + // set the callback which can copy the rendered image to an area of the display + lv_display_set_flush_cb(display, example_lvgl_flush_cb); - // register display driver to LVGL library - lv_disp_drv_init(&disp_drv); - disp_drv.hor_res = EXAMPLE_MIPI_DSI_LCD_H_RES; - disp_drv.ver_res = EXAMPLE_MIPI_DSI_LCD_V_RES; - disp_drv.flush_cb = example_lvgl_flush_cb; - disp_drv.draw_buf = &disp_buf; - disp_drv.user_data = mipi_dpi_panel; - lv_disp_t *disp = lv_disp_drv_register(&disp_drv); + ESP_LOGI(TAG, "Register DPI panel event callback for LVGL flush ready notification"); + esp_lcd_dpi_panel_event_callbacks_t cbs = { + .on_color_trans_done = example_notify_lvgl_flush_ready, + }; + ESP_ERROR_CHECK(esp_lcd_dpi_panel_register_event_callbacks(mipi_dpi_panel, &cbs, display)); ESP_LOGI(TAG, "Use esp_timer as LVGL tick timer"); const esp_timer_create_args_t lvgl_tick_timer_args = { @@ -271,7 +272,7 @@ void app_main(void) ESP_LOGI(TAG, "Display LVGL Meter Widget"); // Lock the mutex due to the LVGL APIs are not thread-safe if (example_lvgl_lock(-1)) { - example_lvgl_demo_ui(disp); + example_lvgl_demo_ui(display); // Release the mutex example_lvgl_unlock(); } diff --git a/examples/peripherals/lcd/mipi_dsi/sdkconfig.defaults b/examples/peripherals/lcd/mipi_dsi/sdkconfig.defaults index 4c8b3cdc0d..8b1b2c8e90 100644 --- a/examples/peripherals/lcd/mipi_dsi/sdkconfig.defaults +++ b/examples/peripherals/lcd/mipi_dsi/sdkconfig.defaults @@ -1,6 +1,7 @@ -CONFIG_LV_MEM_CUSTOM=y -CONFIG_LV_MEMCPY_MEMSET_STD=y -CONFIG_LV_USE_USER_DATA=y -CONFIG_LV_USE_CHART=y +CONFIG_LV_CONF_SKIP=y +CONFIG_LV_COLOR_DEPTH_24=y +CONFIG_LV_FONT_MONTSERRAT_16=y +CONFIG_LV_USE_OBSERVER=y +CONFIG_LV_USE_SYSMON=y CONFIG_LV_USE_PERF_MONITOR=y CONFIG_IDF_EXPERIMENTAL_FEATURES=y