Advanced UI Styling

1. Course Objectives

Modern GUI systems pursue a "high-end feel," where "Frosted Glass" is the most commonly used special effect. In this lesson, we will learn how main.py uses LVGL to achieve this semi-transparent blur effect.

2. Core Source Code Analysis

File Path: src/canmv/port/builtin_py/ybMain/main.py

2.1 Style Creation Function (create_black_frosted_style)

This is an encapsulation example where we create a universal lv.style_t object.

​x
def create_black_frosted_style():
    # 1. Create style object
    style_black_frosted = lv.style_t()
    style_black_frosted.init()
​
    # 2. Set background color (dark black)
    style_black_frosted.set_bg_color(lv.color_make(20, 20, 20))
    
    # 3. Set transparency (OPA)
    # 255 is opaque, 0 is fully transparent. 230 equals approximately 90% opacity
    style_black_frosted.set_bg_opa(230)
​
    # 4. Gradient effect (enhance 3D feel)
    # Gradient from 20,20,20 at top to 40,40,40 at bottom
    style_black_frosted.set_bg_grad_color(lv.color_make(40, 40, 40))
    style_black_frosted.set_bg_grad_dir(lv.GRAD_DIR.VER) # Vertical gradient
​
    # 5. Dither mode
    # On low color depth screens, gradients can easily show ripples. Enabling Dither makes transitions smoother
    style_black_frosted.set_bg_dither_mode(lv.DITHER.ORDERED)
​
    # 6. Shadow
    # Shadow is key to UI layering
    style_black_frosted.set_shadow_width(10)
    style_black_frosted.set_shadow_color(lv.color_make(0, 0, 0))
    style_black_frosted.set_shadow_opa(40)
    style_black_frosted.set_shadow_ofs_y(4) # Shadow offset downward by 4 pixels
​
    return style_black_frosted

2.2 How to Apply Styles

After defining the style, how do you apply it to specific controls?

xxxxxxxxxx
def apply_black_frosted_background(obj):
    style = create_black_frosted_style()
    obj.add_style(style, 0) # 0 means default state

When you create a dialog box or popup, just call this function and it will immediately have a high-end black frosted background.

3. Design Aesthetics

This code involves several key elements of UI design:

1. Background Color: Using (20,20,20) instead of (0,0,0) avoids dead black and has more texture.
2. Subtle Gradient: Simulates lighting effects.
3. Shadow: Makes controls appear to "float" above the background.