Transparent image not displaying the the correct colors

[reso]

Description

I’m editing the lv printer demo as I really like the layout and the animations.
I’ve only edited the theme so far and the main page.

I replaced the button background with my own, but it’s not displaying as it should. I made the button image in Photopea and exported it as a PNG, then converted it online setting it to True Color with Alpha and output as C array.

All I did was declare the image just as the standard button images are declared and then changed the image source in the function that creates the four buttons.

To rule out an issue with the theme or any other code, I created a blank screen and loaded the image - same thing happened.

Perhaps there is an issue with the online image convertor, or with the output settings of the PNG image from Photopea?

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

PC Simulator

Screenshot and/or video

Here is the original PNG file I created on Photopea

And here is the output on the PC simulator

[Rhaoma]

Hi reso
I made an image button like so:

    lv_obj_t *  your_imgbtn = lv_imgbtn_create(lv_scr_act(), NULL);
    lv_obj_set_size                 (your_imgbtn, LV_HOR_RES, LV_VER_RES);
    lv_imgbtn_set_src               (your_imgbtn, LV_STATE_DEFAULT, &your_image);
    lv_obj_align                    (your_imgbtn, NULL, LV_ALIGN_CENTER, 0, 0);

This worked out fine for me and gave me this result, but only when I used my own custom image converter:

If i then used the public online image converter supplied by lvgl i got the same result as you.
(I tried with and without alpha)
So its most likely an issue with the online converter.

PS. the green is just my background and has nothing to do with the imgbtn
Hope i understood your problem correctly and I it helps.

[reso]

@Rhaoma Yes, it looks like you have confirmed there might be an issue with the online convertor!
@kisvegabor tagging you for attention

[embeddedt]

The online converter is known to have issues with certain PNG formats. In your case GIMP reports the PNG as being in indexed color format:

The PHP converter requires the PNG to be in standard RGB format (however, it can output an LVGL indexed image).

I am working on a new converter which won’t have this problem.

[reso]

@embeddedt to the rescue once again!

Meanwhiles, do have suggestions on how to alter the png from indexed colors to RGB so that I can use the current online convertor?

[embeddedt]

You can use GIMP and change it under Image -> Mode -> RGB or something like that.

[reso]

Thanks for the suggestion - resaving it with GIMP fixed it!