Hi.
 
That should be handled in Javascript. Basically, when each page loads, it should request the current GPIO states as it’s done in previous projects in the eBook, for example project 2.5.
Take a look at the javascript function called onOpen() and how it interacts with the ESP32.
Basically, you need to add that feature to your project.
 
Let me know if this helps.
Regards,
Sara 
 

Hi 
I checked, the switches connected to a GPIO pin work correct. However the other switches are virtual pins. The values I pass to a Nano using a I2C and the Nano operates led’s. So I am looking for a way, similar as checking GPIO states, to keep track of the swith positions. Do you have a suggestion?
 
 

If you want to keep your setup simple, the best way is to send the virtual switch position to the ESP32 every time you make a change. Like you do with the other switches.
Then, the ESP32 would save that value on variables (instead of changing GPIO states). You can save those variables in the flash memory if you want the board to remember the states even after reset).
Then, every time that page loads, it would request the last switch states to the ESP32, like it’s done with the GPIO states. The only difference is that this time, the switches are saved on variables in the flash memory.
 
There are different ways to save variables permanently. 

1. EEPROM library: https://randomnerdtutorials.com/esp32-flash-memory/
2. Preferences library: https://randomnerdtutorials.com/esp32-save-data-permanently-preferences/
3. Create a file in the filesystem (SPIFFS) with the values of the variables

 
I would go with option 2 or 3.
 
I hope these suggestions are useful.
Regards,
Sara

I tried the preference example that works. However in my application I am still struggling to get it working correctly.
I have an array with the numbers of the switch ID’s, the first 4 are GPIO pins, the other numbers virtual pins.
For the status I read the pin for the first 4 numbers, and keep track with an array for the virtual pins.

int outputGPIOs[15] = {26,27,32,33,10,11,12,13,14,15,16,17,18,19,20};

int status[15]={0,0,0,0,0,0,0,0,0,0,0,0,0,0,0};

 
sending the status works like this:
 

// status outputs status naar alle aangesloten clients sturen
String getOutputStates(){
  JSONVar myArray;
  for (int i =0; i<NUM_OUTPUTSx; i++){
    if (i<4){   // status 4 GPIO direct
      myArray[“gpios”][i][“output”] = String(outputGPIOs[i]);
      myArray[“gpios”][i][“state”] = String(digitalRead(outputGPIOs[i]));
   
      Serial.print(“schakelaar “);
      Serial.print(outputGPIOs[i]);
      Serial.print(“state “);
      Serial.println(digitalRead(outputGPIOs[i]));

    }
    else{       // status voor 8×8 leds display
      myArray[“gpios”][i][“output”] = String(schakelaar[i]);  
      myArray[“gpios”][i][“state”] = String(status[i]);

      Serial.print(“schakelaar “);
      Serial.print(schakelaar[i]);
      Serial.print(“state “);
      Serial.println(status[i]);

    }
  }

  String jsonString = JSON.stringify(myArray);
  return jsonString;
}

However, I do not know how in the Outputs.js file I can read the status from main.cpp of the virtual switches when the Outputs page is opened. 

 
If I switch from Outputs page to Outputs2 page, the virtual switches do not show a State. The switches connected to a GPIO pin remain showing the State when I move between  pages Outputs and Outputs2. Any idea’s? Where should I look to get it running correctly?

Hi again.
Make sure you have an onOpen()  Javascript function on that page as you have on the other page. So that JavaScript can request, receive an place the states on the corresponding place.
You’re probably missing something on your javascript.
It might help to open the JavaScript console when you open the pages and see if you get any error or if you’re getting the responses.
Regards,
Sara

I did follow your guidelines and tried a lot of other options. In de console I can see there is an array of 15 elements. That can be right because the first Outputs page has 6 switches and and the second page called Outputs2 has 9 switches. The strange thing is that on the first page Outputs, I get the correct responses, in the console however I do see 7 switch positions, one is belonging to the second page Outputs2. If I am working in Outputs2, I see only one element of the array. For some reason, using navigation and two pages does not give the correct “states” feedback.
I have given up solving this, and put all switches in one page, than it works fine, but it is less clear in one view with so many switches. Thank you for your support.
 

Hi again.
 
There’s probably something wrong with the way it is implemented. I’ll give you some more suggestions if you want to try to implement that feature in the future.
 
Why don’t you create two separate functions to send the output states?
At the moment you only have: String getOutputStates()
Why don’t you have a different function for each page, and each page will make a different request? That would be easier to handle because each page would have its specific array.
 
I’ll leave this question open if you want to try this in the future.
Or you can always open a new question.
 
Regards,
Sara