PICO ZERO -> SD card + TFT -> Jpeg display working!!

[TangerineDreamer]

Recently i came across difficulties to make the sd card displaying jpeg on tft using esp32

I transformed an old sketch with pico zero wich list all files on a sd card and was nicely working,but this time
the jpeg are well showned on the tft.
of course you have to install first the pico boards with the philhower library:
https://github.com/earlephilhower/arduino-pico

1 -> the user setup:

//IILI9488 & SD CARD & PICO ZERO (2 SPI MODULES)

//#define ST7796_DRIVER
//#define ILI9341_DRIVER
#define ILI9488_DRIVER

//TFT Pins (HSPI)
#define TFT_MISO 0
#define TFT_MOSI 3
#define TFT_SCLK 2
#define TFT_CS   5  // Chip select control pin
#define TFT_DC    27  // Data Command control pin
#define TFT_RST   26  // Reset pin (could connect to RST pin)
//#define TFT_RST  -1  // Set TFT_RST to -1 if display RESET is connected to ESP32 board RST



//Touch Pins (HSPI)
#define TOUCH_DO 0 
#define TOUCH_DIN 3 
#define TOUCH_CLK 2
#define TOUCH_CS 28//Chip select pin (T_CS) of touch screen


//SD Card Pins (VSPI)
#define SD_MISO 12 //SD PINS
#define SD_MOSI 11
#define SD_SCLK 10
#define SD_CS   9                




#define LOAD_GLCD   // Font 1. Original Adafruit 8 pixel font needs ~1820 bytes in FLASH
#define LOAD_FONT2  // Font 2. Small 16 pixel high font, needs ~3534 bytes in FLASH, 96 characters
#define LOAD_FONT4  // Font 4. Medium 26 pixel high font, needs ~5848 bytes in FLASH, 96 characters
#define LOAD_FONT6  // Font 6. Large 48 pixel font, needs ~2666 bytes in FLASH, only characters 1234567890:-.apm
#define LOAD_FONT7  // Font 7. 7 segment 48 pixel font, needs ~2438 bytes in FLASH, only characters 1234567890:-.
#define LOAD_FONT8  // Font 8. Large 75 pixel font needs ~3256 bytes in FLASH, only characters 1234567890:-.
//#define LOAD_FONT8N // Font 8. Alternative to Font 8 above, slightly narrower, so 3 digits fit a 160 pixel TFT
#define LOAD_GFXFF  // FreeFonts. Include access to the 48 Adafruit_GFX free fonts FF1 to FF48 and custom fonts

// Comment out the #define below to stop the SPIFFS filing system and smooth font code being loaded
// this will save ~20kbytes of FLASH
#define SMOOTH_FONT

#define SPI_FREQUENCY  27000000

// Optional reduced SPI frequency for reading TFT
#define SPI_READ_FREQUENCY  20000000

// The XPT2046 requires a lower SPI clock rate of 2.5MHz so we define that here:
#define SPI_TOUCH_FREQUENCY  2500000

#define USE_HSPI_PORT

2 -> the sketch:

// This sketch if for an ESP32, it draws Jpeg images pulled from an SD Card
// onto the TFT.

// As well as the TFT_eSPI library you will need the JPEG Decoder library.
// A copy can be downloaded here, it is based on the library by Makoto Kurauchi.
// https://github.com/Bodmer/JPEGDecoder

// Images on SD Card must be put in the root folder (top level) to be found
// Use the SD library examples to verify your SD Card interface works!

// The example images used to test this sketch can be found in the library
// JPEGDecoder/extras folder

// -> PICO & PICO ZERO COMPATIBLE,Select flash size with FS!!!
//----------------------------------------------------------------------------------------------------

#include<FS.h>
#include <SD.h>
#include <SPI.h>
#include <TFT_eSPI.h>
// Create the screen object
TFT_eSPI tft = TFT_eSPI();

    

#include <JPEGDecoder.h>

//####################################################################################################
// Setup
//####################################################################################################
void setup() {
  Serial.begin(115200);
  
  tft.begin();

   if (!SD.begin(SS, SPI1)) {
    Serial.println("initialization failed!");
    tft.println("initialization failed!");
    while (1);
  }
  
 
  Serial.println("initialisation done.");
}

//####################################################################################################
// Main loop
//####################################################################################################
void loop() {

  tft.setRotation(2);  // portrait
  tft.fillScreen(random(0xFFFF));

  // The image is 300 x 300 pixels so we do some sums to position image in the middle of the screen!
  // Doing this by reading the image width and height from the jpeg info is left as an exercise!
  int x = (tft.width()  - 300) / 2 - 1;
  int y = (tft.height() - 300) / 2 - 1;

  drawSdJpeg("/EagleEye.jpg", x, y);     // This draws a jpeg pulled off the SD Card
  delay(2000);

  tft.setRotation(2);  // portrait
  tft.fillScreen(random(0xFFFF));
  drawSdJpeg("/Baboon40.jpg", 0, 0);     // This draws a jpeg pulled off the SD Card
  delay(2000);

  tft.setRotation(2);  // portrait
  tft.fillScreen(random(0xFFFF));
  drawSdJpeg("/lena20k.jpg", 0, 0);     // This draws a jpeg pulled off the SD Card
  delay(2000);

  tft.setRotation(1);  // landscape
  tft.fillScreen(random(0xFFFF));
  drawSdJpeg("/Mouse480.jpg", 0, 0);     // This draws a jpeg pulled off the SD Card

  delay(2000);

  while(1); // Wait here
}

