Nextion Display Interface With ESP 32 Four Relay Board

In this instructables we are going to interface the 5” nextion display to Esp 32 four relay board.The board is controllled by MQTT protocol. Board also has two way controlling features. It can be controlled both by mqtt and touch screen.Touch screen is connected to Esp 32 via uart.

Nextion Display setup :

Nextion Editor is a development software used for visual building of graphic interface for embedded GUI-intensive devices with various types of TFT displays and Touch Panels. Using this tool, users can start creating TFT based devices in a faster and easier way.

Nextion Editor can be downloaded from this link

https://nextion.itead.cc/resources/download/nextion-editor/

After downloading install the nextion editor .

Step 1: Nextion Editor

Open the nextion editor below shows the nextion window, its has sub windows .Toolbox in this window there will be set of features like to show text , add button or to create dial etc.we can drag and drop these objects to the main window. Bottom left corner is the picture and font window where the user can add the images using ‘+’ symbol and can delete images using ‘-’ symbol. Top right corner there is page window where user can add or delete pages.Bottom right corner the attribute window is there ,here the user can modify the objects parameters.Bottom there are two windows one is Output window and Event window.In Output window it will display the compiler error. User will select the objects and write the code in the event window to make things happen.

We need to create the new file , once we save the new file the image2 window appears , it will ask to choose the model ,model is nothing but the nextion display model you will get it on the backside of the nextion after that click ok to proceed.

After creating new file the page is created as shown in image image3 ,user can create many number of pages depend on his application.But in current application we are limiting to only one page.

Step 2: Adding Images and Font

In image4 you can see how to create font. Go to tools and click on the Font Generator the font creator window will appear,in this select the height and font type and give the font name and click on the generator font.After generating the font the nextion will ask whether to add the font or not.

In image5 you can see how to add the font, its highlighted in the snapshot . Using + and – symbol user can add or delete font.

In image6 you can see how to add images or delete the images by selecting selecting “+” or “-” respectively.

Step 3: Creating Button

Image7shows how to add the objects to main window from the toolbox. For instance click on the object dual state button ,it will appear on the main window as shown in the image7 dual state button object bt0. User can move the button in x and y direction.we will show how to create a switch button with dual state.

In image8 we can see the button image has been changed according to user. We need to click on the button bt0, in attribute window the button parameters will appear. In that user need to change the sta parameter to image and in pic0 and pic1 tab user need to assign the images he wish to apply.

In image9 shows the final arrangement of all the buttons including naming.Here we have added bt0, bt1, bt2 and bt3 for button0, button1, button2 and button3 respectively.

Step 4: Event Code for Switch Button

Image10 shows the preinitialization of baud rate = 115200 in the event window, its part of code.User can initialize in this part pertaining to display.

In image11 shows the code part of button bt0, here we are printing serial depending on the variable state of button, i.e for bt0 variable is 0 then we are send serial “R10” and for bt0 variable is 1 then we are sending “R11” to the esp. Once Esp receives R10 it turns off 1st relay and when it receives R11 1st relay turns on. Similarly we need to code for all the button for example bt1,bt2 and bt3.

Step 5: Debug GUI

Once everything is codded we need to compile,if there is no error we can debug the created GUI is working as per our requirements before uploading to the nextion display. Image12 shows the window of debugger , here user can current simulator from drop down button and check whether its working as per user.

Once the device is working as per user then next step is to upload the code to the nextion display.

Image13 shows the window upload to nextion device, here you need to select com port and baud-rate.After that need to click on go button to upload to the code , it may take some time to upload.

Step 6: Working of Device

Image14 shows the connection diagram of ESP 32 wifi four relay board with the nextion display.From the ESP 32 board J1 and J2 connect 5v and Ground(G) to the nextion display as show below.Connect Tx of nextion to the Rx0 of the ESP32 board and Rx of nextion to the Tx0 of the ESP32 board .This will establish Uart communication.

Working:
Once everything is connected power the device configure the device with ssid and password and mqtt broker with publish and subscript topic name.After submitting the credentials device will reboot and connect to mqtt.Already device is configured to openhab (for openhab please check our openhab instructables) as shown in image15.

The device can be controlled by http , mqtt as well through the GUI touch screen.We can get the current status of all the relay channels whether channels are on or off on both mqtt and touch screen display.