"Marquee"-style progress bar pre-load animation

My projects
1

I needed a pre-load animation for the progress bar in a project, and I found that no examples are available for this, so I built one by myself using a timer and changing the start/end values. Sharing it here so maybe someone else will benefit from it. If it is helpful we can put it into the examples in the docs too.

Recording 2022-08-02 at 09.37.27

static void timer_callback(lv_timer_t * timer)
{
    static unsigned start_value = 0;
    static unsigned end_value = 0;

    lv_obj_t * bar = (lv_obj_t *)(timer->user_data);

    if(end_value < 100) {
        lv_bar_set_start_value(bar, start_value, LV_ANIM_OFF);
        lv_bar_set_value(bar, end_value++, LV_ANIM_ON);
    }
    else if(start_value < 100) {
        lv_bar_set_start_value(bar, start_value++, LV_ANIM_ON);
    }
    else {
        start_value = 0;
        end_value = 0;
    }

}

void lv_example_bar_marquee(void)
{
    lv_obj_t * bar = lv_bar_create(lv_scr_act());
    lv_obj_set_size(bar, 200, 20);
    lv_obj_center(bar);
    lv_timer_create(timer_callback, 10, bar);
}
2

Why cannot I edit my post? I have a couple of details to change. Anyway, here is the new code:

static void timer_callback(lv_timer_t * timer)
{
    static unsigned start_value = 0;
    static unsigned end_value = 0;

    lv_obj_t * bar = (lv_obj_t *)(timer->user_data);

    if(end_value < 100) {
        lv_bar_set_start_value(bar, start_value, LV_ANIM_OFF);
        lv_bar_set_value(bar, end_value++, LV_ANIM_OFF);
    }
    else if(start_value < 100) {
        lv_bar_set_start_value(bar, start_value++, LV_ANIM_OFF);
    }
    else {
        start_value = 0;
        end_value = 0;
    }

}

void lv_example_bar_marquee(void)
{
    lv_obj_t * bar = lv_bar_create(lv_scr_act());
    lv_obj_set_size(bar, 200, 20);
    lv_obj_center(bar);
    lv_timer_create(timer_callback, 10, bar);
}

Setting the values with LV_ANIM_ON caused glitches sometimes during the reset phase, I now use LV_ANIM_OFF, as the update cycle is so fast that animation is useless anyway.

3

First of all the bar looks great!

“Basic” level users can edit their post only for 1 day. Learn more about it here.

4

It works. But the behavior has a little difference between Windows + LVGL 8.2 and Ubuntu + LVGL 8.1. Maybe it is because of platform, or the LVGL version, not verified.

1 Like