Help getting 41 images in an array to use based on a number (or download a .bin file to then use)

How-to
1

Hi all! I am working on an Arduino ESP32 project. My goal is to have a display on a beer tap handle that shows the beer name and information. I have 41 images that relate to the beer color (SRM) based on a value in a JSON retrieved from my server.

Right now, my ESP32 gets the JSON of my active beers, and it loads all the text perfectly. Where I am stuck is getting the image to appear. I converted them all to .bin files, and I was going to use the SRM value to call the correct .bin file name from SPIFFS, but I had trouble getting the file system to play nice, so I am skipping past this method.

I have now added all the images to my assets and had SquareLine export/declare them, so all are declared as ui_img_nsrm#_png, where # represents the SRM value I want to call (so a beer with an SRM of 4 would use ui_img_nsrm4_png). Since I cannot find how to pass a variable name for lv_img_set_src based on a constructed string (I really wish I could just use JavaScript, hah), I figure I could perhaps have all the images and their data put into an array, then the SRM level could correspond to the index in the array, then that data could be used to show the correct image.

Is there a method to do this in Arduino?

Alternatively, I could update my JSON response to include a URL to the corresponding image (either .bin or .png). From there, my ESP32 could retrieve the file from that URL, then LVGL could render the image. Where I am stuck is how to get the image stored in a way for LVGL to then render. Does anyone have an example of this approach or an idea on how to tackle it?

My least preferred approach here is to have a very long switch where a case of the SRM number calls lv_img_set_src with the corresponding image since it would just be a very long switch.

Thanks for any help or ideas!

2

Ah hah! Solved it myself. I am sharing this here in case anyone looks for this type of solution. Since all my filenames were similar and I forced SquareLine to export all the assets as .c files for compilation, I noticed this line in the ui.c file:

const lv_img_dsc_t * ui_imgset_nsrm[41] = {&ui_img_nsrm0_png, &ui_img_nsrm1_png, &ui_img_nsrm10_png, &ui_img_nsrm11_png, &ui_img_nsrm12_png, &ui_img_nsrm2_png, &ui_img_nsrm13_png, &ui_img_nsrm3_png, &ui_img_nsrm14_png, &ui_img_nsrm4_png, &ui_img_nsrm15_png, &ui_img_nsrm5_png, &ui_img_nsrm16_png, &ui_img_nsrm6_png, &ui_img_nsrm17_png, &ui_img_nsrm7_png, &ui_img_nsrm18_png, &ui_img_nsrm8_png, &ui_img_nsrm19_png, &ui_img_nsrm20_png, &ui_img_nsrm21_png, &ui_img_nsrm22_png, &ui_img_nsrm23_png, &ui_img_nsrm24_png, &ui_img_nsrm25_png, &ui_img_nsrm26_png, &ui_img_nsrm27_png, &ui_img_nsrm28_png, &ui_img_nsrm29_png, &ui_img_nsrm30_png, &ui_img_nsrm31_png, &ui_img_nsrm32_png, &ui_img_nsrm33_png, &ui_img_nsrm34_png, &ui_img_nsrm35_png, &ui_img_nsrm36_png, &ui_img_nsrm37_png, &ui_img_nsrm38_png, &ui_img_nsrm39_png, &ui_img_nsrm40_png, &ui_img_nsrm9_png};

Borrowing from it, I set a variable in my main Arduino code as follows:

const void * beerSRMSet[41] = {&ui_img_nsrm0_png, &ui_img_nsrm1_png, &ui_img_nsrm2_png, &ui_img_nsrm3_png, &ui_img_nsrm4_png, &ui_img_nsrm5_png, &ui_img_nsrm6_png, &ui_img_nsrm7_png, &ui_img_nsrm8_png, &ui_img_nsrm9_png, &ui_img_nsrm10_png,
&ui_img_nsrm11_png, &ui_img_nsrm12_png, &ui_img_nsrm13_png, &ui_img_nsrm14_png, &ui_img_nsrm15_png, &ui_img_nsrm16_png, &ui_img_nsrm17_png, &ui_img_nsrm18_png, &ui_img_nsrm19_png, &ui_img_nsrm20_png, 
&ui_img_nsrm21_png, &ui_img_nsrm22_png, &ui_img_nsrm23_png, &ui_img_nsrm24_png, &ui_img_nsrm25_png, &ui_img_nsrm26_png, &ui_img_nsrm27_png, &ui_img_nsrm28_png, &ui_img_nsrm29_png, &ui_img_nsrm30_png, 
&ui_img_nsrm31_png, &ui_img_nsrm32_png, &ui_img_nsrm33_png, &ui_img_nsrm34_png, &ui_img_nsrm35_png, &ui_img_nsrm36_png, &ui_img_nsrm37_png, &ui_img_nsrm38_png, &ui_img_nsrm39_png, &ui_img_nsrm40_png};

I had to play with it to make the variables all play nice, but this worked. Now when I select a beer from the roller (options based on JSON response), the beer data AND the image appear correctly.

In this case, an SRM of 0 can exist, so the first entry for the array (index of 0) matches the SRM I want, but in other applications, you may need to subtract 1 from the integer value to match the index (e.g., if you want an image that represents the number 5, that would be number 4 in the array index since the first number starts with 0).