How to Use a TFT 2.8" Touchscreen to Display .bmp Images
by wilburie in Circuits > Arduino
188 Views, 0 Favorites, 0 Comments
How to Use a TFT 2.8" Touchscreen to Display .bmp Images
![20230922_133120.JPG](/proxy/?url=https://content.instructables.com/FGM/QQ6R/LR7SJ4V2/FGMQQ6RLR7SJ4V2.jpg&filename=20230922_133120.JPG)
This is a ELEGOO TFT 2.8" Touchscreen displaying a .BMP image! I couldn't find any tutorials on a 2.8" so I'll make one myself!
This uses a lot of images, so make sure to click on "See [] More Images" to follow the steps!
Supplies
![20230922_131423.JPG](/proxy/?url=https://content.instructables.com/FPT/AWJ9/LR7SJ4TX/FPTAWJ9LR7SJ4TX.jpg&filename=20230922_131423.JPG)
You'll need:
- 2.8" TFT Touchscreen
- Arduino UNO
- MicroSD card formatted to FAT32
- Something to plug the MicroSD into a computer (MicroSD to SD adapter, etc.)
- A computer with the Arduino IDE installed
- Hi-Speed USB cable for Arduino
Formatting the SD Card
![20230922_131515.JPG](/proxy/?url=https://content.instructables.com/FLT/KPOY/LR7SJ4UH/FLTKPOYLR7SJ4UH.jpg&filename=20230922_131515.JPG)
![1.png](/proxy/?url=https://content.instructables.com/FK7/X7C1/LR7SJ4PM/FK7X7C1LR7SJ4PM.png&filename=1.png)
![2.png](/proxy/?url=https://content.instructables.com/FO9/OPRW/LR7SJ4PR/FO9OPRWLR7SJ4PR.png&filename=2.png)
![3.png](/proxy/?url=https://content.instructables.com/FJY/NHW3/LR7SJ4PX/FJYNHW3LR7SJ4PX.png&filename=3.png)
![4.png](/proxy/?url=https://content.instructables.com/FA2/CY7U/LR7SJ4Q4/FA2CY7ULR7SJ4Q4.png&filename=4.png)
- Plug in your SD card using an adapter.
- Save any important files!
- Right click on the card icon and click "Format".
- Make sure that everything matches this image, or otherwise it's not readable by the arduino!
Uploading the Image & Making It Look Right
![blank.bmp](/proxy/?url=https://content.instructables.com/FJ5/F2NN/LR7SJ4GE/FJ5F2NNLR7SJ4GE.bmp&filename=blank.bmp)
![5.png](/proxy/?url=https://content.instructables.com/F56/9V9H/LR7SJ4QA/F569V9HLR7SJ4QA.png&filename=5.png)
![6.png](/proxy/?url=https://content.instructables.com/FP9/1F9Q/LR7SJ4QL/FP91F9QLR7SJ4QL.png&filename=6.png)
![7.png](/proxy/?url=https://content.instructables.com/FGE/4IUT/LR7SJ4QV/FGE4IUTLR7SJ4QV.png&filename=7.png)
![8.png](/proxy/?url=https://content.instructables.com/F76/S591/LR7SJ4R6/F76S591LR7SJ4R6.png&filename=8.png)
![9.png](/proxy/?url=https://content.instructables.com/FN3/37CN/LR7SJ4RI/FN337CNLR7SJ4RI.png&filename=9.png)
![10.png](/proxy/?url=https://content.instructables.com/FHG/UY4D/LR7SJ4RV/FHGUY4DLR7SJ4RV.png&filename=10.png)
![11.png](/proxy/?url=https://content.instructables.com/FPA/KCXY/LR7SJ4S9/FPAKCXYLR7SJ4S9.png&filename=11.png)
![12.png](/proxy/?url=https://content.instructables.com/FFN/GIF4/LR7SJ4SO/FFNGIF4LR7SJ4SO.png&filename=12.png)
- Download this image of a white square and save it to the root of the SD card.
- Rename the file to "img1".
- Open it with Paint.exe!
- Put whatever you want onto the image.
- Rotate it left by 90 degrees.
- It should look like this!
- Then flip it vertically.
- And now your image should look really weird, but this is how it works!
- Save your image.
Code + Reading the SD Card
![13.png](/proxy/?url=https://content.instructables.com/FOH/0SB2/LR7SJ4T4/FOH0SB2LR7SJ4T4.png&filename=13.png)
- Safely eject your SD card! Make sure you do this or it won't read it.
Download "ShowBMP.ino" and upload it to your Arduino with the IDE.
It's a big file so it will take a while, but wait for the "Done Uploading." flag in the bottom right corner.
When done, press the reset button and watch your image come to life!
Downloads
You're Done!
![FI8DAK8LR7SJ4X4.jpg](/proxy/?url=https://content.instructables.com/FQO/T88Q/LR7SJ77A/FQOT88QLR7SJ77A.jpg&filename=FI8DAK8LR7SJ4X4.jpg)
![FGMQQ6RLR7SJ4V2.jpg](/proxy/?url=https://content.instructables.com/FXM/3NMQ/LR7SJ77B/FXM3NMQLR7SJ77B.jpg&filename=FGMQQ6RLR7SJ4V2.jpg)
Enjoy watching your image show on your screen! Try some HQ images because these things are actually fairly high def.