[BUG] Animations using colors will preview but not build

[JohnGoewert]

LVGL Pro 2.0.1
LVGL 9.5

<timeline name="shrink">
			<animation prop="width" target="maincontent" start="340" end="260" duration="500" />
			<animation prop="width" target="maincontent" start="240" end="100" duration="500" delay="1500" />
			<animation prop="bg_opa" target="maincontent" start="100" end="0" duration="500" />
			<animation prop="text_color" target="lbl_main" start="#brakebrown" end="#limegreen" duration="500" />
			<animation prop="border_color" target="maincontent" start="#brakebrown" end="#limegreen" duration="500" />
		</timeline>

This works in preview.

When I Export Code & Recompile:

[LVGL] [6/127] Building C object project/CMakeFiles/lib-ui.dir/components/buttons/brakebutton/brakebutton_gen.c.o
FAILED: [code=1] project/CMakeFiles/lib-ui.dir/components/buttons/brakebutton/brakebutton_gen.c.o 
C:\Users\goewerj\AppData\Roaming\lvgl-editor\emsdk\upstream\emscripten\emcc.bat -DLV_CONF_PATH=\"C:/Users/goewerj/AppData/Roaming/lvgl-editor/resources/v9.5.0/libs/include/lvgl/lv_conf.h\" -DLV_EDITOR_PREVIEW=1 -DLV_USE_XML=1 -IC:/projects/keystone_app/src/lvgl_ui -isystem C:/Users/goewerj/AppData/Roaming/lvgl-editor/resources/v9.5.0/libs/include -std=c11 -fansi-escape-codes -fcolor-diagnostics -MD -MT project/CMakeFiles/lib-ui.dir/components/buttons/brakebutton/brakebutton_gen.c.o -MF project\CMakeFiles\lib-ui.dir\components\buttons\brakebutton\brakebutton_gen.c.o.d -o project/CMakeFiles/lib-ui.dir/components/buttons/brakebutton/brakebutton_gen.c.o -c C:/projects/keystone_app/src/lvgl_ui/components/buttons/brakebutton/brakebutton_gen.c
[LVGL] C:/projects/keystone_app/src/lvgl_ui/components/buttons/brakebutton/brakebutton_gen.c:233:28: error: passing 'lv_color_t' to parameter of incompatible type 'int32_t' (aka 'int')
  233 |     lv_anim_set_values(&a, BRAKEBROWN, LIMEGREEN);
      |                            ^~~~~~~~~~
C:/projects/keystone_app/src/lvgl_ui/components/buttons/brakebutton\../../..\keystone_gen.h:84:20: note: expanded from macro 'BRAKEBROWN'
   84 | #define BRAKEBROWN lv_color_hex(0x6B3600)
      |                    ^~~~~~~~~~~~~~~~~~~~~~
C:/Users/goewerj/AppData/Roaming/lvgl-editor/resources/v9.5.0/libs/include\lvgl\src/misc\lv_anim.h:241:48: note: passing argument to parameter 'start' here
  241 | void lv_anim_set_values(lv_anim_t * a, int32_t start, int32_t end);
      |                                                ^
C:/projects/keystone_app/src/lvgl_ui/components/buttons/brakebutton/brakebutton_gen.c:242:28: error: passing 'lv_color_t' to parameter of incompatible type 'int32_t' (aka 'int')
  242 |     lv_anim_set_values(&a, BRAKEBROWN, LIMEGREEN);
      |                            ^~~~~~~~~~
C:/projects/keystone_app/src/lvgl_ui/components/buttons/brakebutton\../../..\keystone_gen.h:84:20: note: expanded from macro 'BRAKEBROWN'
   84 | #define BRAKEBROWN lv_color_hex(0x6B3600)
      |                    ^~~~~~~~~~~~~~~~~~~~~~
C:/Users/goewerj/AppData/Roaming/lvgl-editor/resources/v9.5.0/libs/include\lvgl\src/misc\lv_anim.h:241:48: note: passing argument to parameter 'start' here
  241 | void lv_anim_set_values(lv_anim_t * a, int32_t start, int32_t end);
      |                                                ^
C:/projects/keystone_app/src/lvgl_ui/components/buttons/brakebutton/brakebutton_gen.c:247:27: error: use of undeclared identifier 'LV_STYLE_SRC'
  247 |     selector_and_prop = ((LV_STYLE_SRC & 0xff) << 24) | 0;
      |                           ^
