NEX31     NEX21


VIDEO Support  :



Nextion is a  Human Machine Interface (HMI) programmable Touch Display.

Nextion includes a hardware part (a series of TFT boards) and a software part , NEXTION EDITOR.

The Nextion TFT board uses only one serial port to communicate. It lets users avoid the hassle of wiring. On board a 32 bit ARM processor is used STM32F030.

Nextion editor has mass components such as button, text, progress bar, slider, instrument panel etc. to enrich the interface design. Furthermore, the drag-and-drop function ensures that users spend less time in programming. With the help of this WYSIWYG editor, designing a GUI is a piece of cake.

BASIC & ENHANCED Models are available.

Basic models :

NX3224T028            NX4024T032      NX4832T035

Notes: NEXTION product numbering rules , eg. NX4024T032

40 -Horizontal resolution: 40=400
24 -Vertical resolution: 24=240

T  -Series model: T=Basic Model     K=Enhanced Model
032 -Display size:”032″ means 3.2 inch
R   -Touch screen type:N=non touch; R=resistive touch; C=capacitive touch

All basic models  are resistive touch screen display, 4M Flash, 3.5KByte RAM, 65k colors., except 3.5 inch model which has 16M Flash.

Before starting the project ,let us collect the essentials.






Image 6


Inkscape editor is required , if you need an image in your project. Using INKSCAPPE we can convert the image resolution to match that of Nextion display.

First , download theITEAD LIBRARY file  & unzip it. Copy the folder & paste it to C:/Program files/Arduino/Libraries

Rename the folder to Nextion.

Image 7

Open the Nextion folder & locate NexConfig file.

Right click and select Edit with Notepad++


Image 8

As the library is designed for ARDUINO MEGA , we need to do the following modifications in Configuration file , so that ARDUINO UNO can be used.

Image 9

Comment lines 27 & 32.

Change Serial2 to Serial at line 37.

Save the file,

Next , we download an image background for the project and use INKSCAPE to convert image to match our Nextion display which is 400 x 240 resolution.

You can download wanted imaged from

Huge collection of Both free and paid images are available for download.


Go to File –> Document Properties

Set the UNITS to PX (Pixel) ,Width as 400 & Height as 240 ( which matches our NEXTION Display Resolution),

Image 23

Close the Document properties. A new Canvas of size 400 x 240 is created .

Now click File –> Import and browse to the location of the downloaded image file & select it.


Image 24

The image is loaded on to Inkscape.You can see drag Handles on all sides of the image.

Use the handles to pull so that the image size fits inside the Canvas created,

Image 25

Click View –>  Zoom –> Selection

to Zoom the  picture.


Image 26


Now drag the handles so that the image fits exactly inside the 400 x 240 Canvas


Image 27

Click on File –> Save as and select the CAIRO PNG type to save the image.


Next proceed with the NEXTION EDITOR Installation.

Open NEXTION Editor.


Image 10

Click on File –> NEW & within a folder create  a new file , say ledonoff.

This will be stored as .HMI File.

On the next window select the model of NEXTION Display you have.

In my case it is 400 X 240 2.3 Inch.

Select the model & then click on DISPLAY

Image 11

Here select the orientation of display as 90 – HORIZONTAL

You can also select vertical if you have created vertical  image and  like to have vertical


Image 12

A canvas of size width 400 x  height 240 is created inside Display area of Nextion Editor.

Image 13

Now we have to generate a FONT file.


Select Height of Font & type of Font.

Provide a name for the file.

Image 14

Click Generate Font to see a .ZI font file created.Save that in the project foldet.

Finally click the “Add the Generated Font” message.

You can see the font file added to the FONTS Area.


Image 15

Next click on PICTURE tab . Then click the + symbol.

Image 16

Browse to the location of the image file ( 400 x 240) we created earlier using inkscape.

Select the image file , so that it is loaded inside the PICTURES area.

Image 17

Click on PICTURE under TOOLS area.

Then at the right side ATTRIBUTE Area you can see the id of the image as 1, object name as p0

Below that against pic , empty space iseen

Double click on the empty space against pic to see on a new window the picture selected .

Image 18

Select the picture seen on new window & click ok.

Image 19

Now the image fits inside the canvas created.

You can click on DEBUG to see if any error is generated.If any error seen then you have to create again the image exactly of size 400 x 240 using inkscape.

Image 20]


Next add 2 Buttons & a Text over the image by clicking on the elements under Tools area.


Image 22


Click on the first button and go to Attributes area.

Here you can see the id of the component as 2, object name objname as  bo.

Write down these attributes , which will be used in coding.

Scroll down to txt and change the name to LED ON.

You can also change the name of objname , but we leave it as b0 as generated.


Image 28

