Overview

Add a dazzling color display to your Feather project with this Adafruit Mini Color TFT with Joystick FeatherWing.

It has so much stuff going on, we could not fit any more parts on the PCB! There's a 0.96" 160x80 Color TFT Display with 16-bit full color capability. And, so you can make a proper UI we added a 5-way navigation switch and two push buttons. The joystick can go left, right, up, down and 'in' for selection. Two buttons on the side can change modes or whatever you like.

Thanks to seesaw the 7 user interface switches are managed over I2C so you don't need any extra GPIO pins to spare, this display will even work on low-pin-availability Feathers like the ESP8266. All you need is the standard hardware SPI, I2C and two GPIO for TFT control. Heck, even the TFT reset pin and backlight is controlled by seesaw, all over I2C!

This lovely little display breakout is a great way to add a small, colorful and bright display to any Feather project, and it works with all of our Feathers. Since the display uses 4-wire SPI to communicate and has its own pixel-addressable frame buffer, it can be used with every kind of microcontroller. Even a very small one with low memory and few pins available.

Tested working with all Feather boards. Check out our range of Feather boards here.

Pinouts

Color TFT Display

The color TFT is what you're here for! This 0.96" diagonal display has surprisingly high resolution, 80x160 16-bit color pixels inside.

The display is in the middle of the Wing and uses 4 Wing pins and then 2 seesaw pins:

  • SPI SCK - SPI data clock out from Feather to display
  • SPI MOSI - SPI data transmit from Feather to display
  • SPI CS - Chip Select pin, on the first digital pin to the left of SCL
  • SPI DC - Data/Command select, on the second digital pin to the left of SCL

SCK and MOSI are fixed to the default SPI pins on each Feather. You can change the CS and DC pins if you'd like! On the bottom of the Wing there are solder jumpers, cut the default CS & DC and solder them to any two pins you like. We alternate so you have a few options.

The remaining two pins for controlling the TFT are handled by seesaw (our I2C converter chip):

  • TFT Reset - we only need to toggle this pin once at the beginning of running a program, and it can happen slowly so we use seesaw to manage this pin
  • TFT Backlight - not all Feathers have PWM and also most of the time you don't need to do a lot with the backlight so we connect it to a seesaw PWM pin so you can dim/brighten as you desire

Buttons and Joystick

In addition to a pretty display, now you have a little user interface you can build. You get 7 total buttons

  • Button A
  • Button B
  • 5-way Navigation Joystick - Up/Down/Left/Right/Select

Since many GPIO would be needed for so many buttons we use seesaw on I2C to manage reading all the buttons.

seesaw Chip

seesaw is on I2C, it is a pre-programmed ATSAMD09 chip which will listen to commands over I2C and read buttons, dim the backlight and toggle the display reset line.

Power and Reset

In addition, there is a reset button that will reset both Feather and Wing, and to power the wing we connect to the GND/3.3V power pins supplied by the Feather power supply.

Arduino Code

OK you are now ready to use your FeatherWing!

Install Arduino Libraries

Lets begin by installing all the libraries we need. Open up the library manager in Arduino IDE

Search for and install the Following libraries:

Adafruit GFX

If using an earlier version of the Arduino IDE (pre-1.8.10), locate and install Adafruit_BusIO (newer versions handle this prerequisite automatically).

Adafruit ST7735 and ST7789

Adafruit seesaw

And finally, locate and install Adafruit_ZeroDMA.

Once you have installed these, restart the Arduino IDE

Graphics Test

Start by opening up the miniTFTwing -> graphicstest under the Adafruit ST7735/7789 library:

And upload it to your Feather!

You'll see a graphics test program run, showing drawing lines, text, rectangles, circles, triangles, etc.

We also have a demo of the joystick that is simpler, and shows basic reading of the buttons for making interactive interfaces under the basic example

CircuitPython Displayio Quickstart

The Mini Color TFT with Joystick FeatherWing is a fun piece of hardware. In addition to a miniature TFT display, it also has a Joystick and two buttons. This could be used to make a miniature gaming system, MP3 Player and much more. If you would like more information on this display, be sure to check out our Adafruit Mini TFT with Joystick FeatherWing guide. To use this display with displayio, you will need at least two main parts. First, you will need the TFT FeatherWing itself.

Adafruit Mini Color TFT with Joystick FeatherWing

PRODUCT ID: 3321
Add a dazzling color display to your Feather project with this Adafruit Mini Color TFT with Joystick FeatherWing.It has so much stuff going on, we could...
$24.95
IN STOCK

