Load/Display 2-colour image (B&W) any "normal" format


I need to know how to display a black and white image on a page/image object.

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

STM32F407VET6 “black” board, GNU compiler

What do you want to achieve?

I want to be able to read an image file from the SD card and display the black & white image. It needs to be B&W due to memory constraints on my current board. 300 x 200 pixel image.

What have you tried so far?

I’ve read the blog entry on https://blog.littlevgl.com/2018-10-05/png_converter
and this question here
How to load PNG file from sd card to lv_img's object?
And followed the instructions.

I’ve tried using the lodepng library and lv_img_set_src with the filename. I tried with an regular png and I ran out of memory. I tried with a B&W but it seemed to run out of memory anyway.

I’m using a 320 x 240 screen that works just fine for everything else.


You simply need to choose “Indexed 2 colors” in the Image converter and “Binary” output format. It’s a built-in format for lvgl so it should work out of the box.

Be sure the image already has indexed format for best quality.
I’m using GIMP to do this: Image->Mode->Indexed

Is this a bug in 6.0 then? I’m stuck on 6.0 for now because of the board I’m using.

Here is a minimal piece of code that is producing the problem - it shows “No data” in the place where the image should be.

void lvImgTestScreen(void)

	string filename = "/sda/image.bin";

    /* Create a new screen and load it
     * Screen can be created from any type object type
     * Now a Page is used which is an objects with scrollable content*/
    lv_obj_t * scr = lv_scr_act();

     * ADD A TITLE
    lv_obj_t * label = lv_label_create(scr, NULL); /*First parameters (scr) is the parent*/
    lv_label_set_text(label, "Img Test 0.1");  /*Set the text*/
    lv_obj_set_x(label, 50);                        /*Set the x coordinate*/

	debugMessage("creating image object");

	imageObject = lv_img_create(scr, NULL);

	debugMessage("loading image from file");

	lv_img_set_src(imageObject, filename.c_str());
	lv_obj_set_pos(imageObject, 0, 20);
	//lv_obj_set_drag(imageObject, true);

	debugMessage("done loading image from file.");

(debugMessage is a function I wrote to do printfs to my serial device. It works correctly.)

I’m using the FATFs code and I’ve used it successfully in another project, so I know that works.


OK - I discovered one part of the cause - apparently lv_img_set_src only recognizes a file name if it starts with a capital letter - using your file system handling rather than opening the file anyway.

I’ll see if I can get your file system handling to work in my code, but I do have another question related to this issue: If my LV_COLOR_DEPTH is set to 16 and my image is B&W, will it still take 16 bits per pixel in RAM?


Is this because you need to put a drive letter on the path?

I’m using file system handling from MBED OS, not LittlevGL’s file system handling, so my path names look like Unix paths, starting with /sda in this case.
I’m going to experiment with LittlevGL’s file system handling, but the handling in MBED OS just works without my needing to write a bunch of callbacks.

The problem is the processing of image path in lvgl used the lvgl’s file system. So it won’t work without a driver letters.
Take a look at the lv_fs_if repo which contains a FatFS and a PC interface. It would be awesome to extend it with other interfaces too. So contribution would be very welcome in it :slight_smile:

I’m using FatFS with MBED OS and it uses Unix-like paths.
I have it working using some additional code, but now I have a different issue: This is supposedly a black&white image, but it’s coming up yellow.

I’m attaching the source file that I passed to your image converter. It won’t let me attach the bin file your converter produced.
Source file - indexed, 1-bit colour


That’s strage, it works well for me in the simulator.
Could you try with C array output, instead of bin?