Search the Arduino Website

Examples > TFT

TFT Graph

This example for the Arduino TFT screen reads the value of a potentiometer, and graphs it on screen. This is similar to the serial
communication Graph example (//www.arduino.cc/en/Tutorial/Graph).

Hardware Required
-

Arduino Uno

Arduino TFT screen

breadboard

hookup wire

one 10-kilohm potentiometer

Circuit
Connect power and ground to the breadboard.

Place the potentiometer on the breadboard. Connect one side to ground, and the other to power. Connect the middle pin to A0.

Connect the TFT screen to the breadboard. The headers on the side of the screen with the small blue tab and arrow should be the ones
that attach to the board. Pay attention to the orientation of the screen, in these images, it is upside down.

Connect the BL and +5V pins to power, and GND to ground. Connect CS-LD to pin 10, DC to pin 9, RESET to pin 8, MOSI to pin 11, and
SCK to pin 13. If you're using a Leonardo, you'll be using different pins. see the getting started page (http://arduino.cc/en/Guide/TFT)
for more details.

(//www.arduino.cc/en/uploads/Tutorial/GTFT_text_large.png)

Click the image for a larger version

Code
To use the screen you must rst include the SPI and TFT libraries.
#include <SPI.h>
#include <TFT.h>
[Get Code] (//www.arduino.cc/en/Tutorial/TFTGraph?action=sourceblock&num=2)

Dene the pins you're going to use for controlling the screen, and create an instance of the TFT library named TFTscreen . You'll
reference that object whenever you're working with the screen.
#define cs 10
#define dc 9
#define rst 8
TFT TFTscreen = TFT(cs, dc, rst);
[Get Code] (//www.arduino.cc/en/Tutorial/TFTGraph?action=sourceblock&num=3)

Create a variable for holding the position of the x-axis of the graph. You'll increment this each loop() . In setup() , initialize the
screen and make the background a nice color.
int xPos = 0;
void setup(){
TFTscreen.begin();
TFTscreen.background(250,16,200);
}
[Get Code] (//www.arduino.cc/en/Tutorial/TFTGraph?action=sourceblock&num=4)

In loop() , read the value from the potentiometer, and map it to a value that ts in the screen's height.
void loop(){
int sensor = analogRead(A0);
int graphHeight = map(sensor,0,1023,0,LCDscreen.height());
[Get Code] (//www.arduino.cc/en/Tutorial/TFTGraph?action=sourceblock&num=5)

Set the stroke color to something that will stand out against the nice color you chose for the background, and draw a line from the
bottom of the screen based on the value of the sensor
TFTscreen.stroke(250,180,10);
TFTscreen.line(xPos, TFTscreen.height() - graphHeight, xPos, TFTscreen.height());

[Get Code] (//www.arduino.cc/en/Tutorial/TFTGraph?action=sourceblock&num=6)

Before closing up loop() , check to make sure the graph hasn't gone past the edge of the screen. If it has, erase everything, and start
back at 0 on the x-axis.
if (xPos >= 160) {
xPos = 0;
TFTscreen.background(250,16,200);
}
else {
xPos++;
}
delay(16);
}
[Get Code] (//www.arduino.cc/en/Tutorial/TFTGraph?action=sourceblock&num=7)

The complete sketch is below :

/*
TFT Graph
This example for an Arduino screen reads
the value of an analog sensor on A0, and
graphs the values on the screen.
This example code is in the public domain.
Created 15 April 2013 by Scott Fitzgerald
http://www.arduino.cc/en/Tutorial/TFTGraph
*/
#include <TFT.h> // Arduino LCD library
#include <SPI.h>

// pin definition for the Uno

#define cs 10
#define dc 9
#define rst 8
//
//
//
//

pin definition for the Leonardo

#define cs 7
#define dc 0
#define rst 1

TFT TFTscreen = TFT(cs, dc, rst);

// position of the line on screen

int xPos = 0;
void setup() {
// initialize the serial port
Serial.begin(9600);
// initialize the display
TFTscreen.begin();
// clear the screen with a pretty color
TFTscreen.background(250, 16, 200);
}
void loop() {
// read the sensor and map it to the screen height
int sensor = analogRead(A0);

 int drawHeight = map(sensor, 0, 1023, 0, TFTscreen.height());

// print out the height to the serial monitor
Serial.println(drawHeight);
// draw a line in a nice color
TFTscreen.stroke(250, 180, 10);
TFTscreen.line(xPos, TFTscreen.height() - drawHeight, xPos, TFTscreen.height());

// if the graph has reached the screen edge

// erase the screen and start again
if (xPos >= 160) {
xPos = 0;
TFTscreen.background(250, 16, 200);
} else {
// increment the horizontal position:
xPos++;
}

delay(16);
}
[GetCode](//www.arduino.cc/en/Tutorial/TFTGraph?action=sourceblock&num=1)

Share

NEWSLETTER

Enter your email to sign up

2017 Arduino

Copyright Notice (//www.arduino.cc/en/Main/CopyrightNotice)

About us (//www.arduino.cc/en/Main/AboutUs)

(https://twitter.com/arduino)

Contact us (//www.arduino.cc/en/Main/ContactUs)

Careers (//www.arduino.cc/Careers)

(https://www.facebook.com/ocial.arduino)

(https://www.ickr.com/photos/arduino_cc)

(https://youtube.com/arduinoteam)

(https://plus.google.com/+Arduino)