So far, we have posts covering basic introduction to Nextion Display, Nextion Editor, Nextion Library, intelligent fish tank project. I am sure you have a comprehensive understanding to Nextion and may have created your own project. Or if you still have 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 as detailed as possible and an example will be add to assist you.
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 property one by one.
| Property Name | Explanation |
|---|---|
| objname | Component name, double click it to rename |
| vscope | local:current page |
| global:a variable can be applied to 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 |
| 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, 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 drag the component side line to change the width, it gets changed accordingly |
| h | Component height, when drag the component side line to change the height, it gets changed accordingly |
Now I change the "txt" property as below:
4.This is the result hopefully look like.
Button Component
Compare 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 you’ll 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:
| Property Name | Explanation |
|---|---|
| objname | Component name, double click it to rename |
| vscope | local:current page |
| global:a variable can be applied to 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, image must be full screen image |
| 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 drag the component side line to change the width, it gets changed accordingly |
| h | Component height, when drag the component side line to change the height, it gets changed accordingly |
Now set the button property as below:
Here’s the result:
Effect Demonstration
At last download the hmi file to nextion with a foca or download the tft file by a sd card.
Link Arduino Mega2560 with Nextion Display, and use USB to connect Mega2560 with your 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? Practice makes perfect. Just start your project, be your own interface designer.