Displaying image files

If you want to display an image file on the LCD, we should attach picture files in our program. For the demo, we will use picture files from the TFT library for the ESP32 library. These picture files can be found in the <project>/components/spiffs_image/image/images/ folder:

1. We will continue to work with the lcddemo project by copying the  disp_images() function from the TFT library into the ESP32 library. This function will show the following picture files: test1.jpg, test2.jpg, and test4.jpg.

We will load all of the images from mounted storage:

static void disp_images() {
...
    // ** Show scaled (1/8, 1/4, 1/2 size) JPG images
    TFT_jpg_image(CENTER, CENTER, 3, SPIFFS_BASE_PATH"/images/test1.jpg", NULL, 0);
    Wait(500);

    TFT_jpg_image(CENTER, CENTER, 2, SPIFFS_BASE_PATH"/images/test2.jpg", NULL, 0);
    Wait(500);

    TFT_jpg_image(CENTER, CENTER, 1, SPIFFS_BASE_PATH"/images/test4.jpg", NULL, 0);
    Wait(500);

Then, we will show JPG images to the LCD using the TFT_jpg_image() function:

  // ** Show full size JPG image
    tstart = clock();
    TFT_jpg_image(CENTER, CENTER, 0, SPIFFS_BASE_PATH"/images/test3.jpg", NULL, 0);
    tstart = clock() - tstart;
    if (doprint) printf(" JPG Decode time: %u ms\r\n", tstart);
    sprintf(tmp_buff, "Decode time: %u ms", tstart);
    update_header(NULL, tmp_buff);
    Wait(-GDEMO_INFO_TIME);

We will also show JPG images to the LCD using the TFT_bmp_image() function:

    // ** Show BMP image
    update_header("BMP IMAGE", "");
    for (int scale=5; scale >= 0; scale--) {
      tstart = clock();
      TFT_bmp_image(CENTER, CENTER, scale, SPIFFS_BASE_PATH"/images/tiger.bmp", NULL, 0);
      tstart = clock() - tstart;

  }
  else if (doprint) printf(" No file system found.\r\n");

If there is no picture file, we print No file system found on the Terminal:

else if (doprint) printf(" No file system found.\r\n");

1. Modify the tft_demo() function to call the disp_images() function, as follows:

void tft_demo() {

  .....

  // demo
  // disp_header("Welcome to ESP32");
  // circle_demo();

  disp_images();

  while (1) {
    // do nothing
  }
}

1. Save all files.
2. Compile and flash the program into the ESP32 board, as follows:

$ make flash

1. Compile our picture files as image files:

$ make makefs

1. Flash our image file into the ESP32 board:

$ make flashfs 

If this succeeds, you will see image files being displayed on the LCD. You can see a sample output in Figure 2-15:

Figure 2-15: Displaying a picture from the file

Now that we've played around with the LCD, let's take the final step toward creating our weather monitoring system.