Loading...

You have no items in your shopping cart.

 
 
 
×

Registration

Profile Informations

Login Datas

or login

First name is required!
Last name is required!
First name is not valid!
Last name is not valid!
This is not an email address!
Email address is required!
This email is already registered!
Password is required!
Enter a valid password!
Please enter 6 or more characters!
Please enter 16 or less characters!
Passwords are not same!
Terms and Conditions are required!
Email or Password is wrong!
Captcha is required!
Captcha is wrong!

Nextion User Guide1:An Entry Application of Text Component and Button Component

So far, we have posts covering basic introduction to Nextion Display, Nextion Editor, Nextion Library, intelligent fish tank project. I am sure users have a comprehensive understanding to Nextion and may have created their own project. Or if they are still stuck in the use of the components, this and later posts are just the thing to clear up your troubles. In this post, I will introduce two components particularly- Text Component and Button Component. I will explain each component property in detailed manner as possible and an example will be added to assist the users.

Text Component

Text component is for inputting characters. Add a text component and select it. An attribute table will appear in the bottom right corner. Click each component property, its meaning will be shown under the table.

In this table, there are two lists, the left list are fixed property names, the right list can be edited or selected. There are three kinds of cells. 

The green font cells can be controlled by MCU;And the cells with green bold font are vital properties,when change them,the system will refresh automatically whithout ref command, but for those cells that are not in bold font,when you change them, you must use ref 0 command to refresh to view the effect; While the black font cells once being set in Editor, they can not be changed by MCU any more. 

Ok, let’s show you an example. Please download the CompText example from here:
https://github.com/itead/ITEADLIB_Arduino_Nextion/tree/master/examples

1.Open your Nextion Editor, and click New to create a new HMI file. Click Add in Picture Bar to add a picture. Click the display window, click solid color in the right Page table, dropdown to select Image, then double click pic to choose the picture as background.

2.Click the Display window and then click Add Component on the top, dropdown to choose Text, there you are, you’ll get a text component on the display window. Select and drag it to any place, by clicking it, you’ll see the attribute table in the bottom right corner.

3.Let me introduce the component properties one by one.

Property Name Explanation
objname Component name, double click it to rename
vscope local:current page
global: a variable which can be applied to some other component in any pages
sta crop image: crop background image to achieve transparent effect
solid color: solid color background
image: component background is image
picc Background crop image, image must be full screen
bco When sta is solid color, this is available
pic Background image, when sta is image, this is available
pco Choose font color
font Generate your fonts in Tools beforehand, and choose the relative font ID Number
xcen Horizontal alignment: 0-Left,1-Center, 2-Right
ycen Vertical alignment: 0-Up,1-Center, 2-Down
txt Double click newtxt and input your desired words
to show on the component
txt-maxl Maximum allowed string length(30 by default,255 maximum)
x Coordinate X
y Coordinate Y
w Component width, when dragging the component side line to change the width, it gets changed accordingly
h Component height, when dragging the component side line to change the height, it gets changed accordingly

Now I change the "txt" property as below:

4.This is how the result will hopefully look like.

Button Component

Compared to text component, Button has a press event attribute. Once press the button, it activates an event.

Add a button component and click it, then users will see the button attribute table in the bottom right corner.

Now continue to add two button components b0 and b1 to the above HMI file. Click the component to show the table. Button component attribute table is given below:

Property Name Explanation
objname Component name, double click it to rename
vscope local:current page
global: A variable which can be applied to some other component in any page
sta crop image: crop background image to achieve transparent effect
solid color: solid color background
image: component background is image
picc Background crop image, image must be full screen
picc2

Press the button, it changes to this crop image background, which note that the image must be full screen image in size

bco When sta is solid color, this is available
bco2 Press the button, it changes to this background color
pco Choose default font color
pco2 Press the button to activate the event. It changes to this font color
pic Background image, when sta is image, this is available
pic2 Press the button, it changes to this background image
font Generate your fonts in Tools beforehand, choose the relative font ID No.
xcen Horizontal alignment: 0-Left,1-Center, 2-Right
ycen Vertical alignment: 0-Up,1-Center, 2-Down
txt Double click newtxt and input your desired words to show on the component
txt-maxl Maximum allowed string length(30 by default,255 maximum)
x Coordinate X
y Coordinate Y
w Component width, when dragging the component side line to change the width, it gets changed accordingly
h Component height, when dragging the component side line to change the height, it gets changed accordingly

Now set the button property as below:

Here is the result:

Effect Demonstration

At last download the hmi file to nextion with a foca or download the tft file by an SD card.
Link Arduino Mega2560 with Nextion Display, and use USB to connect Mega2560 with the computer.
Download our Library and place it in Arduino library. Then copy the source code to Arduino IDE.
Then upload the sketch to Mega2560. And here it is in action.

An Entry Application of Text Component and Button Component from ITEAD on Vimeo.

So, very simple components, right? Just remember that practice makes one perfect. Just start your project and be your own interface designer.