From what I get is that you want the button to return to start position after the action is done on the EPS32.
Assuming this is correct, the solution is as follows:
First thing, the webpage is based on the request -> response methodology or, simply said the sliders are set at a position only when the browser requests the state from the EPS32, the move you see when clicking them is done by the browser locally and does not reflect anything on the EPS32.
Thus in order to move the sliders when the operation is done, you have a few options:
- Simply refresh the page after some timeout, this will work, but only with a preset delay and if the time is not correct it will not work (i.e. if the delay is shorter than the ESP executing the command).
This is the easiest variant to code, but it has its downsides, as you will be forcing a refresh of the browser. You will need to code this logic in the JS of the webpage, this is your current JS:
<script>function toggleCheckbox(element) {
var xhr = new XMLHttpRequest();
if(element.checked){ xhr.open("GET", "/update?output="+element.id+"&state=1", true); }
else { xhr.open("GET", "/update?output="+element.id+"&state=0", true); }
xhr.send();
}
</script>
With 1 second timeout a refresh will look like this (you can change the timeout in the line with the 1000, the timeout is in ms):
<script>function toggleCheckbox(element) {
var xhr = new XMLHttpRequest();
if(element.checked){ xhr.open("GET", "/update?output="+element.id+"&state=1", true); }
else { xhr.open("GET", "/update?output="+element.id+"&state=0", true); }
xhr.send();
setTimeout(function(){
window.location.reload(1);
}, 1000);
}
</script>
- The more complex, but far better option has two parts:
2.1. An EPS32 backend API for requesting the status of the buttons (not so hard as it sounds)
2.2. Some JS to call this API and update the buttons
The code for this case is not so easy, so I will not type it all out (plus it will need some testing)…
You will need another serving point similar to your main point you have here:
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
It will look something like this (I think this will not compile, you will need to add the needed button states and maybe fix the JSON):
// Route for buttons status
server.on("/buttonsState", HTTP_GET, [](AsyncWebServerRequest *request){
char jsonString[100];
sprint("{\"buttonOneState\": %b}", buttonOneStatusBool);
request->send_P(200, "json", jsonString, processor);
});
**This code is not full and will need fixing, simply I do not have much time to write and test it thoroughly
After the API is ready you need to query it with the JS something like so (I think this will not work, and it lacks timeout protection, so it may request new states indefinitely, the goal of this almost JS code is for you to see what is needed, and if you want you can finish it, some JS knowledge is needed):
function getButtonsState() {
var Httpreq = new XMLHttpRequest();
Httpreq.open("GET","/buttonsState",false);
Httpreq.send();
return JSON.parse(Httpreq.responseText);
}
function waitForButtonsChange() {
var buttonsState = getButtonsState();
if(buttonsState.buttonOneState) { // checks if the button is still enabled
setTimeout(waitForButtonsChange, 1000); // wait again for the states
} else {
// Here we can set the button to OFF
var element = document.getElementById(19); // Here we use the ID of the top button
element.setPosition(false); // I am not sure if this will re-render the switch
}
}
function toggleCheckbox(element) {
var xhr = new XMLHttpRequest();
if(element.checked){ xhr.open("GET", "/update?output="+element.id+"&state=1", true); }
else { xhr.open("GET", "/update?output="+element.id+"&state=0", true); }
xhr.send();
setTimeout(waitForButtonsChange, 1000); // starts the recursive calls
}
In summary, you can either refresh that page after some time and hope for the best or implement an update mechanism in JS.
P.S. My last post is for deletion as by accident I posted half to this post…
