What do you want to achieve?
Drawing a PNG with transparency in it overtop another PNG that I drew.
What have you tried so far?
My display (256 x 64, 4bpp) is set to LV_COLOR_FORMAT_L8. I use a 8-bit 16 KB array for its buffer (256x64x8bpp/8) for its buffer, and then when I flush the display, I copy/translate it over to a parallel 8 KB array (256x64x4bpp/8) and send that to my actual OLED.
I have a single screen created, on that screen I can successfully draw a background image and have it show up on the OLED. The image is created using the python converter, with a format of --cf L8. This image was 256x64 and came from a PNG file that had no transparency (i.e. fills the entire OLED).
Now I want to put a smaller 20x20 PNG that does have transparency in certain areas over the original image. If I:
- convert that new PNG with
--cf L8, then when I draw it over the background image, no transparency is used (the transparent sections in the smaller PNG show up as black over top) - convert that new PNG with
--cf AL88, then when I draw it over the background image, nothing appears over top
Code to reproduce
Code snippet:
_LVGL_oDisplay = lv_display_create(CI_LVGL_CANVASWIDTH, CI_LVGL_CANVASHEIGHT);
lv_display_set_buffers(
_LVGL_oDisplay,
_LVGL_axDisplayBuffer,
NULL,
CI_LVGL_CANVASBYTESIZE_8BPP,
LV_DISPLAY_RENDER_MODE_DIRECT
);
lv_display_set_color_format(_LVGL_oDisplay, LV_COLOR_FORMAT_L8);
_SCRN_oScreen = lv_obj_create(NULL);
lv_obj_set_style_bg_color(_SCRN_oScreen , lv_color_black(), LV_PART_MAIN);
lv_obj_set_scrollbar_mode(_SCRN_oScreen , LV_SCROLLBAR_MODE_OFF);
_SCRN_oBackground = lv_image_create(_SCRN_oScreen);
lv_image_set_src(_SCRN_oBackground, &imgLogo);
lv_obj_set_align(_SCRN_oBackground, LV_ALIGN_CENTER);
_SCRN_oIcon = lv_image_create(_SCRN_oScreen);
lv_image_set_src(_SCRN_oIcon, &imgTransparencyTest);
lv_obj_set_align(_SCRN_oIcon, LV_ALIGN_CENTER);
Small 20x20 image C code from convertor at L8:
#if defined(LV_LVGL_H_INCLUDE_SIMPLE)
#include "lvgl.h"
#elif defined(LV_LVGL_H_INCLUDE_SYSTEM)
#include <lvgl.h>
#elif defined(LV_BUILD_TEST)
#include "../lvgl.h"
#else
#include "lvgl/lvgl.h"
#endif
#ifndef LV_ATTRIBUTE_MEM_ALIGN
#define LV_ATTRIBUTE_MEM_ALIGN
#endif
#ifndef LV_ATTRIBUTE_IMGTRANSPARENCYTEST
#define LV_ATTRIBUTE_IMGTRANSPARENCYTEST
#endif
static const
LV_ATTRIBUTE_MEM_ALIGN LV_ATTRIBUTE_LARGE_CONST LV_ATTRIBUTE_IMGTRANSPARENCYTEST
uint8_t imgTransparencyTest_map[] = {
//data here, 1600 B (40x40x1B)
};
const lv_image_dsc_t imgTransparencyTest = {
.header = {
.magic = LV_IMAGE_HEADER_MAGIC,
.cf = LV_COLOR_FORMAT_L8,
.flags = 0,
.w = 40,
.h = 40,
.stride = 40,
.reserved_2 = 0,
},
.data_size = sizeof(imgTransparencyTest_map),
.data = imgTransparencyTest_map,
.reserved = NULL,
};
Small 20x20 image C code, for convertor at AL88:
#if defined(LV_LVGL_H_INCLUDE_SIMPLE)
#include "lvgl.h"
#elif defined(LV_LVGL_H_INCLUDE_SYSTEM)
#include <lvgl.h>
#elif defined(LV_BUILD_TEST)
#include "../lvgl.h"
#else
#include "lvgl/lvgl.h"
#endif
#ifndef LV_ATTRIBUTE_MEM_ALIGN
#define LV_ATTRIBUTE_MEM_ALIGN
#endif
#ifndef LV_ATTRIBUTE_IMGTRANSPARENCYTEST
#define LV_ATTRIBUTE_IMGTRANSPARENCYTEST
#endif
static const
LV_ATTRIBUTE_MEM_ALIGN LV_ATTRIBUTE_LARGE_CONST LV_ATTRIBUTE_IMGTRANSPARENCYTEST
uint8_t imgTransparencyTest_map[] = {
//data here, 3200 B (40 x 40 x 2B)
};
const lv_image_dsc_t imgTransparencyTest = {
.header = {
.magic = LV_IMAGE_HEADER_MAGIC,
.cf = LV_COLOR_FORMAT_AL88,
.flags = 0,
.w = 40,
.h = 40,
.stride = 80,
.reserved_2 = 0,
},
.data_size = sizeof(imgTransparencyTest_map),
.data = imgTransparencyTest_map,
.reserved = NULL,
};
Screenshot and/or video
Using the L8 converted image:
Using the AL88 converted image:
Environment
- MCU/MPU/Board: custom hardware platform (STM32H7 based)
- LVGL version: 9.5.0