#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

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

Blog

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

El Bruno

Join Our Newsletter. No Spam, Only the good stuff.

Related