changing a buttons properties when clicked in lvgl

Changing a Button’s Properties When Clicked in LVGL: A Practical Guide

changing a buttons properties when clicked in lvgl is a fundamental task that many developers encounter when designing interactive graphical interfaces. Whether you’re building a smart home dashboard, a wearable device interface, or any embedded touchscreen application, tweaking a button’s appearance or behavior upon user interaction can greatly enhance the user experience. LVGL (Light and Versatile Graphics Library) provides an efficient and flexible way to achieve this, allowing developers to create visually appealing and responsive UI elements.

In this article, we’ll dive into how you can change a button’s properties dynamically when it’s clicked in LVGL. We’ll explore event handling, style manipulation, and practical examples to help you master this aspect of LVGL development.

Understanding LVGL Button Basics

Before we jump into changing a button’s properties when clicked in LVGL, it’s important to grasp the basics of how buttons work within this GUI library. LVGL is designed to be lightweight and modular, perfect for embedded systems with limited resources.

In LVGL, buttons are objects (lv_obj_t) that respond to user touch or mouse events. Each button has default styles, states (like released, pressed, checked), and can be customized extensively through styles and event callbacks.

Core Button Properties You Can Modify

When a button is clicked, you might want to change its properties such as:

• Color (background, border, text color)
• Size (width, height)
• Text label (changing the text displayed on the button)
• State (toggled on/off, enabled/disabled)
• Visibility (show/hide the button)
• Animation effects (fade, scale)

These attributes help convey feedback and improve UI intuitiveness.

How to Detect Button Clicks in LVGL

To change a button’s properties on click, you first need to detect the click event. LVGL uses a powerful event handling system where you can assign event callbacks to objects.

Here’s how you typically detect a button click:

void btn_event_cb(lv_event_t * e) {
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * btn = lv_event_get_target(e);

    if(code == LV_EVENT_CLICKED) {
        // Button was clicked
    }
}

You attach this callback to your button:

lv_obj_t * btn = lv_btn_create(lv_scr_act());
lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_ALL, NULL);

This setup ensures that whenever the button receives an event, your callback is triggered, and you can react accordingly.

Changing a Button’s Properties When Clicked in LVGL

Once you catch the LV_EVENT_CLICKED event, you can modify the button’s properties. There are two primary ways to change a button’s appearance in LVGL:

1. Modify the button’s style dynamically
2. Change the button’s attributes or child objects like labels

Modifying Button Styles on Click

LVGL uses a style system that allows you to define how objects look in different states (default, pressed, focused, etc.). You can alter these styles on the fly.

For example, to change the background color of a button upon click:

void btn_event_cb(lv_event_t * e) {
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * btn = lv_event_get_target(e);

    if(code == LV_EVENT_CLICKED) {
        static lv_style_t clicked_style;
        lv_style_init(&clicked_style);
        lv_style_set_bg_color(&clicked_style, lv_palette_main(LV_PALETTE_RED));
        lv_obj_add_style(btn, &clicked_style, 0);
    }
}

This code initializes a style with a red background and applies it to the button once clicked.

Changing Button Text Dynamically

Often, changing the text label on a button provides clear feedback. Here’s how you can do it:

void btn_event_cb(lv_event_t * e) {
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * btn = lv_event_get_target(e);

    if(code == LV_EVENT_CLICKED) {
        lv_obj_t * label = lv_obj_get_child(btn, 0);  // Assuming the first child is the label
        lv_label_set_text(label, "Clicked!");
    }
}

This approach modifies the button’s label immediately after the click event.

Tips for Effective Button Property Changes in LVGL

Use Styles for Consistency

Instead of changing individual properties directly, define and reuse styles. This approach keeps your code clean and your UI consistent.

Manage Object States Carefully

LVGL buttons have states such as LV_STATE_CHECKED or LV_STATE_DISABLED. Manipulating these states can automatically trigger built-in style changes.

For example, toggling a button’s checked state on click:

if(code == LV_EVENT_CLICKED) {
    lv_obj_toggle_state(btn, LV_STATE_CHECKED);
}

You can then define styles for the checked state that automatically apply.

Consider Animation for Smooth Transitions

To create a polished interface, you can animate property changes:

lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, btn);
lv_anim_set_values(&a, 100, 200); // example values for width
lv_anim_set_time(&a, 300);
lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t)lv_obj_set_width);
lv_anim_start(&a);

Animating color, size, or opacity changes on button clicks can provide delightful user feedback.

Practical Example: Toggle Button Color and Text on Click

Let’s put it all together with a real-world example where a button toggles its background color and text each time it’s clicked.

void btn_event_cb(lv_event_t * e) {
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * btn = lv_event_get_target(e);
    lv_obj_t * label = lv_obj_get_child(btn, 0);

    static bool toggled = false;

    if(code == LV_EVENT_CLICKED) {
        toggled = !toggled;

        if(toggled) {
            lv_obj_set_style_bg_color(btn, lv_palette_main(LV_PALETTE_GREEN), 0);
            lv_label_set_text(label, "ON");
        } else {
            lv_obj_set_style_bg_color(btn, lv_palette_main(LV_PALETTE_GREY), 0);
            lv_label_set_text(label, "OFF");
        }
    }
}

void create_toggle_btn(void) {
    lv_obj_t * btn = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn, 120, 50);
    lv_obj_center(btn);

    lv_obj_t * label = lv_label_create(btn);
    lv_label_set_text(label, "OFF");
    lv_obj_center(label);

    lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, NULL);
}

This snippet creates a button that switches between green and grey backgrounds and toggles its label between "ON" and "OFF" each time it's clicked — a simple yet effective interaction.

Common Pitfalls and How to Avoid Them

When working on changing a buttons properties when clicked in lvgl, a few common mistakes can trip up developers:

• Forgetting to initialize styles before use: Always initialize lv_style_t structures with lv_style_init() before applying them.
• Not attaching event callbacks properly: Ensure your callback is attached to the button with the correct event type.
• Assuming label is always the first child: If your button has multiple children, make sure you correctly identify the label object.
• Overusing inline style changes: Excessive inline changes can clutter your code; prefer predefined styles for maintainability.

Expanding Beyond Buttons: Event-Driven Property Changes

While this article focuses on buttons, the principles of changing properties upon events apply to many LVGL objects — sliders, switches, dropdowns, and more. Understanding how to manipulate styles and respond to events unlocks a wide range of dynamic UI possibilities in your embedded projects.

Exploring LVGL’s event system and style architecture in depth can help you build interfaces that feel responsive and polished, making your applications stand out.

Changing a button’s properties when clicked in LVGL is a powerful technique that elevates user interaction. By leveraging event callbacks, styles, and object manipulation, you can create engaging buttons that provide clear, immediate feedback to users. As you get comfortable with these concepts, you’ll find endless opportunities to enhance your embedded GUIs with LVGL’s flexible toolkit.