El BrunoHi !
Still learning with the ESP32 CAM board.
In today’s post the scenario is simple:
- Connect the device to a WiFi network
- Run a webserver on the device
- Create an endpoint [/flash]
- Render a page on the host [port 80] with a button
- Turn on the Flash for 1 second when
- The endpoint receives a request.
- The user click the html button
As the previous sample, I’ll write this using Visual Studio Code and PlatformIO project, using the AI Thinker ESP-32CAM board.
Full project working demo
And the sample webpage with the local IP of my demo network.
Let’s review some noted from the code:
- The webserver code declares the [/flash] endpoint and also render a string in the port 80.
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
{ request->send_P(200, "text/html", index_html); });
// Route for trigger flash
server.on("/flash", HTTP_GET, [](AsyncWebServerRequest *request)
{
flashOnForNSeconds(1);
request->send_P(200, "text/plain", "Flash Triggered"); });
// Start server
server.begin();
- The content for the HTML page is declared in a const char var.
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { text-align:center; }
.vert { margin-bottom: 10%; }
.hori{ margin-bottom: 0%; }
</style>
</head>
<body>
<div id="container">
<h2>ESP32 CAM - Labs</h2>
<p>
<button onclick="triggerFlash()">Trigger Flash</button>
</p>
</div>
<h4>Bruno Capuano - @elbruno</h4>
</body>
<script>
var deg = 0;
function triggerFlash() {
var xhr = new XMLHttpRequest();
xhr.open('GET', "/flash", true);
xhr.send();
}
</script>
</html>)rawliteral";
Small step today, however this is a cool way to create a dashboard or an app to interact with the device using http endpoints and simple html.
Full code available in my ESP32 Cam Demo repository.
Happy coding!
Greetings
El Bruno
