ESPHome Case Guide¶

This tutorial will show you how to add the Crowpanel Advance ESP32 HMI Display to ESPHome.

In this session, we will use the DHT20 temperature and humidity sensor and an LED light to collect temperature and humidity data on the Crowpanel Advance ESP32 HMI Display. Additionally, the bulb can be controlled remotely.

By clicking the control switch on the ESPHome platform, you can control the bulb's on and off status, which will also be displayed on the screen.

You can also view the historical temperature and humidity data collected in the ESPHome backend.

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 Home Assistant¶

Open the official website of Home Assistant: 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.

Once your device is activated, you can begin writing code to implement your features.

First, this session focuses on collecting temperature and humidity data, which can be viewed historically in the ESPHome backend. It also adds the function of remotely controlling the light.

We hope the features in this session will help you better understand the convenience of ESPHome in smart homes.

Next, let's get started.

You can see the materials on the screen, which we need to use on the ESPHome platform, so they need to be uploaded to the ESPHome platform.

Click here to download the materials shown on our screen.

After downloading the materials we provide, you need to download a tool to upload these materials to the ESPHome platform.

Click Settings and select Add-ons

Then, click the ADD-ON STORE at the bottom right corner

Search for Samba share at the top

Click INSTALL to install it

After installation, configure your Samba share with your own username and password—please remember them!

After saving, go to the File Explorer on your computer

Enter \ + your Home Assistant IP address

Go to config

Then choose esphome

Put the materials you just downloaded into the esphome folder

That completes the mission of Samba share.

Next, you can edit your code to implement the simple smart home functions we mentioned.

Click "EDIT" to start writing the code.

You can click here to download the code from this session, which will help you implement the features.

After downloading the code, you can copy it into your project.

Next, let’s talk about things to pay attention to while using the code.

1 WiFi¶

Here you need to use the Wi-Fi name and password under the same local network as your computer's IP.

2 LED Pin¶

For this LED control pin

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.

Note: Due to a hardware circuit issue with the 2.8-inch and 2.4-inch Crowpanel Advance ESP32 HMI Displays, the I2C address of the touchscreen conflicts with that of the DHT20 temperature and humidity sensor, making both unusable when connected simultaneously. Therefore, for the 2.8-inch and 2.4-inch displays, we only use the UART1-OUT interface to connect the DHT20 sensor, and the light bulb is not used with these two sizes. For other sizes, such as 7.0-inch, 5.0-inch, 4.3-inch, and 3.5-inch displays, both the DHT20 sensor and the small light bulb can be used.

3 Materials¶

These are the materials we just uploaded, and you can resize these images here.

4 DHT20 Temperature and Humidity Sensor¶

Here, we initialize the temperature and humidity sensor connected to pins 15 and 16.

We also initialize the DHT20 temperature and humidity sensor.

5 Material Positions¶

Here we can also customize the position and font of the materials.

6 Value Update¶

At the end, set the update time for the temperature and humidity values (refresh every second).

That’s the code introduction.

Next, we will flash the code.

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.

Once the code is flashed, you will see the same interface on your screen as we do.

Next, let’s take a look at the temperature and humidity data and the LED light status control observed in ESPHome.

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 6 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.

You can also view the historical temperature and humidity data collected in the ESPHome backend.