Display Images from FLASH

Arduino: Displaying images from FLASH

In the most general case, GUIslice usually loads image data (for images or image-based buttons) from an SD card incorporated within the display. However, it may be desirable to store the image data in FLASH memory instead of on an SD card. The primary savings is in the way of RAM since including support for the SD card driver can consume over 1kB.

An example (/examples/arduino/ex28_ard_btn_img_flash) has been created to demonstrate how users can load these images.

Converting images to C array

In order to prepare images for storage in FLASH memory, they need to be converted into a C array suitable for inclusion into the sketch.

Easiest Method: GUIslice_Image2C

Paul has written one specifically for GUIslice here:

• GUIslice_Image2C

The nice thing about this utility is that the output should be ready for use within GUIslice without hand-edits.

Alternate Method

There are a number of other utilities that can convert images (BMP, PNG, GIF, etc.) into C arrays, including:

• UTFT's ImageConverter
• GIMP
• Riuson's LCD Image Converter (GitHub)

Note that the output from these utilities may require some hand-editing to ensure the format is correct (see below).

Example conversion with UTFT ImageConverter

For the purposes of this walkthrough, the process with UTFT's ImageConverter will be used:

• Click on Browse... and navigate to the .png, .jpg or .gif file
• Ensure .c file is selected
• Click on Make File
• A new page will be presented with the resulting output file for download. Click on the link to download .c file.

A couple modifications will be necessary for the generated file to be used:

• Modify the includes
• Change the image array type
• Insert the image dimensions and increase the array size accordingly

Replace the lines between #if defined(__AVR__) and #endif with the following:

#include "GUIslice.h"
#include "GUIslice_config.h"
#if (GSLC_USE_PROGMEM)
  #include <avr/pgmspace.h>
#endif

Now change the array declaration line:

• From:

const unsigned short <image_name>[1024] PROGMEM={
<image data here> ... 0x0000, ...

• To:

const unsigned short <image_name>[1024+2] GSLC_PMEM ={
32, // Height of image
32, // Width of image
<image data here> ... 0x0000, ...

In the above, note that:

• PROGMEM was replaced by GSLC_PMEM
• 2 was added to the image array size
• Two new values were inserted before the image data: the height and width in pixels

Example output after modification: