Widgets has a black edge

Description

Hi,I encountered a problem, which may be a bug. I set the screen transparency to 0, played the animation in the way of hardware aliasing, and then created some widgets on the active screen, with jagged black edges on the edge of the widgets

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

Xilinx mpsoc

What LVGL version are you using?

8.3.3

What do you want to achieve?

Remove the black edge of the widgets

What have you tried so far?

I tried versions 7.11, 8.0, 8.1, 8.2, 8.3.3, in 8 versions, lv_conf. h configuration is roughly the same,and found that the problem occurred in 8.3 and later versions. The previous versions were normal

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

static lv_style_t style_btn;
static lv_style_t style_btn_pressed;
static lv_style_t style_btn_red;

static lv_color_t darken(const lv_color_filter_dsc_t * dsc, lv_color_t color, lv_opa_t opa)
{
    LV_UNUSED(dsc);
    return lv_color_darken(color, opa);
}

static void style_init(void)
{
    /*Create a simple button style*/
    lv_style_init(&style_btn);
    lv_style_set_radius(&style_btn, 10);
    lv_style_set_bg_opa(&style_btn, LV_OPA_COVER);
    lv_style_set_bg_color(&style_btn, lv_palette_lighten(LV_PALETTE_GREY, 3));
    lv_style_set_bg_grad_color(&style_btn, lv_palette_main(LV_PALETTE_GREY));
    lv_style_set_bg_grad_dir(&style_btn, LV_GRAD_DIR_VER);

    lv_style_set_border_color(&style_btn, lv_color_black());
    lv_style_set_border_opa(&style_btn, LV_OPA_20);
    lv_style_set_border_width(&style_btn, 2);

    lv_style_set_text_color(&style_btn, lv_color_black());

    /*Create a style for the pressed state.
     *Use a color filter to simply modify all colors in this state*/
    static lv_color_filter_dsc_t color_filter;
    lv_color_filter_dsc_init(&color_filter, darken);
    lv_style_init(&style_btn_pressed);
    lv_style_set_color_filter_dsc(&style_btn_pressed, &color_filter);
    lv_style_set_color_filter_opa(&style_btn_pressed, LV_OPA_20);

    /*Create a red style. Change only some colors.*/
    lv_style_init(&style_btn_red);
    lv_style_set_bg_color(&style_btn_red, lv_palette_main(LV_PALETTE_RED));
    lv_style_set_bg_grad_color(&style_btn_red, lv_palette_lighten(LV_PALETTE_RED, 3));
}

/**
 * Create styles from scratch for buttons.
 */
void lv_screen_7(void)
{
    lv_obj_set_style_bg_opa(lv_scr_act(),LV_OPA_TRANSP, LV_PART_MAIN|LV_STATE_DEFAULT);
    
    /*Initialize the style*/
    style_init();

    /*Create a button and use the new styles*/
    lv_obj_t * btn = lv_btn_create(lv_scr_act());
    /* Remove the styles coming from the theme
     * Note that size and position are also stored as style properties
     * so lv_obj_remove_style_all will remove the set size and position too */
    lv_obj_remove_style_all(btn);
    lv_obj_set_pos(btn, 10, 10);
    lv_obj_set_size(btn, 120, 50);
    lv_obj_add_style(btn, &style_btn, 0);
    lv_obj_add_style(btn, &style_btn_pressed, LV_STATE_PRESSED);

    /*Add a label to the button*/
    lv_obj_t * label = lv_label_create(btn);
    lv_label_set_text(label, "Button");
    lv_obj_center(label);

    /*Create another button and use the red style too*/
    lv_obj_t * btn2 = lv_btn_create(lv_scr_act());
    lv_obj_remove_style_all(btn2);                      /*Remove the styles coming from the theme*/
    lv_obj_set_pos(btn2, 10, 80);
    lv_obj_set_size(btn2, 120, 50);
    lv_obj_add_style(btn2, &style_btn, 0);
    lv_obj_add_style(btn2, &style_btn_red, 0);
    lv_obj_add_style(btn2, &style_btn_pressed, LV_STATE_PRESSED);
    lv_obj_set_style_radius(btn2, LV_RADIUS_CIRCLE, 0); /*Add a local style too*/

    label = lv_label_create(btn2);
    lv_label_set_text(label, "Button 2");
    lv_obj_center(label);
}

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.
Normal

abnormal

@embeddedt @kisvegabor
Can give me some advice? Thank in advance

1 Like

Have you set LV_COLOR_SCREEN_TRANSP 1 in lv_conf.h?

Thank you for your answer
Yes, I set it up.
The display of 8.0,8.1,8.2 is normal, and 8.3.3 and master branches have black edges
This is my profile
lv_conf.h (25.1 KB)

1 Like

I think the problem is that in v8.3 you need to set disp_drv.screen_transp = 1 too. In the earlier versions it was set to the value of LV_COLOR_SCREEN_TRANSP automatically, but in v8.3 you need to set it manually for various reasons.

1 Like

