Smart Home Controller using DWIN HMI LCD Display & ESP32 (Display BME280 Reading & Control Relays)

hi everyone welcome to how to electronics this is the fourth video on the win HMI LCD display from the wind technology in the first video I explained about the Divine LCD display and its tool along with the method to load the default VMware in the LCD display memory in the second video I explained how we can create beautiful UI using the Digos software in the third video I explained how you can interface deep in LCD display with Arduino and established u-word communication to control relays LED or any appliances with touch capability this is the fourth video about the dwind LCD display series currently given SMI displays are very popular in the Mecca's Market using the Tigers software we can design any UI and control the UI content with a microcontroller in this guide we will learn how to use divin HMI LCD display with esp32 Wi-Fi module for this demo we will make a smart home controller using bme280 environmental sensor and a four Channel relay the bme280 will measure the temperature humidity pressure and dew point and display the data on the win screen similarly we will also control our four Channel relay module using the widgets on the win screen for demonstration I used four multi-colored LEDs you can replace it with relay module the UI designing part and the coding is explained in detail so watch this video till the very end to learn more for now without wasting any further time let's get started [Music] [Music] let's see the components required for this project we need an esp32 board then bme280 Center for channel relay for the demo I am replacing 4 channel relay width for LEDs and for 220 ohm resistors then a breadboard for jumper wires a micro USB cable and finally we need a 7 inch Divine LCD display which has a resolution of 800 cross 480 pixels the model is dmg80480c070 the complete details about this display is explained in video number one the link for the earlier video is given in the description we will do the hardware connection later on for now let's see how we can design the UI for this project first create a folder and name anything like the win project enter this folder create two folders with names 32 and 42. the 32 folder has three images that we will be using to create the UI the first image is for home the second image is for sensor value display and third for home appliances control the size of these images are 800 cross 480. you can use Photoshop to make this image and Pen software to convert the image into dot PMP format image should be named 0 0 1 and 0 2. the naming is important in the other folder called 42 there are two images for Icon display the size of these images is 120 Cross 63 rename these images as 0 0 and 0 1. now open the Digos software folder run the executable file degos stands for the win graphic utilize software which is a cost effective GUI software platform developed by doing technology we will create the UI for our project using this software click on new project select screen resolution is 800 cross 480. select the location for your project I will save the project to the desktop folder that I created a few minutes ago then click ok so now if you go to the folder you will find a few files and folders created automatically on this Digos software click on the plus sign then add all the images from 32 folder so you can see all the three images are imported now go to the settings and click on Digos a new window will open from this window select ICL tool we need to convert the images into ICL files now from the select picture option select all three images then click on generate ICL save the file with the name 32 dot ICL remember this naming is important now if you go to the Divine set folder you will find 32 dot ICL file saved here now again go back to the ICL tool then select pictures this time select the icon files that you have saved in the folder called 42. again generate ICL file now and save it with the name 42. ICL now if you go to the different set folder you will see 42 dot ICL file here now we need to generate a font file as well for that go to the welcome screen and click on word font generator from here select the font type and the font size for this project I am choosing a font size of 24. Click ok adjust the horizontal and vertical shift and scaling so that the later will fit inside the area now click on create it will take a couple of minutes and the font file will be generated successfully the font file is by default set to diggers folder you need to move it to the divin set folder now go to the Tigers screen and from this option click on generate save it here in the demon set folder you will find more files created such as the thoughts file so file and config file now let's start creating the torch function from the touch control section click on basic toss module then draw an area on the screen for the toss function on the right side from the pit switching option choose the 01.pmp image and click ok do the same thing for other Dodge areas from the page switching option choose 0 to dot PMP file and click ok then save it so the UI for first page is done now now let's create the UI for second page for this select 01.pmp file on this page we have to display the BME 280 sensor value for temperature humidity pressure and dew point for that from the text so option select data variable display then create a rectangular area where you want to display the values you can adjust the size on the right side select the vvh 6100 choose any color code the font size is 24. alignment left take the automatic character space adjustments option also tick mark the display in valid check option variable type is integer to White integer digits is 2 decimal digits as 0 initial value is 0 0. now copy and paste this data variable box all the remaining three badges you don't need to change anything the only change you need to do is to define the VB address is 6200 for humidity 6300 for pressure and 6400 for dew point now we need to assign back buttons to it for bed switching for that go to the basic toss module and draw a box on the home sign from the right side select the pet switching option as home page which is the image00.bmp now save this file let's preview the UI we have created now from the display option preview from the first page so the weather page is working fine and the touch function is working as well so the UI for second page is created now it's time to create UI for the third and final page now on this page we have to assign on off icons for controlling the four different home appliances like light financing and television from the touch control option select the basic toss module and then assign the home page for the home button select the 0 0.pmp image this will work as a back button for the home page now go to the icon display option and select variable icon display create a rectangular area on this available Place select VP addresses 6500 icon file is photo.icl the minimum value is 0 and the maximum value is 1 from the minimum value select icon ID is of image from the maximum value select icon IDs on image select display mode is transparent filter set and initial value both is 0. so the icon has appeared on the screen now now go to touch control and select increment adjustment then draw the area on the icon file this will enable the Dos functionality from the right side select data auto operating no button effect VP addresses the same address as 6500 from here choose low white adjustment method is plus plus over limit operations its cycle adjusting step length is 1 and upper limit is 1. for dos effect select disposal setting save the file now copy and paste this icon on all four areas every setting Remains the Same except the VB address location change the VB address to 6600 for fan 6700 for AC and 6800 for the television now save this file go to display option to preview the UI now so here you can see the first and second Pages working the third page on off switch is working as well so the UI grading part is done now now under the project folder go to the Divine set folder we need to upload all these files to the divin display now if you don't know how to upload the project to this Tosh display then follow my previous getting started tutorial in there I have explained two process to upload the project to your display using an SD card and the T5 well download tool after being done with the GUI design you have to connect the BME 280 sensor and relay module to the esp32 port here is the connection diagram for the project for the demo I am using four different colors of LED instead of relay module for serial communication between Divine LCD display and esp32 board I am using ur2 pins of esp32 therefore connect the tx2 and rx2 pin of esp32 to dwind display rx2 and the X2 pin respectively if you are providing power from two different power sources to esp32 and LCD separately then you need to connect the gnd of the display to the gnd pin of esp32 now let us see the code part for receiving sensor data and displaying of LCD screen along with controlling relays from the screen in this project we need to send and receive data for sending purposes I am sending a frame with a VP address of that sensor and value and that value is updated on display this is the syntax of the frame which I am sending to the HMI display to display the sensor data similarly for receiving I am checking the serial receive frame for a particular button with that VP address using a switch case we have here four switch cases for the light fan AC and TV every button has a particular VP address which sends the signal to esp32 to activate deactivate the relay module upload this code to esp32 board after this successful upload of the program we can start testing the UI now this Stephen LCD will show the home screen UI go to the second place by tossing the UI area the second page will display the bme280 temperature humidity pressure and dew point now go to the third phase of the display the third page will show the UI and buttons to control the different relays you can click on individual switch button to turn on and off the home appliances you can use this same concept to create UI for anything you want all right that is all from the video part today the complete project details including device information purchase link source code and return guide can be followed in the hot electronics website article in case you have any other questions you can comment in the comment section below thank you so much for watching see you in the next video

Channel: How To Electronics

Views: 45,442

Keywords: dwin lcd display, dwin lcd animation, dwin hmi, dwin lcd, dwin screen, DWIN LCD ESP32, DWIN ESP32, dwin technology, dwin dgus, dwin dgus tutorial, DWIN LCD BME280, DWIN LCD Relay, DWIN Smart Home

Id: pdWbEtD2KHc

Length: 15min 0sec (900 seconds)

Published: Sun Jan 29 2023