New Project

Create Demo

• Using the shortcut F1, enter esp-idf:show examples projects
  

• Select your current IDF version
  

• Take the Hello world demo as an example

①Select the corresponding demo
②Its readme will state what chip the demo applies to (how to use the demo and the file structure are described below, omitted here)
③Click to create the demo

• Select the path to save the demo, and require that the demos cannot use folders with the same name
  

Modify COM Port

• The corresponding COM ports are shown here, click to modify them
  
• Please select the COM ports according to your device (You can view it from the device manager)
  
• In case of a download failure, please press the Reset button for more than 1 second or enter download mode, and wait for the PC to recognize the device again before downloading once more
  

Modify Driver Object

• Select the object we need to drive, which is our main chip ESP32S3
  

• Choose the openocd path, it doesn't affect us here, so let's just choose one
  

Other Status Bar Functions

①.ESP-IDF Development Environment Version Manager, when our project requires differentiation of development environment versions, it can be managed by installing different versions of ESP-IDF. When the project uses a specific version, it can be switched to by utilizing it
②.Device flashing COM port, select to flash the compiled program into the chip
③.Select set-target chip model, select the corresponding chip model, for example, ESP32-P4-NANO needs to choose esp32p4 as the target chip
④.menuconfig, click it to modify sdkconfig configuration file, please refer to project configuration details
⑤.fullclean button, when the project compilation error or other operations pollute the compiled content, you can clean up all the compiled content by clicking it
⑥.Build project, when a project satisfies the build, click this button to compile
⑦.Current download mode, the default is UART
⑧.flash button, when a project build is completed, select the COM port of the corresponding development board, and click this button to flash the compiled firmware to the chip
⑨.monitor enable flashing port monitoring, when a project passes through Build --> Flash, click this button to view the log of output from flashing port and debugging port, so as to observe whether the application works normally
⑩.Debug
⑪.Build Flash Monitor one-click button, which is used to continuously execute Build --> Flash --> Monitor, often referred to as "little flame"

Compile, Flash and Serial Port Monitor

• Click on the all-in-one button we described before to compile, flash and open the serial port monitor
  

• It may take a long time to compile especially for the first time
  

• During this process, the ESP-IDF may take up a lot of CPU resources, so it may cause the system to lag
  
• If it is the first time to flash the program for a new project, you will need to select the download method, and select UART
  

• This can also be changed later in the Download methods section (click on it to pop up the options)
  

• As it comes with the onboard automatic download circuit, it can be downloaded automatically without manual operation
• After successful download, it will automatically enter the serial monitor, you can see the chip output the corresponding information and be prompted to restart after 10S
  

Use the IDF Demos

Open In the Software

• Open VScode software and select the folder to open the demo
  

• Select the provided ESP-IDF example and click to select the file (located in the /Demo/ESP-IDF path under demo)
  

Open from Outside the Software

• Select the project directory correctly and open the project, otherwise it will affect the compilation and flashing of subsequent programs
  

• After connecting the device, select the COM port and model, click below to compile and flash to achieve program control
  

ESP-IDF Project Details

• Component: The components in ESP-IDF are the basic modules for building applications, each component is usually a relatively independent code base or library, which can implement specific functions or services, and can be reused by applications or other components, similar to the definition of libraries in Python development.
  • Component reference: The import of libraries in the Python development environment only requires to "import library name or path", while ESP-IDF is based on the C language, and the importing of libraries is configured and defined through CMakeLists.txt.
  • The purpose of CmakeLists.txt: When compiling ESP-IDF, the build tool CMake first reads the content of the top-level CMakeLists.txt in the project directory to read the build rules and identify the content to be compiled. When the required components and demos are imported into the CMakeLists.txt, the compilation tool CMake will import each content that needs to be compiled according to the index. The compilation process is as follows:

Demo description

• This demo demonstrates displaying text on an LCD screen, cyclically displaying two-digit numbers from 00 to 99, testing LCD screen text and number display.

Hardware connection

• Connect the development board to the computer

Code analysis

• Text_Number(): Interface initialization, obtain the active screen objects of the two displays and create UI
• update_numbers(): Timer callback function, implemented through a timer to call the update_numbers function once every 1000 milliseconds (1 second) to update the numbers

Result demonstration

• LCD screen display

Demo description

• This demo demonstrates displaying squares, triangles, and circles in random colors sequentially on an LCD display, suitable for learning how to interact with an LCD display using ESP32. Randomly colored squares, triangles, and circles are drawn in the center of the screen one after another, switching every 3 seconds, and testing the stability of graphic drawing.

Hardware connection

• Connect the development board to the computer

Code analysis

• random_color(): Generates a random RGB color, providing diverse display effects for shapes
• create_base_shape(): A universal shape creation function that allows you to create squares (radius 0) and circles (maximum radius) by adjusting the corner radius
• Shapes_on_Circular(): Initialize the random number generator, create the initial shape and start the timer, switching shapes every 3 seconds

Result demonstration

• LCD screen display

Demo description

• This demo implements an eye display function with animation effects, presenting dynamic eyes on two LCD displays separately (the pupils move randomly with smooth transitions)

Hardware connection

• Connect the development board to the computer

Code analysis

• draw_eye(): Draw the core of the eye, draw the parts of the eye (from outside to inside) in layers to give the eye a sense of realism
• eye_anim_timer(): Timer callback function, responsible for updating the pupil position, achieving a smooth moving animation effect
• Animated_Eye1(): Program entry, initialize the eyes of both displays and start the animation timer

Result demonstration

• LCD screen display

Demo description

• This demo implements the function of synchronously playing an animated GIF on two LCD displays by reading the C1.gif image from the root directory of the TF card, testing the TF card reading and LCD screen image display functions.

Hardware connection

• Copy C1.gif in this project directory to the root directory of the SD card (the code and image paths and names can be changed according to your needs. Note: the GIF frame rate needs to be low, otherwise it will be very slow)
• Note: Connect the TF card, if the recognition fails, please format the TF card to FAT32 format (please wait for a while to reset and check again if the recognition fails for the first time)
• Connect the development board to the computer

Code analysis

• gif_restart_cb(): GIF restart callback function, restarts the GIF animation on two LCD displays
• gif_event_handler(): By resetting the GIF source and restarting, ensure the animation loops after playback is complete, avoiding staying on the last frame.
• Lvgl_Eyes(): Main initialization function, creates lv_gif object, adds event callbacks for each GIF object, triggering restart when the animation is completed (LV_EVENT_READY), achieving loop playback.

Result demonstration

• LCD screen display

Demo description

• This demo implements a clock function that synchronously displays on two screens, including an analog clock (with pointers and scales) and a digital time display

Hardware connection

• Connect the development board to the computer

Code analysis

• get_current_time(): Time acquisition and processing, obtain the current time from the system
• draw_clock_ticks(): Clock scale drawing, drawing 12 scales on the clock canvas, of which 3, 6, 9, 12 are longer and wider main scales, and the rest are minor scales
• draw_clock(): Complete clock drawing, integrates the drawing of scales and pointers, generating a complete analog clock image
• Clock(): Initialize the clocks of both LCD displays, create the necessary UI elements, set the initial state, and start the timer for dynamic updates.

Result demonstration

• LCD screen display

Demo description

• This demo demonstrates the functions of each device on the board. Screen 2 displays SD Card, Flash Size and other parameters, while screen 1 shows the music playback interface. In addition, this demo includes voice recognition function.

Hardware connection

• Insert the TF card into the development board
• Connect the development board to the computer

Code analysis

• Driver_Init(): Initializes the resources required by the hardware, driver, and system, and creates a task to cycle through the hardware driver
  • Hardware initialization: Driver_Init() is responsible for initializing multiple hardware modules, such as I2C bus, sensors, etc.
  • Modular design: The initialization function disperses the initialization of each hardware into different modules, which is easy to maintain and expand. If there's new hardware that needs to be supported, just add the initialization code here
• Lvgl_Example1(): Display UI on the screen

Result demonstration

• LCD screen display
• LCD screen display parameter description

• Page 2 is the UI page for playing mp3 audio in the root directory of the TF card
• This demo enables speech recognition by default, the wake-up word is "hi esp", after waking up, you can speak the command after the backlight is dimmed (if the backlight is not dimmed, it means that it has not been woken up, the recognition requirements are strict, the pronunciation needs to be standard, and the speech speed is slowed down)
• The following are available in several formats of MIC test audio (Please note that every time the hi esp wake-up fails, please reset the audio to the playback location of the wake-up word and replay it)
• Please do not perform speech recognition when using the speaker to play audio
• The reason the wake-up word plays twice in the test audio is due to the current firmware version's initial wake-up requiring the device to be focused (an analogy), and the current firmware does not permit the disabling of this function

// Commands
Turn on the backlight
Turn off the backlight
Backlight is brightest
Backlight is darkest