This demo demonstrates how ESP32-S3-Touch-LCD-3.5 reads audio files from a TF card and plays them using a speaker, supporting formats such as MP3, AAC, WAV, etc.

【Preparation】

• Insert the TF card into the computer
• Create a folder named music in the root directory of the TF card
• Copy the 1.mp3 file from the data folder of this project to the music folder on the TF card
• Insert the TF card into ESP32-S3-Touch-LCD-3.5

【Code analysis】

• Initialize

  Wire.begin(I2C_SDA, I2C_SCL);
  es8311_codec_init();
  SD_MMC.setPins(SD_MMC_CLK, SD_MMC_CMD, SD_MMC_D0);
  if (!SD_MMC.begin("/sdmmc", true, false, 20000))
  {
    esp_rom_printf("Card Mount Failed\n");
    while (1)
    {
    };
  }
  audio.setPinout(I2S_BCLK, I2S_LRCK, I2S_SDOUT, I2S_MCLK);
  audio.setVolume(21);  // 0...21

• Set the audio file to play

  audio.connecttoFS(SD_MMC, "music/1.mp3");

【Result demonstration】

• Nothing will be shown on the screen if you play the audio file

This demo demonstrates using XPowers to drive AXP2101 and print data via serial port

【Code analysis】

• Initialize

  bool result = power.begin(Wire, AXP2101_SLAVE_ADDRESS, i2c_sda, i2c_scl);

  if (result == false) {
    Serial.println("power is not online...");
    while (1) delay(50);
  }

【Result demonstration】

• Nothing will be shown on the screen
• Open the serial port monitor

This demo demonstrates how 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

【Preparation】

• Connect the board to the computer
• Plug the OV5640 camera into the 24Pin socket on the board (Version with casing does not require this operation)
• Set Parttion to Custom

【Code analysis】

• Define the pins related to the camera

#define PWDN_GPIO_NUM -1
#define RESET_GPIO_NUM -1
#define XCLK_GPIO_NUM 38
#define SIOD_GPIO_NUM 8
#define SIOC_GPIO_NUM 7

#define Y9_GPIO_NUM 21
#define Y8_GPIO_NUM 39
#define Y7_GPIO_NUM 40
#define Y6_GPIO_NUM 42
#define Y5_GPIO_NUM 46
#define Y4_GPIO_NUM 48
#define Y3_GPIO_NUM 47
#define Y2_GPIO_NUM 45
#define VSYNC_GPIO_NUM 17
#define HREF_GPIO_NUM 18
#define PCLK_GPIO_NUM 41

• The name and password of the wifi to be connected

const char *ssid = "waveshare";
const char *password = "12345678";

• Start the server and start providing HTTP video streaming services

startCameraServer();

Serial.print("Camera Ready! Use 'http://");
Serial.print(WiFi.localIP());
Serial.println("' to connect");

【Result demonstration】

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

• Use the browser (the device with hotspot enabled) to open the IP address for serial port printing
• Click Start Stream to see the image of the camera

This demo demonstrates using the ESP32-S3-Touch-LCD-3.5 to drive the ES8311 audio codec to achieve audio recording and playback functions.

【Code analysis】

• Initialize

  Wire.begin(I2C_SDA, I2C_SCL);
  es8311_codec_init();
  setupI2S();

• Record audio for 5s and play back the recorded content

  wav_buffer = i2s.recordWAV(5, &wav_size);
  delay(1000);
  Serial.println("I2S playWAV");
  i2s.playWAV(wav_buffer, wav_size);

【Result demonstration】

• Nothing will be shown on the screen
• Press the RST button on the ESP32-S3-Touch-LCD-3.5 to enter audio recording mode, and 5 seconds later, it will play back the recorded content.

This demo demonstrates the ESP32-S3-Touch-LCD-3.5 driving the PCF85063, setting time and date, and getting time.

【Code analysis】

• Initialize

    if (!rtc.begin(Wire, PCF85063_SLAVE_ADDRESS, SENSOR_SDA, SENSOR_SCL)) {
        Serial.println("Failed to find PCF8563 - check your wiring!");
        while (1) {
            delay(1000);
        }
    }

• Set the time and date

    rtc.setDateTime(year, month, day, hour, minute, second);

• Get the time and date

    RTC_DateTime datetime = rtc.getDateTime();

【Result demonstration】

• Nothing will be shown on the screen
• Open the serial port monitor

This demo demonstrates the ESP32-S3-Touch-LCD-3.5 driving QMI8658 to obtain and print the temperatures of Accel, Gyro, and IMU.

