PNG Button for tft_espi

Other Hardware Displays
1

Hi everyone. So im making a touch screen button for a project using a iLi9488. Everything is working fine so far, the problem is i suck at logic and syntax. So ive successfully managed to get the screen working and got the button on the screen too. I dont know what to do in order to move the image into the desired area of the screen i want(Middle). Currently the button is stuck on the left top corner.

IMG20221017154643
IMG202210171546431920×2560 379 KB

as for the program im using here it is:

#include <PNGdec.h>// Include the PNG decoder library
#include "green.h"
PNG png; //PNG decoder instance



#define MAX_IMAGE_WIDTH 500    // 240 was before         // for new image 240 isn't working but 700 is

int16_t xpos = 0;
int16_t ypos = 0;



#include "SPI.h"
#include <TFT_eSPI.h>              // Hardware-specific library
TFT_eSPI tft = TFT_eSPI();         // Invoke custom library







void setup() {
 Serial.begin(115200);
  Serial.println("\n\n Using the PNGdec library");
   tft.setRotation(1);
  // Initialise the TFT
  tft.begin();
  tft.fillScreen(TFT_BLACK);   // command for lcd screen
  //tft.setCursor(download_png_Greeb_start_removebg_preview, 120, 200); 
int x = 60;
  int y = 10;

  
  
  Serial.println("\r\nInitialisation done."); // put your setup code here, to run once:

}

void loop() {
   int16_t rc = png.openFLASH((uint8_t *)download_png_Greeb_start_removebg_preview, sizeof(download_png_Greeb_start_removebg_preview), 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(000);
 // put your main code here, to run repeatedly:

}
void pngDraw(PNGDRAW *pDraw) {
  uint16_t lineBuffer[MAX_IMAGE_WIDTH];
  png.getLineAsRGB565(pDraw, lineBuffer, PNG_RGB565_BIG_ENDIAN, 0xffffffff);
  tft.pushImage(xpos, ypos + pDraw->y, pDraw->iWidth, 1, lineBuffer);   // y
}

also i havent included the array which is being used for conversion of the PNGPreformatted text

2

Welcome to the forum

Could the answer be in these 2 values ?

int16_t xpos = 0;
int16_t ypos = 0;
1 Like
3 
int16_t xpos = 0;
int16_t ypos = 0;
...
void pngDraw(PNGDRAW *pDraw) {
  uint16_t lineBuffer[MAX_IMAGE_WIDTH];
  png.getLineAsRGB565(pDraw, lineBuffer, PNG_RGB565_BIG_ENDIAN, 0xffffffff);
  tft.pushImage(xpos, ypos + pDraw->y, pDraw->iWidth, 1, lineBuffer);   // y
}

i.e. the PNG image is drawn at (0, 0)
if you want it drawn somewhere else you need to change xpos and ypos

Take a piece of paper. Draw a 480x320 rectangle.
Draw the image rectangle where you want it.

Then calculate the "top left hand corner" for xpos and ypos.
e.g. using tft.width() and png.getWidth()

Seriously. Pencil and paper is the best way to visualise the pixel position. And how to calculate it.

David.

1 Like
5

Nice it worked! tried it the first time too. Dont know why it didnt work before....Thank you very much :slight_smile:

6

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