Animations in lvgl branch micropython_v1.24.1-usermod?

jgpeiro · March 19, 2025, 6:23pm

I saw that lvgl micropython finally is upgrading to the v1.24 micropython version and I think is really good news for all of us. Before the best alternative was the kdschlosser, wich was amazing work too, but if we have something official is always better.

So, I was to build and make it work without any issues. The problem is of course that the micropython examples were removed from the web and now you need to translate manually the 9.x API from C to micropython. This worked for most of the examples I tried (with the help of the lv_mp.c file), but not for the animations.

Is there any plan to update the web examples with micropython code?
What is the API required for use the animations in micropython?

(Note: I builded my micropython image a week ago, so maybe its already fixed)

When I launch this micropython code, the system simply crashes, so I dont know why it fails. On the lv_mp.c I read:

/*
 * Function NOT generated:
 * Callback function 'lv_anim_exec_xcb_t exec_cb' must receive a struct pointer with user_data member as its first argument!
 * lv_anim_exec_xcb_t exec_cb
 */

Here is the py code:


import lvgl as lv

def anim_x_cb(obj, value):
    obj.set_x(value)

def sw_event_cb(e):
    sw = e.get_target_obj()
    label = e.get_user_data()
    
    if sw.has_state(lv.STATE.CHECKED):
        # Create animation to move label to the right
        a = lv.anim_t()
        a.init()
        a.set_var(label)
        a.set_values(label.get_x(), 100)
        a.set_duration(500)
        a.set_custom_exec_cb(anim_x_cb)
        a.set_path_cb(lv.anim_t.path_overshoot)
        a.start()
    else:
        # Create animation to move label off-screen to the left
        a = lv.anim_t()
        a.init()
        a.set_var(label)
        a.set_values(label.get_x(), -label.get_width())
        a.set_duration(500)
        a.set_custom_exec_cb(anim_x_cb)
        a.set_path_cb(lv.anim_t.path_ease_in)
        a.start()

def lv_example_anim_1():
    # Create a label
    label = lv.label(lv.screen_active())
    label.set_text("Hello animations!")
    label.set_pos(100, 10)
    
    # Create a switch
    sw = lv.switch(lv.screen_active())
    sw.center()
    sw.add_state(lv.STATE.CHECKED)
    sw.add_event_cb(sw_event_cb, lv.EVENT.VALUE_CHANGED, label)

lv_example_anim_1()

PGNet · March 19, 2025, 8:29pm

Hello!

The animation callback has 2 parameters:

lv.anim_t object instance (and not the target object what you set in a.set_var(label))
animation value

See:

github.com

lvgl/lvgl/blob/master/src/misc/lv_anim.h#L101


      
          /** Generic prototype of "animator" functions.
           * First parameter is the variable to animate.
           * Second parameter is the value to set.
           * Compatible with `lv_xxx_set_yyy(obj, value)` functions
           * The `x` in `_xcb_t` means it's not a fully generic prototype because
           * it doesn't receive `lv_anim_t *` as its first argument*/
          typedef void (*lv_anim_exec_xcb_t)(void *, int32_t);
          
          /** Same as `lv_anim_exec_xcb_t` but receives `lv_anim_t *` as the first parameter.
           * It's more consistent but less convenient. Might be used by binding generator functions.*/
          typedef void (*lv_anim_custom_exec_cb_t)(lv_anim_t *, int32_t);
          
          /** Callback to call when the animation is ready*/
          typedef void (*lv_anim_completed_cb_t)(lv_anim_t *);
          
          /** Callback to call when the animation really stars (considering `delay`)*/
          typedef void (*lv_anim_start_cb_t)(lv_anim_t *);
          
          /** Callback used when the animation values are relative to get the current value*/
          typedef int32_t (*lv_anim_get_value_cb_t)(lv_anim_t *);

Usage example (in C):

github.com

lvgl/lvgl/blob/master/demos/smartwatch/lv_demo_smartwatch.c#L564


      
          static void lv_demo_obj_set_hidden(lv_obj_t * obj, bool state)
          {
              if(state) {
                  lv_obj_add_flag(obj, LV_OBJ_FLAG_HIDDEN);
              }
              else {
                  lv_obj_remove_flag(obj, LV_OBJ_FLAG_HIDDEN);
              }
          }
          
          static void anim_set_opacity_cb(lv_anim_t * a, int32_t v)
          {
              lv_obj_t * target = (lv_obj_t *)a->user_data;
              lv_obj_set_style_opa(target, v, 0);
          }
          
          static lv_anim_t * obj_set_opacity_anim(lv_obj_t * obj)
          {
              lv_anim_t anim_opa;
              lv_anim_init(&anim_opa);
              lv_anim_set_var(&anim_opa, obj);

So, fix is:

def anim_x_cb(anim, value):
    obj = anim.get_user_data()
    obj.set_x(value)

jgpeiro · March 19, 2025, 10:13pm

Thanks for your response, it helped me to make it work, but I still required some “tricks”:

anim.get_user_data() returns a ¿¿Blob?? object wich dont have set_x method
sw.add_event_cb crashes if I pass label as user_data

label = None

def anim_x_cb(anim, value):
    global label
    obj = anim.get_user_data()
    # use global label cause anim.get_user_data() returns Blob object wich dont have set_x() (maybe the label can be obtained from Blob.get_X, not sure)
    label.set_x(value)

def sw_event_cb(e):
    global label
    sw = e.get_target_obj()
    # Cant be used as the callback sets user_data as None
    #label = e.get_user_data()
    
    if sw.has_state(lv.STATE.CHECKED):
        a = lv.anim_t()
        a.init()
        a.set_var(label)
        a.set_values(label.get_x(), 100)
        a.set_duration(500)
        a.set_custom_exec_cb(anim_x_cb)
        a.set_path_cb(lv.anim_t.path_overshoot)
        a.start()
    else:
        a = lv.anim_t()
        a.init()
        a.set_var(label)
        a.set_values(label.get_x(), -label.get_width())
        a.set_duration(500)
        a.set_custom_exec_cb(anim_x_cb)
        a.set_path_cb(lv.anim_t.path_ease_in)
        a.start()

def lv_example_anim_1():
    global label
    label = lv.label(lv.screen_active())
    label.set_text("Hello animations!")
    label.set_pos(100, 10)
    sw = lv.switch(lv.screen_active())
    sw.center()
    sw.add_state(lv.STATE.CHECKED)
    # Crash if I pass label as user_data
    sw.add_event_cb(sw_event_cb, lv.EVENT.VALUE_CHANGED, None)

lv_example_anim_1()

Is there any set of tests or examples that the lv_micropython port should pass? maybe I can read them before build my code.