//####################################################################################################
// Draw a JPEG on the TFT pulled from SD Card
//####################################################################################################
// xpos, ypos is top left corner of plotted image
void drawSdJpeg(const char *filename, int xpos, int ypos) {

  // Open the named file (the Jpeg decoder library will close it)
  File jpegFile = SD.open( filename, FILE_READ);  // or, file handle reference for SD library
 
  if ( !jpegFile ) {
    Serial.print("ERROR: File \""); Serial.print(filename); Serial.println ("\" not found!");
    return;
  }

  Serial.println("===========================");
  Serial.print("Drawing file: "); Serial.println(filename);
  Serial.println("===========================");

  // Use one of the following methods to initialise the decoder:
  bool decoded = JpegDec.decodeSdFile(jpegFile);  // Pass the SD file handle to the decoder,
  //bool decoded = JpegDec.decodeSdFile(filename);  // or pass the filename (String or character array)

  if (decoded) {
    // print information about the image to the serial port
    //jpegInfo();
    // render the image onto the screen at given coordinates
    jpegRender(xpos, ypos);
  }
  else {
    Serial.println("Jpeg file format not supported!");
  }
}

//####################################################################################################
// Draw a JPEG on the TFT, images will be cropped on the right/bottom sides if they do not fit
//####################################################################################################
// This function assumes xpos,ypos is a valid screen coordinate. For convenience images that do not
// fit totally on the screen are cropped to the nearest MCU size and may leave right/bottom borders.
void jpegRender(int xpos, int ypos) {
  

  uint16_t *pImg;
  uint16_t mcu_w = JpegDec.MCUWidth;
  uint16_t mcu_h = JpegDec.MCUHeight;
  uint32_t max_x = JpegDec.width;
  uint32_t max_y = JpegDec.height;

  bool swapBytes = tft.getSwapBytes();
  tft.setSwapBytes(true);
  
  // Jpeg images are draw as a set of image block (tiles) called Minimum Coding Units (MCUs)
  // Typically these MCUs are 16x16 pixel blocks
  // Determine the width and height of the right and bottom edge image blocks
  uint32_t min_w = jpg_min(mcu_w, max_x % mcu_w);
  uint32_t min_h = jpg_min(mcu_h, max_y % mcu_h);

  // save the current image block size
  uint32_t win_w = mcu_w;
  uint32_t win_h = mcu_h;

  // record the current time so we can measure how long it takes to draw an image
  uint32_t drawTime = millis();

  // save the coordinate of the right and bottom edges to assist image cropping
  // to the screen size
  max_x += xpos;
  max_y += ypos;

  // Fetch data from the file, decode and display
  while (JpegDec.read()) {    // While there is more data in the file
    pImg = JpegDec.pImage ;   // Decode a MCU (Minimum Coding Unit, typically a 8x8 or 16x16 pixel block)

    // Calculate coordinates of top left corner of current MCU
    int mcu_x = JpegDec.MCUx * mcu_w + xpos;
    int mcu_y = JpegDec.MCUy * mcu_h + ypos;

    // check if the image block size needs to be changed for the right edge
    if (mcu_x + mcu_w <= max_x) win_w = mcu_w;
    else win_w = min_w;

    // check if the image block size needs to be changed for the bottom edge
    if (mcu_y + mcu_h <= max_y) win_h = mcu_h;
    else win_h = min_h;

    // copy pixels into a contiguous block
    if (win_w != mcu_w)
    {
      uint16_t *cImg;
      int p = 0;
      cImg = pImg + win_w;
      for (int h = 1; h < win_h; h++)
      {
        p += mcu_w;
        for (int w = 0; w < win_w; w++)
        {
          *cImg = *(pImg + w + p);
          cImg++;
        }
      }
    }

    // calculate how many pixels must be drawn
    uint32_t mcu_pixels = win_w * win_h;

    // draw image MCU block only if it will fit on the screen
    if (( mcu_x + win_w ) <= tft.width() && ( mcu_y + win_h ) <= tft.height())
      tft.pushImage(mcu_x, mcu_y, win_w, win_h, pImg);
    else if ( (mcu_y + win_h) >= tft.height())
      JpegDec.abort(); // Image has run off bottom of screen so abort decoding
  }

  tft.setSwapBytes(swapBytes);

  
}

