Hi !
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
Top comments (0)