CAMERA TFT DISPLAY INITIALIZATION

Overview #

This document provides instructions for initializing an ESP32 S3 microcontroller connected to a TFT display using the ST7789 driver and shows various graphical functions. The TFT display has a resolution of 240×320 pixels and displays both text and graphics.

Hardware Specifications #

Display Driver: ST7789
Display Type: TFT LCD Display
Display Size: 2.1 inches

Resolution: 240×320 Pixels

Pin Configuration #

Pin	Function	GPIO
DSP_CS	Chip Select	GPIO44
RS	Register Select	GPIO43
DSP_RST	Reset	GPIO48
MOSI	Master Out Slave In	GPIO47
SLK	Serial Clock	GPIO21

Setting up a NORVI ESP32 S3 Camera TFT Display #

TFT_eSPI Library: A versatile library for controlling TFT displays. It includes functions for drawing shapes, text, and images.
The SPI Library enables communication with SPI devices like the TFT display. The Arduino IDE includes this library by default.

Understand the Code Workflow #

The code initializes the TFT display and runs a series of graphical tests. It displays text and graphics, then clears the screen. Since the loop function is empty, the code performs these actions once during startup.

Download the Camera TFT display initialization and graphics demo program from the link.

Initialization:

The setup function initializes the display.

⚙️

// Initialize the display
  tft.init();
  tft.setRotation(1);  // Set the display orientation

"Hello World!" is displayed for 2 seconds, then the screen is cleared.

  // Print a message to the display
  tft.fillScreen(TFT_BLACK);  // Clear the display
  
  // Set text color to white and background to black
  tft.setTextColor(TFT_WHITE, TFT_BLACK);  
  
  tft.setTextSize(4);  // Set text size
  tft.setCursor(15, 10);  // Set cursor position
  tft.println("Hello World!");  // Print text
  delay(2000);
  tft.fillScreen(TFT_BLACK);  // Clear the display

The program displays ‘Hello World!’ for 2 seconds, then clears the screen.

⚙️

// Print a message to the display
  tft.fillScreen(TFT_BLACK);  // Clear the display
  
  // Set text color to white and background to black
  tft.setTextColor(TFT_WHITE, TFT_BLACK);  
  
  tft.setTextSize(4);  // Set text size
  tft.setCursor(15, 10);  // Set cursor position
  tft.println("Hello World!");  // Print text
  delay(2000);
  tft.fillScreen(TFT_BLACK);  // Clear the display

2. Graphical Tests:

The display sequentially fills with various colors.

⚙️

// Draw some test graphics

//(x coordinate, y coordinate, width of the rectangle, height of the rectangle, color used to fill the rectangle)
  tft.fillRect(0, 0, 320, 240, TFT_RED);   
  delay(1000);
  tft.fillRect(0, 0, 320, 240, TFT_GREEN);
  delay(1000);
  tft.fillRect(0, 0, 320, 240, TFT_BLUE);
  delay(1000);
  tft.fillRect(0, 0, 320, 240, TFT_ORANGE);
  delay(1000);
  tft.fillRect(0, 0, 320, 240, TFT_WHITE);
  delay(1000);
  tft.fillRect(0, 0, 320, 240, TFT_CYAN);
  delay(1000);
  tft.fillScreen(TFT_BLACK);  // Clear the display

Rectangles of decreasing size are drawn on the screen.

  tft.drawRect(0, 0, 240, 240, TFT_RED);
  delay(1000);
  tft.drawRect(20, 20, 220, 220, TFT_GREEN);
  delay(1000);
  tft.drawRect(40, 40, 200, 200, TFT_YELLOW);
  delay(1000);
  tft.drawRect(60, 60, 180, 180, TFT_ORANGE);
  delay(1000);
  tft.fillScreen(TFT_BLACK);  // Clear the display