I erased all what i don't need from the former sketch "ESP32_SDcard_jpeg)"
and especially the "sd card type" wich seems to be depreciated from SD.h,
if someone can look at and find why it's not recognized...
Then i'll have a look to see how to make it working with esp32 if i'm lucky :)

3 -> bonus: the sketch wich list all files from a sd card (pico zero,sd card & tft)

/*SETUP PINS:
//TFT Pins (HSPI)
#define TFT_MISO 0
#define TFT_MOSI 3
#define TFT_SCLK 2
#define TFT_CS   5  // Chip select control pin
#define TFT_DC    27  // Data Command control pin
#define TFT_RST   26  // Reset pin (could connect to RST pin)
//#define TFT_RST  -1  // Set TFT_RST to -1 if display RESET is connected to ESP32 board RST

//Touch Pins (HSPI)
#define TOUCH_DO 0 
#define TOUCH_DIN 3 
#define TOUCH_CLK 2
#define TOUCH_CS 28//Chip select pin (T_CS) of touch screen

//SD Card Pins (VSPI)
#define SD_MISO 12 //SD PINS
#define SD_MOSI 11
#define SD_SCLK 10
#define SD_CS   9                 
*/
// -> PICO & PICO ZERO COMPATIBLE,Select flash size with FS!

//#include "Arduino.h"
//#include "LittleFS.h"

#include<FS.h>
#include <SD.h>
#include <SPI.h>
#include <TFT_eSPI.h>
// Create the screen object
TFT_eSPI tft = TFT_eSPI();


    //#define PIN_SPI0_MISO  (12u)
    //#define PIN_SPI0_MOSI  (15u)
    //#define PIN_SPI0_SCK   (14u)
    //#define PIN_SPI0_SS    (13u)

    File myFile;
    const char *startFilePath="/DIR1";
    const char* ext="mp3";


File root;
File entry;

int fileCountOnSD = 0; // for counting files



#define KEY_TEXTSIZE 1   // Font size multiplier

// Choose the font you are using
#define LABEL1_FONT &FreeSansOblique12pt7b // Key label font





void setup() {
  
  Serial.begin(115200);

  // Open serial communications and wait for port to open:
  Serial.begin(115200);
  //delay(5000);
  /*
  while (!Serial) {
    ; // wait for serial monitor to open and show
  }
*/
  
  


  // Initialise the TFT screen
  tft.init();
  // Set the rotation before we calibrate
  tft.setRotation(2); 
  // Clear the screen
  tft.fillScreen(TFT_BLACK);
  // Draw keypad background
  tft.fillRect(0, 0, 320, 480, TFT_DARKGREY);
  tft.setCursor(0,30);
  tft.setTextDatum(TL_DATUM);        // Use top left corner as text coord datum
      tft.setFreeFont(&FreeSans9pt7b);  // Choose a nicefont that fits box
      tft.setTextColor(TFT_WHITE);     // Set the font colour
  


    
  Serial.print("Initializing SD card...");
  tft.print("Initializing SD card...");
 
  if (!SD.begin(SS, SPI1)) {
    Serial.println("initialization failed!");
    tft.println("initialization failed!");
    while (1);
  }

  
  Serial.println("initialization done.");
  tft.println("initialization done.");
root = SD.open("/");

  printDirectory(root, 0);

  // Now print the total files count
  Serial.println(F("fileCountOnSD: "));
  Serial.println(fileCountOnSD);


  
  tft.setTextColor(TFT_RED);
  tft.drawString("FILES > :", 10,0);  
  tft.drawNumber(fileCountOnSD - 3 ,180,0);  
  

  Serial.println("done!");

    
}


void printDirectory(File dir, int numTabs) {
  
  
   tft.setTextDatum(TL_DATUM);        // Use top left corner as text coord datum
      tft.setFreeFont(&FreeSans9pt7b);  // Choose a nicefont that fits box
      tft.setTextColor(TFT_WHITE);     // Set the font colour
      
  while (true) {

    File entry =  dir.openNextFile();
    if (! entry) {
      // no more files
      break;
    }
    for (uint8_t i = 0; i < numTabs; i++) {
      Serial.print('\t');
      tft.print('\t');     
      
    }
    Serial.print(entry.name());
    //tft.println(entry.name());
    if(fileCountOnSD > 2)
   { tft.println(entry.name() + String ("           ") + String(fileCountOnSD - 2));}
    
   
           
    

    // for each file count it
    fileCountOnSD++;

    
        
    

    
    if (entry.isDirectory()) {
      Serial.println("/");      
      printDirectory(entry, numTabs + 1);
      
     
      
    } else 
    {
      // files have sizes, directories do not
      Serial.print("\t\t");      
      Serial.println(entry.size(), DEC);
     
       
      
     
       
      
      //int number = fileCountOnSD + 3;
     
      
   
    
    }
    entry.close();

    
  }

  
}

void loop() {

  
  }

  
  

Have fun !!!