Scrolling Text With Arduino and Adafruit TFT Shield




Introduction: 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

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


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




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:

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 ++)
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.
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
And then the offset variable is incremented, we go through the i loop again, and we assemble the string elloHelloH. The display scrolls!

Be the First to Share


    • Tinkercad to Fusion 360 Challenge

      Tinkercad to Fusion 360 Challenge
    • Electronics Contest

      Electronics Contest
    • Make It Modular: Student Design Challenge

      Make It Modular: Student Design Challenge



    1 year ago

    great tutorial for me being newby. Works fine with my very first project. Now I would like to make the scrolling smoother, in other words instead of scrolling/moving the text letter by letter make the text moving by some pixels to the left by each step so it appears like a continous stream. Does anybody know how to do this or knows where to find a sample sketch to achieve this? Thanks for your help.


    2 years ago

    Hi and thanks for sharing this..
    I would like to ask if you perhaps have any idea as to how to implement this without a delay(); delay, i am strugling now for some time to figure out what element i need to isolate in maybe a timer or a (blinkwithoutdelay) millis delay, but i have not been succesfull so far.
    I want to use about 100 millis delaytime for the scroll speed of the text itself but by using delay(100); other parts of my display block partially as expected and without delay its just unreadable.
    If you by any chance know how this could be solved it would be very much appreciated.
    Kind regards,,


    Question 3 years 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?


    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.

    Robert Hart
    Robert Hart

    Reply 7 years ago on Introduction

    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