Same way click on second button and note the attributes  id 3 , objname  b1

Scroll down and select txt , change name to LED OFF.


Image 30

For the third element , just change the txt to STATUS.

You can drag the text element to make the text area bigger.

Image 31

Now click on first button LED ON.

In the EVENT Area click the TOUCH RELEASE EVENT & then put a tick mark

against Send Component ID

Image 32

Do this for the second button LED OFF , also.

Click the DEBUG button to start the simulator.

Now you can see the display created with buttons and Status text bar.

Click on the LED ON button.While you release the click, a HEX code is generated

inside the simulator return area.

65 00 02 00 FF FF FF

65 is the Touch Detection code

00 is page ID which is page 0 for our project.

02 Component ID which is 2  (LED ON button)

00 Button Release event

FF FF FF  End of Message

Image 34


Similarly click on LED OFF button.

While  released you see the following code

65 00 03 00 FF FF FF

Here you can see the 3rd hex code as 03 which is component id of LED OFF button.

This hex code is available at the serial port of display when the event occurs.

So we can easily read this code and decide on which button is operated.



Check out the full instruction  set wiki here :


Click on COMPILE button to generate the .TFT file.

This is the file to be uploaded on to the Nextion display.

To see the file generated go to File –> Open Build Folder

which opens a folder named BIANYI inside which you find the generated file.

Copy this file and paste inside your project folder.


Image 35


The .TFT file can be uploaded on to NEXTION display by 2 methods .

One is the USB – TTL method where we connect USB-TTL device to serial port of display.

5v to 5v , GND to Gnd , Tx to Rx , Rx to Tx

Connect the usb-ttl to PC and note the serial COM port allotted.

Click on UPLOAD button on the NEXTION Editor.

On the upload window select the COM port & set the Baud Rate to maximum , 115200.

As this method is slower , it is better to set high baud rate,

Click GO.

Image 39


Now you can see the file uploading info on screen and finally you can see your design on Nextion display.

Image 38


Image 40


The second method is SD card method.

Use a card reader to hold SD card and plug it to PC.

Select the SD card drive , right click to FORMAT.

Ensure that the SD card drive is selected, set the format to FAT 32,and click ok.

Once formatted , copy the .TFT file we compiled earlier,from BIANYI Folder to this SD card drive.

No other file should be in card.

Remove SD card and plug it on to Nextion Display.

Provide power to display.You can use the USB-TTL and connect only the 6v and GND.

The file gets loaded faster compared to other method.

Once completed , remove power and connect back power.

You can see the result on screen.


Now , let us connect Arduino with NEXTION display.

First connect 5v of Arduino to 5v of display.Then GND to GND.

The display goes on showing the designed screen.


Image 36

Upload the following code .

As we do not use Software serial in code , we have to upload code first and then connect

Tx of Arduino to Rx of Display, Rx of Arduino to Tx of Display.




#include <Nextion.h>

const int led = 13;

//Declare your Nextion objects , pageid, component id., component name

NexButton b0 = NexButton(0,2,”b0″);
NexButton b1 = NexButton(0,3,”b1″);
NexText t0 = NexText(0,4,”t0″);

//Register a button object to the touch event list

NexTouch *nex_listen_list[] = {

//Button b0 component popcallback function
// When ON button is Released the LED turns ON and the state text changes

void b0PopCallback(void *ptr){
t0.setText (“State:ON”);

//Button b1 component popcallback function
// When OFF button is released the LED turns OFF and the state text changes

void b1PopCallback(void *ptr){
t0.setText (“State:OFF”);
void setup(void) {
//Register the pop event callback function of the components




void loop() {


CODE walk through :

First we include the header file

#include <Nextion.h>
Then each component used is declared using NexButton function
We have 3 components bo,b1 & t0

bo component is defined as

NexButton b0 = NexButton(0,2,”b0″);

0 is the pageid , 2 is the component id & bo is the object name
Similarly other 2 components b1 & t0 are defined

Next we create a list array using NexTouch function for the Touchable components.
We have only 2 touchable components b0 & b1
The array list is created b0,b1 & NULL isadded finally.

Button b0 component popcallback function
When ON button is Released the LED turns ON and the state text changes

void b0PopCallback(void *ptr)

same way button b1 component popcallback function is declared.

Inside SET UP we attach the function created to corresponding Events.
When you click bo button boPopCallback function is called.
This is done by
Same way for b1 button.
Inside loop we repeatedly watch for the event trigger list.

The code and project files can be downloaded from here :–hmi-tft-lcd-nx4024t032.html

Connect an LED at pin 13 of Arduino through a resistor to GND.

Image 37

When you touch and release LED ON button , the LED is ON

When you touch and release LED OFF button , the LED goes OFF.

The STATUS is updated accordingly.