How to show the const uint8_t images?

Projects Programming
1

Hi all.

I extracted an image file : const uint8_t gradient_count_map
from: GitHub - lvgl/lvgl_esp32_drivers: Drivers for ESP32 to be used with LVGL
and try to show on ESP32_ILI9341 by TFT_eSPI.h and failed.

EXAMPLE: TFT_eSPI / 160x128 / TFT_flash_jpg

I tested the example TFT_flash_jpg which works well, and then replaced jpeg4.hs image code by copy/ paste, resulted rebooting, why?

is there other way to show this jpeg file?
or how to show GPS points on a map?

Thanks
Adam

extracted image file is too large to paste here, and attached.

const uint8_t gradient_count_map.txt (301.1 KB)

2

There is no such format "const uint8_t image". Your color map is just an array of bytes (uint8_t). In order to display it, the code must to know how to handle the data.
According to the name, the TFT_flash_jpg works with JPG image format, which is completely different with your color map byte array.

The first thing you need to do is figure out what format the data in this file is presented in. Having understood this, you can try to find a method for displaying it on the screen

2 Likes
3

From what file in the above link did you extract this data?

const uint8_t gradient_count_map[] = {
  /*Pixel format: Red: 5 bit, Green: 6 bit, Blue: 5 bit BUT the 2 bytes are swapped*/
  0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x46, 0xd9, 0x46, 0xd9, 0x46, 0xd9, 0x46, 0xe1, 0x46, 0xe1, 0x46, 0xe1, 0x46, 0xe1, 0x46, 0xe1, 0x46, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x65, 0xe9, 0x65, 0xe9, 0x65, 0xe9, 0x65, 0xe9, 0x65, 0x70, 0xf2, 0x20, 0x9a, 0x20, 0x9a, 0x20, 0x9a, 0x20, 0x99, 0x20, 0x99, 0x20, 0x99, 0x20, 0x99, 0x20, 0x99, 0x20, 0x99, 0x20, 0x99, 0x28, 0x99, 0x28, 0x99, 0x28, 0x99, 0x28, 0x99, 0x28, 0x99, 0x28, 0x99, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb8, 0x28, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x38, 0xb8, 0x38, 0xb8, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 
  0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x48, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd1, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x47, 0xd9, 0x46, 0xd9, 0x46, 0xd9, 0x46, 0xd9, 0x46, 0xd9, 0x46, 0xe1, 0x46, 0xe1, 0x46, 0xe1, 0x46, 0xe1, 0x46, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x66, 0xe1, 0x65, 0xe9, 0x65, 0xe9, 0x65, 0xe9, 0x65, 0xe9, 0x65, 0x68, 0xf2, 0x20, 0x9a, 0x20, 0x9a, 0x20, 0x9a, 0x20, 0x99, 0x20, 0x99, 0x20, 0x99, 0x20, 0x99, 0x20, 0x99, 0x20, 0x99, 0x20, 0x99, 0x28, 0x99, 0x28, 0x99, 0x28, 0x99, 0x28, 0x99, 0x28, 0x99, 0x28, 0x99, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb9, 0x28, 0xb8, 0x28, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x30, 0xb8, 0x38, 0xb8, 0x38, 0xb8, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 0x38, 0xb7, 
...
1 Like
4

Thanks.

5

Thanks.
The map files sit in 'WatchTft' folder.

6

There is no "WatchTft" folder at the GitHub page that you linked in your first post:

image
image822×568 30.7 KB

1 Like
7

I am sorry to paste a wrong link, thank you for point it.
the right link is here:

and the 'WatchTft' inside main.

8

So here:

1 Like
9

Thanks.
how to show this image on ESP32+ILI9341?

not possible?

10

It's possible, but not as easy as you might expect.
There is no ready-made function for displaying an image in this format in the TFT_eSPI library, you will have to write it yourself. However, there is good news - there are many examples of such a output on the Internet. For example, see the project ESP32 DHT11 Weather Monitoring on TFT Touch Display
Function drawIcon()

//====================================================================================
// This is the function to draw the icon stored as an array in program memory (FLASH)
//====================================================================================
 
// To speed up rendering we use a 64 pixel buffer
#define BUFF_SIZE 64
 
// Draw array "icon" of defined width and height at coordinate x,y
// Maximum icon size is 255x255 pixels to avoid integer overflow
 
void drawIcon(const unsigned short *icon, int16_t x, int16_t y, int8_t width, int8_t height)
{
 
  uint16_t pix_buffer[BUFF_SIZE]; // Pixel buffer (16 bits per pixel)
 
  tft.startWrite();
 
  // Set up a window the right size to stream pixels into
  tft.setAddrWindow(x, y, width, height);
 
  // Work out the number whole buffers to send
  uint16_t nb = ((uint16_t)height * width) / BUFF_SIZE;
 
  // Fill and send "nb" buffers to TFT
  for (int i = 0; i < nb; i++)
  {
    for (int j = 0; j < BUFF_SIZE; j++)
    {
      pix_buffer[j] = pgm_read_word(&icon[i * BUFF_SIZE + j]);
    }
    tft.pushColors(pix_buffer, BUFF_SIZE);
  }
 
  // Work out number of pixels not yet sent
  uint16_t np = ((uint16_t)height * width) % BUFF_SIZE;
 
  // Send any partial buffer left over
  if (np)
  {
    for (int i = 0; i < np; i++)
      pix_buffer[i] = pgm_read_word(&icon[nb * BUFF_SIZE + i]);
    tft.pushColors(pix_buffer, np);
  }
 
  tft.endWrite();
}
1 Like
11

Thank you b707 for your info.

It's true that the lvgl shown images used image sprite, and I've tested the link code works well shown a yellow triangle warning sign.

it shown const unsigned short *icon images well but can't show const uint8_t *icon format images which is my headache here.

Best.

12

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.