Steven Falivene asked 5 years ago
Hi
I am working on the CAM webserver project in the new ESP32 CAM book (good book). Similar code is in
https://randomnerdtutorials.com/esp32-cam-take-photo-display-web-server/#more-90367
In an effort to improve and learn I am trying to inject the current photo name of the photo displayed on screen on the index html page. As a start I am using inner.html to inject the new code via a button into a <p> tag. It injects when I set it to a string; .innerHTML = “Hello world”. But I can not inject the photo name which is stored in the arduino variable “lastPhoto”. I assume a HTML document can not see arduino variables.
<p id=”demo”>The photo name should appear here.</p>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Hello world” ;
document.getElementById(“demo”).innerHTML = lastPhoto;
}
I see other tutorials present the web page as individual lines via ;
client.println(“<body><h1>ESP32 Web Server</h1>”);
Perhaps I could try this way, but before I try I would like to know if there is a way to do it using the code on the tutorial above?
If I can get this to work then I would like to try and put buttons to scroll through the pictures on the SD and inject them into the page.
Sara Santos Staff answered 5 years ago
Hi Steven.
The lastPhoto variable you have on the HTML document is not the same variable of the Arduino code. In other words, the HTML document doesn’t “see” arduino variables.
You can, do something like this:
<p> Photo name: <span id="demo">%PHOTONAME%</span></p>
Then, make a request for the photo name:
setInterval(updateValues, 10000, "demo"); //this requests the photo name every 10 seconds. But you can call thejavascript function after cliking on a button, for example.
function updateValues(value) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(value).innerHTML = this.responseText;
}
};
xhttp.open("GET", "/" + value, true);
xhttp.send();
}
This JavaScript function makes a request on the GET/demo URL.
Then, in the Arduino code, you should handle that request to send the name of the photo lastPhoto.
server.on("/demo", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", lastPhoto.c_str());
});
I hope this helps.
Regards,
Sara