This post will take a deep look at the scrolling text object. I am the primary Flutterbird expert. I will try to keep the Flutterbird info to a minimum. There will be a lot of similar information to the text box. The only differences are some extra attributes that control to movement of the text.
To support this website, you can purchase the display by clicking NEXTION WEBSITE here or selecting a link 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.
The differences between the standard text box and the scrolling text box are highlighted in yellow.
TYPE
Let’s start at the top with the type attribute. Every object has a unique type. So 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. Like the type attribute, this value can be helpful 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. Then after the text boxes have been added, you add all the buttons. 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 terms of Flutterbirds. The object name is Flutterbird. The ID would be the individual names of each Flutterbird, i.e., Tweety or Feathers.
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. However, some issues with the drag command 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. For example, 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. For example, 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. Instead, 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 selections “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 are 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 additional attributes. You can adjust the border color and the border width.
KEY
If you want a user to change the values in the 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. 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 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.
DIR
The dirction can move in four directions
- LEFT TO RIGHT : 0
- RIGHT TO LEFT : 1
- UP TO DOWN : 2
- DOWN TO UP : 3
DIS
This is a hard one to explain. The value you can select is from 2 to 50 milliseconds. This value represents how far the text would travel in that time. Then it takes that amount of travel and instantly jumps that far at certain time intervals. If the value is 50ms, the text will jump its maximum length at every interval set by the TIM attribute. If the value is set to 2ms, the text will jump its minimum length at every interval set by the TIM attribute.
TIM
This attribute sets the time between steps. The smaller the setting, the faster the speed. If you want the most rapid rate, you set this low and the “DIS” attribute to a higher number. With this setting, you will have the fastest interval with the longest distance moved.
EN
The “EN” attribute will enable and disable the movement of the text.
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 number of characters 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. For example, 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 the text box’s width(w) and height(h). Again, these can be changed while the program is running.
END