@kisvegabor
I also encountered the same problem. Using LVGL8.3, I found that there were jagged edges and dark shadows. With LVGL7.11 and 8.0, the 8.2 UI and video mixer aliasing edges are normal. LV_ COLOR_ SCREEN_ TRANSP has been set to 1. Suspected to be a bug of LVGL, hope to get a reply and attention

The problem has been solved. Thank you very much :smiley:

@kisvegabor Thank you very much , I get it .

I have now upgraded to version 9.2 and have encountered video aliasing issues again. Can you give me some advice
The code block(s) should be formatted like:

static void display_register_init(void)
{
    disp = lv_display_create(LV_HOR_RES_MAX, LV_VER_RES_MAX);
    lv_display_is_double_buffered(disp);
    lv_display_set_render_mode(disp,LV_DISPLAY_RENDER_MODE_FULL);
    lv_display_set_buffers(disp, lvgl_inch8_buf1, lvgl_inch8_buf2, sizeof(lvgl_inch8_buf1),LV_DISPLAY_RENDER_MODE_PARTIAL);
    lv_display_set_resolution(disp,LV_HOR_RES_MAX, LV_VER_RES_MAX);
    lv_display_set_antialiasing(disp,true);
    lv_obj_set_style_bg_opa(lv_display_get_screen_active(disp),LV_OPA_TRANSP,LV_PART_MAIN);
    lv_obj_set_style_bg_opa(lv_display_get_layer_bottom(disp),LV_OPA_TRANSP,LV_PART_MAIN);  
    lv_obj_set_style_bg_opa(lv_display_get_screen_active(disp), LV_OPA_0, LV_PART_MAIN);
    lv_display_set_color_format(disp,LV_COLOR_FORMAT_ARGB8888);
    lv_display_set_flush_cb(disp, fbdev_flush);

    disp_1 = lv_display_create(LV_VER_RES_INCH7,LV_HOR_RES_INCH7);
    lv_display_set_buffers(disp_1, lvgl_inch7_buf1, lvgl_inch7_buf2, sizeof(lvgl_inch7_buf1),LV_DISPLAY_RENDER_MODE_PARTIAL);
    lv_obj_set_style_bg_opa(lv_display_get_screen_active(disp_1),LV_OPA_TRANSP,LV_PART_MAIN);
    lv_obj_set_style_bg_opa(lv_display_get_layer_bottom(disp_1),LV_OPA_TRANSP,LV_PART_MAIN);  
    lv_display_set_color_format(disp_1,LV_COLOR_FORMAT_ARGB8888);
    lv_display_set_flush_cb(disp_1, fbdev_flush_1);

    disp_2 = lv_display_create(LV_HOR_RES_INCH3, LV_VER_RES_INCH3);
    lv_display_set_buffers(disp_2, lvgl_inch3_buf1, lvgl_inch3_buf2, sizeof(lvgl_inch3_buf1),LV_DISPLAY_RENDER_MODE_PARTIAL);
    lv_obj_set_style_bg_opa(lv_display_get_screen_active(disp_2),LV_OPA_TRANSP,LV_PART_MAIN);
    lv_obj_set_style_bg_opa(lv_display_get_layer_bottom(disp_2),LV_OPA_TRANSP,LV_PART_MAIN);  
    lv_display_set_color_format(disp_2,LV_COLOR_FORMAT_ARGB8888);
    lv_display_set_flush_cb(disp_2, fbdev_flush_2);
    
}
    lv_obj_t * cur_scr_act;
    cur_scr_act = lv_disp_get_scr_act(disp);
    lv_obj_set_style_bg_opa(cur_scr_act,0,0);
    lv_obj_set_style_bg_color(cur_scr_act,lv_color_make(64,64,64),0);

    lv_obj_t * obj;
    obj= lv_obj_create(cur_scr_act);
    // lv_obj_set_style_bg_opa(obj,0,0);
    lv_obj_set_style_bg_color(obj, lv_palette_main(LV_PALETTE_RED), 0);
    lv_obj_set_style_radius(obj, LV_RADIUS_CIRCLE, 0);
    lv_obj_align(obj, LV_ALIGN_TOP_LEFT, 10, 0);

    lv_anim_t a;
    lv_anim_init(&a);
    lv_anim_set_var(&a, obj);
    lv_anim_set_values(&a, 100, 200);
    lv_anim_set_time(&a, 1000);
    // lv_anim_set_playback_delay(&a, 100);
    // lv_anim_set_playback_time(&a, 300);
    // lv_anim_set_repeat_delay(&a, 500);
    lv_anim_set_ready_cb(&a,label_ready_cb);
    // lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
    lv_anim_set_path_cb(&a, lv_anim_path_ease_in_out);

    lv_anim_set_exec_cb(&a, anim_size_cb);
    lv_anim_start(&a);
    lv_anim_set_exec_cb(&a, anim_x_cb);
    lv_anim_set_values(&a, 100, 1000);
    lv_anim_start(&a);

}

Screenshot and/or video

Thank in advance
@embeddedt @kisvegabor

Hi,

Please check out this Widget Basics — LVGL documentation

And use lvgl master ( a related bug fix was added recently)