Nextion Text Object(Video 189)

This post will take a deep look at the text command. When this website started, the plan was to make a video on each command and object in the Nextion display. Somewhere along the line, we lost track of the mission. This is the series’s first post that will return to that original mission. I am Dr. S. Beakman, and I will do my best to keep this post both informational and full of arbitrary facts.

If you want to support this website, you can purchase the display by clicking here NEXTION WEBSITE or selecting a link from below.

We will work through the attributes in the order they appear in the IDE. At least in version 1.65.1. The display used in this tutorial is an Intelligent 4.3″, model NX4827P043_011. The Attributes in GREEN can be altered while the program is running.

TYPE

Let’s start at the top with the type attribute. Every object has a unique type. If you add more text boxes to the page, they will all have the same type. This number will come in handy if you get into more advanced coding.

ID

The ID is a number assigned when objects are added to the page. This number is unique to each object and is not changeable. Similar to the type attribute, this value can be useful when cycling through many attributes in a loop. Sometimes you add objects in a specific order to best utilize the ID. For example, if you have ten text boxes with associated buttons, you might want to add all the text boxes and add all the buttons after the text boxes. There may be another scenario where you would add a button, then a text box, then back to a button, and so forth until all ten buttons and text boxes are added.

OBJNAME

The object name is assigned when the object is created. This value can be changed, but it must be unique. If you try to give two objects the same name, you will get a warning, and the IDE won’t allow you to complete the change. You can think of IDs and OBJNAMEs in the terms of Flutterbirds. The object name is Flutterbird the ID would be the names of each Flutterbird ie Tweety.

VSCOPE

The vscope command is one of the most questioned display attributes. I get the question, “How do I get the number field to hold a new value when I change pages.” This is the attribute that takes care of that. When you set this vscope to local, nothing is stored when you change pages, and the value returns to default when you return to the page. If you set vscope to global, the value will be saved when you leave the page and return to the page.

DRAG

You can drag the text box around the screen when the drag attribute is set to true. There are some issues with the drag command that are better illustrated in the video accompanying this post.

  • Nextion : Turn drag off — t0.drag=0
  • Nextion : Turn drag on — t0.drag=1
  • Arduino : Turn drag off– Serial2.print(“t0.drag=0”); Followed by three sets of 0xFF
  • Arduino : Turn drag on– Serial2.print(“t0.drag=1”); Followed by three sets of 0xFF

APH

Some of the attribute names make little sense. The aph attribute is the transparency attribute. The value you assign is between 0 and 127. 127 is fully visible, and 0 is invisible.

  • The value I selected is 75
  • You can set the value to a value 0 to 127
  • Nextion : Set aph — t0.aph=75
  • Arduino : Set aph– Serial2.print(“t0.aph=75”); Followed by three sets of 0xFF

EFFECT

This attribute will create a visual effect or, better stated, an animation is created. The default setting for the effect attribute is “load.” When “load” is selected there are no initial effects. The other selections in the drop-down are self-explanatory. You place the text box where you want, and then on page load, it will start at the top, bottom, right, or left and move to the selected location based on your selection.

Once you select an option other than “load”, you will notice two more attributes appear. You can give each animation priority with the “first” selection. The values are 0-100, and the highest number will execute first. The time attribute determines the speed the text object moves to the location. The values are 150 to 65,535 milliseconds.

HERE ARE THE OPTIONS

  • LOAD : 0
  • Top Fly into : 1
  • Bottom Fly into : 2
  • Left Fly into : 3
  • Right Fly into : 4
  • Top Left fly into : 5
  • Top Right fly into : 6
  • Bottom Left fly into : 7
  • Bottom Right fly into : 8

STA

The sta attribute is better defined as the background attribute. Similar to the effect attribute, their menu will change based on the selection made in the “sta” drop-down. When you select “solid color,” you get the “bco” attribute. This allows you to set a solid background color for the text box. The “transparency” selection does not alter the menu, it changes the background to transparent. If you select “image,” the pic is added. The “crop image” adds the picc attribute. The “image” attempts to fill the text box with the image. The “crop image” fills the entire background of the display but only shows the portion exposed by the text box. This is better illustrated in the accompanying video.

STYLE

The style attribute is for the border. There are four different selection “flat”, “border”, “3D_Down”, and “3D_Up.” Flat is the default setting. 3D up and down add the borders to all four sides, with two sides a little thicker. There is no added attributes for the 3D selections. You are stuck with the default Nextion configuration. The only selection that adds additional attributes is “border.” The image below shows the two addition attributes. You can adjust the border color and the border width.

KEY

If you want a user to change the values in text box you will use the “key” attribute. This one does an excellent job with the description in the drop-down selection. You have four choices. the full qwerty keyboard is used to enter words and numbers. The numeric keypad is smaller but will only enter numbers. The speed-dial keyboard is smaller but allows for letters and numbers. There is also a Chinese input, but it looks similar to the qwerty on my editor. I am unsure if there is a different version for other countries or languages. I once heard a parable about keys. The key to a successful life is being kind to the lyrical Flutterbird.

FONT

This one is required; therefore, I don’t get any questions. You select the font by a number from the font list. You can change this, and it is sometimes helpful to emphasize the text by making it one step larger on press and then returning to normal size on release.

BCO

This is the background color in a text box that has been selected to have a solid color in the “sta” attribute.

PCO

This should be called text color. It is the attribute where you set the color of the text.

XCEN and YCEN

You set the alignment of the text with these two attributes. You can set the horizontal(x) position to left, center, or right. You can set the vertical(y) position to the top, center, and bottom. I use this sometimes similar to the “font” I will move it left or right on press and then return it to normal on release.

PW

This attribute is used to hide the text. When you select “Password,” you will get asterisks instead of the letters you type in. My favorite password is Flutterbird123

TXT

This attribute is exactly what it is. The text in this box is the text displayed. This always trips me up because the length depends on the “txt_maxl.” almost every time I need a length greater than 10, I forget to alter the length attribute. This can have a single-line or multiple-line text.

TXT_MAXL

This attribute shows the maximum amount of characters you can have in the text box.

ISBR

I feel this attribute is as obscure as a spotted Flutterbird egg. How this gets interpreted as word wrap is something that I do not understand. The text will wrap to multiple lines if it is set to true. If it is set to false, the text can extend beyond the button and not be seen.

SPAX and SPAY

These attributes determine the spacing of the characters. The horizontal character spacing is “spax” and the vertical is “spay.” The values used are 0 to 255.

X and Y

These attributes are for horizontal(x) and vertical(y) placement. The coordinates are relative to the upper left-hand corner of the text box.

W and H

The final two attributes in the list are for the text box’s width(w) and height(h). These can be changed while the program is running.