【Code analysis】

• Initialize

  if (!qmi.begin(Wire, QMI8658_L_SLAVE_ADDRESS, SENSOR_SDA, SENSOR_SCL)) {
    Serial.println("Failed to find QMI8658 - check your wiring!");
    while (1) {
      delay(1000);
    }
  }

• Get data

  if (qmi.getDataReady()) {
    if (qmi.getAccelerometer(acc.x, acc.y, acc.z)) {
    }
    if (qmi.getGyroscope(gyr.x, gyr.y, gyr.z)) {
    }
  }

【Result demonstration】

• Nothing will be shown on the screen
• Open the serial port monitor

This demo demonstrates how to use ESP32-S3-Touch-LCD-3.5 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】

• Initialize

  if(!SD_MMC.setPins(clk, cmd, d0)){
    Serial.println("Pin change failed!");
    return;
  }

  if (!SD_MMC.begin( "/sdcard", true)) {
    Serial.println("Card Mount Failed");
    return;
  }

【Result demonstration】

• 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 the ESP32-S3-Touch-LCD-3.5 using the GFX_Library_for_Arduino library to drive the screen and display HelloWorld on the screen.

【Code analysis】

• Configure the screen interface and screen resolution, etc.

Arduino_DataBus* bus = new Arduino_ESP32SPI(LCD_DC /* DC */, LCD_CS /* CS */, SPI_SCLK /* SCK */, SPI_MOSI /* MOSI */, SPI_MISO /* MISO */);
Arduino_GFX* gfx = new Arduino_ST7796(
  bus, LCD_RST /* RST */, 0 /* rotation */, true, LCD_HOR_RES, LCD_VER_RES);

【Result demonstration】

This demo demonstrates the ESP32-S3-Touch-LCD-3.5 using the JPEGDEC library to decode JPEG files from a TF card and displaying the content on the screen through the GFX_Library_for_Arduino.

【Preparation】

• Insert the TF card into the computer
• Create a folder named images in the root directory of the TF card
• Copy the octocat.jpg file from the data folder of this project to the images folder on the TF card
• Insert the TF card into ESP32-S3-Touch-LCD-3.5

【Code analysis】

• Decode jpg file and display

jpegDraw(JPEG_FILENAME, jpegDrawCallback, true /* useBigEndian */,
             0 /* x */, 0 /* y */, gfx->width() /* widthLimit */, gfx->height() /* heightLimit */);

【Result demonstration】

This demo demonstrates the ESP32-S3-Touch-LCD-3.5 using the PNGdec library to decode png files from a TF card, and displaying the png content on the screen through the GFX_Library_for_Arduino.

【Preparation】

• Insert the TF card into the computer
• Create a folder named images in the root directory of the TF card
• Copy the octocat.png and octocat-4bpp.png files from the data folder of this project to the images folder on the TF card
• Insert the TF card into ESP32-S3-Touch-LCD-3.5

【Code analysis】

• Decode jpg file and display

    rc = png.open(PNG_FILENAME, myOpen, myClose, myRead, mySeek, PNGDraw);
    if (rc == PNG_SUCCESS)
    {
      int16_t pw = png.getWidth();
      int16_t ph = png.getHeight();

      xOffset = (w - pw) / 2;
      yOffset = (h - ph) / 2;

      rc = png.decode(NULL, 0);

      Serial.printf("Draw offset: (%d, %d), time used: %lu\n", xOffset, yOffset, millis() - start);
      Serial.printf("image specs: (%d x %d), %d bpp, pixel type: %d\n", png.getWidth(), png.getHeight(), png.getBpp(), png.getPixelType());
      png.close();
    }

【Result demonstration】

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

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

• It can be operated by touch

This demo demonstrates how to use ESP32-S3-Touch-LCD-3.5 to obtain PCF85063 time and date data and display it using the lvgl library.

【Code analysis】

• UI initialize

void lvgl_pcf85063_ui_init(lv_obj_t *parent) {
  lv_obj_t *list = lv_list_create(parent);
  lv_obj_set_size(list, lv_pct(100), lv_pct(100));

  lv_obj_t *list_item = lv_list_add_btn(list, NULL, "data");
  label_data = lv_label_create(list_item);
  lv_label_set_text(label_data, "2025-01-01");

  list_item = lv_list_add_btn(list, NULL, "time");
  label_time = lv_label_create(list_item);
  lv_label_set_text(label_time, "00:00:00");

  pcf85063_timer = lv_timer_create(pcf85063_callback, 100, NULL);
}

【Result demonstration】

