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
 

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

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.

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

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

Mike1970

Well-Known Member
Licensed User
Longtime User
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)
Very intuitive mental image
 
Upvote 0

LucaMs

Expert
Licensed User
Longtime User
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)
Very intuitive mental image
... 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: 221
Last edited:
Upvote 0

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

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

Mike1970

Well-Known Member
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

View attachment 87147
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
Top