JPG from SPIFFS not completely rendered on TFT.

[bmarcu13]

Hi, The JPGs I try to render on the TFT Display (ILI4340/ILI9341) do not render completely. Screenshot for reference: screenshot

The image I used for the test is the panda.jpg image from your library.

[Bodmer]

Look at the serial output and see if the processor is crashing.

It looks like you are not running one of the examples. Do the unchanged examples work?

Post a complete copy of you sketch that demonstates the problem.

Describe your setup:

. Processor: ESP32 or ESP8266 or other? . Arduino IDE version . Graphics library you are using, TFT_eSPI? . TJpg_Decoder library version

[bmarcu13]

Here is my complete sketch:

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <Firebase_ESP_Client.h>

#define FS_NO_GLOBALS
#include <FS.h>

#include <TJpg_Decoder.h>
#include <TFT_eSPI.h>
#include "SPI.h"

TFT_eSPI tft = TFT_eSPI();

//WiFi credentials
#define WIFISSID "XXXXXXX"
#define WIFIPassword "XXXXXXX"

#define FIREBASE_HOST "XXXXXX-XXXX.firebaseio.com"
#define FIREBASE_AUTH "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

#define STORAGE_BUCKET_ID "XXXXXX-XXXX.appspot.com"

FirebaseData fbdo;
FirebaseAuth auth;
FirebaseConfig config;

int ok = 0;

bool tft_output(int16_t x, int16_t y, uint16_t w, uint16_t h, uint16_t* bitmap)
{
   // Stop further decoding as image is running off bottom of screen
  if ( y >= tft.height() ) return 0;
  Serial.println(tft.height() + " | " + y);
  // This function will clip the image block rendering automatically at the TFT boundaries
  tft.pushImage(x, y, w, h, bitmap);

  // This might work instead if you adapt the sketch to use the Adafruit_GFX library
  // tft.drawRGBBitmap(x, y, bitmap, w, h);

  // Return 1 to decode next block
  return 1;
}

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

  if (!SPIFFS.begin()) {
    Serial.println("SPIFFS initialisation failed!");
    while (1) yield(); // Stay here twiddling thumbs waiting
  }
  Serial.println("\r\nSPIFFS initialised.");

  tft.begin();
  tft.fillScreen(TFT_RED);
  tft.setSwapBytes(true);
  tft.setRotation(1);

  TJpgDec.setJpgScale(1);
  TJpgDec.setCallback(tft_output);

  WiFi.begin(WIFISSID, WIFIPassword);
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500);
    Serial.print(".");
  }

  config.host = FIREBASE_HOST;
  config.signer.tokens.legacy_token = FIREBASE_AUTH;

  Firebase.begin(&config, &auth);
  Firebase.reconnectWiFi(true);
  fbdo.setBSSLBufferSize(1024, 1024);
  fbdo.setResponseSize(1024);

}

void loop() {
  if (ok == 0) {
     if (Firebase.Storage.download(&fbdo, STORAGE_BUCKET_ID, "test.jpg", "/test.jpg", mem_storage_type_flash))
    {
        Serial.println("PASSED");
        Serial.println("------------------------------------");
        Serial.println();
        ok = 1;
    }
    else
    {
        Serial.println("FAILED");
        Serial.println("REASON: " + fbdo.errorReason());
        Serial.println("------------------------------------");
        Serial.println();
    }
  }
    else if(ok == 1){
        // Time recorded for test purposes
    uint32_t t = millis();

    // Get the width and height in pixels of the jpeg if you wish
    uint16_t w = 0, h = 0;
    TJpgDec.getFsJpgSize(&w, &h, "/test.jpg"); // Note name preceded with "/"
    Serial.print("Width = "); Serial.print(w); Serial.print(", height = "); Serial.println(h);

    // Draw the image, top left at 0,0
    TJpgDec.drawFsJpg(0, 0, "/test.jpg");

    // How much time did rendering take (ESP8266 80MHz 271ms, 160MHz 157ms, ESP32 SPI 120ms, 8bit parallel 105ms
    t = millis() - t;
    Serial.print(t); Serial.println(" ms");

    ok = 2;
  }
  Serial.println(ok);
  delay(5000);
}

On the serial monitor I get:

