Demo description

• The demo is used to display 7500 Chinese fonts of LVGL, the font file is large, and the download of the firmware takes a long time

Hardware connection

• Connect the development board to the computer

Code analysis

• setup()
  • First activate serial port communication, set the baud rate to 115200, and prepare for potential serial port debugging
  • Initialize LVGL (Light and Versatile Graphics Library), including setting the version information output, and registering the log print callback function (if log functionality is enabled)
  • Initialize the TFT display tft and touch sensor, including setting the rotation direction of the display and possible touch calibration data
  • Initialize the LVGL display buffer draw_buf and display driver disp_drv, set the display resolution, refresh callback function, etc., and register the display driver with LVGL
  • Initialize the input device driver indev_drv, set it to the pointer type and specify the touch read callback function, and then register the input device driver
  • Create a label label, set the text font, text content (supporting text color recreation), and display it centrally on the screen
  • You can optionally call LVGL's demo or demonstration functions to demonstrate different functional effects
• loop()
  • Call lv_timer_handler() function to let the LVGL graphics library handle its internal scheduled tasks and events
  • Use the delay(5) function to introduce a small delay to avoid excessive CPU usage by the demo

Result demonstration

• If an error occurs, ensure that the ESP32 development board version is 2.0.12

Demo description

• This demo is used to randomly display the "alien.jpg" image on a specific display

Hardware connection

• Connect the development board to the computer

Code analysis

• GC9A01(): The importance of the GC9A01 constructor is to establish the hardware connection, set the initial parameters, and create an operable display object that lays the foundation for subsequent display operations
  • spi_interface: Establish SPI communication with the display screen
  • width and height: Set the display resolution
  • reset_pin: Connect various control pins of the display screen
  • rotation: Set the initial rotation angle

Result demonstration

• LCD screen display
  

Demo description

• The demo creates and displays multiple animations of the Pac-Man sprite in random locations on a specific display

Hardware connection

• Connect the development board to the computer

Code analysis

• pacman class move method: Responsible for updating the status of the Pac-Man sprite to move and animate it on the screen
  • First increase the current number of steps of the sprite, and then make sure that the number of steps loops within the specified range of SPRITE_STEPS by taking the conversion, corresponding to different animation frames or states of the sprite
  • Then, move the sprite's position in the horizontal direction. When the sprite's horizontal position reaches a specific value of 302, reset the step count. This is done to trigger a specific animation state or behavior. Finally, the conversion operation is used to ensure that the horizontal position of the sprite cycles within a certain range to avoid exceeding the display area

• tft.map_bitarray_to_rgb565
  • tft.map_bitarray_to_rgb565 function selects bitmap data from the SPRITE_BITMAPS based on the current steps of the sprite, converts it into an RGB565 format buffer named sprite. At the same time, the width of the sprite, as well as the foreground and background colors, were specified
• tft.blit_buffer
  • tft.blit_buffer function draws the converted buffer to a specific location on the display screen, which is determined by the current coordinates of the sprite and specifies its width and height

Result demonstration

• LCD screen display
  

Demo description

• The demo randomly displays different colors of "Hello!" text on a specific display, and different rotation angles can be switched by cycling

Hardware connection

• Connect the development board to the computer

Code analysis

• tft.text: Draw the text "Hello!" on the display
  • Using the specified font, the position of the text is determined within the range of the display by random numbers, and the foreground and background colors are determined by the randomly generated RGB565 color values

• while True : Implement the dynamic effect of random display of "Hello!" text at different rotation angles
  • By using an infinite loop and iterating through four rotation angles, set the display rotation angle, clear the screen, calculate the text display range, and cyclically call the tft.text function to display text at random positions in random colors

Result demonstration

• LCD screen display
  

Demo description

• The demo loops through different greetings on a specific display

Hardware connection

• Connect the development board to the computer

Code analysis

• main: The loop section of the function that cycles through different fonts, colors, and greetings on the display
  • Move the display position line by line, get the next color, font, and greeting, clear the previous line and draw new content, reset the line position when it exceeds a certain range, add a delay to control the display speed

• cycle : Create an object that can be iterated over in a loop
  • Accept parameters. If iterable, loop directly. If a single element, convert it into an iterable list and loop, facilitating the convenient looping of color, font, and greeting lists

Result demonstration

• LCD screen display
  

Demo description

• This demo alternates displaying two JPEG images on a specific display

Hardware connection

• Connect the development board to the computer

Code analysis

• main: The loop section of the function that cycles through different fonts, colors, and greetings on the display
  • Iterate through the list of image filenames, call the tft.jpg function to display the image in a slower way at a specific location, and wait 5 seconds

• tft.jpg : Display the specified JPEG picture on the display
  • Read, decode picture files and draw to display screen, determine display position and mode according to incoming parameters

Result demonstration

• LCD screen display
  

Demo description

• The demo displays the names of three different fonts (NotoSans, NotoSerif, NotoSansMono) on a specific display, and these font names are shown in the center on separate lines

Hardware connection

• Connect the development board to the computer

Code analysis

• main: The main entrance of the demo, which initializes the display and displays three font names
  • Create a display object and initialize it, fill the background in black, and call the center function to display the three font names in turn

• center : Display a given string in the center of the display in the specified font
  • Get the screen width, calculate the width of the string, if it is less than the screen width, calculate the coordinates for horizontal centering, otherwise for left alignment. Finally, display the string at the specified location

Result demonstration

• LCD screen display
  

Demo description

• This demo displays a pre-compiled bitmap image on a specific display

Hardware connection

• Connect the development board to the computer

Code analysis

• main: The main entrance of the demo, which initializes the display and displays the bitmap
  • Create a display object, fill it with a black background after initialization, and call tft.pbitmap to display the image in the pre-compiled bitmap module

tft.pbitmap: Display pre-compiled bitmap on the screen

• • Read the bitmap data and draw it to the display, and determine the display position based on the incoming parameters

Result demonstration

• LCD screen display
  

Demo description

• The demo loops through the text display at different rotation values on a specific display

Hardware connection

• Connect the development board to the computer

Code analysis

• main: The main entrance of the demo, which initializes the display and loops through the text display at different rotation values
  • Create a display object and initialize it, set different rotation values in turn in the loop, clear the screen and display the text with the rotation value information and wait for observation

• tft.rotation: Set the display rotation angle
  • Adjust the display orientation according to the incoming parameters

Result demonstration

• LCD screen display
  

Demo description

• This demo implements a smooth scrolling display of characters on a specific display

Hardware connection

• Connect the development board to the computer

Code analysis

• main: The main entrance of the demo, which initializes the display, sets the color, and scrolls through the characters
  • Create a display object, set up a color generator to get the foreground color, set the scroll area after initializing the display, clear the top row in the loop, display characters on the new line and update the color and character values, set the scroll address for scrolling and control the speed

• cycle : Create an object that can be iterated over in a loop
  • Accept parameters. If iterable, loop directly. If a single element, convert it into an iterable list and loop

Result demonstration

• LCD screen display