Help/direction on dynamic images from a mobile application

How-to
1

Description

I know I can use the online image converter to convert a png to a C array and I know there is a offline version, but I can’t use that from iOS. I also know you can use a file but I only have SPI flash to use, which I think I can use based on this discussion. I read another thread about fabricating the data structure of the c array.

So I can either copy the file to SPI memory and somehow use the use the file method or try to fabricate the c array in some other way. I would think sending down the png file, storing the data in SPI, and somehow using it as a file method, since lvgl can interpret a png file.

Any direction or assets would be a great help.

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

Arduino, ST7789, nRF52, SPI

What LVGL version are you using?

8.3.5

What do you want to achieve?

I want to send a png via ble to my board and display it.

What have you tried so far?

I can convert the image to a C array using the online image converter and display it. I can connect to the board using ble and send a text message.

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(icon9);

lv_obj_t *gtLabel;
lv_obj_t *gtIcon;

void screen_message(char* blemessage)
{
  lv_obj_set_style_bg_color(lv_scr_act(), lv_color_black(), LV_PART_MAIN);

  gtIcon = lv_img_create(lv_scr_act());
  lv_obj_align(gtIcon, LV_ALIGN_CENTER, 0, 0);
  
  /*From variable*/
  lv_img_set_src(gtIcon, &icon9);

  //Create a white label, set its text and align it to the center
  gtLabel = lv_label_create(lv_scr_act());
  
  lv_label_set_text(gtLabel,blemessage);
  //lv_label_set_text(label,display_message);
  lv_obj_set_style_text_color(lv_scr_act(), lv_color_white(), LV_PART_MAIN);
  lv_obj_set_style_text_font(gtLabel,&lv_font_montserrat_24,0);
  //lv_obj_align(gtLabel, LV_ALIGN_CENTER, 0, 0);
  lv_obj_align_to(gtLabel, gtIcon, LV_ALIGN_OUT_TOP_MID, 0, -10);
}
2

I think the simplest thing would be if you write your own image converter. It’s really not that complicated. Just open the image, read all the pixels, convert them (if needed to the desired color format) and write them to a file or BLE.

3

Do you mean on the mobile side? Convert it and send it over ble to the board? I also have the desire to resize from a 50x50 to 150x150, do you think I could do that as a part of the process as well?

Is this an example of what you mean?

I’m not sure what “convert them” means. Does “read all the pixels” mean the image data itself as opposed to any header information?

4

Yes, I meant converting in the mobile app.

By “convert” I meant, that probably the image you open will have RGB888 or ARGB8888 color format (or BGR or ABGR, etc) so you need convert it to RGB565 (assuming that you have a 16 bit display) and also be sure the order of the color channels are correct.

By “read all the pixels”, yes, I mean the color of the pixels as a simple array. The header info still might be used to know the original color format and size of the image

5

Thank you. That gives me something to go on. I appreciate the help. Found a few resources:

1 Like
6

Just to confirm:

  1. Convert the png to RGB565 on the mobile app
  2. Send the image over ble to the device

I still need to save the file to SPI flash, correct? Do I still need to write my own image decoder? If so would the goal of the decoder be to read the png from spi flash?

If we had a way to do this could there be a 4th option here, like:

  • a variable in code (a C array with the pixels).
  • a file stored externally (e.g. on an SD card).
  • a text with Symbols.
  • a file from SPI flash

I don’t even know how to get one into SPI flash.