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.

---

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:

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

 

[Star-Dust]

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

 

[aeric]

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]

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

If I find time, I will attempt with bitmapcreator again.

 

[aeric]

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

 

[aeric]

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.

 

[LucaMs]

Frosted glass? I can see everything that way since I was born; it's called myopia


[Nice. Thanks for sharing]

 

[aeric]

Frosted glass?

That's what ChatGPT called it.

 

[aeric]

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:

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

 

[aeric]

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:

FrostedGlass2.Panel.MouseCursor = fx.Cursors.HAND

 

[aeric]

Another example of this library used in a Dashboard app.

[Project Template] [B4J] Dashboard + Drawer

Version: 0.004 GitHub: https://github.com/pyhoon/ab4xdashboard-b4x My plan is to make a dashboard template for general use. Currently this template: only has a drawer a static menu a mini menu 2 menu toggle buttons and only available in B4J What makes this template suitable for use on...

www.b4x.com

 

[Magma]

@aeric
Is it possible to do the same with B4A ?

 

[aeric]

@aeric
Is it possible to do the same with B4A ?

I think yes but there are already some similar examples in B4A.

Check:

Question about glassmorphism effect

Hello everyone, my question is about glassmorphism effect, how can i do it in b4a, thx :)

www.b4x.com