How to manage images

How-to
#1

Description

Hello

What MCU/Processor/Board and compiler are you using?

STM32

What LVGL version are you using?

7.9.0-dev

I designed about 100 images in Inkscape,
each image is 70x50 pixels
i need to use this images for image button,
it’s difficult to export every single image to PNG and then upload to image converter website AND etc.what is the best and easy way to work with this 100 images from .c file generation to use them in source code?
i searched the forum but nothing found.
thanks in advance.

#2

I believe you can run the image converter offline by downloading the script. You could then automate it with a batch file (or similar)? Or modify the php code to do what you need it to, perhaps?

1 Like
#3

There are instructions here about running the image converter offline.

1 Like
#4

i like to create a big image let’s say (70+10) * 5 X (50+10)*20 => 400X1200pixels [10pixels for OFFSET] and
save it in NANDflash and have a header file for this big guy for the small 70x50 images Address
then i can copy the images from this big image to 70x50 image buffer, so easily i can have 2 or more 400X1200pixels and my keys theme can be 2D or 3D and etc. so there is not need to write 500 LV_IMG_DECLARE(Image_70x50_000???); and make 500 .c files.1
is it possible?

#5

If I understand correctly, you essentially want to make a spritesheet with many small images on it? Yes; that’s possible. You can use the offset option to select what part of the image will be shown.

1 Like
#6

thank you i will try it.

#7 
    lv_obj_t * key;
    key = lv_cont_create(popKey->cont, NULL);
    lv_obj_set_size(key, 100, 100);

    lv_obj_t * imgTmp = lv_img_create(lv_scr_act(), NULL);
    lv_img_set_src(imgTmp, &BiG_Image_PNG);//Big_Image_PNG
    lv_img_set_offset_x(imgTmp, -70*2 -1);
    lv_img_set_offset_y(imgTmp, -50*1 -1);
    lv_obj_set_size(imgTmp, 70,50);

    lv_obj_t * imgbtn1;
    imgbtn1 = lv_imgbtn_create(key, NULL);
    lv_imgbtn_set_src(imgbtn1, LV_STATE_DEFAULT, lv_img_get_src(imgTmp));//get key's image
    lv_obj_align(imgbtn1, NULL, LV_ALIGN_IN_TOP_MID, GUIpopBtn_OFFSET_ImageText, GUIpopBtn_OFFSET_ImageText);

now i can show small icons from BiG_Image_PNG file and show by using imgTmp
BUT
when i load imgTmp as image source for
lv_imgbtn_set_src(imgbtn1, LV_STATE_DEFAULT, lv_img_get_src(imgTmp));//get key’s image
imgbtn show’s BiG_Image_PNG full size and wrong icon (ALSO i think eating HUGE RAM)
and imgbtn has no image offset setting to re-set the offsets.

i just need imgbtn show’s what i can see imgTmp show’s on lcd;
what can i do?

#8

I don’t think this feature is supported by image buttons right now.

1 Like
#9

i need to have animations, my question is: HOW can i have this type of animations


or CSS animations
i know, lvgl has a time base and i can display different frames for run an animation
like: static void img_looper(lv_task_t *param), BUT how can i generate this Link like animations Frames to show in looper?
is there any other way?
#10

This might be helpful: