Show image (bmp, png, jpg or any) from SPIFFS

[e-labInnovations]

How to show an image (bmp, png, jpg or any) from SPIFFS.

I would like to download image file (library supported format) from a web server to ESP32 SPIFFS and show to the VGA monitor.

Problems I facing

• ESP32 crashes If I use

VGAController.begin(GPIO_NUM_12, GPIO_NUM_27, GPIO_NUM_14, GPIO_NUM_26, GPIO_NUM_25); //8 colours

Before

WiFiMulti.addAP(ssid, password);
while (WiFiMulti.run() != WL_CONNECTED) {
Serial.print(".");
delay(500);
}

• I don't know how to show a bmp or image file
• Can I show a 640x400 or similar sized image?

[fdivitto]

at the moment there isn't an image file decoder, so you cannot do this using just fabgl. However writing a BMP decoder is a simple task: anyway consider that you have up to 64 colors, so you should implement also some sort of dithering algorithm to show photos, and the quality will be poor anyway...

[e-labInnovations]

Working...

#include "fabgl.h"
#include <TJpg_Decoder.h>
#include <FS.h>
#include "SPIFFS.h" // ESP32 only

fabgl::VGA16Controller VGAController;
fabgl::Canvas cv(&VGAController);



// This next function will be called during decoding of the jpeg file to
// render each block to the Canvas.
bool vga_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 >= cv.getHeight() ) return 0;

  for (int16_t j = 0; j < h; j++, y++) {
    for (int16_t i = 0; i < w; i++) {
      writePixel(x + i, y, bitmap[j * w + i]);
    }
  }

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


void setup() {
  Serial.begin(115200);
  Serial.println("\n\n Testing TJpg_Decoder library With FabGl");

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

  VGAController.begin(GPIO_NUM_12, GPIO_NUM_27, GPIO_NUM_14, GPIO_NUM_26, GPIO_NUM_25);
  VGAController.setResolution(VGA_640x480_60Hz);

  cv.setBrushColor(RGB888(0, 0, 0));
  cv.clear();

  // The jpeg image can be scaled by a factor of 1, 2, 4, or 8
  TJpgDec.setJpgScale(1);

  // The decoder must be given the exact name of the rendering function above
  TJpgDec.setCallback(vga_output);



  // 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, "/panda.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, "/panda.jpg");

  // How much time did rendering take
  t = millis() - t;
  Serial.print(t); Serial.println(" ms");

}

void loop() {
}

void writePixel(int16_t x, int16_t y, uint16_t rgb565) {
  uint8_t r = ((rgb565 >> 11) & 0x1F) * 255 / 31;   // red   0 .. 255
  uint8_t g = ((rgb565 >> 5) & 0x3F) * 255 / 63.0;  // green 0 .. 255
  uint8_t b = (rgb565 & 0x1F) * 255 / 31.0;         // blue  0 .. 255
  cv.setPixel(x, y, RGB888(r, g, b));
}

Image I used

Output on the monitor (8 colours only)

[frgithub35]

It works only with the library TJpg_Decoder in version 0.0.2
with version 0.0.3 and above there's an issue with LittleFS

[FreeLANMan]

Not work with the latest version of FabGL.
EDIT: I have to change to 'VGAController.begin();' for work. And i use 'fabgl::VGAController VGAController;'

[FreeLANMan]

Thanks for the code.
409x230x16cores (indexed, 16 colors, optimum palette, dithering Floyd-Steinberg)
(for big images we lost colors)
Original:

Result:

[Miguel0101]

Does FabGL support USB keyboards?

[FreeLANMan]

I used with a PS/2 -> USB adapter and work.

[geiseri]

@fdivitto I tried the above approach and found that the overhead is huge compared to libraries like LovyanGFX because the RGB565 needs to be repacked into a RGB888. Even after replacing the floating point with bit shifts the round-trip from 565 to 888 and back to native 565 coupled with the lack of direct memory access are quite a drain on performance. Compared to Lovyan it is about 40% more "ticks" to paint a JPEG as above vs the Lovyan pushImage approach. Granted I am using JPEGDEC and pushing directly to the TFT inside of the scanline decode. That might make it feel faster than it really is.

That being said the DMA scanline structure and double buffer seems make up for it with 2D and Sprite draw operations. The performance (at least FPS vs ticks consumed) is on par with Lovyan, but with quite a bit less code to get it working. I wanted to try using Bitmap in Native color, but it looks like I have to manually manage the lifetime of the backing memory.

[nucl123]

Its not working with latest versions of both the libraries.

[nucl123]

Tested with latest versions of both libraries and it is working fine.

Important points to consider:

1. File should be uploaded using the plugin: https://github.com/me-no-dev/arduino-esp32fs-plugin and this plugin is not supported in latest version of Arduino IDE. So will have to switch to older versions like 1.8

2. File extension should be matching.

[FreeLANMan]

I can see my PCEmulator Plus where you can show .jpg from SD:
https://github.com/FreeLANMan/PCEmulatorPlus