IPS LCD 3.5″ 320×480 RGB SPI Display with Capacitive Touchscreen

Description

This 3.5″ IPS LCD is a full color SPI display with a resolution of 320 x 480 pixels.  It uses the ST7796 display controller with SPI interface.  It also includes a capacitive touchscreen with built-in FT6336 controller that uses an I2C interface.

This display provides a significant upgrade over the more common ILI9341 displays with much better viewing angles, higher resolution and capacitive touch that requires no calibration.   It is the display used on our Mini Platform for Teensy 4.1.

PACKAGE INCLUDES:

• IPS LCD 3.5″ 320×480 RGB Display with ST7796 controller and capacitive touchscreen

KEY FEATURES OF IPS LCD 3.5″ 320×480 DISPLAY WITH CAPACITVE TOUCHSCREEN:

• 3.5″ IPS LCD with 320 x 480 resolution
• 65K colors with ST7796U controller
• Capacitive touch screen with FT6336U controller requires no calibratoin
• SPI 4-wire interface operates at up to 80MHz
• Built-in MicroSD card slot
• 5V module operation
• 3.3V and 5V logic compatible with on-board level shifters
• Mfr PN MSP3526

These full color displays are large enough for many applications even when using touch.

The modules have an MicroSD card socket.  This socket sits on the same SPI bus as the display with a separate CS pin.

Though the display is powered from 5V, internally it operates at 3.3V and includes built-in logic level shifters and so is compatible with both 3.3V and 5V microcontrollers.

IPS Display Technology

This display uses IPS technology which stands for “in-plane switching” and is designed for better color accuracy and much wider viewing angles than found on standard LCDs that use TN or similar technologies.  Viewing angles are basically considered to be 180º and only limited by the ability to see the actual content being displayed rather than being limited by the loss of brightness as with displays like the ILI9341.

In addition, the capacitive touch overlay used on this display is clear and does not degrade the brightness and off-axis image quality of the display like a more typical resistive touch overlay does.

Display Power

The display power comes in on the Vcc pin.  The display includes an on-board 3.3V regulator, so the display should be operated off of 5V power on this pin to feed the regulator and it will accept a range of 3.6V – 5.5V.  Current draw is typically 95mA..  This 5V power can come from the associated MCU or be a separate power supply.

The ground pin must be connected to the MCU ground.

Communication Interfaces

This display incorporates the SPI interface which provides for fast display updates.  It is a 4-wire interface and so includes a CS (Chip Select).  The SPI bus includes a high-speed 74LVC245 buffer chip to provide logic level shifting.

For best performance, a hardware SPI interface should be used if possible for fastest screen updates, though software SPI works fine for many applications.  On our Mini Platform for Teensy 4.1 product, we have run the SPI bus at up to 80MHz with no issues noted.  In a breadboard setup, SPI speeds should be kept at default to avoid issues due to marginal wiring.

The capacitive touch screen uses I2C for communication with the microcontroller.  These lines include a typical MOSFET level shifting setup that works well for normal I2C bus speeds.

Display Orientation and setup

The display can be rotated in all 4 directions.  Use setRotation(n); to rotate the image to match the physical rotation where n ranges from 0 to 3.

The touchscreen coordinates may need to be remapped to match the screen orientation.  In this case the Y coordinate (which is confusingly the x-axis when using in landscape orientation) is being flipped: p.y = map(p.y, 0, 479, 479, 0); 

Due to the IPS technology used in this display, it is necessary to invert the colors using tft.invertDisplay(true); after initializing the display.  If the display is working, but the colors are wonky, this is probably why.

MicroSD Card Socket

The MicroSD card socket is attached to the same SPI pins as the display.  It uses a separate CS pin.

If this display is used with a Teensy 4.1, the Teensy built-in MicroSD socket should normally be used as it uses a much faster QSPI bus for access.

Module Connections

