Android Question Apply Blur effect to a panel

[Mike1970]

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

 

[Sagenut]

Hat Down to @sorex

 

[sorex]

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.

 

[Erel]

The way I would create a round blur is with BitmapCreator.DrawCircle2 and a BCBrush made of the blur bitmap. Note that both the bitmap and the overlay image can be downscaled.

 

[Mike1970]

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

 

[Mike1970]

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

How did you moved the panels? with SetLayoutAnimated?

 

[Greg Breinholt]

@Mike1970 Did you try this? https://www.b4x.com/android/forum/threads/blur-effect-demo.40920/

 

[Mike1970]

@Mike1970 Did you try this? https://www.b4x.com/android/forum/threads/blur-effect-demo.40920/

Yes yes, it's a different task.

@sorex was awesome finding the solution apprently, i'm trying to animate the movement by code (with the blur)

 

[LucaMs]

A slightly modified version of Sorex' code (just more similar to what was asked for).

[Sorex... temp???]

 

[sorex]

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...

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

 

[LucaMs]

what?

Private Sub SetAvg(bc As BitmapCreator, x As Int, y As Int, clrs() As ARGBColor, temp As ARGBColor)
temp.Initialize

 

[sorex]

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

 

[LucaMs]

as you want everything on a silver plate

Me too!
?

 

[Mike1970]

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

 

[Mike1970]

A slightly modified version of Sorex' code (just more similar to what was asked for).
View attachment 87207


[Sorex... temp???]

Thanks Luca, it seems perfect

 

[LucaMs]

Thanks Luca, it seems perfect

It's all thanks to Sorex

 

[LucaMs]

Infact I was trying using two setlayout animated , one for xpOverlay and one for ivBlur, using opposite direction but ... a strange effect came out

SetLayoutAnimated stretches the views inside the panel (changes their layout too, correctly)

 

[Mike1970]

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.