Add Image to screen

How-to
1

Description

Simple and stupid. I would like to add a full screen image as a intro page, but do not get a picture. If I switch to a other screen with some text eveything works fine. In my case this is done by CLI for test use.

What LVGL version are you using?

V7.10.1

What do you want to achieve?

full size image on a new screen for a intro page.

What have you tried so far?

  • creat a new screen for the intro ( scr_intro = lv_obj_create(NULL, NULL); )

  • activate the screen ( lv_scr_load(scr_intro); )

  • add picture (see code below)

  • actual .jpg converted with https://lvgl.io/tools/imageconverter color format: True Color; Output format: C array, Dithering enabled

  • .c file copied to the project folder (next to the folder “LVGL”) and added the .c file to the project structure. (our project is organised with virtual folders, so does not represent 100% the real folder structure)

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

LV_IMG_DECLARE(jsc_intro); 

gui_init()
{
...

  lv_scr_load(scr_intro);

  lv_obj_t* img_intro = lv_img_create(scr_intro, NULL);
  lv_img_set_src(img_intro, &jsc_intro);
  lv_obj_set_pos(img_intro, 0, 0);
}

Thank you for your always great help. Its realy faszinating to see with what kind of passion you push forward lvgl.

2

If you don’t set the image source, do you see “No data” appearing on the screen? If not it sounds like the image is either not being created or being covered by another widget.

3

It’s all black, like the backgroundcolor. If I do add also some text to that screen the text is visible.

Because the text is visible, I would excluse coverage with something else.

How can I check the creation of the image?

4

You could confirm that img_intro is not NULL. Normally it would crash in that case, but some platforms have valid, writable memory at 0x0.

Another thing you can try is converting the JPEG with my new converter, which uses a different implementation under the hood. The old converter chokes on some less common image formats, whereas the new converter should work with every image your browser can display.

5

Unbenannt
Unbenannt1023Ă—615 32.9 KB

The img_intro is not NULL as you can see.

Also I converted the picture again with your new converter and added the file to the project. After that I included the file again and did a combile with a complete clean.

Still black with the now added text on top of the image.

6

Today I tryed it also with a complet other image, but still no luck.

This time the cords are more logic. Maybe is there something wrong on my side?

LV_IMG_DECLARE(test_img); 

static void gui_init(void)
{
  scr_intro = lv_obj_create(NULL, NULL);

  // some other things done in this place that is not connected with the image

  img_intro = lv_img_create(scr_intro, NULL);
  lv_img_set_src(img_intro, &test_img);
  lv_obj_set_size(img_intro, 160, 80);
  lv_obj_align(img_intro, NULL, LV_ALIGN_CENTER, 0, 0);

  // here is code for the labels that are visible

  lv_scr_load(scr_intro);
}

Unbenannt
Unbenannt1170Ă—614 37 KB

7

This is very puzzling. I don’t see anything wrong with your code. Have you noticed any other artifacts or things being cut off (that would suggest a driver issue)?

8

I have 4 other screens with mainly text that works totaly fine over our DMA based driver. I guess the driver that takes pixels does not care if I render text or a image?

Right now I tried my code in the simulator (in CodeBlocks). There it works fine with both pictures. So I conclude that the LVGL code and the image conversion is correct as you allready proved.

The MCU project structure is made with virtual folders, and the test_img.c file is also linked virtual next to the lvgl folder. Could it be that I have a problem there?

How could I make sure that the picture is not placed fare out of the display?

9

I doubt this is an issue since only the compiler cares about your project folder structure.

You can try lv_obj_set_pos(img, 0, 0), however I’m pretty sure (0,0) is the default position anyways.

10

Hello @Night,

did you solved this issue? I have completely same problem :confused:

I´m using ESP32 board with ILI9341 display and I´m using TFT_eSPI library.with in Arduino IDE. LVGL lib is in 7.11.0 version.

Here is my code for image:

  Serial.println("start of img part..");
  lv_obj_t * logo = lv_img_create(lv_scr_act(), NULL);
  lv_img_set_src(logo, &czm_logo);
  lv_obj_align(logo, NULL, LV_ALIGN_CENTER, 0, 0);
  Serial.println("end of img part..");

Here is trace log from serial monitor:

image
image751Ă—122 3.83 KB

Here is converted image file:czm_logo.c (1.5 MB)
I had to change it a bit to make it compile it.

Here is how it should look like:
image
Here is real result:

image
image376Ă—546 49.6 KB

Many thanks for reply.

11

No I still search for a solution. Does your code also work in the simulator, but not on the Hardware it selve?

12

Yes, exactly.

13

@kisvegabor or maybe @embeddedt, any thoughts on this pls? thx

14

Probably, the image is indexed and not RGB.
Open it in GIMP and change the image mode:

Untitled
Untitled909Ă—615 65.1 KB

15

Hmm… I wonder why it works on the simulator if it is indexed.

16

Oh, sorry for the noise.

@dronecz
Please post the original image.
Do you use the same color depth in the simulator and real hardware? If not please make them the same. Be sure LV_COLOR_16_SWAP is also set to the same value.

17

on-dark-color

Here is my logo.

Yes, I´m using this #define LV_COLOR_DEPTH 16 in both conf files.

EDIT: I see that picture have 32-bit depth.

1 Like
18

That’s interesting, because GIMP reports it as image.

However, I would expect it to fail on both the simulator and the real hardware if this were the case, especially if the color depths and SWAP values match.

It might be worth trying this image with the JS converter just to rule out the converter as the source of the problem, although this didn’t seem to help @Night.

19

I see this in file properties (under Windows). I will try to increase LV_COLOR_DEPTH and also I will try to convert image again.

20

It’s strange indeed.
I’ve exported the image with GIMP again. Please try to convert it.
on-dark-color

@Night
If you attach your original and converted image I can debug what happens.