Introduction: Your Image on an Arduino! - TFT LCD Screen Guide

Picture of Your Image on an Arduino! - TFT LCD Screen Guide

Have you ever heard of TFT LCD screens?  They are great ways to display information from your Arduino, or display pictures.  The Arduino team just released an official TFT LCD screen with their new Robot at Maker Faire 2013.  It's very easy to get started with!!  This tutorial will show you how to get the LCD up and running, load information from the SD card, and make a few simple projects.

The TFT LCD screen is a great way to detach your computer, and have the Arduino relay information that you need to know onto the LCD.  A great part of the LCD is that it has a built in microSD card socket.  You can store images on the microSD card socket, and even some text!

If you like this Instructable, please vote for me in the Arduino contest by clicking the orange ribbon in the upper right hand corner, then vote!!!

Step 1: Parts & Tools

Picture of Parts & Tools

To make the project, you will need the following:

Parts:

Arduino UNO (Amazon, $22)
Arduino TFT LCD Screen (Arduino Store, ~$28)
ArduSensor Pot (Qtechknow, $8)
Half Sized Breadboard (Amazon, $5.50)
microSD Card 2GB (optional, Amazon, ~$6)
Jumper Wires

Tools:

USB-B Cable
Laptop
microSD Card Adapter & USB SD card reader

Step 2: TFT LCD Basics

Picture of TFT LCD Basics

TFT LCD Screens (Thin-film-transistor liquid crystal display) are great graphical displays to display information.  They are a variant of a liquid crystal display (LCD) which uses TFT technology to improve image qualities such as addressability and contrast.  They are used often in video games, smartphones, cell phones, and sometimes even TV's.  Now, with the technology and accessibility today, you can use one with your Arduino!

LCDs, or liquid crystal displays, are easy to use with your Arduino.  They are a very simple ways of telling the user data from the Arduino.  Standard 16x2 character LCDs are found in grocery stores, when the display tells you what you bought as the cashier scans each item, and how much it costs.

Step 3: Displaying Instructables Logo

Picture of Displaying Instructables Logo

For the first example, let's put the Instructables Logo on our TFT display!  Download the zip file below, and put it onto a microSD Card (2GB).  You will probably a microSD to SD Card adapter.  There is no special software needed, just copy and paste it onto the card.

Next, open up the Arduino IDE.  You'll need Arduino 1.0.5 or better to run the sketches.  Open up the InstructablesTFT example.  

Hook up the circuit above from the Arduino TFT LCD to your Arduino UNO.

Then, upload the sketch.  After you open the Serial Monitor, the LCD should have the Instructables Logo on it!

Step 4: Sensor Readings

Picture of Sensor Readings

Let's try another example.  This time, we'll be mimicking the Serial Monitor on our TFT LCD.  Keep the same circuit, and then upload the new code below.  

This sketch will gather the reading from the ArduSensor Pot, and then relay it onto the TFT LCD screen 10 times per second.  This is a great way to display data without a computer.

Step 5: Reading the SD Card

Picture of Reading the SD Card

Next, let's read the microSD card on its own.  The Arduino TFT LCD actually has an microSD card reader on board, so let's see what's on it!

Open up the CardInfo sketch from the Arduino program; File>Examples>SD>CardInfo.  Upload this to your Arduino, and then open the serial monitor in the Arduino program.  

You should see all of the information of your microSD card pop up!!!  These numbers should be how much memory is in your SD card, what files are in it, etc.

Step 6: Finished!

Picture of Finished!

I hope that you learned a bunch from this tutorial, and that you'll consider making a project with the awesome Arduino TFT LCD Screen!

If you make a project, please post it in the comments!

Comments

Build_it_Bob (author)2013-06-16

As usual , great job Qtechknow ! I always look forward to reading your posts .
Build_it_Bob

Qtechknow (author)Build_it_Bob2013-07-25

Thank you!!!

solderface (author)2013-06-16

This is a great instructable! I can't wait to get a screen and get it set up!

Qtechknow (author)solderface2013-07-25

Thanks!!!

nerd7473 (author)2013-06-16

wow

Tracker925 (author)2017-08-05

Can the nano do this?

RichardH11 (author)2017-01-04

This looks like a fantastic tutorial, but could you please help: is there a cheaper alternative to the official arduino TFT screen but will still work with the tft library? Help and multiple suggestions are much appreciated!

SándorS8 (author)2016-10-09

Can I use pictures as a background and show infos (for example: accelerometer information) in the foreground?

wessel.w.oosthuizen (author)2016-08-15

What software do you use to create those schematics/diagrams?

Probably the program "Fritzing".

RupeshK12 (author)2016-04-04

can we use big display instead of TFT LCD display

KevinJ96 (author)2016-02-10

Do you know if there's a way of using the old screen out of an iphone (3GS in my case) as a screen for the arduino?

NikhilK41 (author)2015-11-20

sir i have done as per your instruction ...but i am getting white screen without any info being displayed .. plz help me ...

alyr1 (author)2015-11-06

how to load image on the TFT without SDCard ?

bitterbug (author)alyr12015-11-09

Without a storage medium you would need to convert the image data into an array representing each pixel and make it part of your sketch. So you would be limited by the on-board memory of the Arduino.

alyr1 (author)2015-11-06

how to to display image from my computer not from SD card ?

hunterakagman (author)2013-09-19

Can this play video?

Qtechknow (author)hunterakagman2013-10-25

Not yet, but if you sequence images quickly, you can create a cool 'animation' effect!

