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!

Share

    Recommendations

    • Make it Glow Contest 2018

      Make it Glow Contest 2018
    • Plastics Contest

      Plastics Contest
    • Optics Contest

      Optics Contest

    6 Discussions

    0
    None
    lucky_and_samrt

    Question 10 days ago on Introduction

    I plan to make a sort of a "megatree" Christmas tree and scroll the text "HAPPY HOLIDAYS" across at a height where the pixels are approximately the same horizontal distance apart as the approx. constant vertical spacing of 2.5 inches apart. The tree will be constructed with 24 strings of WS2811 pixels, each 50 pixels long where these strings are oriented vertically. If you imagine this conic shape rolled out into the flat, you have an array of 24 pixels wide by 50 pixels high. This means the "screen width" is only 4 characters wide when rounded down to the closest integer. I am wondering as the text "rolls off the screen to the left" if the display will look quite jumpy, given that the display is only 24 pixels wide and each character is 5 pixels wide. Orienting the text vertically doesn't seem plausible either, given that the strings diverge from 1.17 inches apart at the top to 10 inches apart at the bottom. Any thoughts?

    0
    None

    Only thing that shows on my TFT is a white screen. I've tried every library I can find. Anyone know whats wrong? I'm using Arduino UNO and Seeed TFT v1.

    1 reply

    As I understand it, the v1 shield has and 8-bit parallel pin connection rather than the SPI bus connection that the v2 uses. The defines in the above sketch reference the v2's chip select (CS) and the Data/Command (DC) pin connections to the UNO. I believe there is another older Adafruit library that will work with parallel connections, but I don't know for sure. There may be a way to use the current one as well, but you would have to have a look at the ILI9341 library to see what the initialization would be for the older shield. Seeed may still have their libraries for the older shield available, I think they were also based on the Adafruit libraries