Connection to the display is normally done via the 14-pin male header.  There is also a 14-pin FPC connector with a contact spacing of 0.5mm on the board to provide an alternate connection method.  The display ships with a matching 30cm long FPC cable in the box.

1 x 14 Header

• VCC –  Connect to 5V (3.6 to 5.5V).  Typically connected to the MCU power or can be separate power supply.
• GND – Connect to system ground.  This ground needs to be in common with the MCU.
• LCD_CS – Display Chip Select.  This is the SPI Chip select for the display
• LCD_RST – Reset input active LOW.  Pull to 3.3V if not using.
• LCD_RS – Most LCDs label it as DC -Data or Command.  HIGH = Data, LOW = Command
• SDI(MOSI) – Display SPI Write Data.  Connects to MOSI on MCU
• SCK –  Display SPI Clock.  Connects to SPI SCK (Clock) on MCU
• LED – LED Backlight Control.  HIGH = backlight on.  Connect to 3.3V if always ON or can be logic controlled.  This pin has a 10K pullup to 3.3V on the LCD
• SDO(MISO) – Display SPI Read Data.  Connect to SPI MISO on MCU
• CTP_SCL – Touch I2C clock.  Connect to SCL pin on MCU
• CTP_RST –Touch reset.  Active LOW, can be pulled HIGH if not using.
• CTP_SDA – Touch I2C Data.  Connect to SDA pin on MCU
• CTP_INT – Touch interrupt output.  Connect to input pin on MCU if using interrupts for touch.  Touch can also be polled.
• SD_CS – Chip Select for MicroSD.  Active LOW. If using, connect to digital pin on MCU.  This pin has a 10K pullup resistor on the LCD.

OUR EVALUATION RESULTS:

These displays are a significant upgrade over the more common ILI9341 based displays.  Due to the IPS display technology, the off-axis viewing angles are very good as shown below and the capacitive touch screen does not degrade the quality and brightness of the display like the more common resistive touch screens do.

The higher 320×480 resolution and slightly larger display size allow for more graphical capability.  The black frame is also a plus in my opinion.

The capacitive touch is directly mapped to the display, so orientation does not need to be changed when display orientation is changed and it does not require calibration like the  more common resistive touch screens.

Library support for the ST7796 is not as expansive as for the more common ILI9341 displays, but most microcontrollers have libraries available.

For use with Teensy, support for the ST7796 based displays is now included in Teensyduino as of the latest release which is version 1.6 as of this writing. Instructions for installing the latest  version of Teensyduino can be found at this link: https://forum.pjrc.com/index.php?threads/teensyduino-1-60-released.77695/

The TFT_eSPI library has good support for this display on most platforms and Adafruit also has libraries available. Both of these libraries can be downloaded from the IDE.

The capacitive touch screen uses the FT6336 touch controller that communicates over the I2C bus.  The Adafruit FT6206.h library supports this chip and can be downloaded from the IDE.

These modules are breadboard friendly with a 14-pin header on the back that can be inserted into a solderless breadboard or a 14-pin female connector can be used to connect to it if the display is to be mounted on a PCB.  The display is mounted on a stiff PCB that provides good support, but be sure to press on the header pins or PCB when applying pressure to insert them into a breadboard and not press on the glass to avoid possible damage.

Though these displays can seem to be a bit intimidating to use at first, just follow these steps to get up and running fairly easily.  The pin labeling is on the back only, so we have pictures with the pins labeled on both the front and back to make life a little easier.

I’m also using the Teensy 4.1 in the example below.

Connecting the Display

Connect VCC to  5V and GND to ground on the MCU.

Connect the SPI and I2C control lines for the display.  In our example we are using hardware SPI as it gives the best performance.   The SPI pin location will depend on the MCU you are using.  We are using it with the Teensy 4.1 in this example, but the pinout also works with the Uno and compatibles.

