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.

• Some development boards with specified version numbers support direct model selection, for example, "Waveshare ESP32-S3-LCD-1.69":
  

• 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 tests the functionality of the ESP32-S3-LCD-2 onboard module, the information of each module will be displayed on the screen, and the user can switch between pages through the touch screen

【Hardware connection】

• Connect the board to the computer
• Plug the OV5640 camera into the 24Pin socket on the board (if it is not available, it will not affect the use of other functions)
• Insert the TF card into the card slot (if it is not available, it will not affect the use of other functions)

【Code analysis】

• Hardware initialization

Serial.begin(115200);
bsp_i2c_init();          //Initialize I2C bus, commonly used to connect sensors, displays, etc.
bsp_lv_port_init();      //Initialize the LVGL graphics library port to output graphics to display devices such as LCD
bsp_spi_init();          //Initialize SPI bus, commonly used for communication with sensors, external storage, screens, etc.

• LVGL graphics library configuration

bsp_lv_port_run();       //Run LVGL-related drivers or loops, such as refreshing the display, etc.
if (lvgl_lock(-1)) {     //Lock LVGL resources to ensure they do not conflict with other tasks when updating the UI
  lvgl_ui_init();        //Initialize UI, possibly including layout and control settings
  lvgl_unlock();         //Unlock LVGL, allowing other tasks to access LVGL
}

• Peripheral initialization

app_qmi8658_init();                     //Initialize QMI8658 sensor (such as accelerometer, gyroscope, etc.)
app_system_init();                      //Perform system-level initialization, such as clock, memory, reset, etc
app_camera_init();                      //Initialize the camera module, prepare for image capture
app_wifi_init(sta_ssid, sta_pass);      //Initialize Wi-Fi module, connect to specified Wi-Fi network

• Application layer tasks running

app_qmi8658_run();       //Start QMI8658 sensor-related tasks, such as data acquisition, processing, etc.
app_system_run();        //Start system tasks to ensure that system functions are running properly
app_camera_run();        //Start camera-related tasks, usually to obtain image data and process or transmit it
app_wifi_run();          //Start Wi-Fi related tasks, such as connection management, data transmission, etc.

【Result demonstration】

• Click the BOOT button to be down, double click the BOOT button to be up, and long press the BOOT button to OK
• System interface

• QMI8658 interface, where you can see the acceleration and angular velocity data of the acquired X, Y, and Z axes

• Camera interface, where you can see the images captured by the camera

• WiFi interface, showing the WiFi name and password to be connected, IP will be displayed after successful connection

This demo demonstrates the ESP32-S3-LCD-2 using the GFX_Library_for_Arduino library to drive the screen and display HelloWorld on the screen.

【Hardware connection】

• Connect the board to the computer

【Code analysis】

• Create an object bus of the Arduino_ESP32SPI class to configure the SPI bus GPIO, and create an object gfx of the Arduino_ST7789 class to drive the ST7789 display

Arduino_DataBus *bus = new Arduino_ESP32SPI(
  EXAMPLE_PIN_NUM_LCD_DC /* DC */, EXAMPLE_PIN_NUM_LCD_CS /* CS */,
  EXAMPLE_PIN_NUM_LCD_SCLK /* SCK */, EXAMPLE_PIN_NUM_LCD_MOSI /* MOSI */, EXAMPLE_PIN_NUM_LCD_MISO /* MISO */);

/* More display class: https://github.com/moononournation/Arduino_GFX/wiki/Display-Class */
Arduino_GFX *gfx = new Arduino_ST7789(
  bus, EXAMPLE_PIN_NUM_LCD_RST /* RST */, EXAMPLE_LCD_ROTATION /* rotation */, true /* IPS */,
  EXAMPLE_LCD_H_RES /* width */, EXAMPLE_LCD_V_RES /* height */);

【Result demonstration】

This demo demonstrates how to use ESP32-S3-LCD-2 to test the read and write functions of the TF card

【Hardware connection】

• Connect the board to the computer
• Insert the TF card into the card slot (TF card needs to be formatted as FAT32)

【Code analysis】

• SPI interface initialization and TF card initialization

  SPI.begin(sck, miso, mosi, cs);
  if (!SD.begin(cs)) {
    Serial.println("Card Mount Failed");
    return;
  }

