• 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

• loop(): loop function continuously loops during the running process of the program, realizing the core functionality of displaying numbers
  • tft.drawString("Hello, Waveshare!", 30, 40, 2); displays a welcome message, enhancing the user experience
  • 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 flashing】

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

【Result demonstration】

• The program achieves synchronized eye animation effects by controlling two TFT displays, making it suitable for visual demonstrations in scenarios such as robotic facial expressions and bionic eyes.

【Hardware connection】

• Connect the development board to the computer

【Code analysis】

• loop(): Continuously executes animations and updates the displayed content
  • Use an inner loop to execute the Demo_1 function multiple times, where the number of times the loop runs is controlled by the variable i , with the loop running 7 times The image is displayed through the pushImage function, and the corresponding device is selected using the chip select signal before each display.

【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】