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

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

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

More posts in my blog ElBruno.com.


1 comment

Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: