New Project

• Run the Arduino IDE and select File -> New Sketch
  
  
• Enter the code:

void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);
}

void loop() {
  // put your main code here, to run repeatedly:
  Serial.println("Hello, World!");
  delay(2000);
}

• Save the project and select File -> Save As.... In the pop-up menu, select the path to save the project, and enter a project name, such as Hello_World, click Save

Compile and Flash Demos

• Select the corresponding development board, take the ESP32S3 motherboard as an example:
  

①. Click to select the dropdown menu option Select Other Board and Port;
②. Search for the required development board model esp32s3 dev module and select;
③. Select COM Port;
④. Save the selection.

• If the ESP32S3 mainboard only has a USB port, you need to enable USB CDC, as shown in the following diagram:
  

• Compile and upload the program:
  

①. Compile the program; ②. Compile and download the program; ③. Download successful.

• Open the Serial Monitor window, and the demo will print "Hello World!" every 2 seconds, and the operation is as follows:
  

• This demo cycles through two-digit numbers from 00 to 99 on the TFT display and shows a series of color transitions when the program starts. Suitable for learning ESP32 interaction with the TFT screen, it can display a two-digit number that increases in cycles, with color transitions and text display, to test stability and reliability

【Hardware connection】

• Connect the development board to the computer

【Code analysis】

• setup(): setup function executes once when the program starts, primarily responsible for initializing the TFT display and performing some initial settings
  • tft.init(); initializes the TFT display, preparing for subsequent display operations
  • Implementing color transition effects through a series of tft.fillScreen() and delay(), demonstrating the color filling capabilities of the TFT display, enhancing the visual appeal during program startup
  • tft.fillScreen(0x04FF); sets a specific background color, tft.setTextColor(TFT_WHITE, 0x04FF); sets the text color, ensuring the text is clearly visible against the background
  • tft.drawString("Hello, Waveshare!", 30, 40, 2); displays a welcome message, enhancing the user experience

• loop(): loop function continuously loops during the running process of the program, realizing the core functionality of displaying numbers
  • Number formatting: Convert the integer number to a string displayNumber, and add a leading zero when the number is a single digit, ensuring that single-digit numbers are displayed as two-digit numbers
  • tft.drawString(displayNumber, 55, 80, 6); displays formatted numbers at a specific font size at a specific location on the display
  • number++ realizes self-increment of numbers, and resets to 0 when number exceeds 99, ensuring that the number cycles between 00 and 99
  • delay(1000) controls the speed at which the numbers are updated, allowing users to clearly see the changes in the numbers

【Demo flashing】

• Select the development board ESP32S3 Dev Module and port
• Set the parameters
• Flash the demo

【Result demonstration】

• This demo achieves the effect of displaying random color squares, triangles, and circles in sequence on a circular display, demonstrating the graphic drawing capabilities and the flexibility of random color generation on a TFT display Applicable for learning ESP32 interaction with a circular display, sequentially drawing randomly colored squares, triangles, and circles centered on the screen, switching every 3 seconds, to test the stability of graphic drawing

【Hardware connection】

• Connect the development board to the computer

【Code analysis】

• drawSquare(): This function is used to draw a square filled with a random color
  • uint16_t squareColor = tft.color565(random(0, 255), random(0, 255), random(0, 255)); generates a random RGB565 color, ensuring that the square is different in color each time it is drawn
  • The upper-left coordinates and dimensions of the square are determined by calculating the diagonal length of the square (equal to the diameter of the circle) and the center coordinates
  • tft.fillRect(squareTopLeftX, squareTopLeftY, squareSize, squareSize, squareColor); fills the square with a random color

• drawSquare(): This function draws an equilateral triangle filled with a random color
  • Generates a random color
  • Calculates the height and side length of an equilateral triangle based on the radius of the circle
  • Calculates the coordinates of the three vertices of the triangle and store them in the triangleX and triangleY arrays
  • tft.fillTriangle(triangleX[0], triangleY[0], triangleX[1], triangleY[1], triangleX[2], triangleY[2], triangleColor); fills the triangle with a random color

• drawCircleInCenter(): This function draws a circle filled with a random color, with the center located at the screen's center
  • Generates a random color
  • tft.fillCircle(centerX, centerY, 30, circleColor); draws a circle with the screen center coordinates and a fixed radius, filling it with a random color

【Demo flashing】

• Select the development board ESP32S3 Dev Module and port
• Set the parameters
• Flash the demo

【Result demonstration】

• This demo utilizes the TFT_eSPI library to drive a TFT display and showcase an animated eye effect on different processors. It features configurable parameters and supports DMA to enhance performance, continuously updating the eye state in the main loop. Applicable for learning the TFT_eSPI library to display eye animations, it allows configuration of parameters, utilizing state machines to control blinking, and testing performance

【Hardware connection】

• Connect the development board to the computer

【Code analysis】

