How to implement this feature in LVGL with background-filter: blur(60px) in CSS

It’s trade off, bu you are free to use you own functions to blur the canvas.

@kisvegabor
I see what you mean, I would like to know what materials did you refer to in implementing lv_canvas_blur_hor and lv_canvas_blur_ver? What is its specific principle? I would like to know these, this will help me to port the algorithm of fast Gaussian blur

Hi @jianjunxia,

Can you please post your background image file so I may experiment with it?

Cheers,

Pete

demo

@pete-pjb ok thanks!

@jianjunxia , thanks…

Hi @jianjunxia,

I have been looking at this today. I have done some research online as I am not particularly familiar with the subject. Having worked through the implementation which already exists I have a better understanding of what is required now. I will continue to look at it tomorrow with a view of improving the current horizontal & vertical blur functions.

I will let you know when I have something useful for you. Sorry I am being slow but I have many things going on in parallel…:slight_smile:

Kind Regards,

Pete

Because the background is fixed and the buttons move over it, therefore, needing a dynamic blur on the buttons?

Here’s an image to make my idea a bit more clear. The biggest benefit is the absence of calculating the Gaussian blur, as it’s already baked into the background.

hi @pete-pjb ,
Thank you for your help, looking forward to bringing some good news from you, today I will also continue to study how to achieve better blur in existing functions

Hi, @KLVN

You can browse the whole post to get a better understanding of my purpose, I don’t need to do motion blur on buttons, my objects generally don’t change much, I just want to blur a certain area to achieve a Gaussian blur effect, currently LVGL The blur effect doesn’t look good

Yeah I know, that’s why I gave the idea to blur a part of the background itself with Gimp or Photoshop (not LVGL). Then you don’t have to use LVGL for the blur effect. I think I already got pretty close to what you are trying to achieve and this was done in like 3 minutes.

Edit: Or you take this blurred part of the background image and use it as a background image for the button. Then you can also get some visual feedback when clicking the button.

Hi @jianjunxia,

I am currently working on an implementation of the ‘stacked blur’ algorithm for LVGL I expect I might be up to another couple of days yet before I have something I can let you have.

Just so you know I haven’t forgotten about it.

Kind Regards,

Pete

Hi @pete-pjb Thank you so much, I’ve been looking forward to it, thank you so much for your help

Hi, @pete-pjb @kisvegabor
I’ve implemented it approximately, hope you have a better way!


@pete-pjb Hi,Do you have a better way?
Although I have achieved the blur effect of the rules, I don’t know how to deal with the rounded corners

Hi @jianjunxia ,

I’m sorry I have been away…

Here is an implementation of the stacked blur algorithm for use with the canvas object in LVGL. This should be less processor intensive as it only needs one iteration.

blur.c (10.9 KB)

Please feel free to use this if it is helpful I have included the required third party credits at the top of the file. It should be possible to add the contents of this file to the lv_canvas.c file.

Unfortunately I don’t know how to achieve the rounded corner masking, I can probably work it out but I don’t have much time at the moment to do so. Maybe @kisvegabor can provide a bit of input and some pointers of how best to do the masking using the existing library routines please?

I hope that helps.

Kind Regards,

Pete

1 Like

@pete-pjb

Thanks a lot for your approach, I’ll test it and compare it to my own implementation. Choose a better way.
Also, I already have an idea on how to mask the rounded corners. it’s actually a math problem

Hi @jianjunxia,

No problem… you’re welcome. I forgot to mention the stacked blur algorithm also has no ‘division’ in the maths, this should also reduce the number of CPU cycles required as well.

Glad you have an idea about the rounded corners, I asked @kisvegabor to comment as there is probably a function which already exists to do the maths, but if you have it covered that’s great!

Kind Regards,

Pete