Smart Home Controller using DWIN HMI Display & ESP32

Overview
In this guide, we will learn how to use DWIN HMI LCD Display with ESP32 WiFi Module. Currently, DWIN HMI Displays are very popular in the Maker’s market. Using the DGUS Software we can design any UI and control the UI Content with a microcontroller. The 7-inch DMG80480C070 Display has a resolution of 800X480 pixels. We can interface the display with any with 5V compatible microcontroller board like Arduino, ESP8266, ESP32, PIC, 8051, STM32, etc.
For this demo, we will make a Smart Home Controller using DWIN HMI Display & ESP32 Module. The BME280 will read the temperature, humidity, pressure, and dew point and display the data on DWIN Screen. Similarly, we will also control a 4-channel Relay Module using the UI/widgets on DWIN Screen.
Before moving ahead, you can refer to our previous guide on these displays:
Getting started with DWIN HMI TFT LCD Display
Interfacing DWIN HMI TFT LCD Display with Arduino
IoT AC Energy Meter with ESP32 & HMI Display
The Smart Home Controller Project using DWIN HMI Display & ESP32 uses a 7-inch DWIN LCD Display DMG80480C070 and other components. The project comprises the following steps:
Installing required Software & Tools
Designing the GUI of Display
Upload project files to the Display
Interface sensor and relays to the ESP32
Make a UART communication between ESP32 & DWIN HMI Display
Monitor sensor data & Control AC Home appliances from this touch display
Bill of Materials
S.N.
Components
Quantity
Purchase Links
1
ESP32 WiFi Module
1
Amazon
AliExpress
2
DWIN LCD Display Kit
1
dwin-global.com
3
BME280 Sensor
1
Amazon
AliExpress
4
4 Channel Relay Module
1
Amazon
AliExpress
6
Breadboard
1
Amazon
AliExpress
7
Jumper Wires
4
Amazon
AliExpress
8
Micro-USB Cable
1
Amazon
AliExpress
Installing Required Software & Tools
DGUS（DWIN Graphic Utilized Software） is a cost-effective GUI software platform developed by DWIN Technology. Based on the K600+ Kernel hardware platform, GUI design, combined with a simple command interface, can be achieved quickly, eliminating the need for complicated programming and expensive development environments.
Download:
DGUS Software
Download the DGUS Software from the above link and then extract the folder. Open the extracted folder and run the executable file called ‘
DGUS_V7.642.exe
‘. A DGUS Window will open. Initially, you need to change to the English language as the Chinese language is set by default.
You need to download the XR21X141X Driver software for establishing communication with your computer and DGUS Software.
Download:
XR21X141X Driver
After downloading install the software into your computer system.
Creating Images & Icons for GUI on DGUS Software
The DMG80480C070 screen resolution is 800×480. So we need to create images and icons under the same resolution. For the Smart Home project part, the 3 images that I created are:
All the images should be in .bmp format. The images should be named 00.bmp, 01.bmp, and 02.bmp as the naming is important. You can use Photoshop to create images and save the file in .bmp format.
Similarly I have created two icons for this project. The icons are used as ON/OFF buttons. As per the UI requirements, the icon size is 160×80. The icon can be in jpg or png format and should be named as 01, 02 and so on.
Creating UI using DGUS Software
Create a Folder on the Desktop and give it any name like “DWIN Smart Home”. This folder will have all the files required and created while designing the UI.
Open the DGUS Software and Create a New Project. Select the resolution of 800×480 and the location of the project under the folder you created on your Desktop. Then hit ok
The project window will appear now. On the left side, click on the ‘+’ sign and import all the 3 images for UI that are in .bmp format.
All the images are imported now. Now we need to create UI using the particular area on this screen.
Before that we need to generate .icl files for images and icons. To do that go to Settings and Click on DGUS. A window will pop up. On this window click on ICL Tool.
From this window click on Select Pictures. Then select all the 3 images.
Click on Generate ICL option. You will be asked to save the file. Save the file with the name 32.icl. Hence the ICL file for UI is successfully created.
Similarly we need to generate the ICL files for icons. Import 2 icon files the same way you did above and click on Generate ICL. Save the file with the name 42.icl. Hence ICL files for Icons is also created now.
Designing Home Page UI
We need to create a Touch button for the Display now. For that select, the “00.bmp” image then click on the “Touch Control” Menu. Click on the basic touch module then select the widget area where you want to apply this module. You can drag, drop and resize the module as your requirement.
Now on the left side select the images for page switching. For the first touch select “0.01.bmp” and for 2nd touch select “0.01.bmp”. So the first-page setup is done.
Designing 1st Page UI
Now Switch to the “01.bmp” image and from the ‘Text Show’ option, select ‘Data Variable Display’.
Place the box in front of the unit for all 4 parameters (temperature, humidity, pressure, dew point). The box will show the numeric value from the Sensor.
On the right side, there are options and boxes that should be filled with the following options.
VP(0x)
: 6100 for Temperature, 6200 for Humidity, 6300 for Pressure, and 6400 for Dew Point.
Font Size
: 24
Alignment
: Left
Automatic Character Spacing Adjustment
(Ticked)
Display Invalid Zero
(Ticked)
Variable Type
: int(2 bytes)
Integer Digits
: 2
Decimal Digit
: 0
Variable Unit Length
: 0
Show Unit
: Blank
Initial Value
: 0
Make sure you are making changes to all 4 parameters. Every setting remains the same except the VP Address.
Go to Basic Touch Module and assign a Page switch option, so that you can go back to the home page. For that drag and adjust the basic touch module on the home symbol as shown in the above image and select the page switching option to the home page.
Designing 2nd Page UI
Now let’s design our toggle switch buttons for controlling Appliances like lights, AC, Fan, TV, etc. Switch to the “02.bmp” image and from the ‘ICON Display’ option, select ‘Variable Icon Display’.
Go to ICON Display Menu and choose Var ICON Display. Select the area where you want to display your icon. As always resize the module as your needs. Now choose your VP address as 6500.
Choose the icon ICL file as 42.icl. When the Value is Minimum select the OFF icon i.e zero icon. Similarly, set the maximum value as 1 and select the ON icon i.e one icon. Keep the display mode as transparency.
Now from the touch control menu select the increment adjustment module. You can resize the module. Then select data auto uploading. Click on the no-button effect. Give the same VP address as 6500. Click on Low Byte. Select the Adjust method as ++ and over limit operation as a cycle. Similarly, adjust step length to 1 and upper limit to 1. Finally, set the touch effect as a disposable setting.
Now, copy the Var Icon module and paste them onto the Fan, AC, and TV controller buttons. But, change the VP address as; 6600 for Light, 6700 for Fan, 6800 for TV respectively. Also, copy and paste the incremental adjustment module and set their VP address accordingly.
Finally, we have completed adding modules to our UI. Now Click on Save and Generate, to generate 13 touch file, 14 show file, and 22 config bin files.
Generating Font File
Go to the welcome page and click on word bank generating. Here choose your font and adjust your settings with font size as 24 and select any font you want to display. Then click on create to create your font file.
The font file will be created on the DGUS software folder by the name “0_DWIN_ASC.HZK” copy it and paste it into the DWIN_SET folder.
Uploading TFT Files to DWIN HMI LCD Display
Once the UI is created and saved, you can upload the firmware