Looping through Nextion Components (Video 187)

If you have multiple objects on a Page that you want to check quickly, you can use the built-in arrays of objects. The hardest part is to remember that array is called “b.” When you refer to the array you use the context of b[component.id].attribute. Below is an image highlighting the difference between the component name and the component ID. Notice the radio button named “r0” has an ID of 1 an number field “n2” has an ID of 25.

Now for my shameless self-promotion. Please consider purchasing products from links on my pages. It will help support the sight. If you want to use other components but still want to support this site, fill in the ASIN number below and click “ACTIVATE LINK.”

Please note this blog was written while a new IDE version was released. I am using 1.63.3. As the final step, I will update the IDE and let you know if anything changes.

In the Nextion IDE, I am using a basic 7″ display model NX8048T070_011. I add all the radio buttons, so the IDs stay sequential (1-16).

Adding the Functionality

Normally I would add the number fields next, but I want to separate the ID values for this blog. As you add a component to the display, the ID value will increment. In the image below I have added some components. I started with the three buttons and then added the components.

• button b0 -> ID 17
• button b1 -> ID 18
• button b2 -> ID 19
• slider h0 -> ID 20
• text t0 -> ID 21
• text t1 -> ID 22
• number n0 -> ID 23
• number n1 -> ID 24

Adding the Data

Now we will add in the 16 number fields. It is easier to loop through the components if the field IDs are sequential. You should have 16 radio buttons with IDs 1-16 and number fields with IDs 25-40.

The Good Stuff – Adding the Code

Now we will add the code to manipulate any number field with a selected radio button next to it. The number fields are all set to 0. The “UP” button will be used to increase any selected values. You can see the results in the video below.

The system variable sys0 will be used for this portion. You can see it defined on the program.s tab. There is no reason you can’t add a numerical variable to the page. The sys0 variable will be incremented from 1 to 16 and used to identify each radio button’s ID. As long as you have the number fields in the same order as the radio buttons, the number field IDs should be 24 larger than the radio button IDs. When referring to an object by the ID, use the letter “b” and place the ID number inside a set of brackets. I have notes added to the code below. This code is on the touch release event of the “UP” button.

sys0=1 //assign value
while(sys0<17) // count to 16
{
  if(b[sys0].val==1) // if radio button is on
  {
    if(b[sys0+24].val<100)  // if not  max of 100
    {
      b[sys0+24].val++ // if less than 100 add 1
    }
  }
  sys0++  // increment sys0 variable
}

The code for the “DOWN” button is very similar decrement

sys0=1 // assign value
while(sys0<17) // count to 16
{
  if(b[sys0].val==1) // if radio button is on
  {
    if(b[sys0+24].val>0)  // if not min of 0
    {
      b[sys0+24].val-- //if more than 0 subtract 1
    }
  }
  sys0++  // increment sys0 variable
}

The “RESET” button will set any selected value to 50. I configured it this way so you can see a change immediately.

sys0=1 // assign value
while(sys0<17) // count to 16
{
  if(b[sys0].val==1) // if radio button is on
  {
    b[sys0+24].val=50 // if on set value to 50
  }
  sys0++  // increment sys0 variable
}

The slider or “H0” will be very similar, but the code needs to be on Touch Move and Touch Release. This was included to make rapid changes when we get to the “AVERAGE” and “TOTAL” number fields.

sys0=1 // assign value
while(sys0<17) // count to 16
{
  if(b[sys0].val==1) // if radio button is on
  {
    b[sys0+24].val=h0.val // set number value = slider value
  }
  sys0++  // increment sys0 variable
}

This wraps up the main idea of using component IDs to loop through a series of objects. I added the “TOTAL” and “AVERAGE” number fields for some fun. If you want to follow along, you will need to add a timer. I made no adjustments to the timing of the timer. The timer will execute events every 400 milliseconds. It is configured to show the total and average of all the fields. It does not consider the radio buttons.

sys1=25 // set the value to, no radio buttons
n0.val=0 // reset the total number field
while(sys1<41) // cycle through the number fields
{
  n0.val+=b[sys1].val // add each number field to n0 
  sys1++ // increment the system variable
}
n1.val=n0.val/16 // get the average and place it in n1

This is my first attempt at using a blog for this information. Please let me know in the comments what you think.