Introduction: TFT Animated Eyes

By

This project uses low cost parts to create a pair of animated eyes on TFT screens. The project is based on the Adafruit "Uncanny Eyes" project.

The two ST7735 128x128 pixel displays and the ESP32 board can typically bought online for around $10 total.

The software running on the ESP32 is an Arduino sketch, this is supported by the TFT_eSPI graphics library. The sketch is an example provided within the TFT_eSPI library.

Other processors can also be used such as ESP8266 and STM32 boards. The ESP32 and STM32 processors can use "Direct Memory Access" to transfer the images to the screen, this improves performance (aka frame rate). The sketch uses a significant amount of RAM and FLASH program memory so bear this in mind when choosing a processor.

Supplies

The project, as described, uses:

  • Two ST7735 1.4" 128x128 TFT displays with 4 wire SPI interface
  • One ESP32 processor board
  • Breadboard and wires
  • Arduino IDE
  • TFT_eSPI library version 2.3.4 or later

Step 1: Performance

Choose which processor you are going to use.

Typical rendering performances (fps = frames per second) for an eye are dependant on the processor, the SPI clock rate and whether DMA is employed. The ESP8266 gives the lowest frame rate but the eye movement is still quite fluid.

The ST7735 type displays can typically operate reliably with SPI clock rates up to 27MHz. Other displays may operate at higher rates, however 27MHz gives a good performance.

Step 2: Software Environment

    The Arduino IDE is used to compile and upload the sketch to the ESP32. This is a relatively advanced project, so it is suggested that you get the Arduino IDE up and running with the simpler examples to become familiar with the environment.

    The ESP32 board package must be loaded into the IDE if you are using that processor. For STM32 boards use the official stm32duino package.

    The TFT_eSPI graphics library can be loaded via the Arduino IDE's library manager.

    The TFT_eSPI library provides 2 examples for eye animation:

    • Animated_Eyes_1 is an example for a single display (240 x 320 pixels minimum)
    • Animated_Eyes_2 is an example for two displays

    This project uses the second sketch example.

    If you are already a TFT_eSPI library user and have a 240x320 (or larger) display operating correctly then the Animated_Eyes_1 will run without modification and display two animated eyes on a single screen.

    Step 3: Display Connections

    The prototype was built by plugging the ESP32 and displays into breadboards and using jumper wires. This is convenient for initial experimentation but is prone to poor connection especially if moved about. It the eyes are to be used as part of a costume then soldering all connections is recommended.

    Normally the TFT chip select line for a single display is defined within a user_setup file of the TFT_eSPI library, however when using the library with two displays the chip selects must be controlled by the sketch, thus you must NOT define the TFT_CS pin in the TFT_eSPI library setup files. Instead, the chip selects (CS) must be defined in the "config.h" tab of the Animated_Eyes_2 sketch.

    The TFT_eSPI library uses "user_setup" files to define all the parameters for the display, processor and interfaces, for the Animated_Eyes_2 sketch the "Setup47_ST7735.h" file was used with the wiring as shown above.

    The displays used for testing were 128x128 ST7735 displays, the TFT_eSPI library setup file may need to be changed as these displays come in many configuration variants.

    When it is all programmed and running the it can be unplugged from a computer and powered from a phone charger battery pack that has a USB output.