Skip to content

CrowPanel ESP32 2.4-inch with ESPHome

Overview

This tutorial will show you how to add the ESP32 Display to the ESPHome and how to view the detected data in the ESPHome. You also can control the ESP32 Display brightness icon on and off in the ESPHome.

ESPHome-show

Hardware Preparation

CrowPanel ESP32 2.4'' HMI Crowtail-DHT20 Crowtail- Digital Light Sensor 2.0 Dupont-wire
ESP32-2.4 CROWTAIL-DHT20 CROWTAIL-LIGHT 4-PIN-FEMALE-WIRE
BUYNOW BUYNOW BUYNOW BUYNOW

Build the Project with ESPHome

Get Started with ESPHome

Please click the card below to learn how to install the Home Assistant, and how to burn the bin file.

ESPHome

After successfully burning the bin file, return to the ESPHome page of the Home Assistant. Reboot the ESP32 display, we can see that the upper right corner of the device created before displays 'ONLINE'.

  1. Before writing the code, we need to import the material we want to use. First, we need to add a tool. Select 'Settings'→'ADD-ON STORE'

    ESPHome-1

  2. Then enter 'Samba share' and click 'INSTALL'.

    ESPHome-2

  3. Next, select 'Configuration' and set up your account.

    ESPHome-3

  4. Enter the IP Address (We mentioned the IP address in Get Started with ESPHome's Connect the Raspberry Pi) in the path bar and select 'config'→'esphome'. Put the materials.zip into the 'esphome' file. Remember to unzip Materials.zip

    You can click download to download the materials we provided.

    ESPHome-4

  5. Click 'EDIT' to edit the program. You can click download to download the complete project we provided. If you want to use other functions, you can also modify the program.

    ESPHome-5

  6. Once the program is edited, click 'INSTALL' and select 'Wirelessly'. This way is very convenient for us.

    ESPHome-6

    ESPHome-7

  7. The following interface will appear after successful burning.

    ESPHome-8

    We slide the wheel on the mouse to see the IP address of the ESP32 Display and remember it.

    ESPHome-9

  8. In addition to the IP address, we also need to remember the API.

    ESPHome-10

Add the device to the ESPHome

  1. Click 'Settings'→ 'Devices & services'→ 'ADD INTEGRATION', entry 'ESPHome' and click it.

    ESPHome-11

  2. The IP address, which was just asked to remember and enter in the 'Host*'. 'Port' is automatically generated.

    ESPHome-12

    Enter the API was just asked to remember.

    ESPHome-13

  3. Then we can see the device we just added. Click 'x entities', and we can view the features available on the device.

    ESPHome-14

  4. Now add a card to view the data detected in real time.

    ESPHome-15

    ESPHome-16

    The added card will automatically generate the functions we set. The set function is to detect temperature, humidity and brightness.

    ESPHome-17

Examples

You can click download to download the examples we provided.

  1. UART

    Connect the UART port of the ESP32 Display to the PC. You can view the data received by the ESP32 Display from the LOG.

    ESPHome-18

    ESPHome-19

  2. SPK

    Connect a speaker to the ESP32 Display SPK port. After a piece of music is played, you can view the printed information in LOG.

    ESPHome-20

  3. BLE

    Connect your phone's Bluetooth to the Bluetooth of the ESP32 Display. You can check whether the connection is successful in LOG.

    ESPHome-21

    ESPHome-22

  4. Touch

    Read the position of the touch on the ESP32 Display by looking at the LOG.

    ESPHome-23

  5. IIC

    Connect the digital light sensor to the IIC port of the ESP32 Display. Check the brightness value in LOG.

    ESPHome-24

  6. GPIO

    Connect the LED to GPIO_D-IO25 of the ESP32 Display.

    ESPHome-25