Description
When showing a label object on top of another object, there’s a strange discoloration that exists on the same horizontal position that seems to match the height of the first letter in the label object. This “shadow effect” continues horizontally through the rest of the pill shape on both ends. Picture for reference (it’s hard to see in this picture but much more apparent in-person. There’s almost a slightly-lighter “bar” that’s the height of the “w” that extends horizontally through the pill shape):
What MCU/Processor/Board and compiler are you using?
ESP32 with ESP-IDF v4.2
What LVGL version are you using?
7.11.0
What do you want to achieve?
I want to place a label on top of this pill shape without there being any shadow-effect present.
What have you tried so far?
I have the desktop version of LVGL running the same version of the code but can’t see this effect on my monitor. My monitor is also much higher resolution and isn’t OLED (which the embedded screen is). I’m not convinced this has anything to do with LVGL specifically but could be related to the graphics driver I needed to write for this application because the screen is an uncommon resolution/color configuration. Everything else looks/works perfectly however.
I’ve also tried using an image of this pill shape and just displaying that instead of drawing the object using the size/radius functions from LVGL. The effect is still present.
This screen is 4-bit grayscale and from internet sleuthing, the suggested route to get here was to make LVGL use 8-bit color depth (RGB332) and then use this conversion:
// incoming pixel (lv_color_t val)
// convert the value into an 8-bit value
uint8_t byte = lv_color_brightness(val);
// scale the value down to 4-bits as that's our pixel resolution
return static_cast<uint8_t>((byte >> 4));
Is this correct? Again, everything else seems fine visually after using this configuration for some time.
Code to reproduce
In effect this what I’m doing:
lv_style_t pill_style;
lv_obj_t* pill = lv_obj_create(lv_scr_act(), NULL);
lv_obj_t* label = lv_label_create(lv_scr_act(), NULL);
lv_style_init(&pill_style);
lv_style_set_bg_color(&pill_style, LV_STATE_DEFAULT, LV_COLOR_WHITE);
lv_style_set_line_color(&pill_style, LV_STATE_DEFAULT, LV_COLOR_WHITE);
lv_obj_set_hidden(pill, true);
lv_obj_set_hidden(label, true);
// ... (event in application where this pill/text combo is triggered)
// display pill
lv_obj_set_size(pill, 200, 50);
lv_obj_align(pill, NULL, LV_ALIGN_CENTER, 0, 0);
lv_style_set_radius(&pill_style, LV_STATE_DEFAULT, 25);
lv_obj_add_style(pill, LV_OBJ_PART_MAIN, &pill_style);
lv_obj_set_hidden(pill, false);
// display text
lv_label_set_text(label, "weight");
lv_obj_set_style_local_text_color(label, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_BLACK);
lv_obj_align(label, NULL, LV_ALIGN_CENTER, 0, 0);
lv_set_hidden(label, false);