• LCD_CS – CS  connects to pin 10 on MCU.  Can be changed to any digital pin.
• LCD_RST – Reset can be tied HIGH to 3.3V or 5V either through a resistor or directly.
• LCD_RS – Data/command connects to pin 9 on MCU.  Can be changed to any digital pin.
• SDI(MOSI) – MOSI connects to SPI MOSI on the MCU.  This is pin 11 on Teensy or Uno.
• SCK –  SCK connects to SPI SCK on MCU.  This is pin 13 on Teensy and Uno.
• LED – Backlight control can be pulled to 3.3V (or 5V) to turn it on.
• SDO(MISO) – MISO connects to SPI MISO on MCU.  This is pin 12 on Teensy and Uno.

Connect the touchscreen to the I2C bus

• CTP_SCL – Touch I2C clock connect to SCL pin on MCU.  This is pin 19 on Teensy or Uno
• CTP_RST –Touch reset should be tied HIGH to 3.3V or 5V either through a resistor or directly.
• CTP_SDA – Touch I2C Data connect to SDA pin on MCU.  This is pin 18 on Teensy or Uno.
• CTP_INT – Touch interrupt output can be left unconnected.
• SD_CS – Chip Select can be left unconnected.

Remember, these displays have built-in logic level shifter, so connections can be made directly to both 3.3V and 5V microcontrollers.

Install Some Libraries

The example uses one new library:

• “Adafruit_FT6206.h” which can be installed from the IDE

In addition, support for the ST7796 display was introduced into Teensyduino as of version 1.60 beta 4.  If you are using an earlier version, you will need to upgrade to the latest Beta version which is currently Beta 5.

Download and Run Program

The program below simply draws a couple of buttons on the display and changes background color depending on which button is pressed.  The touch X/Y coordinates are also displayed.

For a more in-depth program, refer to the example given with the Mini Platform for Teensy 4.1.

320 x 480 ST7796 IPS LCD with Capacitive Touch Test Program

/*
  ST7796 for Teensy 4.1 Example

  This program draws 2 buttons on the screen.  The Red button turns the screen
  red and the Blue button turns the screen blue.  
  Touch coordinates are displayed for any touches

  The ST7796 LCD support is now rolled into Teensyduino as of Version 1.60
  Get the latest version at this link:
  https://forum.pjrc.com/index.php?threads/teensyduino-1-60-released.77695/

  The FT6336 touch overlay uses the Adafruit_FT6206.h library downloadable
  from the IDE.

  This example code is in the public domain.
*/
#include <ST7796_t3.h>
#include <st7735_t3_font_Arial.h>
#include <Adafruit_FT6206.h>
#include <SPI.h>
#include <Wire.h>

// LCD control pins
#define TFT_CS 10 // LCD_CS pin
#define TFT_DC 9  // LCD_RS pin
// Use main SPI bus MOSI=11, MISO=12, SCK=13 with different control pins
ST7796_t3 tft = ST7796_t3(TFT_CS, TFT_DC);

// The FT6206 uses hardware I2C (SCL/SDA)
Adafruit_FT6206 ts = Adafruit_FT6206();

// Define RED button location and size on LCD
#define RED_X 100
#define RED_Y 50
#define RED_W 105
#define RED_H 42

// Define BLUE button location and size on LCD
#define BLUE_X 280
#define BLUE_Y 50
#define BLUE_W 105
#define BLUE_H 42

#define BUTTON_FONT Arial_16
#define TXT_FONT Arial_14

// Subroutine prototypes
void SetRedButton();   // Handles Scan button when touched
void SetBlueButton();  // Handles Audio button when touched

// Misc flags to keep track of things
boolean isTouched = false;  // Flag if a touch is in process

