B4J Library FrostedGlass (Glassmorphism)

Introduction:
I have tried to create a blur panel for my dashboard or POS cashier layout a few years ago but failed.
I retry with ChatGPT and DeepSeek AI assistant but still facing some problems with blurring effect, redrawing and positioning when the form is resized.
Finally, I succeeded.
Here I present to you the library.

1739856252973.png



FrostedGlass
Author:
Aeric Poon
Version: 2.11
  • Methods/Properties:
    • Clear
    • Redraw
    • Panel As Pane (readonly)
    • Visible As Boolean
    • CornerRadius As Int
  • Events
    • MouseClicked
  • Designer's properties
    • Blur Radius (v1.x)
    • Corner Radius
Code example:
B4X:
Private Sub MainForm_Resize (Width As Double, Height As Double)
    FrostedGlass1.Redraw
End Sub

Private Sub FrostedGlass1_MouseClicked
    FrostedGlass2.Visible = Not(FrostedGlass2.Visible)
End Sub
 

Attachments

  • FrostedGlass (v1.11).zip
    4.8 KB · Views: 22
  • FrostedGlass (v2.11).zip
    161.1 KB · Views: 33
Last edited:

Star-Dust

Expert
Licensed User
Longtime User
great job it's a nice effect. However the bitmap creator library by Erel has similar effects.
 

aeric

Expert
Licensed User
Longtime User
great job it's a nice effect. However the bitmap creator library by Erel has similar effects.
I don't find any solution shared on forum that fit my needs. I tried with bitmapcreator but did not succeed.
I am not good at using this library.
Now I just use javafx.
 

aeric

Expert
Licensed User
Longtime User
Note: first and second panels have more blur and rounded corners compare to third and forth panels in the screenshot.
 

aeric

Expert
Licensed User
Longtime User
Version 2.00 attached in first post.
It is using B4XBitmapEffects library.

Version: 2.00
  • Methods/Properties:
    • Redraw
    • Visible As Boolean
    • CornerRadius As Int
  • Events
    • MouseClicked
  • Designer's properties
    • Blur Radius
    • Corner Radius
Note: Blur radius is no longer available in this version. CornerRadius can be changed in code before calling Redraw.
 

aeric

Expert
Licensed User
Longtime User
Version: 1.10 and 2.10
  • Methods/Properties:
    • Clear
    • Redraw
    • Visible As Boolean
    • CornerRadius As Int
  • Events
    • MouseClicked
  • Designer's properties
    • Blur Radius (v1.x)
    • Corner Radius
Use Clear to call RemoveNodeFromParent internally before calling Redraw when overlapping 1 view on top of another.
Otherwise, the blur effect will be increasing when the form is resized.

Example:
B4X:
Private Sub MainForm_Resize (Width As Double, Height As Double)
    FrostedGlass1.Clear
    FrostedGlass2.Clear
    FrostedGlass1.Redraw
    FrostedGlass2.CornerRadius = 6
    FrostedGlass2.Redraw
End Sub
 

aeric

Expert
Licensed User
Longtime User
Version: 1.11 and 2.11
  • Methods/Properties:
    • Clear
    • Redraw
    • Panel As Pane (readonly)
    • Visible As Boolean
    • CornerRadius As Int
  • Events
    • MouseClicked
  • Designer's properties
    • Blur Radius (v1.x)
    • Corner Radius
Added Panel property so the overlay panel can be use to AddNode, set MouseCursor or override its Style.

Example:
B4X:
FrostedGlass2.Panel.MouseCursor = fx.Cursors.HAND
 

aeric

Expert
Licensed User
Longtime User
Another example of this library used in a Dashboard app.
1739970532322-png.161899


 
Top