Introduction: 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

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

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

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

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

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!

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

author
Build_it_Bob made it!(author)2013-06-16

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

author
Qtechknow made it!(author)2013-07-25

Thank you!!!

author
solderface made it!(author)2013-06-16

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

author
Qtechknow made it!(author)2013-07-25

Thanks!!!

author
nerd7473 made it!(author)2013-06-16

wow

author
RichardH11 made it!(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!

author
S%C3%A1ndorS8 made it!(author)2016-10-09

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

author
wessel.w.oosthuizen made it!(author)2016-08-15

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

author
Detectingdragon777 made it!(author)2016-09-06

Probably the program "Fritzing".

author
RupeshK12 made it!(author)2016-04-04

can we use big display instead of TFT LCD display

author
KevinJ96 made it!(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?

author
NikhilK41 made it!(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 ...

author
alyr1 made it!(author)2015-11-06

how to load image on the TFT without SDCard ?

author
bitterbug made it!(author)2015-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.

author
alyr1 made it!(author)2015-11-06

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

author
hunterakagman made it!(author)2013-09-19

Can this play video?

author
Qtechknow made it!(author)2013-10-25

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

author
tharakanwn made it!(author)2015-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 ?

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

Thanks for the tutorial very well done :)

IMG_20150916_204123.jpg
author
lathamlatham made it!(author)2015-09-13

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

author
Chucklinghard made it!(author)2015-09-08

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

author
rosswald made it!(author)2015-09-09
author
terybrn made it!(author)2015-09-11

God i love lmgtfy.com

author
manon.barendse made it!(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!

author
AkshayM2 made it!(author)2015-01-18

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

author
theasterix.hashir made it!(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?

author
saymowan made it!(author)2014-09-23

Amazing! Thanks for sharing it! :-)

author
gusgus_2 made it!(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

author
gam+cad made it!(author)2014-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

author
skaar made it!(author)2013-10-06

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

author
paultnylund made it!(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!

author
Qtechknow made it!(author)2014-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!

author
dankaraji made it!(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

author
Qtechknow made it!(author)2014-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.

author
TREX+ZoaR0K made it!(author)2013-11-18

saw your article in popular science

author
brunoip made it!(author)2013-07-25

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

author
Qtechknow made it!(author)2013-10-25

Yes, I'm not sure why though.

author
pabhilash made it!(author)2013-07-25

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

author
emer_31 made it!(author)2013-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/

author
tesla000000 made it!(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

author
Qtechknow made it!(author)2013-09-10

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

author
Project+23 made it!(author)2013-07-29

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

author
Turbocharged+Chameleon made it!(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

author
rhess1 made it!(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...

author
zwilson5 made it!(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

author
Qtechknow made it!(author)2013-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!

author
billbillt made it!(author)2013-07-25

GREAT

author
Turbocharged+Chameleon made it!(author)2013-06-21

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

author
Qtechknow made it!(author)2013-07-25

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.

author
agis68 made it!(author)2013-07-25

I guess you can do this with any lcd screen even with a nokia screen (lower resolution but very cheap)

About This Instructable

314,551views

895favorites

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: