Hi Folks
Congratulations on your “Build Web Servers” book. I refer to it almost every day.
I have a question perhaps you could help me with.
My application is a single page containing several buttons and alpha and numeric inputs. They control a stepper motor driving a small machine where the buttons provide start/stop left/right type commands. The alpha/numerics provide for configuration settings for both the motor and other settings associated with the action buttons. One of the buttons is the standard html Submit button for the alpha/numerics. Pressing this writes the current alpha/numerics into SPIFFS storage and confirms the changes in the display. All other buttons are implemented as “push-on/push-off” and must respond immediately to being pressed.
With the help of your book and the web this is all mostly working – the buttons perform their actions on demand and the parameters are successfully changed by the alpha/numerics.
However, my problem is the Submit button – pressing this will clear all buttons back to their html default value (typically all off). Note it does not change the associated output pin state (so very confusing for the user). Here is the Submit html.
<input type=”submit“, value =”SUBMIT“>
To track this down I have created a small project consisting of a button, a numeric input, and the submit button to try various remedies:
I have tried many changes and configurations of the html, json and working code looking for a simple solution. I even considered using two html files.
My last effort added a json handler for the Submit button itself.
window.addEventListener(‘submit‘, getButtonState);
function getButtonState(button) {
var xhr = new XMLHttpRequest();
var state;
state = document.getElementById(OUTPUT_PORT_1).value;
console.log(state);
xhr.open(“GET“, “/button?“ + state, true);
xhr.send();
}
This passes to the c++ code the current value of the action button before the numeric value is sent. This means at the point in the c++ code where the numeric value is being processed and where subsequently the state of the action button will be reset, I have available the previous state of the button.
server.on(“/button“, HTTP_GET, [](AsyncWebServerRequest *request) {
AsyncWebParameter* p;
int params;
Serial.println(“/button“);
params = request->params();
p = request->getParam(0);
Serial.printf(“%d\n”, params);
Serial.printf(“%s\n”, p->name());
buttonState = p->name();
Serial.printf(“%s\n”, buttonState);
request->send(200, “text/plain“, “OK“);
});
This solution would be fine if I knew some way to change the default state of the button in the html! The standard submit could then proceed and I subsequently update the button state. Here is its html.
<input type=”button“, class=”control“, id=”2“, value=”START“>
Even if I can find a way to alter the button update this seems an overly complicated way to do it. I am sure there must be some other, simpler way to solve this.
Any suggestions would be welcome. I can send you a zip of the whole test project (platformio) if necessary.
Best regards,
Ron Kreymborg
Hi.
If you could send me some print screens of what exactly is happening, it would be better to understand. To share a printscreen, you can can upload your pictures to google drive, imgur or dropbox and then share a link to the files.
This example: https://randomnerdtutorials.com/esp32-web-server-websocket-sliders/
uses sliders, but you can easily adapt it to use buttons. The sliders maintain their position and label even after the webpage is refreshed. So, I think you can use the same strategy with your buttons. Read the section “How it works” to see if that solution could be suitable for you.
Regards,
Sara