How to compress and de-compress the image

I have many image files as c_array in project.
It take a lot of space in memory.

Now I want to compress them (like zip file) and save into internal memory such as flash. When screen is drawed, I read compressed files from flash, de-compress them and display.
Is there that function(compress/de-compress the image) in LVGL library?
@kisvegabor

Best regards

Why don’t you use PNG files?

Thanks for your reply soon!

Above origin image files are in PNG.

I am using GUI Guider for creating UI.
As the Image widget, I added these png files, and generate source code.
Generated source code look like your sent page
at ## Use PNG images from flash.
So I think I am using png file.

Any method for reducing those files and not affect display quality when using. (As I talked above such as compress/de-compress)

I believe .png and .jpg files are highly compressed and there’s little you can do. But don’t take my word for it; try zipping a few files and see for yourself.

1 Like

I don’t know how to manage PNG files in GUI Guider.
Maybe adding a small placeholder image in GUI Guider and setting a png file manually in code?

@kisvegabor
Yes, GUI Guider will manage PNG and auto-create a c-array like this
image

May I ask you 3 questions?

  1. When I use below option, the value of header.w and h in generated c-array does not exist.
    Option
    image
    Generated c-array
    image

  2. I saw your png management project which included lodepng library.
    Can I manage png by using only LVGL library?

  3. In image convert website, there are many option.
    LVGL can be managed them?
    For ex, Index 2color, 4 color,… or binary RGB332, RGB888

Thanks for your information, I tried to zip and png size didn’t change, so surprised. :slight_smile:

This is a known bug in the PHP converter. It’s fixed in the newer JavaScript-based converter. Editing the file and setting the width and height to 0 yourself should also work.

LVGL does not include a PNG decoder; it relies on lodepng for that.

Any of the listed options except “Raw” should work out of the box.

@embeddedt
Thanks for you reply. I tested other options but raw, and It’s OK.

@embeddedt
I try to display PNG by c_array “raw” and “raw with alpha”
Below is my code
( I added LV_IMG_DECLARE(direction_raw_alpha) )

If I set w and h of direction_raw_alpha to { 0, 0 }, no image displayed
If I set w and h of direction_raw_alpha to its size { 100, 100 }, below image is displayed
image

In lv_png.c, _lv_img_decoder_t is used, but it is not existed in LVGL.
and I fixed to _lv_img_decoder, is it right?

@embeddedt
@kisvegabor
Could you support me above problem?

I think GuiGuider uses LVGL v7 so you need to use the release/v7 branch of lv_lib_png.

Please attach the original and the converted images to reproduce the issue.
And please also add the code above as text instead of an image.

Yes, GuiGuider is using LVGL v7.4.0
I tried to display PNG with release/v7, but above “No Data” image is displayed

I attached my packet (code & converted image)
setup_scr_screen.zip (10.1 KB)

Thanks for your support!

@kisvegabor
Could you reproduce and help me fix this problem?
Display image from PNG sounds good, but I can not seem to do it.

I’ve tried your code and it’s working for me.

I suggest that with the help of a debugger check what happens in decoder_info() and decoder_open() in lv_png.c.

Thanks for you reproduce!
I will check decoder_info() and decoder_open() in lv_png.c as your suggest.

Hi @kisvegabor

I debug above code.
In decoder_open()
/*Decode the image in ARGB8888 */
error = lodepng_decode32(…)
At here I got an error, error number = 28
“incorrect PNG signature, it’s no PNG or corrupted”

I used your png data png_decoder_test.c
Did I miss anything such as #define in lv_conf.h when use lv_png library?

Hi @kisvegabor
Could you support me this issue?

Hm, it should work. The PNG signature means that the first few bytes of the file/array should be fixed.

Remotely I have no idea what could be the problem. :frowning:

I suggest continue debugging in the lodepng and the signature check.

You can use the built-in functions provided by LVGL to compress and decompress image files. This will help reduce memory usage and enable efficient storage and retrieval of images from flash memory you can visit LVGL documentation for better understanding and for manually image compression you can go through the any online application such as https://jpegcompressor.com/ it compresses the image efficiently without losing their quality.