tharakanwn (author)Qtechknow2015-09-24

I am also trying to play a video using Arduino. If I use images after split from a video as a slideshow using higher speed. will Arduino able to process it ?

Clapoti made it! (author)2015-09-16

Thanks for the tutorial very well done :)

lathamlatham (author)2015-09-13

to hard!!!!!!!!!!!!!!!!!!! to much monnie

Chucklinghard (author)2015-09-08

I am an old duffer and constantly see references to ARDUINO. What the 'eck is it?

terybrn (author)rosswald2015-09-11

God i love lmgtfy.com

manon.barendse (author)2015-04-30

Thanks for the tutorial!

I wonder if you happen to know if it is easy to have sensor input and image output. For example, a moisture sensor has a HIGH input, and the screen shows a bitmap image that is stored in the SD card. Thanks!

AkshayM2 (author)2015-01-18

Once again a brilliant project. Please check out my instructables too Qtechknow!

theasterix.hashir (author)2015-01-16

can i use

2.8" TFT Touch Shield for Arduino - 2.8

in the same project ? to display same things and same stuff?

saymowan (author)2014-09-23

Amazing! Thanks for sharing it! :-)

gusgus_2 (author)2013-07-31

sorry im relatively new to all this but would it be possible to display time on this tiny thing? like a bedside clock of some sort? thanks guys

gam cad (author)gusgus_22014-06-18

I'm sure in ten months you found this but arduino has a nice library for this.

Check out

http://playground.arduino.cc/Code/Time

skaar (author)gusgus_22013-10-06

sure, but without an rtc chip it might vary a bit.

paultnylund (author)2014-05-19

I want my image to rotate a certain number of degrees based on the signal input. How would I go about doing this? Thanks for the awesome instructable!

Qtechknow (author)paultnylund2014-06-12

You can replace the image every time the signal input changes - use the map() function to 'map' the number of degrees with the signal input, and just set the screen with a the same image, but rotated. Hope that helps!

dankaraji (author)2013-12-05

great tutorial...im trying to use this screen as a picture display,going through different picture every three to five seconds.but cant really figure out the code...can u tell me what to do

Qtechknow (author)dankaraji2014-02-09

I think that the easiest way of doing this would be to display a picture, erase it, and delay. I would make a cycle of pictures, and then display them one at a time and erase them one at a time.

TREX ZoaR0K (author)2013-11-18

saw your article in popular science

brunoip (author)2013-07-25

It seems that the white board of the screen is not aligned with the screen, is this right?

Qtechknow (author)brunoip2013-10-25

Yes, I'm not sure why though.

pabhilash (author)2013-07-25

Actual Arduino board = $22
TFT screen = $28 :(

emer_31 (author)pabhilash2013-09-26

Not necesary, i use this one: http://www.ebay.com/itm/130906317995?ssPageName=STRK:MEWNX:IT&_trksid=p3984.m1497.l2649
Is cheaper and functional. And i found information right here :http://blog.simtronyx.de/en/a-1-8-inch-tft-color-display-hy-1-8-spi-and-an-arduino/

tesla000000 (author)2013-08-30

OH MY GOD!!! I am about to turn 12 and i KNow what i want for Christmas.

I am a 11 year old boy and I love enginnering and i just found out about ardino in the summer time! I saw you in popular science and I thought that was epic!!! I am going to begin using ardino . Keep up the epicnesss-Tesla

Qtechknow (author)tesla0000002013-09-10

Thanks!!!! Hope you like your Arduino! Post what you make!

Project 23 (author)2013-07-29

https://www.instructables.com/community/Instructables-android-ios-app-improvement-idea/

Turbocharged Chameleon (author)2013-07-25

I'm not sure if this is the exact one you're looking for but here are 2:
3.2" TFT LCD on ebay:
http://www.ebay.com/itm/3-2-inch-TFT-LCD-module-Display-with-touch-panel-SD-card-240x320-than-128x64-lcd-/221251358532?pt=LH_DefaultDomain_0&hash=item33839bcf44

or the 2.4" TFT LCD:
http://www.ebay.com/itm/2-4-inch-TFT-LCD-Module-Screen-240-x-320-Pixels-ILI9325-Arduino-Compatible-/390620881356?pt=LH_DefaultDomain_0&hash=item5af2d1a1cc

rhess1 (author)2013-07-25

A Very good explanation. I do notice this ties up quite a few pins (thus reducing capability for other functions) I wonder if an i2C shift register could reduce the pin load...

zwilson5 (author)2013-07-25

Is there a way to switch between the displayed image files manually? I would love to be able to throw a rotary switch on there to switch the pics

Qtechknow (author)zwilson52013-07-25

I don't believe that you can hook up a potentiometer up to the TFT LCD directly, but you can attach it to the Arduino, and switch the pictures!

billbillt (author)2013-07-25

GREAT

Turbocharged Chameleon (author)2013-06-21

Can you use the LCD to show animated files like animated .GIFs, .AVI movies, ect.?

Probably, but I'm not sure. I think that you would have to split up all of the individual images on the .GIF, and then convert them to bitmaps to show them.

About This Instructable

316,709views

896favorites

License:

Bio: White House Maker Faire // 16 years old // CEO of Qtechknow, maker and electronics enthusiast, I teach Arduino classes, and put making into schools! My successful ... More »
More by Qtechknow:NFC Door Lock with the Qduino Mini (under $100)Qtechknow Robot Obstacle CourseYour Image on an Arduino! - TFT LCD Screen Guide
Add instructable to: