How to draw image from SPIFFS

Question

Hi, I just buy several ESP8266 WiFi Color Display Kit 2.4″.

Everything i try like example weather station or drawXBM is work well.

but i got one example DrawBMP from MiniGrafx (https://github.com/ThingPulse/minigrafx/tree/master/examples/ILI9341/DrawBMP) that don't work at all. only show "fps" on upper left. when i see the serial monitor, i got no error at all. i make sure that "file.bmp" is on SPIFFS. but still i got no image at all.

Can i got an example how to draw/load image from SPIFFS directly?

Or, maybe this kind of LCD from color display doesn't support load image jpeg/bmp directly?

i don't want to use image converter like image -> XBM or image load from PROGMEM.

because i need to load many image and maybe update them. i think the most efficient way is to used SPIFFS.

Workflow is like this:

Server send image -> Wemos download image -> Wemos Save image to SPIFFS -> Wemos Load image to LCD.

is that possible and how?

Thank you.

Answer 1

I just tested this example myself again. Apart from a small inconsistency in the commented (i.e. non-relevant) code, which I fixed, it works just fine.

Did you monitor the serial console in the Arduino IDE for errors? How did you confirm the .bmp actually is on SPIFFS where it is expected? Maybe some debug output helps:

  SPIFFS.begin();
  Dir dir = SPIFFS.openDir("/");
  while (dir.next()) {
      Serial.print("SPIFFS file found: " + dir.fileName());
      if(dir.fileSize()) {
          File f = dir.openFile("r");
          Serial.printf(" (%d byts)\n", f.size());
      }
  }

Note that SPIFFS is a flat file system without direct directory support. '/' is a regular character in a filename (can be used to simulate directories).

Or, maybe this kind of LCD from color display doesn't support load image jpeg/bmp directly?

Yes, it is supported.

Server send image -> Wemos download image -> Wemos Save image to SPIFFS -> Wemos Load image to LCD.

is that possible and how?

That is exactly the workflow we use for our ESPaper product line. The only difference is that we use e-ink displays to render paletted bitmaps.

For ESPaper we offer a client that pulls images from our server at https://www.espaper.com/. On the server you find a graphical WYSIWYG editor to define the device screen. So, the workflow is a follows: device wakes from deep sleep > connects to WiFi > authenticates against server to download screen > saves image on SPIFFS > renders screen > goes back to deep sleep. So, apart from OTA capabilities and a lot of (potential) error handling the client contains very little logic.

Comments

Thank you for your answer.
this is output on tft, (sorry idk how to upload in this comment so i use imgur) : https://imgur.com/a/llbUmPD
--and 2 file that i uploaded to SPIFFS:
https://imgur.com/a/QXzxq16 ( filename : qr.bmp)
https://imgur.com/a/DYjWIhd ( filename : file.bmp)
1. Did you monitor the serial console in the Arduino IDE for errors?
 -> Yes, and i got something like this:
--->
Bit Depth: 1
In drawBmpFromFile
Bit Depth: 1
In drawBmpFromFile
Bit Depth: 1
---and after several second
In drawBmpFromFile
In drawBmpFromFile

2. How did you confirm the .bmp actually is on SPIFFS where it is expected?
because i upload file.bmp and other using FTP client,  i make wemos a ftp server by uploading code from : https://github.com/nailbuster/esp8266FTPServer
and when i try your code "....... Serial.printf(" (%d byts)\n", f.size());".
it prints all of my uploaded file.

3. Note that SPIFFS is a flat file system without direct directory support. '/' is a regular character in a filename (can be used to simulate directories).
Ofcourse i know this. so i change "only" this line of code:

  gfx.drawBmpFromFile("file.bmp", 10, 40 + counter);
to
  gfx.drawBmpFromFile("/file.bmp", 10, 40 + counter);
and i got that that result i said in no.1.
if i not included "/" char i got result :
"File not foundIn drawBmpFromFile"

---

The MiniGrafx library has limitations in which bmp types it can display. I just checked the code and sadly the method doesn't print out errors if the bmp format is not compatible. From what I remember and what I can see in the code the bmp has to fit the following requirements:
- 1 layer
- 24bit color depth
- uncompressed

I think your log output shows that your bitdepth is 1 instead of 24. There is a commented out part in the example, which takes the image from progmem and writes it to spiffs. Then the file is read from SPIFFS. Does this work for you? In that case we can be pretty sure it's the image format you have to adjust...

KG, Dani

---

Hi,

after i change image bit color depth i can show it on the screen.

Thank you very much for your answer.

Maybe later i will add pull request to add additional information for this example.

---

Thanks for the feedback! We're happy it now works for you. Looking forward to any PR that improves the example.

Answer 2

If the DrawBMP example did not work then most likely the file was not there or in the wrong location, did you run the example?

For most images you will need perform an image conversion usually from JPG to BMP.

To use SPIFFS, you will need to add in SPIFFS support, which can be quite simple as most of the functions are identical. Mostly this is adding the SPIFFS library support and initialising the SPIFFS for use. However you will have to upload your images to SPIFFS using the IDE tool to do that.

It's not simple to explain all the steps that you need to perform, but if you do this is small manageable stages for example trying out a SPIFFS example, then BMP drawing example, I'm sure it will make sense how to merge the two for your project needs.