Hi All,
I have been struggling with the LVGL 9.2 because I do not know and found on the how I can use the canvas, draw and mask functions.
I have two pictures (lean_angle_bg and lean_angle_indicator_segmented) and I could use them
individually but I want to following:
- Declare the bg picture as a static. Tick
LV_IMAGE_DECLARE(lean_angle_bg);
app_data->ui_data.img_lean_angle_bg = lv_image_create(app_data->ui_data.screen);
lv_img_set_src(app_data->ui_data.img_lean_angle_bg, &lean_angle_bg);
lv_obj_align(app_data->ui_data.img_lean_angle_bg, LV_ALIGN_BOTTOM_MID, 0, -100); - Create the pie slice and show only the necessary part from the other picture. Note: They have the same size w = 202, h = 102 and RGB565A8 format generated by the online LVGL converter.
I tried to use the canvas but with limited success. The format worked better with RGB565 rather with A8. Mask creation was not possible due to missing examples.
So I do not know what to do next or where to go.
I attached my code here:
LV_IMAGE_DECLARE(lean_angle_bg);
app_data->ui_data.img_lean_angle_bg = lv_image_create(app_data->ui_data.screen); //lv_obj_t *img_lean_angle_bg = lv_image_create(app_data->ui_data.screen);
lv_img_set_src(app_data->ui_data.img_lean_angle_bg, &lean_angle_bg);
lv_obj_align(app_data->ui_data.img_lean_angle_bg, LV_ALIGN_BOTTOM_MID, 0, -100);
//lv_obj_set_style_opa(app_data->ui_data.img_lean_angle_bg, LV_OPA_50, LV_PART_MAIN);
LV_IMAGE_DECLARE(lean_angle_indicator_segmented);
// app_data->ui_data.img_lean_angle_indicator = lv_image_create(app_data->ui_data.screen);//lv_obj_t *img_lean_angle_indicator = lv_image_create(app_data->ui_data.screen);
// lv_img_set_src(app_data->ui_data.img_lean_angle_indicator, &lean_angle_indicator_segmented);
// lv_obj_align_to(app_data->ui_data.img_lean_angle_indicator,app_data->ui_data.img_lean_angle_bg, LV_ALIGN_CENTER, 0,0);
//lv_obj_set_style_clip_corner(app_data->ui_data.img_lean_angle_indicator, true, LV_PART_MAIN);
// app_data->ui_data.lean_angle_area.x1 = 50;
// app_data->ui_data.lean_angle_area.x2 = 55;
// app_data->ui_data.lean_angle_area.y1 = 100;
// app_data->ui_data.lean_angle_area.y2 = 100;
//lv_obj_set_style_blend_mode()
//lv_obj_refresh_ext_draw_size
//lv_draw_sw_mask_angle_init(&app_data->ui_data.lean_angle_mask, 202, 102, 90, 90);
/* app_data->ui_data.canvas_buf = lv_malloc(CANVAS_WIDTH * CANVAS_WIDTH * 2);
app_data->ui_data.lean_angle_canvas_mask = lv_canvas_create(app_data->ui_data.screen);
lv_canvas_set_buffer(app_data->ui_data.lean_angle_canvas_mask, app_data->ui_data.canvas_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_RGB565A8 );
lv_obj_align_to(app_data->ui_data.lean_angle_canvas_mask, app_data->ui_data.img_lean_angle_bg, LV_ALIGN_BOTTOM_MID, 0, 0); */
//app_data->motorcycle_data.lean_angle_roll = 60;
uint16_t angle = 60;
//static uint8_t cbuf[LV_CANVAS_BUF_SIZE(CANVAS_WIDTH, CANVAS_HEIGHT, 32, LV_DRAW_BUF_STRIDE_ALIGN)];
LV_DRAW_BUF_DEFINE_STATIC(cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_RGB565);
LV_DRAW_BUF_INIT_STATIC(cbuf);
/*Create a canvas and initialize its palette*/
lv_obj_t * canvas = lv_canvas_create(app_data->ui_data.screen);
lv_canvas_set_draw_buf(canvas, &cbuf);
//lv_canvas_set_buffer(canvas, &cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_RGB565);
lv_canvas_fill_bg(canvas, lv_color_hex(0x000000), LV_OPA_COVER);
lv_obj_align(canvas, LV_ALIGN_BOTTOM_MID, 0, -20);
//lv_obj_center(canvas);
lv_layer_t layer;
lv_canvas_init_layer(canvas, &layer);
lv_draw_image_dsc_t dsc;
lv_draw_image_dsc_init(&dsc);
dsc.src = &lean_angle_indicator_segmented;
dsc.image_area.x1 = 0;
dsc.image_area.x2 = 201;
dsc.image_area.y1 = 0;
dsc.image_area.y2 = 101;
//dsc.opa = LV_OPA_50;
dsc.header.h = 101;
dsc.header.w = 201;
//dsc.header.cf = LV_COLOR_FORMAT_RGB565A8;
lv_area_t coords = {0, 0, 201, 101}; // {x1, y1, x2, y2};
lv_draw_image(&layer, &dsc, &coords);
lv_draw_sw_mask_radius_param_t *circle_mask;
//lv_draw_mask_t *circle_mask;
lv_area_t mask_area = {50, 50, 150, 150}; // Define the circle's bounding box
//lv_draw_mask_radius_init(circle_mask, &mask_area, LV_RADIUS_CIRCLE, false);
lv_draw_sw_mask_radius_init(&circle_mask, &mask_area, 50, true);
// APPLY MASK WHILE DRAWING
lv_draw_rect_dsc_t rect_dsc;
lv_draw_rect_dsc_init(&rect_dsc);
rect_dsc.bg_color = lv_palette_main(LV_PALETTE_BLUE);
rect_dsc.bg_opa = LV_OPA_COVER;
// Start masked drawing
lv_draw_sw_mask_type_t * masks[] = {&circle_mask, NULL}; // Mask list
uint8_t mask_buf[200]; // Adjust size as needed for drawing
lv_draw_sw_mask_apply(masks, mask_buf, 50, 50, 100); // Apply the mask to the line
// Draw a rectangle inside the masked area
lv_draw_rect(layer, &rect_dsc, &mask_area);
lv_draw_label_dsc_t label_dsc;
lv_draw_label_dsc_init(&label_dsc);
label_dsc.color = lv_palette_main(LV_PALETTE_BLUE);
label_dsc.text = "Some text on text canvas";
lv_area_t coords_text = {100, 0, 200, 120}; // 40, 80, 100, 120
lv_draw_label(&layer, &label_dsc, &coords_text);
lv_canvas_finish_layer(canvas, &layer);
Thank you for your help,
Geri