【Result demonstration】

• Open the serial port monitor

• Insert the TF card into the computer, and you can find two more files: test.txt and foo.test. The content of the foo.txt is Hello World!, and the content of the test.txt is empty

This demo demonstrates how to use ESP32-S3-LCD-2 to acquire QMI8658 data and print using serial port

【Hardware connection】

• Connect the board to the computer

【Code analysis】

• Initialize QMI8658

int err = IMU.init(calib, IMU_ADDRESS);
if (err != 0) {
  Serial.print("Error initializing IMU: ");
  Serial.println(err);
  while (true) {
    ;
  }
}

【Result demonstration】

• Open the serial port monitor to see the printed x, y, z axis accel and gyro as well as the qmi8658 internal temperature sensor data

This demo demonstrates how to use ESP32-S3-LCD-2 to acquire QMI8658 data and display it using the lvgl library

【Hardware connection】

• Connect the board to the computer

【Code analysis】

• Initialize the UI and create a 100ms timer to obtain data from QMI8658

lvgl_qmi8658_ui_init(lv_scr_act());

【Result demonstration】

This demo demonstrates how to use ESP32-S3-LCD-2 to display battery voltage and ADC values on the screen using the lvgl library

【Hardware connection】

• Connect the board to the computer
• Insert the battery into the battery holder

【Code analysis】

• Initialize the UI and create a 1000ms timer to obtain the data of the adc and convert the data into a voltage

lvgl_battery_ui_init(lv_scr_act());

【Result demonstration】

This demo demonstrates how to use ESP32-S3-LCD-2 to display the screen brightness on the screen using the lvgl library, and the screen brightness can be controlled through the slider

【Hardware connection】

• Connect the board to the computer

【Code analysis】

• Initialize the UI, and create a slider value change callback, when the value of the slider changes, modify the screen brightness

lvgl_brightness_ui_init(lv_scr_act());

【Result demonstration】

This demo demonstrates how to use ESP32-S3-LCD-2 to run the lvgl demos

【Hardware connection】

• Connect the board to the computer

• If the lvgl library is installed online, you need to copy the demos folder to src

【Code analysis】

• Select the lvgl demos to run

lv_demo_widgets();
// lv_demo_benchmark();
// lv_demo_keypad_encoder();
// lv_demo_music();
// lv_demo_stress();

【Result demonstration】

This demo uses the LVGL library to display images captured from the camera on the ESP32-S3-LCD-2 screen

【Hardware connection】

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

【Code analysis】

• Create a task specifically for acquiring camera images

xTaskCreatePinnedToCore(camera_task, "camera_task_task", 1024 * 3, NULL, 1, NULL, 0);

• Obtain camera images and update display

    camera_fb_t *pic;
    lv_img_dsc_t img_dsc;
    img_dsc.header.always_zero = 0;
    img_dsc.header.w = 480;
    img_dsc.header.h = 320;
    img_dsc.data_size = 320 * 480 * 2;
    img_dsc.header.cf = LV_IMG_CF_TRUE_COLOR;
    img_dsc.data = NULL;
    // lv_img_set_src(img_camera, &pic);
    while (1)
    {
        pic = esp_camera_fb_get();

        if (NULL != pic)
        {
            img_dsc.data = pic->buf;
            if (lvgl_lock(-1))
            {
                lv_img_set_src(img_camera, &img_dsc);
                lvgl_unlock();
            }
        }
        esp_camera_fb_return(pic);
        vTaskDelay(pdMS_TO_TICKS(1));
    }

【Result demonstration】

This demo demonstrates how to use ESP32-S3-LCD-2 to drive the camera. After connecting to WiFi, the program will create a web server, and users can access it by entering the device's IP address in the browser. Web pages can display images from cameras and support settings such as resolution and mirroring

【Hardware connection】

• Connect the board to the computer
• Plug the OV5640 camera into the 24Pin socket on the board

【Code analysis】

• char sta_ssid[] = "waveshare"; : The name of the WiFi to be connected
• char sta_pass[] = "12345678"; : The WiFi password to be connected

【Result demonstration】

• Open the serial port terminal after connecting to WiFi to see the IP address

• Use the browser to open the IP address for serial port printing
• Click Start Stream to see the image of the camera

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 path to openocd, 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 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: