Nextion Display– LED On Off with Dual State Button & Image

Nextion HMI Touch Displays are very popular in Industrial panel control boards.

This post is on usage of DUAL STATE BUTTON tool of the new NEXTION EDITOR to make an LED ON or OFF with switch images.

I’m using the model  NX 4024T032 display

which means  Resolution of 400 x 240 pixels & display size 3.2 inch

 

 

Nextion Editor is used to create .tft file from .hmi file.

Download the latest version from :

https://nextion.tech/nextion-editor/

NO LIBRARY is used in this project.

Open the Nextion Editor.

Always create a new folder for your project and save all files in that folder.

From Tools click on Fonts generator to generate font file for your project.

 

Select the size of font and the type of font.

Provide a name and store this file.

The Nextion editor will store it as .zi file and add it to your project.

At the bottom left corner you can see the Fonts tab under which your font file is added.

Now click on the Picture tab to import some pictures for your project.

Remember to resize the background image to match the resolution of your Nextion display model.

Here mine is 400 x 240 pixels. I use IRFAN VIEW software to resize the image pixels to 400 x 240.

Other application like  INKSCAPE  is also powerful image tool like photoshop.

You can even use the Windows PAINT to edit.

Here are the images used in this project.

 

                     

Click on the Picture tab and then the + symbol to import these pictures in to the Picture tab.

 

From tool box double click on Picture tool.

A picture element appears on canvas with default name p0.

If you want you can rename the object name.

 

At the right side attribute section there is an attribute called pic

Double click against the empty space near pic.

The images you imported appears .Select the back ground image and click ok.

 

The background image appears on canvas if the resolution matches with that of your Nextion display model.

Now from tool box double click on DOUBLE STSTE BUTTON.

An object with name bt0 appears on canvas.

 

 

The main attribute of bt0 to change is the

sta attribute.   (status attribute)

Change the sta attribute from solid to image.

Now you will get 2 more attributes pic0 & pic1

 

Click against empty space of pic0 and select the OFF SWITCH image.

Click against empty space of pic0 and select ON SWITCH image.

Change the txt attribute to empty space.

Now click on the DEBUG button on top.

The SIMULATOR opens.

Without a physical NEXTION Display in hand , you can develop your project with NEXTION EDITOR.

 

On Simulator you can test the ON / OFF condition which changes the image accordingly.

 

Close the Simulator.

Click on bt0 dual state switch object.

Below the canvas you can see 2 Events.

Click on the TOUCH RELEASE EVENT.

Type in the following code :

print bt0.val

When the bt0 button is touched and on release this code is executed.

The value of bt0 button will be printed or sent out to serial as 4 bytes of HEX data..

 

Click on DEBUG to test the code.

On  simulator , if you touch and release the button once , the switch image changes and accordingly 4 bytes of HEX data sent

01 00 00 00  for ON

00 00 00 00 for OFF

Close the simulator and add a TEXT object on the canvas.

You can change the attributes :

bc0 – back ground color

pc0 – text color

txt – name of text to display.

Now under TOUCH RELEASE EVENT modify the code as :

 

print bt0.val
if(bt0.val==1)
{
t0.txt=”LED ON”
}else if(bt0.val==0)
{
t0.txt=”LED OFF”
}

 

We add an if condition to change the text value according to switch ON or OFF.uiuiui

 

Click on DEBUG to see the result on simulator.

 

Once the testing is fine you can click on COMPILE to generate the .tft file.

Once the compilation is successful you can find the file under bianyi folder or tft output folder.

To upload the .tft file on to Nextion display we use USB-TTL method.

Connect USB-TTL Nextion

Vcc—5v,  Gnd-Gnd , Tx—Rx ,, Rx –TX

 

Plug in the USB-TTL to PC and note the COM port allotted under Device Manager.

Click on UPLOAD button.

Select the COM port and Baud rate as 115200.

Now the file is uploaded and the screen we developed appears on Nextion screen.

Let us connect the Arduino with Nextion

Vcc—5v , Gnd – Gnd , Tx-Rx ,Rx-Tx

Upload the following code.While uploading remove the Tx,Rx wires and then connect back.

 

Once Done uploading you can test the project result.

In built LED on Arduino switched ON or OFF as per touch switch on the display.

 

Download code and images HERE :

 

VIDEO :