Skip to content

CrowPanel HMI| ESP32-S3 AI-Powered IPS Touch Screen connects to WiFi to play songs.

Welcome to the second lesson of learning. I believe that after completing the first lesson, everyone has gained a deeper understanding of our product. Next, I will lead you to the first application case of the Advance series products - connecting to WiFi to play songs.

1 Product Interface Introduction


When you power on the product, you will see the following interface.

The following interface was generated by introducing the official firmware of LVGL, and the specific operation will not be explained in this lesson for now. In the next class, we will mainly explain the LVGL graphics library. You can follow our updates to facilitate your learning.

(The interface has not yet developed any functions and can only be viewed by sliding the interface.)

2-1

2-2

2-3

However, you can choose the theme color you want to use.

2-4

Click the "Next" option.

git224

2 Download Git


Step 1: Open the official website of Git at https://git-scm.com/downloads/win.

Step 2: Click to download.****

git190

Step 3: After the download is complete, double-click the installation package to install it.

git213

Click the "Next" option.

git224

Check all the options here and click "Next".

git240

After that, click "Next" with the default settings. ****

git253

Finally, click "Install" and wait for the Git installation to complete.

git262

Click "Finish".

git273

3 Install the ADF library and configure the compilation environment


Step 1: Open VSCode and click to download the ADF library.

git315

Note: If the download fails, you can install it manually according to the following steps.

Open the official website of Espressif: https://www.espressif.com.cn/en/node/1

git381

Jump to the page to download the official voice library.

git394

Download the ADF library.

git403

Create a new folder named "esp-adf" in the installation path of the IDF tool.

git437

git439

Unzip the downloaded ADF library compressed package, and copy all the files inside the compressed package into the newly created folder "esp-adf".

git483

Search for esp-sr and esp-adf-libs on GitHub, and download these two libraries.

git524

git527

git529

Unzip these two compressed packages, and copy the files inside them respectively into the two folders within "esp-adf" -> "components".

git578

After copying, it will be shown as in the following picture.

git588

git590

Step 2: Fix the security vulnerabilities, functional defects, etc. of FreeRTOS existing in IDF 5.2.

Note: Whether the ADF library is installed with one-click or manually, this step should be carried out to ensure that the audio link can successfully play the audio.

Open the "esp-adf" -> "idf_patches" folder in the installation path of the IDF tool, and copy the idf_v5.2_freetos.patch.

git750

The idf_v5.2_freetos.patch is usually a patch file for the FreeRTOS part in the Espressif IoT Development Framework (IDF) version 5.2.

Copy it to the installation location of IDF.

git860

Right-click in this level of the folder and select "Open Git Bash Here" to open the Git command-line interface.

git889

Copy the command "git apply C:/Users/12397/esp/v5.2_tools/esp-adf/idf_patches/idf_v5.2_freertos.patch" into Git Bash, and then press the Enter key to run it.

Note: The path in the command needs to be replaced with the actual path on your computer.

git1019

4 Select a match code for the screen


In this lesson, we use small sizes (2.4, 2.8, 3.5) as examples. You can download the corresponding size codes from the official website.

Step 1: Download the code for this lesson and open it with VSCode.

git1056

Step 2: Change the Wi-Fi name and Wi-Fi password.

git1080

Step 3: According to the actual screen size of the development board, modify the code initialization and the included header files.

git1120

Step 4: Change the pin definitions in the ADF library.

git1171

Change the pin definitions of the small-sized speaker to the following pin numbers.

git1189

Change the pin definitions of the large-sized speaker to the following pin numbers.

git1207

Step 5: Connect the development board to the computer, and select the corresponding COM port and the model of the development board in VSCode.

Note: For the large-sized development board, toggle the function select keys to 00.

git1289

Step 6: Compile the code and flash it to the development board. Click the compile button and wait for the compilation to finish.

git1324

git1326

Click the "Flash" button and wait for the flashing process to complete.

git1340

git1342