---
title: ESP32 S3 CAMERA TFT DISPLAY INITIALIZATION AND GRAPHICS DEMO
description: "## **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…"
url: "https://norvi.io/docs/esp32-s3-camera-tft-display-initialization-and-graphics-demo/"
updated: "2026-03-18"
category: OTHER PRODUCTS / INDUSTRIAL CAMERA / NORVI AI OPTIC
---

# 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 displays both text and graphics.

## **Hardware Specifications**

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

Resolution: 240x320 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:**](https://github.com/IndustrialArduino/NORVI-ESP32-CAMERA/blob/e564288868f253f9011fab0153d462f73422400f/Libraries/TFT_eSPI.zip) 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](https://github.com/IndustrialArduino/NORVI-ESP32-CAMERA/tree/e564288868f253f9011fab0153d462f73422400f/TFT_Display_Test) program from the link. 

1. **Initialization:**

The setup function initializes the display.

```cpp

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

```cpp

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

```cpp

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

```cpp

                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.

```cpp

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

```cpp

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

```cpp

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