C:/projects/keystone_app/src/lvgl_ui/components/buttons/brakebutton/brakebutton_gen.c:251:28: error: use of undeclared identifier 'iconinactive'
  251 |     lv_anim_set_values(&a, iconinactive, iconinactive);
      |                            ^
C:/projects/keystone_app/src/lvgl_ui/components/buttons/brakebutton/brakebutton_gen.c:251:42: error: use of undeclared identifier 'iconinactive'
  251 |     lv_anim_set_values(&a, iconinactive, iconinactive);
      |                                          ^
C:/projects/keystone_app/src/lvgl_ui/components/buttons/brakebutton/brakebutton_gen.c:289:28: error: passing 'lv_color_t' to parameter of incompatible type 'int32_t' (aka 'int')
  289 |     lv_anim_set_values(&a, LIMEGREEN, BRAKEBROWN);
      |                            ^~~~~~~~~
C:/projects/keystone_app/src/lvgl_ui/components/buttons/brakebutton\../../..\keystone_gen.h:61:19: note: expanded from macro 'LIMEGREEN'
   61 | #define LIMEGREEN lv_color_hex(0x00FF00)
      |                   ^~~~~~~~~~~~~~~~~~~~~~
C:/Users/goewerj/AppData/Roaming/lvgl-editor/resources/v9.5.0/libs/include\lvgl\src/misc\lv_anim.h:241:48: note: passing argument to parameter 'start' here
  241 | void lv_anim_set_values(lv_anim_t * a, int32_t start, int32_t end);
      |                                                ^
C:/projects/keystone_app/src/lvgl_ui/components/buttons/brakebutton/brakebutton_gen.c:298:28: error: passing 'lv_color_t' to parameter of incompatible type 'int32_t' (aka 'int')
  298 |     lv_anim_set_values(&a, LIMEGREEN, BRAKEBROWN);
      |                            ^~~~~~~~~
C:/projects/keystone_app/src/lvgl_ui/components/buttons/brakebutton\../../..\keystone_gen.h:61:19: note: expanded from macro 'LIMEGREEN'
   61 | #define LIMEGREEN lv_color_hex(0x00FF00)
      |                   ^~~~~~~~~~~~~~~~~~~~~~
C:/Users/goewerj/AppData/Roaming/lvgl-editor/resources/v9.5.0/libs/include\lvgl\src/misc\lv_anim.h:241:48: note: passing argument to parameter 'start' here
  241 | void lv_anim_set_values(lv_anim_t * a, int32_t start, int32_t end);
      |                                                ^
7 errors generated.

[mrhubbs]

@JohnGoewert Hmm... good question.

The usual way to handle this in C code would be to create a custom interpolator that maps the colors, like so:

static void color_anim_cb(void * var, int32_t v)
{
    /* Map v (0–255) to a color blend, e.g., from blue to red */
    lv_color_t color = lv_color_mix(lv_palette_main(LV_PALETTE_RED),
                                    lv_palette_main(LV_PALETTE_BLUE),
                                    v);
    lv_obj_set_style_bg_color((lv_obj_t *)var, color, 0);
}

/* Start the animation */
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, obj);
lv_anim_set_exec_cb(&a, color_anim_cb);
lv_anim_set_values(&a, 0, 255);          /* v goes from 0 to 255 */
lv_anim_set_duration(&a, 1000);          /* 1 second */
lv_anim_set_path_cb(&a, lv_anim_path_ease_in_out);
lv_anim_start(&a);

The reason for this is that animation values are ints, not colors.

However, it is working in the runtime as you said... I will investigate and get back to you.

[mrhubbs]

Okay - so our preview is doing under-the-hood the same thing as that C code sample ^. Clearly, our exported C code should also handle it. We'll get this scheduled / fixed ASAP.

[JohnGoewert]

Oh, an unplanned feature. I originally tried using ints, but the preview wouldn't let me use an int when it expected a color.

I was surprised when the global const worked.

I was trying to figure out a way to programmatically in the XML change the color of a control as part of its animation. There was a more convoluted way to do the same thing with bind states and USER_x.

This implementation was just more elegant, and I thought it was great when the preview worked.

[mrhubbs]

Not really an unplanned feature. More of a bug - since we have a mismatch in our preview and our code export.

I have run into this shortcoming myself and it would be amazing to have it cleanly handled.

[laszlobalint]

@mrhubbs, I'll assign it to you.