Using the 3.5" TFT Breakout with Arduino involves wiring up the breakout to your Arduino-compatible microcontroller, plugging in your EYESPI compatible screen via the EYESPI cable, installing the library for your display type and running the provided example code.
This page uses the Feather RP2040 for demonstrating Arduino usage. You can use the same concepts to get going with any board.
A new chip means a new Feather, and the Raspberry Pi RP2040 is no exception. When we saw this chip we thought "this chip is going to be awesome when we give it the Feather...
view guides using product
$11.95
In Stock
Our most recent display breakouts have come with a new feature: an 18-pin "EYE SPI" standard FPC...
view guides using product
Out of Stock
Connect this to that when a 18-pin FPC connector is needed. This 25 cm long cable is made of a flexible PCB. It's A-B style which means that pin one on one side will match...
$0.95
In Stock
- Board 3.3V to breakout VIN (red wire)
- Board 3.3V to breakout Lite (yellow wire)
- Board GND to breakout GND (black wire)
- Board pin SCK to breakout SCK (blue wire)
- Board pin MI to breakout MISO (green wire)
- Board pin MO to breakout MOSI (yellow wire)
- Board pin 10 to breakout DC (orange wire)
- Board pin 9 to breakout TCS (aqua wire)
- Board pin SCL to breakout SCL (yellow wire)
- Board pin SDA to breakout SDA (blue wire)
Attach the TFT screen to the EYESPI breakout with an EYESPI cable as described on the Plugging in an EYESPI Cable page.
Library Installation
You can install the Adafruit FT5336 library for Arduino using the Library Manager in the Arduino IDE.
Click the Manage Libraries ... menu item, search for Adafruit FT5336, and select the Adafruit_FT5336 library:
If asked about dependencies, click "Install all".
If the "Dependencies" window does not come up, then you already have the dependencies installed.
If the dependencies are already installed, you must make sure you update them through the Arduino Library Manager before loading the example!
/***************************************************
This is our touchscreen painting example for the Adafruit HX8357
with FT5336 captouch breakout
----> http://www.adafruit.com/products/5846
Check out the links above for our tutorials and wiring diagrams
Adafruit invests time and resources providing this open source code,
please support Adafruit and open-source hardware by purchasing
products from Adafruit!
Written by Limor Fried/Ladyada for Adafruit Industries.
MIT license, all text above must be included in any redistribution
****************************************************/
#include <Adafruit_HX8357.h>
#include <Adafruit_FT5336.h>
// The FT5336 uses hardware I2C (SCL/SDA)
Adafruit_FT5336 ctp = Adafruit_FT5336();
#define FT5336_MAXTOUCHES 5
// The display also uses hardware SPI, plus #9 & #10
#define TFT_CS 9
#define TFT_RST -1
#define TFT_DC 10
Adafruit_HX8357 tft = Adafruit_HX8357(TFT_CS, TFT_DC);
// Size of the color selection boxes and the paintbrush size
#define BOXSIZE 40
#define PENRADIUS 3
int oldcolor, currentcolor;
void setup(void) {
Serial.begin(115200);
//while (!Serial) delay(10); // pause the serial port
Serial.println("3.5 inch Cap Touch Paint!");
tft.begin();
if (! ctp.begin(FT53XX_DEFAULT_ADDR, &Wire)) { // pass in 'sensitivity' coefficient and I2C bus
Serial.println("Couldn't start FT5336 touchscreen controller");
while (1) delay(10);
}
Serial.println("Capacitive touchscreen started");
tft.fillScreen(HX8357_BLACK);
// make the color selection boxes
tft.fillRect(0, 0, BOXSIZE, BOXSIZE, HX8357_RED);
tft.fillRect(BOXSIZE, 0, BOXSIZE, BOXSIZE, HX8357_YELLOW);
tft.fillRect(BOXSIZE*2, 0, BOXSIZE, BOXSIZE, HX8357_GREEN);
tft.fillRect(BOXSIZE*3, 0, BOXSIZE, BOXSIZE, HX8357_CYAN);
tft.fillRect(BOXSIZE*4, 0, BOXSIZE, BOXSIZE, HX8357_BLUE);
tft.fillRect(BOXSIZE*5, 0, BOXSIZE, BOXSIZE, HX8357_MAGENTA);
tft.fillRect(BOXSIZE*6, 0, BOXSIZE, BOXSIZE, HX8357_WHITE);
tft.fillRect(BOXSIZE*7, 0, BOXSIZE, BOXSIZE, HX8357_BLACK);
// select the current color 'red'
tft.drawRect(0, 0, BOXSIZE, BOXSIZE, HX8357_WHITE);
currentcolor = HX8357_RED;
}
void loop() {
uint8_t touches = ctp.touched();
// Wait for a touch
if (! touches) {
return;
}
// Retrieve the points, up to 5!
TS_Point ps[FT5336_MAXTOUCHES];
ctp.getPoints(ps, FT5336_MAXTOUCHES);
for (int i=0; i<FT5336_MAXTOUCHES; i++) {
// Check if z (pressure) is zero, skip if so
if (ps[i].z == 0) continue;
/*
ps[i].x = map(ps[i].x, 0, 320, 0, 320);
ps[i].y = map(ps[i].y, 0, 480, 0, 480);
*/
// Print out the remapped/rotated coordinates
Serial.print("("); Serial.print(ps[i].x);
Serial.print(", "); Serial.print(ps[i].y);
Serial.print(")\t");
}
Serial.println();
if (ps[0].y < BOXSIZE) {
oldcolor = currentcolor;
if (ps[0].x < BOXSIZE) {
currentcolor = HX8357_RED;
tft.drawRect(0, 0, BOXSIZE, BOXSIZE, HX8357_WHITE);
} else if (ps[0].x < BOXSIZE*2) {
currentcolor = HX8357_YELLOW;
tft.drawRect(BOXSIZE, 0, BOXSIZE, BOXSIZE, HX8357_WHITE);
} else if (ps[0].x < BOXSIZE*3) {
currentcolor = HX8357_GREEN;
tft.drawRect(BOXSIZE*2, 0, BOXSIZE, BOXSIZE, HX8357_WHITE);
} else if (ps[0].x < BOXSIZE*4) {
currentcolor = HX8357_CYAN;
tft.drawRect(BOXSIZE*3, 0, BOXSIZE, BOXSIZE, HX8357_WHITE);
} else if (ps[0].x < BOXSIZE*5) {
currentcolor = HX8357_BLUE;
tft.drawRect(BOXSIZE*4, 0, BOXSIZE, BOXSIZE, HX8357_WHITE);
} else if (ps[0].x <= BOXSIZE*6) {
currentcolor = HX8357_MAGENTA;
tft.drawRect(BOXSIZE*5, 0, BOXSIZE, BOXSIZE, HX8357_WHITE);
} else if (ps[0].x <= BOXSIZE*7) {
currentcolor = HX8357_WHITE;
tft.drawRect(BOXSIZE*5, 0, BOXSIZE, BOXSIZE, HX8357_RED);
} else {
// erase
tft.fillScreen(HX8357_BLACK);
// make the color selection boxes
tft.fillRect(0, 0, BOXSIZE, BOXSIZE, HX8357_RED);
tft.fillRect(BOXSIZE, 0, BOXSIZE, BOXSIZE, HX8357_YELLOW);
tft.fillRect(BOXSIZE*2, 0, BOXSIZE, BOXSIZE, HX8357_GREEN);
tft.fillRect(BOXSIZE*3, 0, BOXSIZE, BOXSIZE, HX8357_CYAN);
tft.fillRect(BOXSIZE*4, 0, BOXSIZE, BOXSIZE, HX8357_BLUE);
tft.fillRect(BOXSIZE*5, 0, BOXSIZE, BOXSIZE, HX8357_MAGENTA);
tft.fillRect(BOXSIZE*6, 0, BOXSIZE, BOXSIZE, HX8357_WHITE);
}
if (oldcolor != currentcolor) {
if (oldcolor == HX8357_RED)
tft.fillRect(0, 0, BOXSIZE, BOXSIZE, HX8357_RED);
if (oldcolor == HX8357_YELLOW)
tft.fillRect(BOXSIZE, 0, BOXSIZE, BOXSIZE, HX8357_YELLOW);
if (oldcolor == HX8357_GREEN)
tft.fillRect(BOXSIZE*2, 0, BOXSIZE, BOXSIZE, HX8357_GREEN);
if (oldcolor == HX8357_CYAN)
tft.fillRect(BOXSIZE*3, 0, BOXSIZE, BOXSIZE, HX8357_CYAN);
if (oldcolor == HX8357_BLUE)
tft.fillRect(BOXSIZE*4, 0, BOXSIZE, BOXSIZE, HX8357_BLUE);
if (oldcolor == HX8357_MAGENTA)
tft.fillRect(BOXSIZE*5, 0, BOXSIZE, BOXSIZE, HX8357_MAGENTA);
if (oldcolor == HX8357_WHITE)
tft.fillRect(BOXSIZE*6, 0, BOXSIZE, BOXSIZE, HX8357_WHITE);
}
}
for (int i=0; i<FT5336_MAXTOUCHES; i++) {
// Check if z (pressure) is zero, skip if so
if (ps[i].z == 0) continue;
if (((ps[i].y-PENRADIUS) > BOXSIZE) && ((ps[i].y+PENRADIUS) < tft.height())) {
tft.fillCircle(ps[i].x, ps[i].y, PENRADIUS, currentcolor);
}
}
}
Upload the sketch to your board and open up the Serial Monitor (Tools -> Serial Monitor) at 115200 baud. In the Serial Monitor, you should see the values from the touch screen being printed out. If you press with more than one point, you'll see multiple sets of coordinates.
The first number is the X coordinate, the second number is the Y coordinate and the last two numbers are Z "pressure" coordinates that can tell you how hard the touch pad is being pressed.
On the TFT, you'll be able to doodle with the different colors on the left side of the screen.
Text editor powered by tinymce.
