Sorry for the experts - I'm a layman on the subject!
I downloaded the "ESP8266_TFT_SPIFFS" sketch by Bodmer and would like to use it on ESP8266 Nodemcu; inside the folder there are 3 files '.ino' and 1 folder 'data' with 3 figures inside. Which file '.ino' should I upload and what do I do with the 'data' folder?
Another thing: can I put more pictures inside the 'data' folder? (approximately how many, for a ESP8266)?
Thank you
Please confirm that you have run all of Bodmer's other examples successfully.
Instructions for copying data files from your project folder into SPIFFS are in the links.
You can always copy a modified example into your User sketch directory. The IDE will do it for you. The IDE will not let you save a modified example in the examples folders.
Make notes on paper as you go. The SPIFFS procedure is a little fiddly. Manipulating images on your PC is a lot to learn.
Ask if you have a problem.
Oh. If you have mulltiple .INO files in a sketch directory, the "main" .INO is the one that has the same name as the directory.
.INO files are concatenated when Arduino mangles them into a valid .CPP file.
A single .INO file will find library headers and create forward references very well.
Concatenated .INOs do not manage references perfectly.
I suggest that you obey .CPP rules when writing multiple .INO files
David.
david_prentice:
If you asked your question wisely, you would say Adafruit_ILI9341
Adafruit_ILI9341 has an example for 24-bit .BMP files
Adafruit has an example (Adafriuit imagereader) to load the file from the SD card only, if I'm not mistaken. And there is no option to load it from the SPIFFS. And, actually, there is not so much difference what library is used, The only thing, that is used from the library is preparing the display area for the image: tft.setAddrWindow().
Dancopy:
Sorry for the experts - I'm a layman on the subject!
I downloaded the "ESP8266_TFT_SPIFFS" sketch by Bodmer and would like to use it on ESP8266 Nodemcu; inside the folder there are 3 files '.ino' and 1 folder 'data' with 3 figures inside. Which file '.ino' should I upload and what do I do with the 'data' folder?
Another thing: can I put more pictures inside the 'data' folder? (approximately how many, for a ESP8266)?Thank you
Hi,
David already answered you. I will just add some clarification.
Here is a video instruction how lo upload the files into SPIFFS of NodeMCU(ESP8266): https://www.youtube.com/watch?v=25eLIdLKgHs.
To get the Bodmer's examples running, you need to upload his bitmaps from the data folder to the SPIFFS of yours ESP8266 MCU.
The main sketch file is ESP8266_draw_565_image2.ino. The functions.ino files should be in the same folder as they contain functions, that are used in the main sketch.
If you want to upload your own files, you need to prepare them in the RGB565 (16-bit bmp) format without a header (follow the link, I've provided earlier). Such a file for the 240320 resolution will consume 153600 bytes (2403202(2 bytes = 16 bit)) .
My sincere thanks to David and Shur1k who gave me details;
I was able to install the program and recorded two images in SPIFFS of ESP (EagleEye and Tiger) but, what is that figure 'TigerDue'?
If you have any more patience with me, I have a few more questions:
Thank you very much
Hi Dancopy,
I believe, that TigerDue image is for loading specifically to Arduino Due compatable boards. But I'm 100% sure. Al least, this is not the raw image, it's a nitmap with a header of 54 bytes length.
Cheers
P.S. Forgot to mention, that I needed to modify a bit Bodmer's function to make it works.
The TFT screen chip select pin should be low before transfering the image data by the SPI bus. Maybe Bodmer did it in the main sketch, I don't know, but I've added it into the function before settting up the TFT address window:
digitalWrite(TFT_CS, LOW);
And I've changed the settings of the address window itself:
it was tft.setAddrWindow(x, y, x + rawWidth - 1, y + rawHeight -1 );
I don't know, why Bodmer set the window less then the image, I had an incorrect displaying of the image with such settings.
So, I've changed it to: tft.setAddrWindow(x, y, x + rawWidth, y + rawHeight); And after that the image was loaded correctly.
Looking at Bodmer's examples on GitHub.
TFT_eSPI/examples/Generic/ESP32_SDcard_jpeg/data/ has some sample .JPG
TFT_eSPI/examples/Generic/TFT_SPIFFS_BMP/data/ has one sample .BMP
Yes, you can preprocess a .BMP into a .RAW file e.g. with the UTFT utility
RAW files are slightly smaller and require no intelligence.
I suggest that you simply copy genuine .JPG or .BMP files to your project data directory.
And load SPIFFS from this /data/ directory.
@shurlk,
setAddrWindow() takes start and end addresses. Hence the -1
If you have a problem, please quote which library example (and library version).
David.
Thanks David for your reply;
I want to repeat here the question (5) I did earlier: Does this sketch work with Display 3.5 inch 480*320 ILI9488 (Breakout)?
In fact, I would like to do with a larger screen, such as 5 inches; thanks again
Yes, I am sure that it should work with any controller supported by Bodmer.
I don't think that he supports SSD1926 or RA8535.
Firstly, thank you all for the help but, there is a problem:
The two image files that come in the original Bodmer code, are written correctly in SPIFFS and show on the screen (without having to make the changes that friend 'shur1k' mentioned);
So I used the Bodmer Tool for Conversion (ImageConverter (UTFT) and converted an image (320*240) 'jpg' to '.raw' and put it inside the 'data' folder and proceeded with the loading in function 'ESP8266 Sketch Data Upload '; it loaded normally but the image I added on the screen does not appear, only the two images that originally came in the 'data' folder.
I want to remember here that what I'm using as Flash Size "4M (3M SPIFFS)", so I do not know what I'm wrong; it is more likely to be in the loaded image type.
I really want to buy Screen 3.5" ILI9488 to use with that but, I'm afraid!
Would any of you, please, have some .raw format images for me to take a test?
PS. After loading with the 'ESP8266 Sketch Data Upload' function, should I load the sketch through the function (arrow) Load? (not!)
Once again, thank you very much to everyone.
240x320 .BMP uses 230454 bytes.
240x320 .RAW uses 153600 bytes
240x320 .JPG when compressed can fit in less than 32768 bytes.
Bodmer's "parrot.bmp" is only 128x160 but uses 60kB of disk space
Bodmer's "baboon40.jpg" is 320x480 but uses 24kB of disk space
Bodmer's "mouse480.jpg" is 480x320 but uses 7kB of disk
You can view these images on your PC. Navigate the libraries folder with Windows Explorer. Hover on the file to see dimensions and size. Click on file to view on the PC.
You can take any image from the Internet or your PC and process it in IrfanView.
e.g. resize it to suit your TFT e.g. 240x320 or 320x480 or ...
The full-fat image takes a lot of bytes e.g. width x height x 3.
e.g. store in .JPG format with different "compression quality" ratios.
"baboon.jpg" looks pretty good. Even though it has been compressed from 450.04kB down to 23.81kB (quality=40)
"mouse.jpg" is recognisable but fairly crap. It has been compressed from 450.04kB down to 6.45kB (quality=20)
Think about it. If you have a 1MB SPIFFS, you can store over 30 baboon JPEGs. But only 2 .BMP files. (Or 3 RAW files)
If your images compess "well" you can store many more .JPGs. Or different .JPGs with different compression quality. You can see what it looks like on the PC. Quality=90 still gives a reasonable file size.
Just do your Image preparation on the PC. Then copy to the sketch Data directory so you can upload to SPIFFS.
@Dancopy Create a zip file of the example you have created and does not work and I will have a look at it and tell you where you are going wrong.
Hint. Hit preview button below your new post to see the attrachment option.
Hi Bodmer! I tried to attach all the files with .RAR here but it gives an error. I also tried to attach all .raw and also gave error. So I'm sending separately. Thank you
I think that this illustrates my point. The pictures are compressed.
dog.jpg 284x177 quality=94
flower3.jpg 320x240 quality=94
flower4.jpg 320x240 quality=94
penguins.jpg 320x240 quality=94
You could probably get away with lower quality. But 30kB is a reasonable size for storage in SPIFFS.
I have put your images in a single ZIP.
David.
JPEGS.zip (107 KB)
Hi David, thanks for your help.
Incredibly, the only code that saves and runs correctly on my Nodemcu is the original sketch by Bodmer, which comes with the 3 images in the 'data' folder (EagleEye, Tiger and TigerDue). It seems that whoever does all the magic is the 'TigerDue' figure. I can not understand. I put the images from the folder JPEGS.zip that you sent me, in the folder 'data' but it did not work; I converted those same images to .raw with the ImageConverter565 tool, but it did not work either.
I will make a request: if you or 'Bodmer' or 'shur1k' do not bother, send me here through the forum, all files mounted, with several images (10 or 15), as the original Bodmer file (ESP8266_TFT_SPIFFS. zip) on page 1, for me to do my last test.
I'm doing this: click on Tools > ESP8266 Sketch Data Upload and, after loading the images in SPIFFS, I load (Ctrl + U) the sketch.
I can not believe it's the size of the images I'm using.
Once again, my thanks to all.
david_prentice:
@shurlk,
setAddrWindow() takes start and end addresses. Hence the -1
Thank you, David. You are completely right. There should be -1, my bad. Will try to sort out the code.
Dancopy:
So I used the Bodmer Tool for Conversion (ImageConverter (UTFT) and converted an image (320*240) 'jpg' to '.raw' and put it inside the 'data' folder and proceeded with the loading in function 'ESP8266 Sketch Data Upload '; it loaded normally but the image I added on the screen does not appear, only the two images that originally came in the 'data' folder.
Dancopy, was your image landscape (320240) or portrait (240230)? Have you set the correct screen orientation? What were the parameters of the drawRaw() function for your image?
The original images were loaded like this:
// Plot at x,y = 0,0 an image 240 pixels wide and 320 pixels high.
drawRaw("/Tiger.raw", 0, 0, 240, 320);
delay(2000); // Hang around for a while
tft.fillScreen(random(0xFFFF));
drawRaw("/EagleEye.raw", 0, 30, 240, 240);
delay(2000); // Hang around for a while
How did you load your image?
All Dan's images are landscape. See #33.
I will try them with Bodmer's example later.
David.
I'll be waiting - thanks
Oops. I assumed that there was an official SPIFFS_JPEG example. Like the SPIFFS_BMP example.
There is only a SD_JPEG example.
Have you copied the SPIFFS_BMP example to User sketch directory?
Then add some extra .BMP files to the /data/ directory.
And upload to SPIFFS.
Modify the sketch to display these extra .BMP images.
Forget about any ImageConverter.exe or RAW files.
I will post a "SPIFFS + JPG" sketch later.
David.
Pleasedo your experiments with BMPs first.
Ah-ha. There is a TFT_SPIFFS_Jpeg example in the 160x128 folder.
I have added a /data/ directory with some samples.
I have modified (my old) example to match the sample names.
Unzip the project into your sketches folder.
Open the sketch
Upload to SPIFFS.
Build and Run.
David.
TFT_SPIFFS_Jpeg_kbv.zip (269 KB)