Android Question Apply Blur effect to a panel

M

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
 
Sort by date Sort by votes
Sagenut

Sagenut

Expert
Licensed User
Longtime User
I tried to create my own MoveView sub......but believe me.....You don't want to see the result. ?
I will try to work harder.
 
Upvote 0
S

sorex

Expert
Licensed User
Longtime User
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.
Click to expand...

it's not 100% clear what he wants with the explanation above.

is it a white finger following shape and everything around of it blurred?

or is the circle unblurred content and everything around it blurred?
 
Upvote 0
William Lancee

William Lancee

Well-Known Member
Licensed User
Longtime User
A blurry circle beneath your finger (for example to show that you are touching the screen - the old LCD screen pressure effect)
It is clear now that this is not what is being asked for. ?
 
Upvote 0
M

Mike1970

Well-Known Member
Licensed User
Longtime User
LucaMs said:
Here, maybe I found a way to explain this well (not to solve it, though).

Imagine that the panel above is actually a glass plate and that this has defects such that what is below it appears deformed (blurred)
Click to expand...
Very intuitive mental image
 
Upvote 0
LucaMs

LucaMs

Expert
Licensed User
Longtime User
LucaMs said:
Here, maybe I found a way to explain this well (not to solve it, though).

Imagine that the panel above is actually a glass plate and that this has defects such that what is below it appears deformed (blurred)
Click to expand...
Mike1970 said:
Very intuitive mental image
Click to expand...
... and it might also be the solution!

Create better texturecolormodulo.png (using a graphic tool; Erel would create it at runtime, using BitmapCreator :)) and I think you can get what you need.
 

Attachments

  • Fake blur.zip
    65.2 KB · Views: 280
Last edited:
Upvote 0
S

sorex

Expert
Licensed User
Longtime User
this works if you work with rectangular boxes as in that animated gif.

for the rounded one I bump onto some limitations which makes the fast redrawing-less method not work right.
a rounded panel doesn't mask what's outside the circle so you always end up with a square blurred image.

B4X: 
Sub Globals
    Dim xui As XUI
    Dim pBg As Panel
    Dim xpOverlay As B4XView
    Dim xpBorder As B4XView
    Dim ivBlur As ImageView
    Dim xpBlur As B4XView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    pBg.Initialize("bg")
    Activity.Color=0xff000000
    Activity.AddView(pBg,0,0,100%x,100%y)
        Dim c As Int
        For x=0 To 20-1
        Dim l As Label
        l.Initialize("")
        c=Rnd(0xff222222,0xffffffff)
        l.Color=c  
        l.Text="text"& x
        pBg.AddView(l,Rnd(0,80%x),Rnd(0,90%y),20%x,10%x)
    Next

    xpOverlay=xui.CreatePanel("")
    xpOverlay.SetColorAndBorder(0,1%x,0xffffffff,0)
    xpOverlay.Visible=False
    Activity.AddView(xpOverlay,0,0,100%x,10%y)

    xpBlur=pBg

    ivBlur.Initialize("")
    ivBlur.Bitmap=Blur(xpBlur.Snapshot)
    xpOverlay.AddView(ivBlur,0,0,100%x,100%y)

    xpBorder=xui.CreatePanel("")
    xpBorder.SetColorAndBorder(Colors.Transparent,1%x,0xffbbbbbb,0)
    xpOverlay.AddView(xpBorder,0,0,xpOverlay.Width,xpOverlay.Height)

    Dim l As Label
    l.Initialize("")
    l.Text="test string"
    l.Gravity=Gravity.CENTER
    l.TextColor=0xffffffff
    xpOverlay.AddView(l,0,0,xpOverlay.Width,xpOverlay.Height)
End Sub

Sub bg_Touch (Action As Int, X As Float, Y As Float)
    Select Action
        Case pBg.ACTION_DOWN
            xpOverlay.Visible=True
            reposition(Y)
        Case pBg.ACTION_MOVE
            reposition(Y)
        Case pBg.ACTION_UP
            xpOverlay.Visible=False
    End Select
End Sub

