More details on Page with ID = 2, or as we have named it, “second_example”:
@Each time the page loads, we send a command to Arduino through the preinitialize event of the page, to let the Arduino know on what page we are on.
For this page the command is: < 23 02 50 02 > in hex.
This command uses a specific protocol of our own. Its function on how we organize our commands and make Arduino identify them, will be explained later at its own paragraph.
At the preinitialize event of the page, we write the following in hex: < printh 23 02 50 02 >
< printh > is one of the few commands that parameter uses space char 0x20
< printh 23 02 50 02 > send four bytes: value < #2P1> hex: 0x23 0x02 0x50 0x02
@Arduino in its turn will send the data that we have specified through the switch case command in the Arduino code for this page which are the following:
CODE SAMPLE FROM .ino FILE
case 0x02:
Nextion.print("array_rows.val="); // Sending to Nextion the value of ARRAY_ROWS, that represent how many Lines is the array
Nextion.print(ARRAY_ROWS);
NextionEndCommand();
Nextion.print("n0.val="); // Sending to Nextion the value of n0.val a numeric component that is hidden and used as variable on nextions code
Nextion.print(ARRAY_ROWS - 3);
NextionEndCommand();
Nextion.print("h0.maxval="); // setting the max value that Slider on nextion can take
Nextion.print(ARRAY_ROWS - 4);
NextionEndCommand();
Nextion.print("h0.val=h0.maxval"); // setting the value of the slider to its max value ( pointer on the top)
NextionEndCommand();
save_text_to_variables_example2();
break;
void save_text_to_variables_example2(){
char temp_data[50];
for(int i = 0; i < ARRAY_ROWS; i++){
sprintf(temp_data, "va%u.txt=\"%s\"", i, text[i]);
Nextion.print(temp_data);
NextionEndCommand();
delay(10); // Give some time to Nextion to read from Serial Buffer and Avoid buffer overflow
}
}
That was a sample of the Arduino code. From now on, Arduino isn’t necessary. All of the following work with only the code on the Nextion
How to make components visible or invisible using command:
With < vis > command we can hide or show a specific component on the current page.
- show will refresh component and bring it to the forefront layer.
- hide will remove component visually, touch events will be disabled.
When the object is hidden, we can get its value, or we can change it. Example: read or write a text from a textbox
Syntax: < vis < component ID or name >, < state > > - < state > write 0 to make component invisible or 1 to make it visible
- In page < first_example >, we make component n0 invisible, by writing: < vis n0,0 > with objectname or < vis 13,0 > with component’s ID
- By writing < vis 255,0 >, we make every component in the current page invisible
We give the command from the "preinitialize event" of the page that the component belongs by writing: < vis n0,0 >
From Arduino, we write < Serial.print(“vis n0,0”); > and of course the 3 bytes for the end command < Serial.print("\xFF\xFF\xFF"); >
How to create a variable, change it to global scope and use it across different pages:
The Variable component is a non-visual component and is located below the Design Canvas. Variables are either 32-bit signed numeric or string content.
To create a variable, go to the “Toolbox” section and click on the “(X) Variable”. When pressed, a variable is going to be added.
From variable’s “Attribute”, change the < vscope > from local to global. “Local” is the default option when created.
From the < sta >, choose Numeric or String. Depends on how someone wants to use it.
When a variable is global, it can be accessed not only while the page they are in is currently loaded, but also while different pages are loaded.
We can access the variable with two ways:
- By giving the name of the page and the component’s < objectname >. Example: < home.va0.val >
See the example at the < Preinitialize Event > of page < first_example > of this guide, where we use a variable created on page < home > named < curr_page_id>
< home.curr_page_id.val=dp > We set the value of < curr_page_id > variable to be equal to with < dp > (< dp > is a system variable that returns the current page id). - By using the b[.id] component array. Example: < p[.id].b[.id].val> .
The above example for the page < first_example > gets the form < p[0].b[7].val=dp >.
We prefer to use the second method, due to we can change the name of the page and objects freely. Be careful when changing page order, as the page ID will change too.