How to compress and de-compress the image

nguyenan-ble1 · June 23, 2021, 10:45am

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

kisvegabor · June 23, 2021, 10:50am

Why don’t you use PNG files?

nguyenan-ble1 · June 23, 2021, 11:22am

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)

bewing · June 23, 2021, 8:15pm

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.

kisvegabor · June 25, 2021, 1:08pm

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?

nguyenan-ble1 · June 28, 2021, 1:48am

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

May I ask you 3 questions?

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

Generated c-array
I saw your png management project which included lodepng library.
Can I manage png by using only LVGL library?
In image convert website, there are many option.
LVGL can be managed them?
For ex, Index 2color, 4 color,… or binary RGB332, RGB888

nguyenan-ble1 · June 28, 2021, 1:49am

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

embeddedt · June 28, 2021, 1:43pm

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.

nguyenan-ble1 · June 29, 2021, 1:12am

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

nguyenan-ble1 · June 29, 2021, 5:32am

@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

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?

nguyenan-ble1 · July 5, 2021, 6:32am

@embeddedt
@kisvegabor
Could you support me above problem?

kisvegabor · July 7, 2021, 2:33pm

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.

nguyenan-ble1 · July 8, 2021, 1:51am

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!

nguyenan-ble1 · July 26, 2021, 8:15am

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

kisvegabor · July 28, 2021, 11:29am

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.

nguyenan-ble1 · August 2, 2021, 4:13am

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

nguyenan-ble1 · October 8, 2021, 11:53am

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?

nguyenan-ble1 · October 19, 2021, 4:32am

Hi @kisvegabor
Could you support me this issue?

kisvegabor · October 20, 2021, 1:58pm

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.

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

Ushavilahs · March 8, 2024, 7:32am

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.