TFT screen

Prequesites

To use the TFT screen, you need to install the following libraries:

SPI.h , Adafruit_GFX.h, Adafruit_ST7796S_kbv.h

Programming the screen

To program the screen we need to first declare all the pins and give it to the Adafruit_ST7796S_kbv.h library. Then we need to initialize the screen and we can start using it.

#define TFT_CS 14
#define TFT_DC 13
#define TFT_RST 12 
#define MOSI 11
#define SCK 10
#define MISO 9

//simplify the name of the library and feed all the correct pins to it

Adafruit_ST7796S_kbv tft = Adafruit_ST7796S_kbv(TFT_CS, TFT_DC, MOSI, SCK, TFT_RST, MISO);

Drawing on the screen

To draw on the screen we can use the following functions:

tft.fillScreen(0x0000); //clear the screen
tft.fillRect(0, 0, 240, 240, 0xFFFF); //draw a white rectangle
tft.fillCircle(120, 120, 50, 0xF800); //draw a red circle
tft.fillTriangle(0, 0, 240, 240, 0, 240, 0x1F); //draw a blue triangle
tft.fillRoundRect(0, 0, 240, 240, 10, 0xF81F); //draw a pink rounded rectangle
tft.drawChar(120, 120, 'A', 0xFFFF, 0x0000, 2); //draw a character
tft.setTextSize(2); //set the text size
tft.setTextColor(0xFFFF); //set the text color
tft.setCursor(0, 0); //set the cursor
tft.println("Hello World!"); //print a string

To write Hello world on the screen we can use the following code:

tft.fillScreen(0x0000); //clear the screen
tft.setTextSize(2); //set the text size
tft.setTextColor(0xFFFF); //set the text color
tft.setCursor(0, 0); //set the cursor so it starts at the top right, you can also make this other numbers to change the position
tft.println("Hello World!"); //print a string

To clear the screen for new text you can use the following code:

tft.fillScreen(0x0000); //clear the screen

Wiring

You can connect the wires to any pin except the vcc and the ground. The vcc and ground need to be connected to the 3.3v and ground of the esp32. The other pins can be connected to any pin of the esp32.

We aren't using the cs2 and the pen pin because we arent utilizing the touch function of the screen.

classDiagram

displayText <|-- Adafruit_ST7796S_kbv


class displayText{ 
    +text
    +color
    +size
    +posx
    +posy
    +void writeText()
    -int bottomText(char* text)
    -void printWordsFull(char* text)
    -int centerText(char* text)



}

class Adafruit_ST7796S_kbv{
    +fillScreen()
    +fillRect()
    +fillCircle()
    +fillTriangle()
    +fillRoundRect()
    +drawChar()
    +setTextSize()
    +setTextColor()
    +setCursor()
    +println()
}

Why did we choose for this screen?

We chose the screen too fast without going over all the functions and researching what we actually needed. For example we aren't using the touchscreen function of the screen so we could've gotten a different screen without touchscreen. We've attempted to use a screen for the raspberry pi with some pin headers on it but we couldn't get it to work with the esp32. We wanted to have a bigger screen than the small oled screens we already have because it isn't nice to read from and you need to get up close to see what it displays. With a bigger screen thats less of a issue. After the purchase we did some more research for screens but the bottomline was this was the best one we could get because there aren't screens that are this big without touchscreen.

Sources

https://www.tinytronics.nl/en/displays/tft/4-inch-tft-display-320*480-pixels-with-touchscreen-spi-st7796s Source for Driver
https://github.com/prenticedavid/Adafruit_ST7796S_kbv Download link for the library

3.6 KiB Raw Permalink Blame History