LittleVGL PNG Image Files vs C Array Issues, other graphics

tnoergaard · August 23, 2019, 5:28pm

LittleVGL PNG Image Files vs C Array Issues, other graphics

Hello Gabor, Thank you for your great support so far. As you recommended I am putting on the forum the remaining issues, and I could not upload the zip file on the forum for pc simulator demo project with the test code for you to look at (it said new forum users cannot upload anything, so let me know how I can upload to you the demo project or I can just copy and paste the code here if you prefer). We just added to your write-list-chart demo a few more screens of what we needed to be able to render with your API. BTW, please excuse that the test code for proof of concept is rough, it was just to be able to show you an example of the level of complexity we need per screen so we could determine if using your API was an option in our project. Issues as follows:

To your demo project added two test windows so you can see the type of graphics we will need to be able to run on our embedded device also see screen shot below). Mainly, it will be png images both in the body and push buttons with images loaded onto the buttons. If you remember when we tried to use the png decoder api with loading the files we ran into all the wierd problems, but as you guided we then used your online decoder to convert the png’s to C arrays, then your API work with what we need to be able to do. Is it possible to load the files directly (because we have a lot of png files for a lot of screens), or is the only option at this time is to convert them all into C arrays given what we need to be able to do?

When we used your guidance per email to import the png image (via converted C array) onto a button, we could not figure out how to make the button completely transparent. (as you will see in the code, we just made it the same color as the background) Is there a better way with your API?
When we import the PNG via your API (either as C Array or otherwise), can we manipulate anything about the image i.e., its size? Or the PNG has to be perfect, including its size to fit onto a button, before we import it for use in littleVGL.
I had to comment out some of the littleVGL code so the PC simulator demo would not crash. Also the demo project crashes unless I comment out lines relating to updating the chache in the lv_font_fmt_txt.c file 4 lines in static uint32_t get_glyph_dsc_id(const lv_font_t * font, uint32_t letter). Is this the PC simulator specific and port it to our embedded latform and see if it is still a problem?

‘’’/Update the cache/
//tamtest fdsc->last_letter = letter;
//tamtest fdsc->last_glyph_id = glyph_id;
return glyph_id;
}
//tamtest fdsc->last_letter = letter;
//tamtest fdsc->last_glyph_id = 0;
‘’’
Thank you Again, Tammy

embeddedt · August 23, 2019, 5:35pm

LittlevGL is not capable of scaling images at this time, so the image will need to be sized to fit your target screen.

Did you try setting the button to have an lv_style_transp style, or using an image button?

70% of the time, needing to comment out LittlevGL code means that you are using it incorrectly, not that something is wrong with LittlevGL. What code did you have to comment out?

tnoergaard · August 23, 2019, 8:51pm

Hi embeddedt Thank you for your time.

We will try using your suggestions for transparent buttons.

On the demo project crashing details. We opened Gabor’s demo.c project (with the three demos of the write-list-chart) on the PC simulator. It compiled Ok, but when we ran it through eclipse it crashed with a windows error. We used the debugger single stepping, and where it dies is in the function static uint32_t get_glyph_dsc_id(const lv_font_t * font, uint32_t letter) in the lv_font/lv_font_fmt_txt.c file for the latest version 6 download of littlevGL at the line ‘’‘fdsc->last_letter = letter’’’ after the comment update the cache.
Do you need the details regarding the problems we had with the png decoder when we tried importing the .png file and using the decoder32 functions, versus using a C array of the PNG?

Thank you again. Tammy

embeddedt · August 24, 2019, 12:30pm

Did you make any changes to it?

kisvegabor · August 24, 2019, 1:10pm

Hi Tammy,

You can use files too. Just place the file to the project’s root folder and:

    lv_obj_t * img = lv_img_create(lv_scr_act(), NULL);
    lv_img_set_src(img, "./test.png");   //On Windows probably you need '\'
    lv_obj_set_drag(img, true);

The png decoder uses fopen, fread etc, so you can use it directly on an embedded system.

However, LittlevGL has a built-in File system interface and lv_fs_if repo with example file system interfaces.

(The png decoder should be updated to optionally use LittlevGL’s general File system functions)

Do see what is the reason of the crash?

kisvegabor · August 24, 2019, 1:15pm

