About png image shown question need help

Hi everyone.
the example from TFT_eSPI library of [Flash_PNG] works well and shown a panda, if I convert another picture of a dog into the Hex(0x00) and replaced the code of panda, just not show, why?
panda_png.h (678.9 KB)
dog.h (6.7 KB)

Used Arduino ESP32 + GC9A01.
Thanks
Adam

the panda and dog attached.

// This example renders a png file that is stored in a FLASH array
// using the PNGdec library (available via library manager).

// Include the PNG decoder library
#include <PNGdec.h>
#include "panda_png.h" // Image is stored here in an 8 bit array
//// #include "duck_png.h" // Image is stored here in an 8 bit array
//#include "m2_png.h" // Image is stored here in an 8 bit array

PNG png; // PNG decoder inatance

#define MAX_IMAGE_WDITH 240 // Adjust for your images

int16_t xpos = 0;
int16_t ypos = 0;

// Include the TFT library https://github.com/Bodmer/TFT_eSPI
#include "SPI.h"
#include <TFT_eSPI.h>              // Hardware-specific library
TFT_eSPI tft = TFT_eSPI();         // Invoke custom library

//====================================================================================
//                                    Setup
//====================================================================================
void setup()
{
  Serial.begin(115200);
  Serial.println("\n\n Using the PNGdec library");

  // Initialise the TFT
  tft.begin();
  tft.fillScreen(TFT_BLACK);

  Serial.println("\r\nInitialisation done.");
}

//====================================================================================
//                                    Loop
//====================================================================================
void loop()
{
  int16_t rc = png.openFLASH((uint8_t *)panda_png, sizeof(panda_png), pngDraw);
////  int16_t rc = png.openFLASH((uint8_t *)duck_png, sizeof(duck_png), pngDraw);
////  int16_t rc = png.openFLASH((uint8_t *)m2_png, sizeof(m2_png), pngDraw);
  if (rc == PNG_SUCCESS) {
    Serial.println("Successfully png file");
    Serial.printf("image specs: (%d x %d), %d bpp, pixel type: %d\n", png.getWidth(), png.getHeight(), png.getBpp(), png.getPixelType());
    tft.startWrite();
    uint32_t dt = millis();
    rc = png.decode(NULL, 0);
    Serial.print(millis() - dt); Serial.println("ms");
    tft.endWrite();
    // png.close(); // not needed for memory->memory decode
  }
  delay(3000);
  tft.fillScreen(random(0x10000));
}


//=========================================v==========================================
//                                      pngDraw
//====================================================================================
// This next function will be called during decoding of the png file to
// render each image line to the TFT.  If you use a different TFT library
// you will need to adapt this function to suit.
// Callback function to draw pixels to the display
void pngDraw(PNGDRAW *pDraw) {
  uint16_t lineBuffer[MAX_IMAGE_WDITH];
  png.getLineAsRGB565(pDraw, lineBuffer, PNG_RGB565_BIG_ENDIAN, 0xffffffff);
  tft.pushImage(xpos, ypos + pDraw->y, pDraw->iWidth, 1, lineBuffer);
}

Well for a start you are missing the bit of the code in your dog file
#include <pgmspace.h> const uint8_t panda_png[] PROGMEM = {

You are also missing the png file header.

This explains what a png file consists of:-
PNG file format

Because what you have is not a .png format file.
That link says

The first eight bytes of a PNG file always contain the following (decimal) values:

{{{137 80 78 71 13 10 26 10 }}}

They don't have to be decimal, hex will do fine. So that would mean the first eight bytes of your dog file should be the first eight bytes of your dog file, but they are not.
There are other things about headers in that link you need to know as well.

1 Like

Thank you Grumpy_Mike.

I just replaced the 4 bit code section and keep all other no change, just pretend nothing changed. cause of all the 4 bit code just look like same (0x00) ?

the dog..h attached was converted by:

and picture was converted from jpg into png first and then convert it into Hex array.


The first eight bytes of a PNG file always contain the following (decimal) values:
{{{137 80 78 71 13 10 26 10 }}}
So in Hex this is:-
0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A

The first eight byte of your panda file is indeed
0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A,

But the first eight bytes of your Dog file is
0x35, 0x79, 0xc5, 0x41, 0x80, 0xc4, 0x4a, 0x85,

So therefore the File to C style array is not doing what you think it is doing. It is not producing a png file, despite what the software promised. It is simply not working.

Or else you did something wrong. I see the file was called dog_t4_png.png maybe it got mangled with your renaming and converting. Or maybe you picked the wrong Palette option. Or something else.

2 Likes

Great!
Thank you Grumpy_Mike.
it is the converter selection question.

BTW: I found a converter which produced: 0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A, for my image, but still doesn't show on GC9A01. don't know why?

what's the first eight bytes of a JPEG file?

possiblely to use #include <PNGdec.h> to do convert? or any specific converter for PNGdec.h ?

shanren I have the same issue. I can't seem to find a simple set on instructions to prepare a source .png file for use with pngdec. I'd like to know what works, I've done teh same steps as you have

1 Like

If I remember well, I used the below link did it:

File to hex converter (tomeko.net)

Hi Yes I used that one, I'm not sure what PNG format the source image has to be., tried 8bit and no luck just flashes black and white n the ESP32 with 480 by 320 display I have

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