ESPHome Case Guide¶

This tutorial will show you how to add the Crowpanel Advance ESP32 HMI Display to ESPHome and how to remotely control a light bulb's on/off state through the ESPHome platform.

First, we need to prepare: a Raspberry Pi; a 64GB SD card; a Crowpanel Advance ESP32 HMI Display; a four-wire interface light bulb; and DuPont wires.

Download HomeAssitant¶

Open the official website of HomeAssitant：https://www.home-assistant.io/

Select a Raspberry Pi and install the Home Assistant system according to this installation guide.

After the installation is complete, insert the SD card with the Home Assistant system into the Raspberry Pi and connect the Ethernet cable.

Note: Make sure that the Wi-Fi network your Crowpanel Advance ESP32 HMI Display will connect to is on the same local area network (LAN) as the Raspberry Pi.

The following devices need to be on the same LAN: ① Your computer ② Crowpanel Advance ESP32 HMI Display ③ Raspberry Pi with the Home Assistant system

Note: The Raspberry Pi must be connected to a screen to view information. Once everything is ready, power on the Raspberry Pi and wait for it to load. The screen will display the following image.

Remember the IP address and the Home Assistant URL.

In my case, the IP address is: 192.168.2.110 So I enter 192.168.2.110:8123 in the browser.

Next, start configuring the Home Assistant system.

You can either manually set your location or allow it to be detected automatically.

By default, click 'Next'.

You can either add smart devices now or click Finish to add them later. Here, we will add the devices later.

Add ESPHome¶

This will bring you to the main interface of Home Assistant.

Click on the username and enable "Advanced Mode."

Click on "Settings" and then "Add-ons."

Click on "ADD-ON STORE" and type ESPHome to install it.

The installation is in progress, as shown in the image.

Once the installation is complete, we can start adding devices. Click on + New Device -> Continue.

Enter a name and click Next.

Here, do not check "Use recommended settings." Select the main chip of the Crowpanel Advance ESP32 HMI Display, ESP32-S3.

Next, choose any option (since we will replace it in the code later).

Here, click "SKIP".

Then, return to the main interface, find the Advance_HMI_43_LED you just created, click "EDIT", and enter the code editor.

This code is automatically generated based on the previous steps. Next, we will make replacements in it, which will help optimize the code for more efficient operation.

Next, you can replace the relevant content in esphome and ESP32 as needed.

Remember to replace your own Wi-Fi name and password.

Once the code replacement is complete, click "INSTALL" in the top right corner.

Select "Manual download".

Wait for a few minutes until the installation is complete. Then, select "Factory format".

Once the download is complete, you will see the .bin file.

Remember the path of this .bin file. Open the following website: https://web.esphome.io/?dashboard_wizard Next, we will flash this .bin file into the Crowpanel Advance ESP32 HMI Display.

Connect the Crowpanel Advance ESP32 HMI Display to your computer. Click "Connect", select the COM port, and connect it.

After connecting the Crowpanel Advance ESP32 HMI Display, click "Install".

Add the .bin file you just downloaded, then click "Install".

Wait for a few minutes.

After the installation is complete, click "Close".

After successfully flashing the .bin file, return to the ESPHome page in Home Assistant. Restart the ESP32 display, and you should see the device you created earlier show as ONLINE in the top right corner.

Now we can start writing a program to control the smart home. Here, I'll use the example of remotely turning on a light. Click "EDIT" to start writing the code.

Please go ahead and add the following code at the end of the script.

Here, GPIO19 corresponds to the UART1-OUT of the Crowpanel Advance ESP32 HMI Display that you have connected.

For the 7.0-inch, 5.0-inch, and 4.3-inch products, the required pin is GPIO19. For the 3.5-inch, 2.8-inch, and 2.4-inch products, the required pin is GPIO18.

After editing the program, click "Install" and select "Wireless". This method is very convenient for us.

After a successful flash, the following interface will appear.

Scroll the mouse wheel to view the IP address of the Crowpanel Advance ESP32 HMI Display and make sure to remember it.

Add the device to ESPHome¶

Click Settings → Devices & Services → Add Integration, then enter 'ESPHome' and click on it.

Enter the IP address (which you need to remember). The 'port' is automatically generated.

Then, we can see the device we just added. Click on "x entities" to view the available features on the device. x represents the number of entities, such as 2 entities shown below.

After opening and viewing the features, you should see the LED switch that we designed in the code.

Click on it, and you'll be able to successfully control the light bulb connected to the Crowpanel Advance ESP32 HMI Display.