Get Started with CrowPanel HMI Screen: Integrate ESP32 into Home Assistant.

[Music] [Applause] [Music] hey everyone welcome to the crow panel esp32 HMI display series tutorials in this lesson I'll show you how to use Crow panel to display the desired screen in ESP home what you'll need is a Raspberry Pi 3B 4B or even five a screen that can connect to the Raspberry Pi an SD card and a 5-in crow panel of course you can also use other sizes of crow panel boards in this video I'll burn the home assistant image to the SD card and then boot it using the raspberry pi with the server as the home assistant server and the crow panel as a device in home assistant I can access the server's panel from my phone or computer to control the crow panel and check its current status next let's see how I operate first search for Raspberry Pi imager to download the image burner tool provided by Raspberry Pi which can help us burn the home assistant image to the SD card after downloading install it since the installation process is quite simple I won't go into details once installed open the Raspberry Pi image burner tool click choose device find the model of your Raspberry Pi and select it then click choose OS and find other specific purpose OS look for home assistant and home automation and you'll clearly see the home assistant option we'll choose that install the latest version 12.4 next insert the SD card into a card reader connect it to your computer and then click choose storage select the SD card you just inserted take your time here to ensure you've made the right selection as it will format the storage before burning finally click next to burn the image to the SD card the process of burning the image can take quite a while so please be patient once the burning is complete you'll see a prompt like this click continue and it will automatically eject the card reader now all you need to do is take out the SD card from the card reader and insert it into the Raspberry Pi's card slot next connect a working screen to your Raspberry Pi I'm using an elro RC 077 in LCD display which is sufficient for this project finally connect your Raspberry Pi to an ethernet cable and a power source since this is the first time booting up the home assistant OS it will initialize a lot of content so it may take some time once you see a house icon appear on the screen and an IP address is printed out that means the initialization is complete based on the IP address above we can access the home assistant management page and the one below is the page to view the running status of Home assistant now head back to your computer and enter the management page address I just mentioned in your browser since this is your first time accessing home assistant will download some necessary files and initialize in the background so you'll need to wait for about 20 minutes on this page when the system panel is ready it will automatically jump to this page we click create my smart home and register or log in with the account on the panel you can customize the account but please make sure to remember the account name and password or you won't be able to access the system panel after filling in the information click create account here select your location and it will fetch local weather information based on your address and display it on the panel then click next and finally click finish to complete the registration when you enter the panel you will see an overview of the panel which displays the current weather information in C California after the system panel is set up we need to connect it to Crow panel so we need to install the es home plug-in in home assistant click setting find Addons here to enter the plug-in management page then click addon store to enter the plug-in store search for ESP home open the installation page of ESP home click install the installation takes a while so please wait patiently after installation the page will refresh automatically click Start to enable ESP home when ESP home is running the page will refresh again you can see open web UI here click it to enter the management page of ESP home now there are no devices I'll first demonstrate how to add a crow panel esp32 display 5 in board click new device then click continue fill in the name of the device here which can be customized and then fill in the Wi-Fi that the device is connected to this wi-fi must be on the same local area network as the ethernet connected to the Raspberry Pi after filling it out click next here select the type of board remember to uncheck use recommended setting in the lower left corner first then click esp32 S3 find es pressive esp32 S3 box select it and click next here the device has been added click skip then you will see that the device is currently in an offline State because we haven't downloaded the code to the board yet to establish a connection with home assistant click edit to enter the code editing page for the 5 in device you can see that the code is very short we click install on the upper right to download the code to the 5- in board since it hasn't established a connection with home assistant yet we need to use manual download first since it's the first time compiling it will download many tool chains and resource packages required for compilation which will take a long time about 10 minutes please wait patiently after the compilation is complete such a window will pop up click ESP home web to open the burning page then go back to the compilation page click modern format to download the compiled binary file after downloading switch to the burning page and connect the 5in board to the computer using a USBC cable then click connect and select select the corresponding serial Port of the 5-in board in the popup window to connect it next click install and select the binary file just downloaded then click open finally click install and it's done if you are using a board with a version below 2.0 please press the boot Button and reset button before clicking install to put the board into download mode otherwise it will remain in the con state after the burning is complete close the message box and return to the ESP home device page you'll see that the inch-sized board is now in an online State however there's no display on the crow panel so next I'll show you how to display a panel for controlling lights on the crow panel using ESP home click edit to open the code editing page for the 5in board then open the example code provided in the course files since I'm using a 5-in board I'll open the 5-in example code for reference once opened let's first take a look at the code on the web editor page this section of code is related to connections which we don't need to modify what we need to modify is the part related to board configuration above open the example code copy the platform specific code into it and then copy the framework related section change the Arduino framework to the ESP IDF framework additionally there are configurations related to PS Ram after these steps the board related configurations are done now let's proceed to add the screen display and control sections all this code goes under the captive portal section I'll copy it all here it's not much just including fonts images switches displays and touch related functions if you look at the beginning you'll notice red wavy lines under the fonts and images hover over them and you'll see why they're marked as errors the font file cannot be found next let's place the font and image files in the specified locations remember to click save before leaving the code editor page or your changes won't take effect click setting find add-ons open the add-on store search for Samba and go to the Samba share plug-in page to install it after completing the Samba share setup click Start since it's the first time installation it will ask us to configure the username and password before running sash share click edit config and fill in the username name and password for remote access to home assistant files after filling in click save then click info to return to the samb share plugin page and click start again to launch it after it's launched open any folder enter backshot and the Raspberry Pi's IP address in the path to access the home assistant files if it's your first time accessing it will prompt you to enter the account and password you just set but I've logged in before recording this course so I can access it directly now first navigate to the config folder locate the eso folder and open it this is where the eso code and files are stored then copy the fonts and images used for the 5-in board here and extract them once done return to the code editing page for the 5in board you'll notice that the prompt about missing files has disappeared moving on I've also created two switches the first switch has pin 38 which corresponds to the gpiod port of the 5in board I've connected an LED module here to control the onoff state of the light the second switch is for the backlight pin of the 5-in screen so I've kept it in an always on state next is the screen driver section this part of the code is already configured so please don't modify it it includes pin definitions that need to be confirmed by referring to the hardware circuit diagram you can refer to the content of the second lesson to understand the relationship between the driver code and the pins after the display initialization it will display an image on the screen this image is the one I just placed in the S foam folder finally for the touch part I've used the ontouch config configuration when a touch occurs it will execute the following code printing the touch coordinates and changing the LED State when the touch happens within a specified range this allows us to control the light lastly click save and install to flash the code to the board since the board is already connected to home assistant we can choose to flash the code wirelessly just ensure that the board is powered on after the upload is completed you will see it starts to print the log information of the board when I try to tap on the screen it will print the coordinates of the point where the touch occurs then when I press the on button or the off button it will turn on or off the LED just as the code intended now I'll demonstrate how to achieve the same effect when using a 2.4 in or 2 2.8 in board click new device to add a new one I'll demonstrate with a 2.4 in board so I'll name it 2.4 in here you also need to uncheck use recommended setting and click on esp32 find deny 32 room 32 here select it and then click next similarly click Skip and then edit to enter the code editing page for the two 2.4 in device next find the example code provided in the course and open the one for the 2.4 in display the download link for the course files can be found in the description below the video for the 2.4 in and 2.8 in displays we don't need to modify the parts related to the board and architecture we only need to paste the function related code under captive portal in the 2.4 4 in code the same font is used which we've already added to the ESP home directory so there won't be any error messages however the images used below haven't been placed in the directory so we need to add the images used in the 2.4 in code to the ESP home directory besides using images there are also switches which are similar to the 5-in board but note that the pins used in the 2.4in board are different from those in the 5in board additionally in the 2.4 in code a sensor is added to get the current temperature and humidity of the environment for touch and display similar to the 5-in board control of the LED is also added now let's upload the image files required for the code to ESP home and then upload the code to see the effect open any folder log into the home assistant directory and find the ESP home folder then find the asset package required for the 2.4 in code provided in the course files copy it to the ESP home directory extract the images and fonts and you're done return to the code editing page if you find any error messages under the file names you can modify the code anywhere and it will recheck the code and eliminate the error messages next click install to compile the code since this is the first time to download the code for the 2.4in board and it has not yet established a connection with ESP home we need to choose manual download it will take a long time for the first compilation after compilation follow the same steps as for the 5-in board open ESP home web and then go back to the compilation page click modern format to download the comp compiled binary file after downloading go back to ESP home web connect the 2.4in board to the computer using a USBC cable then click connect select the serial Port corresponding to the 2.4 in board and click connect then click install and choose file to select the binary file just downloaded click install to flash the binary file to the board at this point point if you are using a board with a version below 2.0 you need to press and hold the boot Button first then press the reset button and finally release both buttons to make the board enter the download mode so that ESP home can connect to it after successful flashing if you're using a board with a version lower than 2.0 you need to manually press the reset button to see the results if it's version 2 0 or above it will automatically reset then return to the ESP homepage and you'll see that the 2.4 in board has also successfully established a connection with ESP home Additionally you can see the current temperature and humidity of the environment on the board and control the LED status however controlling everything only on the board would be quite boring don't forget we've also installed the home assistant system so I hope I can control the LED status and get temperature and humidity information on my computer and phone let's see how I do it click on overview then click on the pencil icon in the upper right corner next click on the three dot icon in the upper right corner of the small box select take control and click take control again this way we can modify the home assistance overview click add card to add a new card to the overview choose to add a button card then look for the LED switch of the 2.4 in board in the entities to be the entity for this card but you'll find that it's not there because we haven't added the 2.4 in device to home assistant yet it only exists in ESP home click done to exit the editing mode open the setup page click on devices and services find the 2.4 in device from ESP home click configure and finally click submit to confirm the addition okay after successful addition you can find the entities related to the 2.4 in device return to the overview and add another button card again look now we can find all the entities on the 2.4 in device here I want to control the LED here so I'll keep it as it is is then fill in the name both the name and icon can be customized so choose whatever you like you don't need to configure the rest click save in the lower right corner to save the newly added card next click done to exit the editing mode and try to use this card to control the LED status it seems to be working smoothly without any issues then let's add a card to display temperature and humidity enter the editing mode click add card find horizontal stack and open it here locate history graph and add it next we only need to complete the information in this card first add the humidity entity to this card then change the title to humidity and adjust the display interval after that modify the maximum and minimum values of the y- AIS since it's humidity I'll set it from 0 to 100 of course you can add multiple entities to a card let's also include the temperature entity besides modifying the card display by selecting options you can click show visual Editor to edit the code once configured click save to save the new card now we can see the newly added graph card in the overview but it seems like the interval I set is too large so we need to reduce it a bit enter the editing mode again click edit under the card you want to modify and adjust the interval here like 0.5 it might show an error but it won't prevent us from saving so it's fine click save and now we can see the updated data in the graph isn't it great besides using a computer you can also use your phone to access this page to control the LED and query temperature and humid information well that's it for this lesson if you find this video helpful please remember to like And subscribe it will be my motivation to keep updating thank you for watching and see you next time [Music]

Channel: Elecrow

Views: 327

Keywords: esp32 tft display, esp32 tft touch screen, lvgl, crowpanel, Home Assistant, CrowPanel HMI Screen, spi, tft display esp32

Id: wybe9rogoWc

Length: 21min 47sec (1307 seconds)

Published: Mon Jul 15 2024