Description
What MCU/Processor/Board and compiler are you using?
gcc 。 I use Gui-Guider软件(版本1.7.0-GA) to generate my ui code/
What LVGL version are you using?
lvgl版本是v8.3.10
What do you want to achieve?
how to support argb4444( 2 bytes per pixel) in lvgl?
What have you tried so far?
The basic situation of my code is： the macro define in lvgl_conf.h is below:
#define LV_COLOR_DEPTH 32
#define LV_COLOR_SCREEN_TRANSP 1
I has defined set_px_cb_ex function set to lv_disp_drv_t::set_px_cb,as the code show below,
but when I show the the frame data from flush_cb callback , some ui show error. example the label is transparent on the edge of the word. and some has opa image is show error.
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:
void set_px_cb_ex(struct _lv_disp_drv_t * disp_drv, uint8_t * buf, lv_coord_t buf_w,
lv_coord_t x, lv_coord_t y, lv_color_t color, lv_opa_t opa) {
LV_LOG_INFO("set_px_cb_ex buf=%p",(void *)buf);
// 计算在缓冲区中的索引
size_t index = (y * buf_w + x) * 2; // 每个像素 2 字节（ARGB4444）
// 从 lv_color_t 中提取 RGB 值
uint8_t r = (lv_color_to32(color) >> 16) & 0xFF; // 红色
uint8_t g = (lv_color_to32(color) >> 8) & 0xFF; // 绿色
uint8_t b = lv_color_to32(color) & 0xFF; // 蓝色
// 按比例缩放到 4 位值
uint8_t a = (opa * 15) / 255; // Alpha，按比例缩放至 4 位
uint8_t r4 = (r * 15) / 255; // 红色，按比例缩放至 4 位
uint8_t g4 = (g * 15) / 255; // 绿色，按比例缩放至 4 位
uint8_t b4 = (b * 15) / 255; // 蓝色，按比例缩放至 4 位
// 组合成 ARGB4444 格式
uint16_t pixel = (a << 12) | (r4 << 8) | (g4 << 4) | b4;
// 写入缓冲区
buf[index] = pixel & 0xFF; // 低字节
buf[index + 1] = (pixel >> 8) & 0xFF; // 高字节
}
/**********************
* STATIC FUNCTIONS
**********************/
/**
* Initialize the Hardware Abstraction Layer (HAL) for the Littlev graphics library
*/
static void hal_init(void)
{
/* Use the 'monitor' driver which creates window on PC's monitor to simulate a display*/
monitor_init();
/*Create a display buffer*/
static lv_disp_draw_buf_t disp_buf1;
static lv_color_t buf1_1[480 * 10];
LV_LOG_INFO("hal_init buf1_1=%p",(void *)buf1_1);
lv_disp_draw_buf_init(&disp_buf1, buf1_1, NULL, 480 * 10);
/*Create a display*/
static lv_disp_drv_t disp_drv;
lv_disp_drv_init(&disp_drv); /*Basic initialization*/
disp_drv.draw_buf = &disp_buf1;
disp_drv.flush_cb = monitor_flush;
disp_drv.set_px_cb = set_px_cb_ex;
disp_drv.hor_res = MONITOR_HOR_RES;
disp_drv.ver_res = MONITOR_VER_RES;
#if LV_COLOR_SCREEN_TRANSP == 1
disp_drv.screen_transp = 1;
#endif
lv_disp_drv_register(&disp_drv);
/* Add the mouse as input device
* Use the 'mouse' driver which reads the PC's mouse*/
mouse_init();
static lv_indev_drv_t indev_drv;
lv_indev_drv_init(&indev_drv); /*Basic initialization*/
indev_drv.type = LV_INDEV_TYPE_POINTER;
indev_drv.read_cb = mouse_read; /*This function will be called periodically (by the library) to get the mouse position and state*/
lv_indev_t * mouse_indev = lv_indev_drv_register(&indev_drv);
/* Tick init.
* You have to call 'lv_tick_inc()' in periodically to inform LittelvGL about how much time were elapsed
* Create an SDL thread to do this*/
SDL_CreateThread(tick_thread, "tick", NULL);
}
void setup_scr_screen(lv_ui *ui)
{
//Write codes screen
ui->screen = lv_obj_create(NULL);
lv_obj_set_size(ui->screen, 480, 320);
lv_obj_set_scrollbar_mode(ui->screen, LV_SCROLLBAR_MODE_OFF);
//Write style for screen, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
lv_obj_set_style_bg_opa(ui->screen, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//Write codes screen_cont_1
ui->screen_cont_1 = lv_obj_create(ui->screen);
lv_obj_set_pos(ui->screen_cont_1, 0, 0);
lv_obj_set_size(ui->screen_cont_1, 480, 320);
lv_obj_set_scrollbar_mode(ui->screen_cont_1, LV_SCROLLBAR_MODE_OFF);
//Write style for screen_cont_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
lv_obj_set_style_border_width(ui->screen_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_radius(ui->screen_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(ui->screen_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_top(ui->screen_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_bottom(ui->screen_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_left(ui->screen_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_right(ui->screen_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_img_src(ui->screen_cont_1, &_bg_480x320, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_img_opa(ui->screen_cont_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_shadow_width(ui->screen_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//Write codes screen_label_1
ui->screen_label_1 = lv_label_create(ui->screen_cont_1);
lv_label_set_text(ui->screen_label_1, "hello");
lv_label_set_long_mode(ui->screen_label_1, LV_LABEL_LONG_WRAP);
lv_obj_set_pos(ui->screen_label_1, 182, 139);
lv_obj_set_size(ui->screen_label_1, 138, 55);
//Write style for screen_label_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
lv_obj_set_style_border_width(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_radius(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_text_color(ui->screen_label_1, lv_color_hex(0xFFFFFF), LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_text_font(ui->screen_label_1, &lv_font_montserratMedium_32, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_text_opa(ui->screen_label_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_text_letter_space(ui->screen_label_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_text_line_space(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_text_align(ui->screen_label_1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_top(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_right(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_bottom(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_left(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_shadow_width(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//The custom code of screen.
//Update current screen layout.
lv_obj_update_layout(ui->screen);
}
Screenshot and/or video
If possible, add screenshots and/or videos about the current state.
Red indicates that the area is completely transparent