How to make animation more fluid when displaying on MIMXRT1170-EVKB LCD ?

[mira1476]

Hello,

I contact you regarding a problem that I encounter with an animation of a snake created with LVGL and deployed with Zephyr. We noticed a drag behind and a shadow at the beginning of the snake during its movement, which gives a not very smooth effect to the animation.

you will find attached an image of the animation and the script main.pdf.

PS: got same issue also with or without adding this in the main function :

k_msleep(lv_task_handler()); or this k_sleep(k_MSEC(10));

#include <zephyr/device.h>
#include <zephyr/devicetree.h>
#include <zephyr/drivers/display.h>
#include <lvgl.h>
#include <zephyr/kernel.h>
#define LOG_LEVEL CONFIG_LOG_DEFAULT_LEVEL
#include <zephyr/logging/log.h>
LOG_MODULE_REGISTER(app);
static lv_obj_t *scr1;
#define SNAKE_LEN        250
#define SNAKE_WIDTH      20
#define SNAKE_HZ_PADDING (SNAKE_WIDTH / 2)
#define SNAKE_VT_PADDING (SNAKE_WIDTH / 2 + 2)
typedef struct snake_struct {
	lv_obj_t *hz;
	lv_obj_t *vt;
} snake_t;
static snake_t snake;
/* v is a counter incrementing by one for the entire loop of the snake */
void snake_anim_callback(void *var, int32_t v)
{
	lv_obj_t *hz_snake = (lv_obj_t *)((snake_t *)var)->hz;
	lv_obj_t *vt_snake = (lv_obj_t *)((snake_t *)var)->vt;
	lv_coord_t w = lv_obj_get_width(scr1);
	lv_coord_t h = lv_obj_get_height(scr1);
	if (v < w) {
		// top
		lv_obj_set_pos(hz_snake, v, SNAKE_HZ_PADDING);
		if (v >= w - SNAKE_LEN) {
			lv_obj_set_pos(vt_snake, w - SNAKE_VT_PADDING, 0 - (w - v));
		} else {
			lv_obj_set_pos(vt_snake, w - SNAKE_VT_PADDING, h + SNAKE_VT_PADDING);
		}
	} else if (v < w + h) {
		// right side
		lv_obj_set_pos(vt_snake, w - SNAKE_VT_PADDING, v - w);
		if (v >= w + h - SNAKE_LEN) {
			lv_obj_set_pos(hz_snake, w + (h + w) - v - SNAKE_LEN, h - SNAKE_HZ_PADDING);
		} else {
			lv_obj_set_pos(hz_snake, w + SNAKE_HZ_PADDING, 0);
		}
	} else if (v < 2 * w + h) {
		// bottom
		lv_obj_set_pos(hz_snake, 2 * w + h - v - SNAKE_LEN, h - SNAKE_HZ_PADDING);
		if (v >= 2 * w + h - SNAKE_LEN) {
			lv_obj_set_pos(vt_snake, 0 + SNAKE_VT_PADDING,
				       h + (h + 2 * w) - v - SNAKE_LEN);
		} else {
			lv_obj_set_pos(vt_snake, w + SNAKE_VT_PADDING, h + SNAKE_HZ_PADDING);
		}
	} else {
		// left side
		lv_obj_set_pos(vt_snake, 0 + SNAKE_VT_PADDING, 2 * (w + h) - v - SNAKE_LEN);
		if (v >= 2 * w + 2 * h - SNAKE_LEN) {
			lv_obj_set_pos(hz_snake, v - (2 * h + 2 * w), SNAKE_HZ_PADDING);
		} else {
			lv_obj_set_pos(hz_snake, w + SNAKE_HZ_PADDING, 0 + SNAKE_HZ_PADDING);
		}
	}
}
void create_snake_animation(lv_obj_t *parent, uint32_t length)
{
	snake.hz = lv_line_create(parent);
	snake.vt = lv_line_create(parent);
	static lv_point_t hz_points[2] = {0};
	static lv_point_t vt_points[2] = {0};
	hz_points[1].x = length;
	lv_line_set_points(snake.hz, hz_points, 2);
	lv_obj_set_style_line_width(snake.hz, SNAKE_WIDTH, 0);
	lv_obj_set_style_line_color(snake.hz, lv_palette_main(LV_PALETTE_RED), 0);
	lv_obj_set_style_line_rounded(snake.hz, true, LV_PART_MAIN);
	vt_points[1].y = length;
	lv_line_set_points(snake.vt, vt_points, 2);
	lv_obj_set_style_line_width(snake.vt, SNAKE_WIDTH, 0);
	lv_obj_set_style_line_color(snake.vt, lv_palette_main(LV_PALETTE_RED), 0);
	lv_obj_set_style_line_rounded(snake.vt, true, LV_PART_MAIN);
	lv_anim_t a;
	lv_anim_init(&a);
	lv_anim_set_var(&a, &snake);
	lv_anim_set_exec_cb(&a, snake_anim_callback);
	lv_anim_set_time(&a, 8000);
	lv_anim_set_values(&a, 0, 2 * (lv_obj_get_width(scr1) + lv_obj_get_height(scr1)));
	lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
	lv_anim_start(&a);
}
int main(void)
{
	scr1 = lv_obj_create(NULL);
	lv_obj_set_scrollbar_mode(scr1, LV_SCROLLBAR_MODE_OFF);
	lv_scr_load(scr1);
	// Creation of snake animation
	create_snake_animation(scr1, SNAKE_LEN);
	while (1) {
		lv_task_handler();
		//k_sleep(K_MSEC(1));
		k_msleep(lv_task_handler());
	}
}