This demo demonstrates how to use ESP32-S3-Touch-LCD-3.5 to obtain qmi8658 data and display it using the lvgl library.

【Code analysis】

• Initialize UI

void lvgl_qmi8658_ui_init(lv_obj_t *parent) {
  lv_obj_t *list = lv_list_create(parent);
  lv_obj_set_size(list, lv_pct(100), lv_pct(100));

  lv_obj_t *list_item = lv_list_add_btn(list, NULL, "accel_x");
  label_accel_x = lv_label_create(list_item);
  lv_label_set_text(label_accel_x, "0.00");

  list_item = lv_list_add_btn(list, NULL, "accel_y");
  label_accel_y = lv_label_create(list_item);
  lv_label_set_text(label_accel_y, "0.00");

  list_item = lv_list_add_btn(list, NULL, "accel_z");
  label_accel_z = lv_label_create(list_item);
  lv_label_set_text(label_accel_z, "0.00");

  list_item = lv_list_add_btn(list, NULL, "gyro_x");
  label_gyro_x = lv_label_create(list_item);
  lv_label_set_text(label_gyro_x, "0.00");

  list_item = lv_list_add_btn(list, NULL, "gyro_y");
  label_gyro_y = lv_label_create(list_item);
  lv_label_set_text(label_gyro_y, "0.00");

  list_item = lv_list_add_btn(list, NULL, "gyro_z");
  label_gyro_z = lv_label_create(list_item);
  lv_label_set_text(label_gyro_z, "0.00");

  list_item = lv_list_add_btn(list, NULL, "temp");
  label_temp = lv_label_create(list_item);
  lv_label_set_text(label_temp, "0.00C");

  qmi8658_timer = lv_timer_create(qmi8658_callback, 100, NULL);
}

【Result demonstration】

This demo demonstrates how ESP32-S3-Touch-LCD-3.5 uses lvgl to display images from a TF card, supporting formats such as jpg, bmp, png, bin, etc.

【Preparation】

• Insert the TF card into the computer
• Create a folder named images in the root directory of the TF card
• Copy all the files from the data folder of this project to the images folder on the TF card
• Insert the TF card into ESP32-S3-Touch-LCD-3.5

【Code analysis】

• Set the displayed image

  lv_obj_t *img = lv_img_create(lv_scr_act());
  lv_obj_align(img, LV_ALIGN_CENTER, 0, 0);
  // lv_img_set_src(img, "S:images/octocat.jpg");
  lv_img_set_src(img, "S:images/octocat.png");

【Result demonstration】

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:

This demo is a comprehensive demo of ESP32-S3-Touch-LCD-3.5, which is also the default demo flashed at factory

【Code analysis】

• Initialize

    i2c_bus_init();
    io_expander_init();
    esp_3inch5_display_port_init(&io_handle, &panel_handle, LCD_BUFFER_SIZE);
    esp_3inch5_touch_port_init(&touch_handle, i2c_bus_handle, EXAMPLE_LCD_H_RES, EXAMPLE_LCD_V_RES, EXAMPLE_DISPLAY_ROTATION);
    esp_axp2101_port_init(i2c_bus_handle);
    vTaskDelay(pdMS_TO_TICKS(100));
    esp_es8311_port_init(i2c_bus_handle);
    esp_qmi8658_port_init(i2c_bus_handle);
    esp_pcf85063_port_init(i2c_bus_handle);
    esp_sdcard_port_init();
    esp_camera_port_init(I2C_PORT_NUM);
    esp_wifi_port_init("WSTEST", "waveshare0755");

    esp_3inch5_brightness_port_init();
    esp_3inch5_brightness_port_set(80);
    lv_port_init();

【Result demonstration】

• Touch test, swipe your finger on the screen to display its trajectory, short press the BOOT button to exit the touch test

• Switch between interfaces by swiping left and right.

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

【Result demonstration】

• It can be operated by touch.

This demo demonstrates the ESP32-S3-Touch-LCD-3.5 using lvgl to display system information, as well as testing es8311 and controlling the screen brightness

【Code analysis】

• Get the size of Flash, Psram, and TF card and the frequency of the system operation

    esp_flash_get_size(NULL, &flash_size);
    lv_label_set_text_fmt(label_flash, "%d MB", (int)(flash_size / 1024 / 1024));

    psram_size = (uint32_t)esp_psram_get_size();
    lv_label_set_text_fmt(label_psram, "%d MB", (int)(psram_size / 1024 / 1024));

    cpu_freq = esp_clk_cpu_freq();
    lv_label_set_text_fmt(label_chip_freq, "%d MHz", (int)(cpu_freq / 1000 / 1000));

    sdcard_size = esp_sdcard_port_get_size();
    lv_label_set_text_fmt(label_sd, "%d MB", (int)(sdcard_size / 1024 / 1024));

