112 lines
3.6 KiB
Markdown
112 lines
3.6 KiB
Markdown
# 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.
|
|
|
|
```cpp
|
|
#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:
|
|
|
|
```cpp
|
|
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:
|
|
|
|
```cpp
|
|
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:
|
|
|
|
```cpp
|
|
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.
|
|
|
|
|
|
```mermaid
|
|
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
|
|
|