The alpha channel does not work, at lvgl8.4, RGBA3328

YunAnJun · October 22, 2024, 10:33am

Description

We are upgrading the software from lvgl7.11 to lvgl8.4, but the image in RGBA3328 format as the mid resource of imgbtn has edge jagged that lvgl7.11 does not have.

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

mcu:stm32l451
complier: MDK v5 Complier

What LVGL version are you using?

LVGL8.4

What do you want to achieve?

Use RGBA3328 as the mid resource for imgbtn
The file assets are converted through LVGL Image Converter, which is in LV_IMG_CF_TRUE_COLOR_ALPHA format and has a color bit depth of 8 bits

What have you tried so far?

I experimented with RGB332, RGBA3328, RGB565, RGBA5658 image display. Here are the results:
RGB332: Aliased
RGBA3328: Aliased
RGB565: Aliased
RGBA5658: No aliasing
I generated a new RGB332 array by mixing the RGBA3328 file with the background color (0,0,0) via a python script, which shows the picture without aliasing.

Code to reproduce

static void *app_create(void *content)
{
    ams_activity_t *activity = (ams_activity_t *)content;

    lv_obj_clean(lv_scr_act());  // 清除当前屏幕的所有对象
    lv_obj_t *  screen2 = activity->ui = lv_obj_create(NULL);
    lv_scr_load(screen2);  // 加载新屏幕
    lv_obj_add_event_cb(screen2, app_gesture_handle, LV_EVENT_GESTURE, NULL);
    lv_obj_set_style_bg_color(screen2, lv_color_make(0, 0, 255), 0);  // 设置背景颜色为蓝色

    lv_obj_t * imgbtn = lv_imgbtn_create(screen2); // 创建图片按钮
    lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_RELEASED, NULL, &output, NULL); // 设置释放状态的图片
    lv_obj_set_size(imgbtn, 114, 114);  // 手动设置按钮大小为100x50
    lv_obj_set_pos(imgbtn, 244, 49);
    printf("the output format is %d", ((lv_imgbtn_t *)imgbtn)->act_cf );

    imgbtn = lv_imgbtn_create(screen2); // 创建图片按钮
    lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_RELEASED, NULL, &Step_count_icon, NULL); // 设置释放状态的图片
    lv_obj_set_size(imgbtn, 114, 114);  // 手动设置按钮大小为100x50
    lv_obj_set_pos(imgbtn, 308, 172);
    printf("the step_count_icon format is %d", ((lv_imgbtn_t *)imgbtn)->act_cf );

    imgbtn = lv_imgbtn_create(screen2); // 创建图片按钮
    lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_RELEASED, NULL, &sleep_monitoring_icon, NULL); // 设置释放状态的图片
    lv_obj_set_size(imgbtn, 114, 114);  // 手动设置按钮大小为100x50
    lv_obj_set_pos(imgbtn, 98, 295);

    imgbtn = lv_imgbtn_create(screen2); // 创建图片按钮
    lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_RELEASED, NULL, &sedentary_reminder_icon, NULL); // 设置释放状态的图片
    lv_obj_set_size(imgbtn, 114, 114);  // 手动设置按钮大小为100x50
    lv_obj_set_pos(imgbtn, 244, 295);

    imgbtn = lv_imgbtn_create(screen2); // 创建图片按钮
    lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_RELEASED, NULL, &personnel_information_icon, NULL); // 设置释放状态的图片
    lv_obj_set_size(imgbtn, 114, 114);  // 手动设置按钮大小为100x50
    lv_obj_set_pos(imgbtn, 98, 49);

    imgbtn = lv_imgbtn_create(screen2); // 创建图片按钮
    lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_RELEASED, NULL, &date_icon, NULL); // 设置释放状态的图片
    lv_obj_set_size(imgbtn, 114, 114);  // 手动设置按钮大小为100x50
    lv_obj_set_pos(imgbtn, 32, 172);
    // lv_obj_t * label = lv_label_create(screen2); // 在新屏幕上添加标签
    // lv_label_set_text(label, "New Screen");
    // lv_obj_center(label);
    // lv_obj_t * label = lv_label_create(screen2);   // 创建标签并将其添加到当前屏幕
    // lv_label_set_text(label, "this is a test");         // 设置标签的文本
    // lv_obj_set_pos(label, 212, 350);
    return activity->ui;
}