[github-actions[bot]]

Hi @mira1476! We appreciate you submitting your first issue for our open-source project. 🌟

Even though I'm a bot, I can assure you that the whole community is genuinely grateful for your time and effort. 🤖💙

[faxe1008]

@mira1476 can you include your code within the issue please? Sharing it via a pdf is somewhat strange.

[mira1476]

@faxe1008

lvgl.zip

[faxe1008]

@mira1476 You can include code directly within your issue as code block, check examples for markdown on that. You start and finish the code block with ```. I edited your inital comment to include the code, but please in the future try to do this directly.

As for your code a few things to note:

• You are missing unblanking of the display, for this to work with most displays.
• You are using the lv_line_t and move it around. This is really not the intended way of painting, since it adds a bunch of additional cost anytime you move the line around (blending, reevaluating all other objects for rel. positioning). Use a canvas instead. This should cut down on the CPU usage.
• Additionally there are flags that you can enable and play with to see if they improve your overall performance:
• CONFIG_LV_Z_FLUSH_THREAD: might already be enabled by default for your board I recall there being a defconfig for it.
• CONFIG_LV_Z_VDB_SIZE: The size of rendering buffer
• CONFIG_LV_Z_DOUBLE_VDB: Enable double buffer rendering

If you see that you still got some breathing room for your CPU usage you can also try and increase the display refresh period:

west build -b ... -- -DLV_DISP_DEF_REFR_PERIOD=10

[mira1476]

@faxe1008 Thank you for all your advices, I also tried this animation with canvas and I didn’t really notice any change!
and I already added those flags in the prj.conf :

CONFIG_MAIN_STACK_SIZE=2048

CONFIG_DISPLAY=y
CONFIG_LVGL=y

CONFIG_LV_Z_DOUBLE_VDB=y
CONFIG_LV_Z_FLUSH_THREAD=y 

I didn't get this "You are missing unblanking of the display, for this to work with most displays"

[mira1476]

the version with canvas

#include <zephyr/devicetree.h>
#include <zephyr/drivers/display.h>
#include <lvgl.h>
#include <zephyr/kernel.h>

#define LOG_LEVEL CONFIG_LOG_DEFAULT_LEVEL
#include <zephyr/logging/log.h>
LOG_MODULE_REGISTER(app);

static lv_obj_t *scr1;
#define SNAKE_LEN 250
#define SNAKE_WIDTH 20

typedef struct snake_struct {
    lv_obj_t *hz;
    lv_obj_t *vt;
} snake_t;

static snake_t snake;

/* v is a counter incrementing by one for the entire loop of the snake */
void snake_anim_callback(void *var, int32_t v) {
    lv_obj_t *hz_snake = (lv_obj_t *)((snake_t *)var)->hz;
    lv_obj_t *vt_snake = (lv_obj_t *)((snake_t *)var)->vt;
    lv_coord_t w = lv_obj_get_width(scr1);
    lv_coord_t h = lv_obj_get_height(scr1);

    if (v < w) {
        // top
        lv_obj_set_pos(hz_snake, v, 0);

        if (v >= w - SNAKE_LEN) {
            lv_obj_set_pos(vt_snake, w-20, 0 - (w - v));
        } else {
            lv_obj_set_pos(vt_snake, w-20, h);
        }
    } else if (v < w + h) {
        // right side
        lv_obj_set_pos(vt_snake, w-20, v - w);
        if (v >= w + h - SNAKE_LEN) {
            lv_obj_set_pos(hz_snake, w + (h + w) - v - SNAKE_LEN, h-20);
        } else {
            lv_obj_set_pos(hz_snake, w, 0-20);
        }
    } else if (v < 2 * w + h) {
        // bottom
        lv_obj_set_pos(hz_snake, 2 * w + h - v - SNAKE_LEN, h-20);
        if (v >= 2 * w + h - SNAKE_LEN) {
            lv_obj_set_pos(vt_snake, 0, h + (h + 2 * w) - v - SNAKE_LEN);
        } else {
            lv_obj_set_pos(vt_snake, w, h);
        }
    } else {
        // left side
        lv_obj_set_pos(vt_snake, 0, 2 * (w + h) - v - SNAKE_LEN);
        if (v >= 2 * w + 2 * h - SNAKE_LEN) {
            lv_obj_set_pos(hz_snake, v - (2 * h + 2 * w), 0);
        } else {
            lv_obj_set_pos(hz_snake, w, 0);
        }
    }
}

void create_snake_animation(lv_obj_t *parent, uint32_t length) {
    // Allocate buffer for the canvas
    static lv_color_t hz_cbuf[LV_CANVAS_BUF_SIZE_TRUE_COLOR(SNAKE_LEN, SNAKE_WIDTH)];
    static lv_color_t vt_cbuf[LV_CANVAS_BUF_SIZE_TRUE_COLOR(SNAKE_WIDTH, SNAKE_LEN)];

    // Create horizontal canvas
    snake.hz = lv_canvas_create(parent);
    lv_canvas_set_buffer(snake.hz, hz_cbuf, SNAKE_LEN, SNAKE_WIDTH, LV_IMG_CF_TRUE_COLOR);
    lv_canvas_fill_bg(snake.hz, lv_color_hex(0xFF0000), LV_OPA_COVER);  

    // Create vertical canvas
    snake.vt = lv_canvas_create(parent);
    lv_canvas_set_buffer(snake.vt, vt_cbuf, SNAKE_WIDTH, SNAKE_LEN, LV_IMG_CF_TRUE_COLOR);
    lv_canvas_fill_bg(snake.vt, lv_color_hex(0xFF0000), LV_OPA_COVER);  
    lv_obj_set_style_border_width(snake.vt, 0, 0);

    // Create annimation
    lv_anim_t a;
    lv_anim_init(&a);
    lv_anim_set_var(&a, &snake);
    lv_anim_set_exec_cb(&a, snake_anim_callback);
    lv_anim_set_time(&a, 8000);
    lv_anim_set_values(&a, 0, 2 * (lv_obj_get_width(scr1) + lv_obj_get_height(scr1)));
    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
    lv_anim_start(&a);
}

int main(void) {
    scr1 = lv_obj_create(NULL);
    lv_obj_set_scrollbar_mode(scr1, LV_SCROLLBAR_MODE_OFF);
    lv_scr_load(scr1);

    // Creation of snake animation
    create_snake_animation(scr1, SNAKE_LEN);

    while (1) {
        lv_task_handler();
        k_sleep(K_MSEC(10));
    }
}

[faxe1008]

Well I meant drawing onto a canvas not using it as a substitue for the line. Refer to https://docs.lvgl.io/8.4/widgets/core/canvas.html?highlight=canvas
And use lv_canvas_draw_line

[mira1476]

Ok, thank you!