DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

El Bruno for Microsoft Azure

Posted on • Originally published at elbruno.com on

#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();

Enter fullscreen mode Exit fullscreen mode
  • 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";

Enter fullscreen mode Exit fullscreen mode

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)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.