ESP32 S3 CAMERA TFT DISPLAY INITIALIZATION AND GRAPHICS DEMO

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 is used to display text and graphics capabilities.

Hardware Specifications #

Display Driver: ST7789

Display Type: TFT LCD Display

Display Size: 2.1 inches

Resolution: 240×320 Pixels

Pin Configuration #

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.
• SPI Library: Provides communication with SPI devices like the TFT display. This library is included by default in the Arduino IDE.

Understand the Code Workflow #

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

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

1. Initialization:

The display is initialized in the setup function.

 // 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

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

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

Observe Results #