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
 

sorex

Expert
Licensed User
Longtime User
Now i have to figure out how to animate by code. Because you use the Y from the _Touch event

just move the overlay panel around and the ivBlur into the opposite direction.

this is without user interaction pure random code so it's possible




I had some testing with the rounded version based on Erel's rounded image which kind of works aswell but it's slower since it needs to copy the bitmap data to the mini blur image.
 
Upvote 0

Mike1970

Well-Known Member
Licensed User
Longtime User
just move the overlay panel around and the ivBlur into the opposite direction.

this is without user interaction pure random code so it's possible
Impressive.
Unfortunatly i couldn't take a look yet on how to do it
 
Upvote 0

sorex

Expert
Licensed User
Longtime User
Sorex... temp???

what?


How did you moved the panels? with SetLayoutAnimated?

no, as someone mentioned earlier that won't work as the views coordinates change immediatly and it seems to move around a ghost view.
so you can't track the coordinates.


as mentioned twice already and it's in the source aswell you just need to move the inner image into the opposite direction.
but as you want everything on a silver plate without trying yourself here you go...

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
    Dim tReposition As Timer
    Dim tFollower As Timer
    Dim tC As Double
    Dim tx,ty as int
    Dim aniDuration As Int=250
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,75%x),Rnd(0,95%y),25%x,5%y)
    Next

    xpOverlay=xui.CreatePanel("")
    xpOverlay.SetColorAndBorder(0,1%x,0xffffffff,0)
    Activity.AddView(xpOverlay,0,0,25%x,15%x)

    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)

    tReposition.Initialize("tmrReposition",2000)
    tReposition.Enabled=True

    tFollower.Initialize("tmrFollower",1000/60)
    tFollower.Enabled=True
End Sub

Sub tmrReposition_Tick
    tx=Rnd(0,100%x-xpOverlay.Width)
    ty=Rnd(0,100%y-xpOverlay.Height)
    tC=0
    tFollower.Enabled=True
End Sub

Sub tmrFollower_Tick
    xpOverlay.Left=move(tC,xpOverlay.Left,tx-xpOverlay.Left,aniDuration)
    xpOverlay.top=move(tC,xpOverlay.top,ty-xpOverlay.top,aniDuration)
    ivBlur.Left=-xpOverlay.Left
    ivBlur.top=-xpOverlay.Top
    tC=tC+1
    If tC=aniDuration Then tFollower.Enabled=False
End Sub

Sub move (t As Double, s As Int, c As Int, d As Int) As Int
    t=t/d
    Return -c * t*(t-2) + s
End Sub

Private Sub Blur (bmp As B4XBitmap) As B4XBitmap
    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
 

Attachments

  • blur_move.zip
    7.8 KB · Views: 320
Upvote 0

sorex

Expert
Licensed User
Longtime User
you should ask Erel why he did it like that. Maybe a trick to reset/clear the object instead of creating new/several ones.
 
Upvote 0

Mike1970

Well-Known Member
Licensed User
Longtime User
you just need to move the inner image into the opposite direction.
Infact I was trying using two setlayout animated , one for xpOverlay and one for ivBlur, using opposite direction but ... a strange effect came out
 
Upvote 0

Mike1970

Well-Known Member
Licensed User
Longtime User
Sorry for not answering anymore, I hadn't time to look out this thing.
Thanks @sorex for you help, and also to all of you.
 
Upvote 0
Cookies are required to use this site. You must accept them to continue using the site. Learn more…