【Result demonstration】

This demo demonstrates that ESP32-S3-Touch-LCD-3.5 uses lvgl to display qmi8658 data

【Result demonstration】

This demo demonstrates that how to use ESP32-S3-Touch-LCD-3.5 to display axp2101 data using lvgl

【Result demonstration】

This demo demonstrates that ESP32-S3-Touch-LCD-3.5 uses lvgl to display images captured by the camera

【Code analysis】

• Get the images from the camera and update to LVGL

void camera_task(void *arg)
{
    camera_fb_t *pic;
    lv_img_dsc_t img_dsc;
    img_dsc.header.always_zero = 0;
    img_dsc.header.w = 320;
    img_dsc.header.h = 480;
    img_dsc.data_size = 320 * 480 * 2;
    img_dsc.header.cf = LV_IMG_CF_TRUE_COLOR;
    img_dsc.data = NULL;
    while (1)
    {
        pic = esp_camera_fb_get();

        if (NULL != pic)
        {
            // printf("pic->len = %d\n", pic->len);
            img_dsc.data = pic->buf;
            if (lvgl_port_lock(0))
            {
                lv_img_set_src(cam_ing, &img_dsc);
                lvgl_port_unlock();
            }
        }
        esp_camera_fb_return(pic);

        vTaskDelay(pdMS_TO_TICKS(1));
    }
}

【Result demonstration】

This demo demonstrates ESP32-S3-Touch-LCD-3.5 WiFi scanning and uses lvgl to display the names and signal strength of the scanned WiFi networks.

【Code analysis】

• Scan WiFi and update to lvgl

static void lvgl_wifi_task(void *arg)
{
    char str[50] = {0};
    char str_wifi_ip[32] = {0};
    lv_obj_t *label;
    wifi_ap_record_t ap_info[LIST_BTN_LEN_MAX];

    while (1)
    {
        if (xSemaphoreTake(wifi_scanf_semaphore, pdMS_TO_TICKS(1000)) == pdTRUE)
        {
            printf("wifi_scanf!!\r\n");
            memset(ap_info, 0, sizeof(ap_info));
            if (esp_wifi_port_scan(ap_info, &list_item_count, LIST_BTN_LEN_MAX))
            {
                lv_obj_del(list_btns[0]);
                if (lvgl_port_lock(0))
                {
                    for (int i = 0; i < list_item_count && i < LIST_BTN_LEN_MAX; i++)
                    {
                        list_btns[i] = lv_list_add_btn(list, NULL, (char *)ap_info[i].ssid);
                        label = lv_label_create(list_btns[i]);
                        lv_label_set_text_fmt(label, "%d db", ap_info[i].rssi);
                    }
                    lvgl_port_unlock();
                }
            }
        }

        esp_wifi_port_get_ip(str_wifi_ip);
        sprintf(str, "IP: %s", str_wifi_ip);

        if (lvgl_port_lock(0))
        {
            lv_label_set_text(lable_wifi_ip, str);
            lvgl_port_unlock();
        }
    }
}

【Result demonstration】

This demo demonstrates how ESP32-S3-Touch-LCD-3.5 uses lvgl to display images from a TF card, supporting formats such as jpg, bmp, png, bin, etc.

【Preparation】

• Insert the TF card into the computer
• Create a folder named images in the root directory of the TF card
• Copy all the files from the data folder of this project to the images folder on the TF card
• Insert the TF card into ESP32-S3-Touch-LCD-3.5

【Code analysis】

• Read all images in the S:images directory and print the file names

    read_image_files("S:images");
    print_image_filenames();

• Initialize the ui and add left and right swipe to switch images

        img = lv_img_create(lv_scr_act());
        lv_obj_set_size(img, 320, 480);
        lv_obj_align(img, LV_ALIGN_CENTER, 0, 0);
        snprintf(str_buf, sizeof(str_buf), "S:images/%s", image_filenames[0]);
        printf("img_set_src: %s\r\n", str_buf);
        lv_img_set_src(img, str_buf);
        lv_obj_clear_flag(img, LV_OBJ_FLAG_SCROLLABLE);
        lv_obj_add_flag(img, LV_OBJ_FLAG_GESTURE_BUBBLE);
        lv_obj_add_event_cb(lv_scr_act(), img_gesture_event_cb, LV_EVENT_GESTURE, NULL);

【Result demonstration】