@tnoergaard
Take a look at this guide about Understanding Discourse Trust Levels
.
You just need to use a Fourm a little bit to get promoted

tnoergaard · August 27, 2019, 5:14pm

Thank you embeddedt. “Did you make any changes to it?” No. Just ran it as is after installing prior components as the instructions advice. Using a WIndows 7 Service Pack 1 based system.

tnoergaard · August 27, 2019, 5:29pm

Thank you Gabor.

Regarding loading a png file versus using its C array:

I just started now with basic test function that is loaded as another tab in your demo (where I need to be able to have a mouse). I made the change adding the ./ in front of the test png file name and I have checked that it is in the root project directory. The application crashes with a pc_simulator.exe has stopped working error if I run. Using the debugger the crash happens at line 607 in the the lv_fs_seek function call in function lv_img_decoder_built_in_line_alpha in lv_img_decoder.c file.

Function as follows:

static void biolaseInit_create2(lv_obj_t * parent)
{

   lv_obj_t * biolase_init_img;
   lv_page_set_style(parent, LV_PAGE_STYLE_BG, &lv_style_transp_fit);
   lv_page_set_style(parent, LV_PAGE_STYLE_SCRL, &lv_style_transp_fit);

   lv_page_set_sb_mode(parent, LV_SB_MODE_OFF);

   uint32_t error;                 /*For the return values of png decoder functions*/

   /*Decode the PNG image*/
   unsigned char * png_decoded;    /*Will be pointer to the decoded image*/
   uint32_t png_width;             /*Will be the width of the decoded image*/
   uint32_t png_height;            /*Will be the width of the decoded image*/

   /*Load the PNG file into buffer. It's still compressed (not decoded)*/
   unsigned char * png_data;      /*Pointer to the loaded data. Same as the original file just loaded into the RAM*/
   size_t png_data_size;          /*Size of `png_data` in bytes*/

   //load png of logo
   error = lodepng_load_file(&png_data, &png_data_size, "./png_decoder_test.png");   /*Load the file*/
   if(error)
   {
    printf("error %u: %s\n", error, lodepng_error_text(error));
    while(1);
   }

   /*Decode the loaded image in ARGB8888 */
   error = lodepng_decode32(&png_decoded, &png_width, &png_height, png_data, png_data_size);

   if(error) {
       printf("error %u: %s\n", error, lodepng_error_text(error));
       while(1);
   }

   /*Initialize an image descriptor for LittlevGL with the decoded image*/
   lv_img_dsc_t png_dsc;
   png_dsc.header.always_zero = 0;                          /*It must be zero*/
   png_dsc.header.cf = LV_IMG_CF_TRUE_COLOR_ALPHA;      /*Set the color format*/
   png_dsc.header.w = png_width;
   png_dsc.header.h = png_height;
   png_dsc.data_size = png_width * png_height * 4;
   png_dsc.data = png_decoded;

   /*Create an image object and set the decoded PNG image as it's source*/
   lv_obj_t * img_obj = lv_img_create(lv_scr_act(), NULL);     /*Create the an image object in LittlevGL*/
    lv_img_set_src(img_obj, &png_dsc);                          /*Set the image source to the decoded PNG*/
}

Using the PNG converted to a C array instead works perfectly each time:

static void biolaseInit_create(lv_obj_t * parent)
{

   lv_obj_t * biolase_init_img;
   lv_page_set_style(parent, LV_PAGE_STYLE_BG, &lv_style_transp_fit);
   lv_page_set_style(parent, LV_PAGE_STYLE_SCRL, &lv_style_transp_fit);

   lv_page_set_sb_mode(parent, LV_SB_MODE_OFF);

	/*Create an image object and set the decoded PNG image as it's source*/
	LV_IMG_DECLARE(png_decoder_test);
	biolase_init_img = lv_img_create(parent, NULL);     /*Create the an image object in LittlevGL*/
    lv_img_set_src(biolase_init_img, &png_decoder_test);                          /*Set the image source to the decoded PNG*/
}

Regarding the crash if I do not comment out code in function get_glyph_dsc_id file lv_font_fmt_txt.c, when I run the debugger and it crashes at line 154 with the error pc_simulator.exe has stopped working at the the line after the comment update the cache

fdsc->last_letter = letter;

Let me know if you need more information.

Thank you again. Tammy

kisvegabor · August 28, 2019, 2:06pm

Code formatting
I saw that you have tried to format the code but backtick (`) should be used instead of the apostrophe (').

Strange, It shouldn’t go to this function at all for PNG images.

You are using lodepng directly. Instead, you can just call png_decoder_init() after lv_init() and then lv_img_set_src(img, "./test.png"). LittlevGL will know from the png extension to use png decoder.

Why is it crashed here? What is the value of fdsc?

tnoergaard · August 28, 2019, 11:01pm

Hi Gabor, Thank you. The change for how to import the png image via file works now.

Regarding the overall crash if I do not comment out those lines in the littlevGL lib, please see image below from the debugger (I have included now the screen shot for the watch so you can see values of the various variable fields on far right, as well as the function calls that led to the segmentation fault on the far left.

Let me know if you need more information. Thank you again.

kisvegabor · August 29, 2019, 1:37pm

Do you use a built-in font or a custom one?

Do you use the latest version from the master branch?

tnoergaard · August 29, 2019, 11:22pm

Hi Gabor, Thank you. This happened just when we loaded your demo with the png decoder you emailed me (we had not yet added to your demo). Just to refresh since you may not remember me. We had downloaded the most recent littlevGl PC Simulator demo from a link on this littlevgl website and png decoder from this website as well. It did not build, so I had emailed. You then emailed me a different png decoder because the one from your website did not build and did support the littlevGl and pc simulator version downloaded from the link on your website. How can I determine the type of font in the demo code from your website? How can I determine if what I downloaded from the littlevGL site is the lastest version from the master branch? Thank you again. Tammy

kisvegabor · August 30, 2019, 9:01am

To be sure you are using the latest version you should update lvgl.

With Git: got to the lvgl folder, open a terminal and:

# to be sure you are not in a detached head state
git checkout master

#pull the latest version
git pull origin master

From GitHub: just download the project as zip and replace the content of the lvgl folder.

tnoergaard · September 4, 2019, 10:44pm

Hi Gabor, Thank you. Yes this was the problem, I was using the wrong version. We will now work on trying to get the same demo running on our embedded platform and will let you know if there are any further questions. Thank you again for the great support. Take Care, Tammy

kisvegabor · September 5, 2019, 6:38pm

Glad to hear that!

tnoergaard · January 22, 2020, 9:17pm

Hi Gabor, we have some test menus ready to try on our embedded platform (running over freeRTOS). We have the touch display working and I am working on integrating the lvgl directory from the pcsimulator project with the embedded compiler for that project. What other files do you recommend we use to integrate the touchscreen driver libs over freeRTOS to replace the windows PC simulator? Thank you again.

kisvegabor · January 24, 2020, 1:11pm

It depends on what kind of touch pad driver IC you have. You need to write a write a driver for your touch pad to replace the mouse of the PC.

If you have further questions about the integration, please open new topic to discuss it.

tnoergaard · January 24, 2020, 5:44pm

Hi Gabor, Thank you. Good news yes we got the touch pad and display drivers with the BSP and tested it with their test graphics library on the screen and it works. Now I want to replace their test graphics library (which is very basic) with littleVGL. I have the lvgl subdirectory compiling with the embedded compiler successfully, but which files do I need to port from the littleVGLsimulator pc test directory so when I call the littleVGL libraries to draw the same screens it will use our touch screen and display drivers instead of windows? The wrapper functions or BSP functions that I need to replace the windows APIS with the APIS from our driver libraries. Thank you again, Tammy

kisvegabor · January 31, 2020, 5:43am

Hi,

You need to do the following things:

copy your GUI related files as they are. (they are platform-independent.) I mean the files where you create the UI with lv_... functions.
Write your disp_flush_cb and indev_read_cb functions and call lv_tick_inc() (these are the interfaces to the hardware) . These are the interfaces to your hardware.
In main.c (or somewhere) call lv_init and create drivers for lvgl.

I suggest reading the Porting section of the documentation.

Does it answer you question?

tnoergaard · February 3, 2020, 5:55pm

Hi Gabor. Thank you. Will read your document now. When I grep’d through the simulator project, I found several lv_tick_inc calls, but no disp_flush_cb or index_read_cb functions. Are they called something else so I can see an example of how these are used? Thank you again.