Examples > TFT

TFT Display Text

This example demonstrates how to draw text on the Arduino GLCD screen when connected to an Arduino. The Arduino reads the value of an analog sensor attached to pin A0, and writes the value to the LCD screen, updating every quarter second.

Hardware Required

  • Arduino Uno
  • Arduino TFT screen
  • breadboard
  • hookup wire
  • one 10-kilohm potentiometer

Circuit

Connect power and ground to the breadboard.
Show me how to do thatShow me how to do that

Place the potentiometer on the breadboard. Connect one side to ground, and the other to power. Connect the middle pin to A0.
Show me how to do thatShow me how to do that

Connect the 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.
Show me how to do thatShow me how to do that

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.
Show me how to do thatShow me how to do that

Code

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

#include <SPI.h>
#include <TFT.h>
[Get Code]

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.

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

TFT TFTscreen = TFT(cs, dc, rst);
[Get Code]

To update the screen with text, you'll need to store dynamic content in a char array.

char sensorPrintout[4];

In setup(), initialize the screen and clear the background. Set the color for the font with stroke(), and write any static text to the screen. In this case, you'll write "Sensor Value :". This will stay at the top of the screen and not change as long as the sketch runs. Before entering the loop(), set the text size so you can really see the sensor values stand out.

void setup() {
  TFTscreen.begin();

  TFTscreen.background(0, 0, 0);

  TFTscreen.stroke(255,255,255);
  TFTscreen.setTextSize(2);
  TFTscreen.text("Sensor Value : ",0,0);
  TFTscreen.setTextSize(5);
}
[Get Code]

In loop(), read the value from the potentiometer and store it in a string. Convert the string content to a char array, storing it in the global array you declared int he beginning of your program.

void loop() {

  String sensorVal = String(analogRead(A0));

  sensorVal.toCharArray(sensorPrintout, 4);
[Get Code]

Set the text color (this would be a good place to change the color of the text depending on the value from the potentiometer), and print it to the screen below the static text.

TFTscreen.stroke(255,255,255);
  TFTscreen.text(sensorPrintout, 0, 20);
[Get Code]

Wait a quarter of a second, then erase the text you just wrote, so you can update it in the next run through loop().

delay(250);
  TFTscreen.stroke(0,0,0);
  TFTscreen.text(sensorPrintout, 0, 20);
}
[Get Code]

The complete sketch is below :

/*
  Arduino TFT text example

  This example demonstrates how to draw text on the
  TFT with an Arduino. The Arduino reads the value
  of an analog sensor attached to pin A0, and writes
  the value to the LCD screen, updating every
  quarter second.

  This example code is in the public domain

  Created 15 April 2013 by Scott Fitzgerald

  http://www.arduino.cc/en/Tutorial/TFTDisplayText

 */

#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

// create an instance of the library
TFT TFTscreen = TFT(cs, dc, rst);

// char array to print to the screen
char sensorPrintout[4];

void setup() {

  // Put this line at the beginning of every sketch that uses the GLCD:
  TFTscreen.begin();

  // clear the screen with a black background
  TFTscreen.background(0, 0, 0);

  // write the static text to the screen
  // set the font color to white
  TFTscreen.stroke(255, 255, 255);
  // set the font size
  TFTscreen.setTextSize(2);
  // write the text to the top left corner of the screen
  TFTscreen.text("Sensor Value :\n ", 0, 0);
  // ste the font size very large for the loop
  TFTscreen.setTextSize(5);
}

void loop() {

  // Read the value of the sensor on A0
  String sensorVal = String(analogRead(A0));

  // convert the reading to a char array
  sensorVal.toCharArray(sensorPrintout, 4);

  // set the font color
  TFTscreen.stroke(255, 255, 255);
  // print the sensor value
  TFTscreen.text(sensorPrintout, 0, 20);
  // wait for a moment
  delay(250);
  // erase the text you just wrote
  TFTscreen.stroke(0, 0, 0);
  TFTscreen.text(sensorPrintout, 0, 20);
}
[Get Code]