NEXTION HMI Display With Arduino–Getting Started

 

    

 

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

NX -NEXTION
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.

1.NEXTION EDITOR

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

2. NEXTION ITEAD LIBRARY

https://github.com/itead/ITEADLIB_Arduino_Nextion

3.INKSCAPE IMAGE EDITOT

https://inkscape.org/en/release/

4. NOTEPAD ++ EDITOR

https://notepad-plus-plus.org/download/v7.6.2.html

 

 

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.

Open the Nextion folder & locate NexConfig file.

Right click and select Edit with Notepad++

 

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.

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

https://pixabay.com/en/photos/

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

Open INKSCAPE

Go to File –> Document Properties

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

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.

 

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,

Click View –>  Zoom –> Selection

to Zoom the  picture.

 

 

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

 

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.

 

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

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

orientation.

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

Now we have to generate a FONT file.

Go to TOOLS  –>  FONT  GENERATOR

Select Height of Font & type of Font.

Provide a name for the file.

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.

 

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

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.

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 .

Select the picture seen on new window & click ok.

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.

]

 

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

 

 

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.

 

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

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

 

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

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

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

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

 

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 :

https://www.itead.cc/wiki/Nextion_Instruction_Set

 

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.

 

 

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.

 

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

 

 

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.

 

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[] = {
&b0,
&b1,
NULL
};

//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”);
digitalWrite(led,HIGH);
}

//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”);
digitalWrite(led,LOW);
}
void setup(void) {
Serial.begin(9600);
nexInit();
//Register the pop event callback function of the components

b0.attachPop(b0PopCallback,&b0);
b1.attachPop(b1PopCallback,&b1);

pinMode(led,OUTPUT);
digitalWrite(led,LOW);

}

void loop() {
nexLoop(nex_listen_list);

}

---

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
b0.attachPop(b0PopCallback,&b0);
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 :

http://www.alselectro.com/files/Arduino_Code_HMI_TFT_Files.zip

http://www.alselectro.com/nextion-3.2–hmi-tft-lcd-nx4024t032.html

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

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.