Sub reposition(y As Int)
    xpOverlay.Top=y-xpOverlay.Height/2
    ivBlur.Top=-xpOverlay.top  
End Sub


Private Sub Blur (bmp As B4XBitmap) As B4XBitmap
    Dim n As Long = DateTime.Now
    Dim bc As BitmapCreator
    Dim ReduceScale As Int = 1
    bc.Initialize(bmp.Width / ReduceScale / bmp.Scale, bmp.Height / ReduceScale / bmp.Scale)
    bc.CopyPixelsFromBitmap(bmp)
    Dim count As Int = 3
    Dim clrs(3) As ARGBColor
    Dim temp As ARGBColor
    Dim m As Int
    For steps = 1 To count
        For y = 0 To bc.mHeight - 1
            For x = 0 To 2
                bc.GetARGB(x, y, clrs(x))
            Next
            SetAvg(bc, 1, y, clrs, temp)
            m = 0
            For x = 2 To bc.mWidth - 2
                bc.GetARGB(x + 1, y, clrs(m))
                m = (m + 1) Mod clrs.Length
                SetAvg(bc, x, y, clrs, temp)
            Next
        Next
        For x = 0 To bc.mWidth - 1
            For y = 0 To 2
                bc.GetARGB(x, y, clrs(y))
            Next
            SetAvg(bc, x, 1, clrs, temp)
            m = 0
            For y = 2 To bc.mHeight - 2
                bc.GetARGB(x, y + 1, clrs(m))
                m = (m + 1) Mod clrs.Length
                SetAvg(bc, x, y, clrs, temp)
            Next
        Next
    Next
    Return bc.Bitmap
End Sub

Private Sub SetAvg(bc As BitmapCreator, x As Int, y As Int, clrs() As ARGBColor, temp As ARGBColor)
    temp.Initialize
    For Each c As ARGBColor In clrs
        temp.r = temp.r + c.r
        temp.g = temp.g + c.g
        temp.b = temp.b + c.b
    Next
    temp.a = 255
    temp.r = temp.r / clrs.Length
    temp.g = temp.g / clrs.Length
    temp.b = temp.b / clrs.Length
    bc.SetARGB(x, y, temp)
End Sub

I don't know how to record it but here's a 2 frame test image

blur.gif
 
Last edited:
Upvote 0
S

sorex

Expert
Licensed User
Longtime User
yes, that's what I explained in my first post. just take a realtime snapshot of the 'scene', blur it and move it around inside the moving panel.

if he want to move around a plain rectangular panel into all directions the above works fine. he just needs to add the positioning for the .left and reduce the width of the panel
 
Upvote 0
M

Mike1970

Well-Known Member
Licensed User
Longtime User
sorex said:
this works if you work with rectangular boxes as in that animated gif.

for the rounded one I bump onto some limitations which makes the fast redrawing-less method not work right.
a rounded panel doesn't mask what's outside the circle so you always end up with a square blurred image.

B4X: 
Sub Globals
    Dim xui As XUI
    Dim pBg As Panel
    Dim xpOverlay As B4XView
    Dim xpBorder As B4XView
    Dim ivBlur As ImageView
    Dim xpBlur As B4XView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    pBg.Initialize("bg")
    Activity.Color=0xff000000
    Activity.AddView(pBg,0,0,100%x,100%y)
        Dim c As Int
        For x=0 To 20-1
        Dim l As Label
        l.Initialize("")
        c=Rnd(0xff222222,0xffffffff)
        l.Color=c 
        l.Text="text"& x
        pBg.AddView(l,Rnd(0,80%x),Rnd(0,90%y),20%x,10%x)
    Next

    xpOverlay=xui.CreatePanel("")
    xpOverlay.SetColorAndBorder(0,1%x,0xffffffff,0)
    xpOverlay.Visible=False
    Activity.AddView(xpOverlay,0,0,100%x,10%y)

    xpBlur=pBg

    ivBlur.Initialize("")
    ivBlur.Bitmap=Blur(xpBlur.Snapshot)
    xpOverlay.AddView(ivBlur,0,0,100%x,100%y)

    xpBorder=xui.CreatePanel("")
    xpBorder.SetColorAndBorder(Colors.Transparent,1%x,0xffbbbbbb,0)
    xpOverlay.AddView(xpBorder,0,0,xpOverlay.Width,xpOverlay.Height)

    Dim l As Label
    l.Initialize("")
    l.Text="test string"
    l.Gravity=Gravity.CENTER
    l.TextColor=0xffffffff
    xpOverlay.AddView(l,0,0,xpOverlay.Width,xpOverlay.Height)