//===============================================================================
//  Initialization
//===============================================================================
void setup() {
  Serial.begin(115200);  //Initialize USB serial port to computer

  // Setup the LCD screen
  tft.init(320, 480);
  tft.invertDisplay(true);  // LCD requires colors to be inverted
  tft.setRotation(3);       // Rotates screen to match the desired orientation

  // Setup touch Screen with touch threshold of 40
  if (!ts.begin(40)) {
    Serial.println("Unable to start touchscreen.");
  } else {
    Serial.println("Touchscreen started.");
  }

  tft.fillScreen(ST7735_BLACK);  // Fill screen with black
  // Draw buttons
  SetRedButton();
  SetBlueButton();
  tft.setFont(TXT_FONT);         // Set initial font style and size
}
//===============================================================================
//  Main
//===============================================================================
void loop() {
  // Check to see if the touch screen has been touched
  if (ts.touched() && isTouched == false) {
    TS_Point p = ts.getPoint();

    // Map the touch point to the LCD screen.  X is vertical/Y is horizontal
    //p.x = map(p.x, 0, 319, 0, 319);  // X coordinate not remapped
    p.y = map(p.y, 0, 479, 479, 0);  // Y coordinate is flipped

    isTouched = true;

    // Look for a Scan Button Hit
    if ((p.y > RED_X) && (p.y < (RED_X + RED_W))) {
      if ((p.x > RED_Y) && (p.x <= (RED_Y + RED_H))) {
        Serial.println("Red Button Hit");
        tft.fillScreen(ST7735_RED);  // Fill screen with red
        SetRedButton();              // Redraw buttons
        SetBlueButton();
      }
    }
    // Look for an Audio Button Hit
    if ((p.y > BLUE_X) && (p.y < (BLUE_X + BLUE_W))) {
      if ((p.x > BLUE_Y) && (p.x <= (BLUE_Y + BLUE_H))) {
        Serial.println("Blue Button Hit");
        tft.fillScreen(ST7735_BLUE);  // Fill screen with blue
        SetRedButton();               // Redraw buttons
        SetBlueButton();
      }
    }

    Serial.print("x = ");  // Show our mapped touch coordinates for each touch
    Serial.print(p.x);
    Serial.print(", y = ");
    Serial.print(p.y);
    Serial.println();
    tft.fillRoundRect(160, 150, 150, 35, 4, ST7735_WHITE);
    tft.setCursor(170, 160);
    tft.setFont(TXT_FONT);         // Set font size
    tft.print("x = ");  // Show our mapped touch coordinates for each touch
    tft.print(p.x);
    tft.print(", y = ");
    tft.print(p.y);
    tft.println();
    delay(100);  // Debounce touchscreen a bit
  }
  if (!ts.touched() && isTouched) {
    isTouched = false;  // touchscreen is no longer being touched, reset flag
  }
}
//===============================================================================
//  Routine to draw Audio button current state and control audio playback
//===============================================================================
void SetRedButton() {
  tft.setCursor(RED_X + 8, RED_Y + 12);
  tft.setFont(BUTTON_FONT);
  tft.fillRoundRect(RED_X, RED_Y, RED_W, RED_H, 4, ST7735_GREEN);
  tft.setTextColor(ST7735_BLACK);
  tft.print("    RED");
  Serial.println("Red button hit");
}
//===============================================================================
//  Routine to draw scan button current state and initiate scan request
//===============================================================================
void SetBlueButton() {
  tft.setCursor(BLUE_X + 8, BLUE_Y + 12);
  tft.setFont(BUTTON_FONT);
  tft.fillRoundRect(BLUE_X, BLUE_Y, BLUE_W, BLUE_H, 4, ST7735_GREEN);
  tft.setTextColor(ST7735_BLACK);
  tft.print("   BLUE");
  Serial.println("Blue button hit");
}

FURTHER READING:

LCD WIKI – Good collection of technical information about these displays

BEFORE THEY ARE SHIPPED, THESE MODULES ARE:

• Sample inspected and tested per incoming shipment.

Notes:  

1. These LCDs ship in a hard plastic case and are well protected.

Technical Specifications