Scrolling Text With Arduino and Adafruit TFT Shield

1. What we are going to do: demonstrate text scrolling with an Arduino and an Adafruit 2.8 inch TFT touch shield

2. What we will use
   Arduino Uno
   Adafruit 2.8 inch TFT touch shield

3. Assembly
   Mount TFT shield on Arduino
   Take care to avoid bending pins - it does go together

Step 1: Arduino Sketch and Ino File Attachment

The following Arduino sketch is the program that makes the text scroll.

/*
Arduino project

Scrolling Text on ADAFRUIT TFT Arduino Shield

sketch uses Adafruit libraries - for more information

http://learn.adafruit.com/adafruit-gfx-graphics-l...

a Renfrew Arduino 2014 project - public domain

(scroll routine thanks to Andrew Wendt)

*/

// libraries

#include "SPI.h" // SPI display

#include "Adafruit_GFX.h" // Adafruit graphics

#include "Adafruit_ILI9341.h" // ILI9341 screen controller

// pin definitions

#define TFT_DC 9

#define TFT_CS 10

Adafruit_ILI9341 tft=Adafruit_ILI9341(TFT_CS, TFT_DC); // hardware SPI

void setup()

{

tft.begin();

tft.fillScreen(ILI9341_CYAN);

tft.fillScreen(ILI9341_BLUE);

tft.setTextColor(ILI9341_WHITE, ILI9341_BLACK); // White on black

tft.setTextWrap(false); // Don't wrap text to next line

tft.setTextSize(5); // large letters

tft.setRotation(1); // horizontal display

}

void loop()

{

String text = " . . Text scrolling on Adafruit TFT shield . ."; // sample text

const int width = 18; // width of the marquee display (in characters)

// Loop once through the string

for (int offset = 0; offset < text.length(); offset++)

{

// Construct the string to display for this iteration

String t = "";

for (int i = 0; i < width; i++)

t += text.charAt((offset + i) % text.length());

// Print the string for this iteration

tft.setCursor(0, tft.height()/2-10); // display will be halfway down screen

tft.print(t);

// Short delay so the text doesn't move too fast

delay(200);

}

}

Step 2: How It Works

In this demo we displayed this text string:
. . Text Scrolling with Adafruit TFT shield .. (47 characters?)
The text displays in scrolling marquee fashion, in large letters, with 18 characters across the screen.
You can replace the text with your own message that you want to scroll across the screen.

How the Sketch works
- most of the work in assembling the strings of characters to display is done in this line:
{
t+= text.charAt ((offset + i) % text.length());
}
If you understand that line, you don't need any further explanation; stop reading.

- continuing on
For everyone else, you have to understand how this routine works or it won't be interesting, so keep reading.
In this explanation we will uses a simpler example, with a shorter text.
String text = "Hello" (which is 5 characters).
And we will define a shorter marquee display width.
const int width = 10;
Our goal is to display these strings consecutively in the display window:
HelloHello
elloHelloH
lloHelloHe
etc.

To keep track of where we start each consecutive text string we use the variable 'offset'.
offset is incremented in the following line to change the starting point of the display string.
for (int offset = 0; offset < text.length(); offset ++)
example:
HelloHello offset == 0
elloHelloH offset == 1
lloHelloHe offset == 2
and so on until offset is equal to 5
As stated above, offset keeps track of the starting point of the string.
We use a loop with the counter i to assemble the rest of the text string each time the text is displayed.
for (int i = 0; i < width; i++)
width is 10. By stepping through this loop 10 times we will assemble a string of characters that is equal to the width of the marquee display window, which is 10 characters. We do all this before printing the text to the screen.
Next is the line mentioned above that assembles the string one character at a time as we step through the i loop:
t+= text.charAt ((offset + i) % text.length());
The first time through this loop t holds the string H. The second time He - and so on, for the 10 iterations of the loop, at which point t holds HelloHello.
When the loop is completed, the sketch prints the string to the screen.
tft.print(t);
On the first iteration offset == 0 and i == 0. text.length() == 5, which is the length of our string.
This gives the result t+= text.charAt(0 % 5);
0 % 5 uses the modulo operator %
modulo is the remainder when two integers are divided.
0 divided by 5 produces remainder 0.
So the result of 0 % 5 (read as 0 mod 5) is 0
And text.charAt(0) is the first character of the string: H.
The second time through this loop i is incremented to 1.
The result of 1 % 5 ( or 1 mod 5) is 1.
This adds the second character, e, to the string t. t now is He
After 10 iterations t holds the characters HelloHello.
Then we print t
tft.print(t);
And then the offset variable is incremented, we go through the i loop again, and we assemble the string elloHelloH. The display scrolls!