End Sub

Sub bg_Touch (Action As Int, X As Float, Y As Float)
    Select Action
        Case pBg.ACTION_DOWN
            xpOverlay.Visible=True
            reposition(Y)
        Case pBg.ACTION_MOVE
            reposition(Y)
        Case pBg.ACTION_UP
            xpOverlay.Visible=False
    End Select
End Sub

Sub reposition(y As Int)
    xpOverlay.Top=y-xpOverlay.Height/2
    ivBlur.Top=-xpOverlay.top 
End Sub


Private Sub Blur (bmp As B4XBitmap) As B4XBitmap
    Dim n As Long = DateTime.Now
    Dim bc As BitmapCreator
    Dim ReduceScale As Int = 1
    bc.Initialize(bmp.Width / ReduceScale / bmp.Scale, bmp.Height / ReduceScale / bmp.Scale)
    bc.CopyPixelsFromBitmap(bmp)
    Dim count As Int = 3
    Dim clrs(3) As ARGBColor
    Dim temp As ARGBColor
    Dim m As Int
    For steps = 1 To count
        For y = 0 To bc.mHeight - 1
            For x = 0 To 2
                bc.GetARGB(x, y, clrs(x))
            Next
            SetAvg(bc, 1, y, clrs, temp)
            m = 0
            For x = 2 To bc.mWidth - 2
                bc.GetARGB(x + 1, y, clrs(m))
                m = (m + 1) Mod clrs.Length
                SetAvg(bc, x, y, clrs, temp)
            Next
        Next
        For x = 0 To bc.mWidth - 1
            For y = 0 To 2
                bc.GetARGB(x, y, clrs(y))
            Next
            SetAvg(bc, x, 1, clrs, temp)
            m = 0
            For y = 2 To bc.mHeight - 2
                bc.GetARGB(x, y + 1, clrs(m))
                m = (m + 1) Mod clrs.Length
                SetAvg(bc, x, y, clrs, temp)
            Next
        Next
    Next
    Return bc.Bitmap
End Sub

Private Sub SetAvg(bc As BitmapCreator, x As Int, y As Int, clrs() As ARGBColor, temp As ARGBColor)
    temp.Initialize
    For Each c As ARGBColor In clrs
        temp.r = temp.r + c.r
        temp.g = temp.g + c.g
        temp.b = temp.b + c.b
    Next
    temp.a = 255
    temp.r = temp.r / clrs.Length
    temp.g = temp.g / clrs.Length
    temp.b = temp.b / clrs.Length
    bc.SetARGB(x, y, temp)
End Sub

I don't know how to record it but here's a 2 frame test image

View attachment 87147
Click to expand...
The effect is this!!
Now i have to figure out how to animate by code. Because you use the Y from the _Touch event
 
Upvote 0
You must log in or register to reply here.

Similar Threads

M
  • Question
Android Question Applying Lazy Loading to xCustomListView with Imageviews Bitmap Files
Replies
3
Views
5K
Erel
Erel
Erel
  • Article
B4A Library [B4X] BitmapCreator Effects
2 3
Replies
42
Views
29K
John Naylor
J
Erel
  • Article
B4A Library [B4X] [BitmapCreator] BlurredDialog
Replies
0
Views
8K
Erel
Erel
Erel
  • Article
B4A Library Ripple Effect library
3 4 5
Replies
83
Views
37K
Erel
Erel
thedesolatesoul
  • Article
Share My Creation Blur Effect Demo
2
Replies
21
Views
14K
wonder
wonder
Top