4

#ESP32CAM – Host a webserver, render an HTML Page, trigger the Flash 🔦 in the #A...

 2 years ago
source link: https://elbruno.com/2022/03/08/esp32cam-host-a-webserver-render-an-html-page-trigger-the-flash-%f0%9f%94%a6-in-the-arduino-board/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

#ESP32CAM – Host a webserver, render an HTML Page, trigger the Flash 🔦 in the #Arduino board

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

ESP32Cam Flash 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

Published 8 Mar 2022By elbruno

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK