TFTGraph

Graph the values from a variable resistor to the TFT.

TFT Graph

GLCD GraphDemosm

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.

Hardware Required

  • Arduino Uno

  • Arduino TFT screen

  • breadboard

  • hookup wire

  • one 10-kilohm potentiometer

Circuit

Connect power and ground to the breadboard.

GLCD logo1

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

GLCD text2

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.

GLCD text3

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 for more details.

GTFT text4 small

Click the image for a larger version

Code

To use the screen you must first include the SPI and TFT libraries.

1#include <SPI.h>
2#include <TFT.h>

Define 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.

1#define cs 10
2#define dc 9
3#define rst 8
4
5TFT TFTscreen = TFT(cs, dc, rst);

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.

1int xPos = 0;
2
3void setup(){
4
5 TFTscreen.begin();
6
7 TFTscreen.background(250,16,200);
8}

In

loop()
, read the value from the potentiometer, and map it to a value that fits in the screen's height.

1void loop(){
2
3 int sensor = analogRead(A0);
4
5 int graphHeight = map(sensor,0,1023,0,LCDscreen.height());

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

1TFTscreen.stroke(250,180,10);
2
3 TFTscreen.line(xPos, TFTscreen.height() - graphHeight, xPos, TFTscreen.height());

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.

1if (xPos >= 160) {
2
3 xPos = 0;
4
5 TFTscreen.background(250,16,200);
6
7 }
8
9 else {
10
11 xPos++;
12
13 }
14
15 delay(16);
16}

The complete sketch is below :

Contribute to Arduino

Join the community and suggest improvements to this article via GitHub. Make sure to read out contribution policy before making your pull request.

Missing something?

Check out our store and get what you need to follow this tutorial.