#1 DWIN HMI Number & Buttons Example With Arduino

Hi, Folks in this article we will learn how we can start a simple Number and Button Project using DWIN HMI and how to interface with Arduino Board. DWIN HMI is a low-cost alternative to the HMIs available in the market today. In this article to design the UI of the HMI screen we have used the Adobe XD The software which you can download from here and for HMI Design we have used DWINs Official DGUS IDE which is a simple drag and drop tool.

Design your desired application UI using photoshop, Adobe XD or any image editing software. Select the proper image resolution size of all images as per the resolution of the screen. Design both front and back UI means whenever we click on any item on screen how the effect should look so it will give us the touch effect. As shown in the image below.

Open DGUS Tool Software create a new Project and select the proper resolution of your display. after that add all your exported background UI Pictures in the software. To go from one page to another you can use Basic Touch Module from Menu Pallet and drag that object above your image button. if you want you can give the effect for the action button when you press that button for that you need to set the background effect image under the options. also once press if you want to switch the UI from one page to another then select page switching under the option and select the page id that you want to switch.

Once this Basic UI switching is done we will add Data Variable from Display Control Pallet in that we need to assign one VP address and size of Integer Number data that we want to show. Here in the Example VP address is given is 1201.

For the Button press event, we are using the Return Key Code from the Touch control Pallet. in this assign the VP address and data value so when we press this object the HEX value of address and data will be sent from HMI display to the controller. Once this is done save the project

Before Uploading the project to HMI Display Test the project on your computer first. Under the display Pallet select Preview from First, This will open virtual Emulator Display and here you can test how your project will look

There are two methods through which you can Upload your Project files to DWIN Display.

UART Upload

If you want to proceed with UART upload then first go to DGUS in Setting Pallet connect your FTDI chip to the PC and detect the COM port of that Module. then select 115200 baud rate and Select DWIN_SET Folder as shown in image and Start Downloading.

SD Card Upload

All you need to do is firstly Format the SD card (Max size 16GB) with 4MB Sector size and FAT32 Mode then Copy all DWIN_SET folder to SD card then power off display first and insert the SD card Power it On again it will start copying files as like image sown above. then once done power it off again and remove the SD card.

For Testing with Arduino Upload the Arduino .ino Code using Official Arduino IDE to the Arduino Uno Board Given in the project This is a simple Arduino Code that Establishes serial communication with HMI using Software Serial Library. and Listen for the Button press event. if the button receives 1 in its data, it will generate a Random number using the Random() inbuilt function and write the Number field in the HMI Display.

Please use the below link for the project code: https://github.com/dwinhmi/1_DWIN_Number-Button-Example

Connect HMI Display to Arduino Board use the below pins

DWIN HMI - Arduino Uno Board

Vcc - 5V

GND - GND

TX2 - GPIO 10

RX2 - GPIO 11

The resulting output you can able to see in the video below. If you need the DWIN HMI Display for your next upcoming project or product feel free to ask for Samples on the below numbers. You will get free sample Displays Only Shipping needs to pay

Tejdwin@gmail.com | +91 9021 392795

phoebe@dwin.com.cn | +86 18620854039