Nested rectangles in different colors are filled in the center.

  //(320 - 220) / 2 = x coordinate.  220 = size of the rectangle. 
  //(240 - 220) / 2 = y coordinate, 
  //(x coordinate, y coordinate, width of the rectangle, height, color used to fill the rectangle)
  tft.fillRect((320 - 220) / 2, (240 - 220) / 2, 220, 220, TFT_WHITE); 
  delay(1000);
  tft.fillRect((320 - 195) / 2, (240 - 195) / 2, 195, 195, TFT_RED);
  delay(1000);
  tft.fillRect((320 - 170) / 2, (240 - 170) / 2, 170, 170, TFT_GREEN);
  delay(1000);
  tft.fillRect((320 - 145) / 2, (240 - 145) / 2, 145, 145, TFT_YELLOW);
  delay(1000);
  tft.fillRect((320 - 120) / 2, (240 - 120) / 2, 120, 120, TFT_ORANGE);
  delay(1000);
  tft.fillScreen(TFT_BLACK);  // Clear the display

The program draws rectangles of decreasing size on the screen.

⚙️

tft.drawRect(0, 0, 240, 240, TFT_RED);
  delay(1000);
  tft.drawRect(20, 20, 220, 220, TFT_GREEN);
  delay(1000);
  tft.drawRect(40, 40, 200, 200, TFT_YELLOW);
  delay(1000);
  tft.drawRect(60, 60, 180, 180, TFT_ORANGE);
  delay(1000);
  tft.fillScreen(TFT_BLACK);  // Clear the display

The program fills nested rectangles of different colors in the center.

⚙️

//(320 - 220) / 2 = x coordinate.  220 = size of the rectangle. 
  //(240 - 220) / 2 = y coordinate, 
  //(x coordinate, y coordinate, width of the rectangle, height, color used to fill the rectangle)
  tft.fillRect((320 - 220) / 2, (240 - 220) / 2, 220, 220, TFT_WHITE); 
  delay(1000);
  tft.fillRect((320 - 195) / 2, (240 - 195) / 2, 195, 195, TFT_RED);
  delay(1000);
  tft.fillRect((320 - 170) / 2, (240 - 170) / 2, 170, 170, TFT_GREEN);
  delay(1000);
  tft.fillRect((320 - 145) / 2, (240 - 145) / 2, 145, 145, TFT_YELLOW);
  delay(1000);
  tft.fillRect((320 - 120) / 2, (240 - 120) / 2, 120, 120, TFT_ORANGE);
  delay(1000);
  tft.fillScreen(TFT_BLACK);  // Clear the display

Circles of different colors are drawn and filled, with short delays between each.

⚙️

// Draw a circle

//(x coordinate of the center of the circle , y coordinate of the center of the circle, Radius of the circle, color used to fill the circle)
  tft.fillCircle(160, 120, 100, TFT_YELLOW);  
  delay(1000);
  tft.fillCircle(160, 120, 100, TFT_RED);
  delay(1000);
  tft.fillCircle(160, 120, 100, TFT_GREEN);
  delay(1000);
  tft.fillCircle(160, 120, 100, TFT_YELLOW);
  delay(1000);
  tft.fillCircle(160, 120, 100, TFT_BLUE);
  delay(1000);
  tft.fillScreen(TFT_BLACK);  // Clear the display

  tft.drawCircle(160, 120, 100, TFT_YELLOW);
  delay(1000);
  tft.drawCircle(160, 120, 100, TFT_RED);
  delay(1000);
  tft.drawCircle(160, 120, 100, TFT_GREEN);
  delay(1000);
  tft.drawCircle(160, 120, 100, TFT_YELLOW);
  delay(1000);
  tft.drawCircle(160, 120, 100, TFT_BLUE);
  delay(1000);
  tft.fillScreen(TFT_BLACK);  // Clear the display

3. Text Display:

The word “NORVI” is prominently displayed on the screen.

⚙️

  // Print a message to the display

  // Set text color to white and background to black
  tft.setTextColor(TFT_WHITE, TFT_BLACK);  
  tft.setTextSize(12);  // Set text size
  tft.setCursor(60, 90);  // Set cursor position
  tft.println("NORVI");  // Print text