ESP32 Display 2.8-inch HMI HomeAssistant Tutorial

From Elecrow
Jump to navigation Jump to search

Overview

In this tutorial, we will show you how to make a little system with ESPHome. The Raspberry Pi is used as a server.

Hardware Preparation

2.8-inch ESP32 HMI Display Raspberry Pi4 & TF Card Crowtail-LED USB-A(or USB-C) to USB-C cable 4-Pin HY2.0 Cables
28-ecp32dispaly-mainpic.png Raspberry-pi4.jpg Crowtail-LED1.JPG USB-C-CABLE.jpg CROWTAIL-CABLE.jpg
Get one now Get one now Get one now Get one now Get one now


Software Usage

Install Home Assistant Operating System

Go to https://www.home-assistant.io/. Click on Documentation→Installation

Homeassistant.jpg


Scroll down and choose Raspberry Pi

Tutorial-HomeAssistant on RPI-DIS03024H 1-28129.png


Here we will write the image with Balena Etcher.

Download the Balena Etcher on https://etcher.balena.io/

File:Balena.jpg700px


Download the image to your computer: https://github.com/home-assistant/operating-system/releases/

Tutorial-HomeAssistant on RPI-DIS03024H 1-28416.png

Select Flash from file and select the image you just downloaded. Then insert the TF card to your computer and select target. Select Flash! to start writing the image.

Etcher5.png

Once Balena Etcher has finished writing the image, you will see a confirmation.

Etcher6.png

Boot up Raspberry Pi

Insert the system card into Raspberry Pi and power it up.

Tutorial-HomeAssistant on RPI-DIS03024H 1-28550.png

Install ESPHome

Open the website: http://192.168.2.169:8123

The following interface will appear after setting the account and password:

Tutorial-HomeAssistant on RPI-DIS03024H 1-28777.png

Click your profile→Enable Advanced Mode;

Tutorial-HomeAssistant on RPI-DIS03024H 1-28843.png

Click Settings→Select Add-ons→Open ADD-ON STORE→Search for ESPHOME

Tutorial-HomeAssistant on RPI-DIS03024H 1-28845.png

Start the ESPHOME. If the open fails, you need to restart

Tutorial-HomeAssistant on RPI-DIS03024H 1-28847.png

Tutorial-HomeAssistant on RPI-DIS03024H 1-28928.png


Create the device

Enter ESPHome and click Add device

Tutorial-HomeAssistant on RPI-DIS03024H 1-28996.png

The device type selects ESP32, and the board selects Donky(WROOM32)

Tutorial-HomeAssistant on RPI-DIS03024H 1-28998.png

Tutorial-HomeAssistant on RPI-DIS03024H 1-281000.png

Generate the bin files

Tutorial-HomeAssistant on RPI-DIS03024H 1-281059.png

Tutorial-HomeAssistant on RPI-DIS03024H 1-281061.png


Open the website:https://web.esphome.io/?dashboard_wizard

Connect the correct port.

Tutorial-HomeAssistant on RPI-DIS03024H 1-281219.png

Tutorial-HomeAssistant on RPI-DIS03024H 1-281221.png

Waiting for the installation to be completed

Tutorial-HomeAssistant on RPI-DIS03024H 1-281304.png

Tutorial-HomeAssistant on RPI-DIS03024H 1-281306.png

Edit the code

Back to the ESPHOME window and then restart the ESP32 to see the created device in the ONLINE state
Note: Set the same WIFI account and password

Tutorial-HomeAssistant on RPI-DIS03024H 1-281469.png

Before we start editing our code, we do some preparations: Put the picture and tft font file into the / config / esphonme directory. We use a simple and easy to use tool to complete our requirements


Tutorial-HomeAssistant on RPI-DIS03024H 1-281689.png

Tutorial-HomeAssistant on RPI-DIS03024H 1-281691.png

Enter the configuration interface and set up the account number and password

Tutorial-HomeAssistant on RPI-DIS03024H 1-281810.png

Then open computer input \\192.168.2.169, then enter the / config / esphome directory

Tutorial-HomeAssistant on RPI-DIS03024H 1-282020.png

Tutorial-HomeAssistant on RPI-DIS03024H 1-282022.png

Put the following files into the esphome folder

Tutorial-HomeAssistant on RPI-DIS03024H 1-282107.png

Then we can start editing the program

Tutorial-HomeAssistant on RPI-DIS03024H 1-282177.png

After editing the program, you can choose to burn online recording, which becomes very convenient

Tutorial-HomeAssistant on RPI-DIS03024H 1-282287.png

Tutorial-HomeAssistant on RPI-DIS03024H 1-282289.png

Successful burning:

Tutorial-HomeAssistant on RPI-DIS03024H 1-282336.png

Remember this IP address:

Tutorial-HomeAssistant on RPI-DIS03024H 1-282378.png

Remember this key:

Tutorial-HomeAssistant on RPI-DIS03024H 1-282421.png

Add integrated devices

Tutorial-HomeAssistant on RPI-DIS03024H 1-282501.png

Tutorial-HomeAssistant on RPI-DIS03024H 1-282593.png

Enter the remembered IP address:

Tutorial-HomeAssistant on RPI-DIS03024H 1-282593.png

Enter the remembered key:

Tutorial-HomeAssistant on RPI-DIS03024H 1-282637.png

After completion, we can see that our device was added successfully:

Tutorial-HomeAssistant on RPI-DIS03024H 1-282722.png

You can see the entities we created inside:

Tutorial-HomeAssistant on RPI-DIS03024H 1-282800.png

Now we start adding entities to the main interface
Click Overview→Edit Dashboard

Tutorial-HomeAssistant on RPI-DIS03024H 1-282862.png

Tutorial-HomeAssistant on RPI-DIS03024H 1-282864.png

Tutorial-HomeAssistant on RPI-DIS03024H 1-282866.png

Tutorial-HomeAssistant on RPI-DIS03024H 1-282868.png

Tutorial-HomeAssistant on RPI-DIS03024H 1-282870.png

Click on the light:

Tutorial-HomeAssistant on RPI-DIS03024H 1-282939.png

Next, we make a graph of the temperature and humidity:

Tutorial-HomeAssistant on RPI-DIS03024H 1-283003.png

Done!

Tutorial-HomeAssistant on RPI-DIS03024H 1-283012.png

Resources