And second, you will need a Feather such as theFeather M0 Express or the Feather M4 Express. We recommend the Feather M4 Express because it's much faster and works better for driving a display.

Adafruit Feather M4 Express - Featuring ATSAMD51

PRODUCT ID: 3857
It's what you've been waiting for, the Feather M4 Express featuring ATSAMD51. This Feather is fast like a swift, smart like an owl, strong like a ox-bird (it's half ox,...
$22.95
IN STOCK

To connect the two, you have several options. One of the easiest ways is with the Doubler or Tripler which allows you to insert both items side-by-side. You can find out more about these including assembly information in our FeatherWing Proto, Doubler and Tripler guide. If you do decide to go with the doubler, be aware that it comes with one set of female headers and one of the set of stacking header, so you may want to order an extra set of female headers with it or you could just trim off the extra pins with some flush cutters.

FeatherWing Doubler - Prototyping Add-on For All Feather Boards

PRODUCT ID: 2890
This is the FeatherWing Doubler - a prototyping add-on and more for all Feather boards. This is similar to our
$7.50
IN STOCK

Header Kit for Feather - 12-pin and 16-pin Female Header Set

PRODUCT ID: 2886
These two Female Headers alone are, well, lonely. But pair them with any of our 
OUT OF STOCK

And finally, if you would like to go with a small profile, you could just go with either a set of female headers or stacking headers. In this guide we decided to just use a doubler with the extra female headers. Let's start by assembling the pieces.

Start with the doubler facing up.

Insert the Mini Color TFT with Joystick FeatherWing into the doubler.

Insert the Feather into the doubler. You're done! Wasn't that easy?

Required CircuitPython Libraries

Since this is no ordinary display and has some additional controls, we have written a special module for out FeatherWing Helper library that not only initializes the display for us, it also initializes the joystick and buttons. You will need the following libraries.

First, make sure you are running the latest version of Adafruit CircuitPython for your board.

Next, you'll need to install the necessary libraries to use the hardware--carefully follow the steps to find and install these libraries from Adafruit's CircuitPython library bundle.  Our introduction guide has a great page on how to install the library bundle for both express and non-express boards.

Remember for non-express boards, you'll need to manually install the necessary libraries from the bundle:

  • adafruit_st7735r
  • adafruit_featherwing
  • adafruit_seesaw
  • adafruit_bus_device

Before continuing make sure your board's lib folder or root filesystem has the adafruit_st7735radafruit_featherwingadafruit_seesaw and adafruit_bus_device files and folders copied over.

CircuitPython Code Example

Let's take a look at the simpletest for the FeatherWing library.

"""
This example display a CircuitPython console and
print which button that is being pressed if any
"""
import time
from adafruit_featherwing import minitft_featherwing

minitft = minitft_featherwing.MiniTFTFeatherWing()

while True:
    buttons = minitft.buttons

    if buttons.right:
        print("Button RIGHT!")

    if buttons.down:
        print("Button DOWN!")

    if buttons.left:
        print("Button LEFT!")

    if buttons.up:
        print("Button UP!")

    if buttons.select:
        print("Button SELECT!")

    if buttons.a:
        print("Button A!")

    if buttons.b:
        print("Button B!")

    time.sleep(0.001)

The first thing you might notice about this library is that compared to the other simpletests, it's quite small. Let's go through it a little at a time. First we start with the importing time so we can include a small delay at the end as well as the minitft_featherwing library itself.

Download: file
import time
from adafruit_featherwing import minitft_featherwing

Next we initialize the library and leave all the defaults. The FeatherWing allows you to change the DC and CS pins as well as change the address in case you have multiple displays. If you have changed either of these, you can pass the overriding values as parameters when initializing the library.

Download: file
minitft = minitft_featherwing.MiniTFTFeatherWing()

In the main loop we save the current state of all the buttons into a variable called buttons. From there we check if each button is True and print out a message.

Download: file
while True:
    buttons = minitft.buttons

    if buttons.right:
        print("Button RIGHT!")

    if buttons.down:
        print("Button DOWN!")

    if buttons.left:
        print("Button LEFT!")

    if buttons.up:
        print("Button UP!")

    if buttons.select:
        print("Button SELECT!")

    if buttons.a:
        print("Button A!")

    if buttons.b:
        print("Button B!")

    time.sleep(.001)

Go ahead and run the program and try pushing some of the buttons. It displays what you pushed right on the display.

Where to go from here

Be sure to check out this excellent guide to CircuitPython Display Support Using displayio

Downloads

This guide was first published on Aug 24, 2018. It was last updated on Aug 24, 2018.