alex/esp-idf
alex/esp-idf
1
0
Fork 0
mirror of https://github.com/espressif/esp-idf.git synced 2024-10-05 20:47:46 -04:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'feat/mipi_dsi_lvgl_9' into 'master'

Browse Source 
feat(lcd): update mipi dsi example with lvgl v9

See merge request espressif/esp-idf!29303
This commit is contained in:
morris 2024-03-01 17:45:51 +08:00
commit c5f81bb2f3
4 changed files with 166 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/peripherals/lcd/mipi_dsi/main/idf_component.yml
View File

@ -1,3 +1,3 @@
dependencies:
lvgl/lvgl: "~8.3.0"
lvgl/lvgl: "~9.0.0"
esp_lcd_ili9881c: "*"

170
examples/peripherals/lcd/mipi_dsi/main/lvgl_demo_ui.c
View File

@ -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);
}

61
examples/peripherals/lcd/mipi_dsi/main/mipi_dsi_lcd_example_main.c
View File

@ -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();
}

9
examples/peripherals/lcd/mipi_dsi/sdkconfig.defaults
View File

@ -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