Android Question Apply Blur effect to a panel

Mike1970

Well-Known Member
Licensed User
Longtime User
Hi, I don't know if this is a possible thing.
I would like to put a Background image, and on the top of it a transparent panel, that has a blur effect on it, so everything behind it's blurred.

Something like this
blurex.jpg
 

William Lancee

Well-Known Member
Licensed User
Longtime User
Based on the Erel's very educational example (there are all kinds of tricks I didn't know about):

https://www.b4x.com/android/forum/threads/b4x-bitmapcreator-effects.93608/

1. Have two copies of the image
2. Blur the second one
3. Create mask image with shape to blur through - make color of shape transparent
4. Draw original image outside mask (see how Erel does it or use his code)
5. Draw blurred image inside mask

P.S. I don't know why the spelling checker of this reply doesn't like "Erel"
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
3. Create mask image with shape to blur through - make color of shape transparent
4. Draw original image outside mask (see how Erel does it or use his code)
5. Draw blurred image inside mask
I still have to understand these and also masks (after about 40 year of programming... only 😅)

P.S. I don't know why the spelling checker of this reply doesn't like "Erel"
I don't know what you mean here but, of course, even Xenforo does not like Erel, as all of us 😅 (I really like lying ;))
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
Based on the Erel's very educational example (there are all kinds of tricks I didn't know about):

https://www.b4x.com/android/forum/threads/b4x-bitmapcreator-effects.93608/

1. Have two copies of the image
2. Blur the second one
3. Create mask image with shape to blur through - make color of shape transparent
4. Draw original image outside mask (see how Erel does it or use his code)
5. Draw blurred image inside mask

P.S. I don't know why the spelling checker of this reply doesn't like "Erel"
I forgot... this "thing" (what was asked) should work swiping the overlapping panel.
 
Upvote 0

William Lancee

Well-Known Member
Licensed User
Longtime User
@LucaMs

As the panel is swiped, recreate the rectangular mask (larger each time based on gesture coordinates) and redraw the masked image.
 
Last edited:
Upvote 0

William Lancee

Well-Known Member
Licensed User
Longtime User
@LucaMs

I got your name wrong too!

What I am thinking is this:

When the user touches the panel, a brush shape like a circle appears with the contents blurred.
As the user moves the finger the shape follows it.
When the finger is lifted the shape disappears.
 
Upvote 0

Sagenut

Expert
Licensed User
Longtime User
@LucasMs

As the panel is swiped, recreate the rectangular mask (larger each time based on gesture coordinates) and redraw the masked image.
The difficult task, for me, is to be able to follow the movement of the panel.
If it was needed to blur the new area just after the movement then the code is already done.
It will be really interesting to see solution to this.
I think that the solution will come from Reflection of JavaObject.
 
Upvote 0

Sagenut

Expert
Licensed User
Longtime User
@LucaMs

I got your name wrong too!

What I am thinking is this:

When the user touches the panel, a brush shape like a circle appears with the contents blurred.
As the user moves the finger the shape follows it.
When the finger is lifted the shape disappears.
Moving the panel with finger could maybe apply with my solution/code.
But if the panel is moved from code.....here come my difficulties......following the movement smoothly.
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
@LucaMs

I got your name wrong too!

What I am thinking is this:

When the user touches the panel, a brush shape like a circle appears with the contents blurred.
As the user moves the finger the shape follows it.
When the finger is lifted the shape disappears.
Have to go, now, but when I come back... I will try to understand this post and also try.

If in the meantime you try... it is better, however :cool:
 
Upvote 0

sorex

Expert
Licensed User
Longtime User
I don't think you need to constantly redraw.

Just snapshot > blur > reposition should be enough as panels are kind of masked displays already.

when overlay panel is at 0,0 the blurred image is at 0,0 aswell.

if you move the overlay to 10,10 you move the inner blur image to -10,-10 and it will be at the same visual position inside the mask as before.
 
Upvote 0

Sagenut

Expert
Licensed User
Longtime User
I don't think you need to constantly redraw.

Just snapshot > blur > reposition should be enough as panels are kind of masked displays already.

when overlay panel is at 0,0 the blurred image is at 0,0 aswell.

if you move the overlay to 10,10 you move the inner blur image to -10,-10 and it will be at the same visual position inside the mask as before.
Moving from A to B in one shot work without problems.
Trying with SetLayoutAnimated it looks like the panel get immediately the new coordinates, and the movement is an independent animation.
But this is a my limitation.
I am pretty sure someone have the solution in the pocket. :)
 
Upvote 0

sorex

Expert
Licensed User
Longtime User
you need to create your own tweening routine then you have control over anything you want ;)
 
Upvote 0
Top