• updateEye(): Update the iris size of the eye according to different conditions (whether there is a light-sensitive pin or not) to achieve the response of the eye to light or automatic changes
  • The function starts to determine how the iris size is updated based on whether LIGHT_PIN is defined
  • If a light-sensitive pin is defined:
    • Reads the analog value of the light sensor pin with int16_t v = analogRead(LIGHT_PIN);
    • Performs the necessary reversal operations according to the configuration such as LIGHT_PIN_FLIP (#ifdef LIGHT_PIN_FLIP section)
    • Limits the range of the read value (if (v < LIGHT_MIN) v = LIGHT_MIN; else if (v > LIGHT_MAX) v = LIGHT_MAX;), ensuring that the light sensitivity value is within a reasonable range.
    • Performs a mapping of the light sensitivity value to the iris size range (v = map(v, 0, (LIGHT_MAX - LIGHT_MIN), IRIS_MAX, IRIS_MIN);)
    • Apply a gamma curve to adjust the light sensitivity value depending on whether LIGHT_CURVE is defined (#ifdef LIGHT_CURVE section)
    • Finally, based on whether the IRIS_SMOOTH is defined, choose the smoothing treatment (filtering method gradually adjusts the iris size) or directly set the iris size
  • If a light-sensitive pin is not defined:
    • Generate a random new iris size using newIris = random(IRIS_MIN, IRIS_MAX);
    • Call the split(oldIris, newIris, micros(), 10000000L, IRIS_MAX - IRIS_MIN); function to achieve a gradual change in iris size from the old value to the new value through a recursive method, and update oldIris with the new value

• Demo_2(): Displays a series of pre-defined images in a loop to present a simple animation sequence to the user
  • First, use the digitalWrite(device_A_CS, LOW); to set the chip select pin of device A to low to select the corresponding device or display
  • Then, call the tft.pushImage(0, 0, 160, 160, gImage_Ax); to send specific images (such as gImage_A1 to gImage_A12) to the display area. The parameter (0, 0, 160, 160) here might have specified the starting coordinates and size of the image on the display
  • Then, use the digitalWrite(device_A_CS, HIGH); to set the chip select pin to high to deselect the current device or display
  • Finally, by introducing a certain delay with delay(frameTime); to control the display time of each image, so as to achieve a coherent effect of animation

【Demo flashing】

• Select the development board ESP32S3 Dev Module and port
• Set the parameters
• Flash the demo

【Result demonstration】

• This demo uses the LVGL and TFT_eSPI libraries to create a graphical user interface that displays a GIF image. It is applicable for learning how ESP32 interacts with LVGL and TFT screens, capable of displaying LVGL images, and testing for stability and reliability

【Hardware connection】

• Connect the development board to the computer

【Code analysis】

• my_disp_flush(): The display refresh callback function of LVGL, responsible for refreshing the graphical data in LVGL to the TFT display screen
  • tft.startWrite();: Start writing data to the TFT display
  • tft.setAddrWindow(area->x1, area->y1, area->x2 - area->x1 + 1, area->y2 - area->y1 + 1);: Sets the write address window of the TFT display according to the incoming display area parameter (area) to specify the range of the screen area to which data will be written
  • tft.pushColors(&color_p->full, (area->x2 - area->x1 + 1) * (area->y2 - area->y1 + 1), true);: Pushes the color data (color_p) provided by LVGL to the TFT display according to the specified area size (the number of pixels obtained by calculating the product of the width and height of the area), where true means that the color pointer is automatically incremented after the data is pushed, so that the next push starts from the next pixel position
  • tft.endWrite();: Ends the write operation of the TFT display and completes the data transmission
  • lv_disp_flush_ready(disp);: Notifies LVGL that the current refresh operation has been completed, and LVGL can continue to perform subsequent graphics processing operations, such as preparing the next frame of data
  • printf("LVGL_disp_flush\n");: Printouts debugging information

• setup(): Initializes the LVGL and TFT screens in turn, initializes the display buffer, configures and registers the display driver, and creates and sets the GIF object position and source image
  • lv_init(); and tft.begin();: Initializes the LVGL library, initializes the TFT display
  • lv_disp_draw_buf_init(&draw_buf, buf, NULL, screenHeight * screenWidth / 15);: Initialize the display buffer of LVGL, where buf is an array of buffers used to store display data, NULL means that double buffers are not used (here you can adjust them as needed), screenHeight * screenWidth / 15 calculates the size of the buffer, and reasonable buffer settings help to improve the display performance
  • lv_disp_drv_init(&disp_drv);: Initializes the display driver structure disp_drv of the LVGL
  • Configure display driver parameters
    • Set the horizontal and vertical resolution of the display
    • disp_drv.flush_cb = my_disp_flush;: Sets the previously defined my_disp_flush function as a display-driven refresh callback function, so that LVGL can call it to update the screen content when it needs to refresh the display
    • disp_drv.draw_buf = &draw_buf;: Associates the previously initialized display buffer draw_buf with the display driver ensures that the graphics data is properly stored and transmitted to the display
  • lv_disp_drv_register(&disp_drv);: Registers the display driver, which enables LVGL to use the configured display driver for graphic display operations, and the connection and configuration of LVGL to the TFT display is complete
  • Creates and initializes a graphic object

【Demo flashing】

• Select the development board ESP32S3 Dev Module and port
• Set the parameters
• Flash the demo

【Result demonstration】

• Simulated eye styles1 and 2, displayed alternately

【Hardware connection】

• Connect the development board to the computer

【Code analysis】

• loop(): Continuously executes animations and updates the displayed content
  • Use a loop to perform different animation operations:
    • If a == 1, then fill the screen with black first (tft.fillScreen(BLACK);), then call the Demo_1 function, and finally delay 2 seconds with delay(2000);
    • If a == 2, then use an inner loop to execute the Demo_2 function multiple times, where the number of times the loop runs is controlled by the variable i , with the loop running 7 times The Demo_2 function will sequentially display a series of images to achieve an animation effect. In this way, the two different animation sequences can be continuously executed in a loop during the operation of the program

【Demo flashing】

• Select the development board ESP32S3 Dev Module and port
• Set the parameters
• Flash the demo

【Result demonstration】

• This demo initializes the TFT display and LVGL library, creates an image object, and the main loop handles the timer task. It is applicable for learning how ESP32 interacts with LVGL and TFT screens, capable of displaying LVGL images after initialization, and testing for stability and reliability

【Hardware connection】

• Connect the development board to the computer

【Code analysis】

• lv_disp_flush(): Responsible for flashing the graphic data of LVGL to the TFT display
  • First calculates the width w and the height h of the area to be refreshed, ensuring accurate determination of the data range
  • Then sets the write address window of the TFT display with tft.setAddrWindow, specifying the correct position for data writing
  • Then uses tft.pushColors to push the color data to the display, this step determines the color and content of the displayed graphics
  • Finally, notifies LVGL that the refresh is complete so that LVGL can continue with subsequent graphics processing operations

• setup(): Sets serial port, LVGL, TFT display and display driver, creates and configures graphical objects
  • Serial port initialization: Serial.begin(115200) prepares the serial port communication for possible debugging
  • LVGL initialization: lv_init() starts the core components of the LVGL library
  • If LV_USE_LOG is not 0, register the serial print function for debugging: lv_log_register_print_cb(my_print)
  • TFT display Initialization:
    • tft.begin(): Initializes the TFT hardware
    • tft.setRotation(0): Sets the display orientation to landscape
  • Display buffer initialization: lv_disp_draw_buf_init(&draw_buf, buf, NULL, screenWidth * screenHeight / 10), preparing for storing graphic data
  • Display driver initialization and registration:
    • lv_disp_drv_init(&disp_drv) initializes the display driver structure
    • Sets driver parameters, such as resolution, refresh callback function, display buffer, etc., and registers the display driver
  • Creates and sets up a graphical object:
    • Declares image resources through LV_IMG_DECLARE(A3), then creates an image object logo_img and sets its source to a declared image, and finally sets the position of the image object on the screen through lv_obj_center and lv_obj_align

【Demo flashing】

• Select the development board ESP32S3 Dev Module and port
• Set the parameters
• Flash the demo

【Result demonstration】

• This demo utilizes the TFT_eSPI library and the LVGL graphics library to initialize the TFT display, setting up a graphical interface framework to achieve display and interaction functions. It is applicable for learning how ESP32 interacts with LVGL and TFT screens, capable of displaying a graphical interface after initialization, and testing for stability and reliability

【Hardware connection】

• Connect the development board to the computer

【Code analysis】

• lv_disp_flush(): The display refresh callback function of LVGL, responsible for pushing LVGL's graphic data to the TFT display to ensure accurate update of the displayed content
  • Calculates the width and height of the refresh area to accurately determine the data range to be pushed
  • Sets the write address window for the TFT display, ensuring correct data write position
  • Pushes color data to the display, the correct transmission of color data determines the color and content of the displayed graphics
  • Notifies LVGL that the refresh is complete so that LVGL can continue with subsequent graphics processing operations

• setup(): Sets serial port, LVGL, TFT display, display driver, and initialization of the user interface
  • Serial port initialization is used for possible debugging output
  • LVGL initializes the core components of the boot library
  • If LV_USE_LOG is not 0, register the serial port print function to view the LVGL log information
  • TFT display initialization includes hardware connections and parameter settings, such as setting the rotation direction
  • Initializes the display buffer and configures the display driver to ensure that LVGL interacts with the display correctly
  • Calls ui_init to initialize user interface elements
  • Outputs debugging information indicating initialization complete

【Demo flashing】

• Select the development board ESP32S3 Dev Module and port
• Set the parameters
• Flash the demo

【Result demonstration】