I have been researching a specific theme related to blur in LVGL, and I came across some outdated information about using it on a canvas. I found a post on the LVGL forum where a user seemed to have achieved the result I was looking for, but unfortunately, I couldn’t comprehend the code provided.
Here is the link to the post: How to implement this feature in LVGL with background-filter: blur(60px) in CSS - #19 by kisvegabor
In essence, what I aim to accomplish is the creation of a rectangular element that blurs everything beneath it, functioning as a layer.
Maybe some other lib compatible with LVGL if someone knows one
If you use disp_drv->full_refresh=1 you can add a LV_EVENT_DRAW_MAIN_END event to the widget you would like to blur and just do the blurring in the draw buffer.
This is something that we should like to better support in LVGL v9.
So using a lvgl basic obj and then blurring it after its created using a DRAW MAIN event but using a LVGL blur or something else?
LVGL doesn’t have a modular blur algorithm that can be just called. However you can find a lot of example implementations in Google.
Can you cite an example link?
Hi @Yuri_Alves_Bordin ,
Quite along time ago I had a long discussion and ported a bit of open source code to LVGL for a stacked blur algorithm, the ‘C’ file attached to this post may be useful. The whole thread is about blur and may be useful to you. I can’t remember much about this now because I am old and have a terrible memory but there is a lot of information within this discussion.
I hope it helps…
Kind Regards,
Pete
Greetings, @pete-pjb! I wanted to let you know that I’ve already gone through the discussion on blur, and it provided some valuable information. I also attempted to use the blur.c file you provided, but unfortunately, I couldn’t get it to work. It’s possible that I’ve misconfigured it, or perhaps the way LVGL handles certain variables has changed, and since I lack experience in the LVGL area, I’m facing some difficulties.
Hi @Yuri_Alves_Bordin ,
Here is a rough and ready blurring method which runs in the SDL simulator, maybe you can hone this to your needs:
void blur_obj( lv_obj_t *obj, lv_obj_t *canvas, uint16_t blur_radius ) {
lv_draw_img_dsc_t img_dsc;
lv_draw_img_dsc_init(&img_dsc);
lv_img_dsc_t *snapshot = lv_snapshot_take(obj, LV_IMG_CF_TRUE_COLOR_ALPHA);
lv_coord_t coord_ext_size = _lv_obj_get_ext_draw_size(obj);
lv_canvas_draw_img(canvas, obj->coords.x1 - coord_ext_size, obj->coords.y1 - coord_ext_size, snapshot, &img_dsc);
lv_area_t area = { obj->coords.x1 - coord_ext_size, obj->coords.y1 - coord_ext_size, obj->coords.x2 + coord_ext_size, obj->coords.y2 + coord_ext_size};
lv_canvas_blur_hor(canvas, &area, blur_radius);
lv_canvas_blur_ver(canvas, &area, blur_radius);
}
void test( lv_obj_t *parent ) {
lv_obj_t *ta;
ta = lv_textarea_create( parent );
lv_textarea_set_text( ta, "Some Test in a box!");
lv_obj_set_size(ta, 200, 150);
lv_obj_align(ta, LV_ALIGN_TOP_LEFT, 30, 30);
lv_obj_t *canvas = lv_canvas_create(parent);
static lv_color_t canvas_buf[LV_IMG_BUF_SIZE_TRUE_COLOR_ALPHA(SDL_HOR_RES, SDL_VER_RES)];
lv_canvas_set_buffer(canvas, canvas_buf, SDL_HOR_RES, SDL_VER_RES, LV_IMG_CF_TRUE_COLOR_ALPHA);
blur_obj( ta, canvas, 10 );
}
test(lv_scr_act());
Kind Regards,
Pete
Hello @pete-pjb thanks for the example i will be experimenting today in a TFT simulator and then in a actual LCD display with ESP32-S3
thats the result in a simulator thanks @pete-pjb
Currently, I’m testing an ESP32-S3 with an 800x480 LCD screen, which supports 24-bit color. However, I encountered an issue where using the blur feature causes the system to crash. I suspect that this problem might be due to the absence of alpha color support in the display.
Hi @Yuri_Alves_Bordin ,
The display doesn’t need the alpha byte, so you would normally just ignore that byte.( I mean it does need to be sent to the display, it is required by LVGL to correctly mix the rendering.)
Just out of interest which board are you using?
Kind Regards,
Pete
I have made a custom development board with a Parallel display similar to this one
Also i have made some more testings and i think the buffer might be causing a overflow
Hi @Yuri_Alves_Bordin ,
Yes that may be correct, I was concerned about the canvas approach because of the memory requirements but it is probably the easiest method if it can be made to work.
So the canvas buffer will be quite large probably 800 x 480 * sizeof( lv_color_t) I think on the ESP32 implementations lv_color_t is 16-bits so we are talking 768000 bytes which is bigger than the internal RAM in an ESP32 do you have Octal PSRAM ? If so can you try placing the buffer in there?
I am just learning about these chips so if I am talking nonsense please excuse me!
I have on my desk, one of these boards which I am currently just getting up and running with LVGL so maybe there will be some similarities between our configurations.
Kind Regards,
Pete
Oh you have the same board, That board uses exacly the same ESP32-S3 that my custom Board uses so testings will fit perfectly
i saw that buffer and i thought the same as you way too big but actualy i am already using the PSRAM of my board but i dont think i need that much of a buffer since i want to blur like just 30% of the screen
Hi @Yuri_Alves_Bordin ,
I guess you could just make the canvas the size of the area you want to cover, that should work…
Did you manage to work out which driver chip is in the display for this device? I am trying to help another forum member with some nasty glitching problems and it would be really useful to know for sure what driver chip we are dealing with…
Kind Regards,
Pete
So about the device depends on what IDE he is using but if he is using PlatformIO or Arduino based IDE he can use this code i made
in case he is using ESP-IDF he can use the ESP-IDF LCD Driver lib with the same display specs that i used in this PlatformIO examples
Using a canvas buf with the size i want to blur instead of the screen size still not enough maybe is there a way of having blur using less buffering?
my application would be something like this
