How to navigate between pages using < dp >, a Nextion’s system variable:
As you can see above, < dp > is a system variable that returns the current page ID when read the variable. E.g.: n0.val=dp.
And change page to value specified. E.g.: dp=1 // loads the page with ID=1.
In our example, we use the global scope variable < curr_page_id > to store the current page id.
With the navigation buttons, if we want to go to the previous page, we subtract one from the < curr_page_id >, by writing: < page p[0].b[7].val-1 > or < dp= p[0].b[7].val-1 >.
To go to the next page, we add one to the < curr_page_id >, by writing: < page p[0].b[7].val+1 > or < dp= p[0].b[7].val+1 >.
This is very useful when we want to return to the previous page after using a pop-up message.
How to make a useful pop-up message on Nextion:
To make a pop-up, we use a page with a transparent background, by setting the < sta > attribute of the page to “0” or “no background”, so when this page loads, we are going to have as a background the previous loaded page.
We can make a textbox, customize as we like and add text either from Arduino or from a local variable on Nextion. We could also add the text to the text attribute of the textbox component.
To leave from the message page, we can set at the Press Event of every object on the page AND on the page itself, to load the previous page with the following command:
< page p[0].b[7].val > or < dp= p[0].b[7].val > Thus, wherever we press on the page, we are going to go to the previous page.
We could also use a timer, that in its event we are going to run the same commands, after the setted time has passed. Then the pop-up message will disappear.
The timer also has to be setted to enabled, through its attribute < en > and it will start counting as soon as the pop_up page loads
NOTE: When the pop_up page loads, we don’t update the curr_page_id variable, as we do with the other pages.
In this way, we can go from the message screen to the previous loaded page, as the pop_up can be called from different pages.
To avoid the need of a page for every message, we created a global scope variable at the “home” page, with < sta=String > and < txt_maxl=200 >.
In this variable, we are storing the text we want to display on the pop_up message.
If from any object or any event on any page we want to display a message, we write the desired text to the global pop_text variable.
After that, we call the page pop_up.
E.g.:< home.pop_text.txt=”Test Line 1\rTest Line 2” > & < page pop_up > NOTE: \r for new line
In the pop_up page Preinitialize Event the text on t0 gets the text from the global variable < pop_text >, by writing: < t0.txt=home.pop_text.txt >.
How to use < sprintf > command:
A very useful command is the . This command will construct a string from different type of variables and will store it
in a char array in our case . We must declare the length of the array to be long enough to hold all the characters.
With sprintf we can include variables within a text using format specifiers with the prefix < % >, format specifiers are replaced
by the values specified in subsequent additional arguments.
sprint(char array to store value, "<TEXT TO PRINT %[format specifier]NEXT TEXT%[format specifier]",<name of 1 variable>,<name of 2 variable>)
Format specifier table from: https://arduinobasics.blogspot.com/2019/05/sprintf-function.html
More for sprintf-function to:http://www.cplusplus.com/reference/cstdio/sprintf/
How to change components’ attributes at Nextion from Arduino:
For every component on Nextion, we can chance only attributes that are showed with GREEN color when Nextion is “running”
with the following prototype .= . If attribute is text, the value must be inside <" "> quotes.
Supposing we want to send to component t3 the text < HELLO > the command for Nextion is < t3.txt="HELLO" >, from Arduino, we write < Serial.print("t3.txt="HELLO"") >;
When we type <"> means that <"> is a character and it's going to print it over serial as character. Else <"> is a STRUCTURE.
To change the font color t3, we write on Nextion: < t3.pco=BLUE > or < t3.pco=<31> >
From Arduino:< Serial.print(“t3.pco=BLUE”); > or < Serial.print(“t3.pco=31”); >
TIP: The exact names of the attributes and the values they can get, can be found on Nextion Editor at the attribute menu of any object.
How to use the return character < “\r” > on text boxes for new line:
In Nextion with the < \r > creates 2 bytes 0x0D 0x0A the first is the return character (ASCII 13, or '\r') and the second is the newline character (ASCII 10, or '\n').
We must send to Nextion the 2 bytes < \r > of the backslash () and character (r) to send the backslash char () we must add a () in front, for the escape character, due to we want to print the second () as character
E.g.: < Serial.print("t1.txt="Text Line 1\rText Line2\”"); >
When we are at Nextion we must include the < \r > inside " ", result: < "\r" >.
When it is inside the text there is no need for extra "". The quote marks of the text are enough.
Example 1 < t1.txt="LINE1\rLINE2" >
Example 2 < t1.txt="LINE1\rLINE2"+"\r"+t3.txt> we add a new Line with the text of t3 component.
How to initialize Nextion’s Serial baud rate:
NEXTION MUST HAVE THE SAME BAUD RATE WITH ARDUINO. For this we write at first page to the preinitialize event the command < baud=115200 >
NOTE "bauds" will change the default baud rate off 9600 until it changed again < bauds=115200 >. On the other hand, will change the rate until next start-up.
From Arduino: <Serial.print(“baud=115200”); > But first, we must have a Serial connection between Arduino and Nextion. This means that we have the same baud rate on both.
Second step is to change the baud rate of Nextion and then change the Serial baud rate on Arduino.
How to use the timer variable, a non-visible component:
After we select the timer from the toolbox, as this is a non-visual component, it will be added below the Design Canvas.
From timer’s event we can run specific code or commands in sequentially periods of the setted time.
This period of time can be setted by the < tim > attribute in milliseconds. We must start it by setting the < en > attribute to 1.
If we want the timer’s event not to repeat, we write at the end of all the commands of the event: < tm0.en=0 >. This disables the timer.
When timer is setted to < en=1 > from the attribute menu (when building the page), the timer will start and run with the load of the page.
To start the timer from a different time stamp, we have to set < en=0 > from the attribute menu (Nextion Editor) and enable it from an object’s Event with: < tm0.en=1 >
Examples on timers can be found on pages with ID=1, ID=3
How to add a numeric variable inside a text (same with Arduino):
From Nextion: We must convert the numeric to text with . For this, we must create a textbox (make it visible or not. It is up to you) to store the result of the
If the numeric value is the n0 and the t0 is the place we chose to store the result of the < covx >, then we write: < covx n0.val,t0.txt,0,0 >.
If t1 is the textbox we want to add the text and the result of the < covx >, < t1.txt="slider's Value"+"\r"+"h0.val== "+t0.txt >
In command, when length is fixed and value is less, leading zeros will be added