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.
Vertical alignment did not work in text component. I can load picture to proof it.
Hi, Alex, i have tested vertical alignment, it works okay, you can see details here: https://imgur.com/iA2Njcx
Why doesn’t getText work?
memset(buffer, 0, sizeof(buffer));
t0.getText(buffer, sizeof(buffer));
Returns nothing, the buffer is empty.
How do I fix this?