23:36:17.951 -> ....FAILED
23:36:21.041 -> REASON: connection lost
23:36:21.075 -> ------------------------------------
23:36:21.075 -> 
23:36:21.075 -> 0
23:36:26.095 -> FAILED
23:36:26.095 -> REASON: connection lost
23:36:26.128 -> ------------------------------------
23:36:26.128 -> 
23:36:26.128 -> 0
23:36:31.179 -> FAILED
23:36:31.179 -> REASON: connection lost
23:36:31.212 -> ------------------------------------
23:36:31.212 -> 
23:36:31.212 -> 0
23:36:38.516 -> PASSED
23:36:38.516 -> ------------------------------------
23:36:38.516 -> 
23:36:38.516 -> 1
23:36:43.519 -> Width = 240, height = 320
23:36:43.519 -> N: 
23:36:43.553 -> N: 
23:36:43.553 -> N: 
23:36:43.553 -> N: 
23:36:43.553 -> N: 
23:36:43.553 -> N: 
23:36:43.553 -> N: 
23:36:43.553 -> N: 
23:36:43.586 -> N: 
23:36:43.586 -> N: 
23:36:43.586 -> N: 
23:36:43.586 -> N: 
23:36:43.586 -> N: 
23:36:43.586 -> N: 
23:36:43.620 -> N: 
23:36:43.620 -> eight = 
23:36:43.620 -> eight = 
23:36:43.620 -> eight = 
23:36:43.655 -> eight = 
23:36:43.655 -> eight = 
23:36:43.655 -> 28 ms
23:36:43.655 -> 2

My Setup: ESP8266 w/ ILI8340/8341 I am using TFT_eSPI Arduino 1.8.13 TJpg_Decoder v0.0.3

Also, when running the Web_Jpg sketch I simply get an empty black_screen and the Serial prints out this:

.................................
23:47:35.461 -> 
23:47:35.461 -> Listing SPIFFS files:
23:47:35.461 -> =================================================
23:47:35.528 ->   File name                              Size
23:47:35.562 -> =================================================
23:47:35.631 -> /heart1.bmp                             997 bytes
23:47:35.665 -> /picture.bmp                            990 bytes
23:47:35.698 -> /test.bmp                               995 bytes
23:47:35.765 -> /test.jpg                               996 bytes
23:47:35.799 -> =================================================
23:47:35.866 -> 
23:47:36.814 -> Downloading /M81.jpg from http://i.imgur.com/C77RWcq.jpg
23:47:36.848 -> [HTTP] begin...
23:47:36.882 -> [HTTP] GET...
23:47:36.983 -> [HTTP] GET... code: 301
23:47:36.983 -> 236 ms to download
23:47:37.018 -> 
23:47:37.018 -> Listing SPIFFS files:
23:47:37.052 -> =================================================
23:47:37.085 ->   File name                              Size
23:47:37.152 -> =================================================
23:47:37.186 -> /heart1.bmp                             997 bytes
23:47:37.255 -> /picture.bmp                            990 bytes
23:47:37.322 -> /test.bmp                               995 bytes
23:47:37.356 -> /test.jpg                               996 bytes
23:47:37.424 -> /M81.jpg                                  0 bytes
23:47:37.457 -> =================================================
23:47:37.526 -> 
23:47:38.404 -> 14 ms to draw to TFT

[Bodmer]

Re. Web_Jpg, the [HTTP] GET... code: 301 means the link has moved, I think imgur has now redirected the link to a secure https server so it fails (http no longer works). The sketch expects a non-secure http link, I will investigate and fix this.

I will look at your other sketch, however this seems to be a link connection issue rather than a problem with the TFT_eSPI or TJpg_Decoder library. With all the XXXX's I will not be able to test.

[Bodmer]

I thought I fixed the Web_Jpg issue in #14 but maybe not...

[bmarcu13]

Re. Web_Jpg, the [HTTP] GET... code: 301 means the link has moved, I think imgur has now redirected the link to a secure https server so it fails (http no longer works). The sketch expects a non-secure http link, I will investigate and fix this.

I will look at your other sketch, however this seems to be a link connection issue rather than a problem with the TFT_eSPI or TJpg_Decoder library. With all the XXXX's I will not be able to test.

So basically, you're saying that the image being partially loaded on the TFT display if caused by the .jpg file I download from Firebase being corrupted?

[Bodmer]

I have corrected a typo in the example here. Although the sketch worked with the typo and afterwards too on my ESP8266 setup. I am using the ESP8266 version 2.7.4 of the board paackage, I have not tested with earlier versions, which version do you use?

[Bodmer]

I would get rid of the print statement in the tft_output function. That appears to be printing garbage.

[bmarcu13]

It appears that now the example (Web_Jpg) is loading correctly, but my sketch is still not working properly (still loads only a part of the image).

Further tests suggest that the Firebase library I use for downloading and storing the file is somehow corrupting the file upon download. When I used the raw image url from my Firebase in your Web_Jpg sketch, it loaded successfully.

[Bodmer]

OK, the issue is with the Firebase_ESP_Client, so I am unable to help.

[MokhammadDaniyal]

Hello @bmarcu13 ! Were you able to solve your issue? I am experiencing the same problem but I am running the example Web sketch unchanged.

[Bodmer]

See #35