Introduction: TFT Touch Screen Animation Engine and 8x8 RGB LED Matrix Controller

By Disc Golf Stats
About: Will write code for food. :) If you need help with any of your embedded Arduino applications please send me a message.

This embedded application has heaps of creative potential for any aspiring Arduino fanatics! A TFT Touch Screen Animation Engine and optional 8x8 RGB LED Matrix Controller. Watch the introduction video for more details:

What you need:

  • TFT Touch Screen with SD socket - I used an UNO R3 2.8" TFT Touch Screen (the source code was tested on this TFT and some settings may be different for other TFTs).
  • SD Micro (inserts into TFT SD Socket)
  • Arduino: a Mega to control the optional 8x8 LED matrix or an UNO for standalone TFT operation

Optional: I've created an instructional to build the 8x8 RGB LED Matrix breakout board so I won't go into details in this instructional. You can find the build here: https://www.instructables.com/id/Arduino-8x8-RGB-LE...

  • 8x8 RGB LED Matrix
  • Breadboard to connect the 8x8 matrix to the shift registers.
  • 24 resistors (220 Ohm)
  • 4 Shift Registers (74HC595)
  • Lots of jumper wire to make all the connections.

Step 1: Get the Source Code

Download and install the source code sketch and libraries below. These are needed to interface with the UNO R3 2.8 TFT Touch Screen.

https://github.com/dmainmon/TFT-Animation-Engine-a...

Another useful resource: SD library reference: https://www.arduino.cc/en/Reference/SD

You need to unzip and extract the folders containing the .h and .cpp files into the arduino programs library directory: C:\Program Files (x86)\Arduino\libraries

Watch the source code video demonstration and copy the code into your own sketch. There is a link in the video to download the source code from github. Some of the programming concepts covered:

  • State Management
  • Confirmation Events
  • Data Files
  • Button Management

Step 2: Connect 8x8 LED Matrix (optional)

You will need to construct the matrix. You can follow the instructable here:

https://www.instructables.com/id/Arduino-8x8-RGB-LE...

The TFT Touch Screen takes up most of the pins on an Arduino UNO. So, for this build I used a Mega 2560. The TFT shield covers a lot of the Mega but there are still plenty of pin outs available. Refer to the diagram image for more detailed wiring information. The table below shows the difference between the UNO setup and Mega. (Note: these settings are specific to my UNO R3 TFT 2.8" Touch Screen with SD. A different brand may require different settings.)

UNOMega

int DATA = 3;
int DATA_OUTPUT_ENABLE = 4;
int LATCH = 5;
int CLOCK = 6;
int RESET = 7;

int DATA = 22;
int DATA_OUTPUT_ENABLE = 24;
int LATCH = 26;
int CLOCK = 28;
int RESET = 30;

Step 3: Create Animations

There's unlimited creative potential for creating your own animations. You can create long messages that display like a flashing marquee. You can also create designs, icons, avatars and put them all in motion. After saving to the built in SD card you can then copy the files to a computer to backup your creations.

  • Different fonts
  • Message marquee
  • Avatar animation
  • Animated designs

After the source code overview, this video has some instructions and demonstrations on creating, saving and playing more animations.

Step 4: Extend the Application

There's many things you can do with this application. Here's a few ideas on how you can make it better and take it to the next level:

From a programming perspective I would love to do all of these things. Perhaps I will in a future version.

  • single frame editing
  • infinite play with loop breakout
  • more than 10 files
  • different drawing methods
    • char by char
    • line by line
    • frame by frame
    • scrolling in frames from various directions.
  • scale up as a standalone TFT animation machine and allow more complexity to the frames (use more than 64 "pixels" on the screen).
  • scale it up to control larger LED Matrix or even a 3D LED Cube
  • save last settings or individual file settings.

There are also many real world scenarios where this application could be implemented. Here's some ideas:

  • Connect to a motion detector and display a message on motion detection. For example, place the 8x8 in a shop window and display a custom "Out to Lunch" message activated by motion.
  • Place the 8x8 in the rear window of a car to display polite messages.

If you need help with your embedded Arduino applications or need clarification on any of my Instructables please send me a message or post a comment.

If you get a chance to build this embedded application, please share your animations. I'd love to see what you come up with!