Image cover totally an object

How-to
1

Description

Hi
In ver 6, I could create an object as a parent and an image as its child.
My goal was to make icons in which some parts of their image would become red, whenever they were focused.
forward1 forward2
without using two images. because the middle of the image was transparent. so only the obj behind it would be recolored to red.
Anyway, my questions are:

  1. Is it still a good teqnique regarding the features we have in ver 7.3?

  2. I can not get to this in ver 7.3. The code I used for the style of objects in ver 6 was:

    	lv_style_copy (&style_menu_objects, &lv_style_pretty);
	style_menu_objects.body.main_color   = lv_color_make(160, 160, 160);
	style_menu_objects.body.grad_color   = lv_color_make(160, 160, 160);
	style_menu_objects.body.border.color = lv_color_make(0, 0, 0);
	style_menu_objects.body.border.width = 10;
	style_menu_objects.body.border.opa   = LV_OPA_COVER;

But the problem I have is I can not cover the object completely by its child -image- I also tried setting all padding of the object and margin of the image to zero, but couldn’t get the result.

What MCU/Processor/Board and compiler are you using?

stm32f429igt6, stm32cubeide

What LVGL version are you using?

v7.3

2

Oh, It’s interesting. when I used this code:

    lv_obj_set_style_local_radius(obj_main_menu[MAIN_PATIENTLIMITS], LV_PAGE_PART_BG, LV_STATE_DEFAULT, 23);
	lv_obj_set_style_local_pad_all(obj_main_menu[MAIN_PATIENTLIMITS], LV_PAGE_PART_BG, LV_STATE_DEFAULT, 0);
	lv_obj_set_style_local_pad_inner(obj_main_menu[MAIN_PATIENTLIMITS], LV_PAGE_PART_BG, LV_STATE_DEFAULT, 0);
	lv_obj_set_style_local_bg_color(obj_main_menu[MAIN_PATIENTLIMITS], LV_PAGE_PART_BG, LV_STATE_DEFAULT, lv_color_make(160, 160, 160));
	lv_obj_set_style_local_border_opa(obj_main_menu[MAIN_PATIENTLIMITS], LV_PAGE_PART_BG, LV_STATE_DEFAULT, LV_OPA_COVER);
	lv_obj_set_style_local_border_color(obj_main_menu[MAIN_PATIENTLIMITS], LV_PAGE_PART_BG, LV_STATE_DEFAULT, LV_COLOR_BLACK);
	lv_obj_set_style_local_border_width(obj_main_menu[MAIN_PATIENTLIMITS], LV_PAGE_PART_BG, LV_STATE_DEFAULT, 4);
	lv_obj_set_style_local_border_color(obj_main_menu[MAIN_PATIENTLIMITS], LV_PAGE_PART_BG, LV_STATE_FOCUSED, LV_COLOR_BLACK);
	lv_obj_set_style_local_bg_color(obj_main_menu[MAIN_PATIENTLIMITS], LV_PAGE_PART_BG, LV_STATE_FOCUSED, LV_COLOR_RED);

The corner of the object was bigger than the image, so it was not covered fully by the image. but by using this:

    lv_style_init(&style_obj_menu_icons);
	lv_style_set_radius(&style_obj_menu_icons, LV_STATE_DEFAULT, 23);
	lv_style_set_pad_all(&style_obj_menu_icons, LV_STATE_DEFAULT, 0);
	lv_style_set_pad_inner(&style_obj_menu_icons, LV_STATE_DEFAULT, 0);
	lv_style_set_bg_color(&style_obj_menu_icons, LV_STATE_DEFAULT, lv_color_make(160, 160, 160));
	lv_style_set_bg_opa(&style_obj_menu_icons, LV_STATE_DEFAULT, LV_OPA_COVER);
	lv_style_set_border_opa(&style_obj_menu_icons, LV_STATE_DEFAULT, LV_OPA_COVER);
	lv_style_set_border_color(&style_obj_menu_icons, LV_STATE_DEFAULT, LV_COLOR_BLACK);
	lv_style_set_border_width(&style_obj_menu_icons, LV_STATE_DEFAULT, 4);
	lv_style_set_border_color(&style_obj_menu_icons, LV_STATE_FOCUSED, LV_COLOR_BLACK);
	lv_style_set_bg_color(&style_obj_menu_icons, LV_STATE_FOCUSED, LV_COLOR_RED);

I could get the same result as the time I used ver 6.0. Why?:thinking:

3

You appear to have missed bg_opa when using local styles - maybe that’s the reason?

1 Like