We will now set up the web user interface. I propose you to retrieve the source codes of this interface to integrate them into your project. To do so, update the baseline project with the following
git checkout v0.3
And copy the entire
data folder to the root of your project. It is important not to change the name of this folder. We’ll see why later.
Otherwise, create a
data directory in your project folder and download the following files inside:
favicon.icois a small, iconic image that represents the ESP32 website.
index.htmlcontains the structural description of the user interface.
index.cssis the associated style sheet that describes the graphical layout of the interface.
After completing these steps, your project folder should now look like this:
Let’s start looking at how the user interface is built, by opening the
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="author" content="Stéphane Calderoni"> <meta name="description" content="ESP32 Remote Control with WebSocket"> <title>ESP32 remote control</title> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> </head> <body> <div class="panel"> <h1>ESP32 remote control</h1> <div id="led" class="%STATE%"></div> <button id="toggle">Toggle</button> </div> </body> </html>
This is what the user interface looks like, formatted by the
I won’t go into the details of the stylesheet implementation here. You can of course modify it if you want, but we won’t dwell on that aspect. What will interest us later, on the other hand, is the
index.js script in which we’ll add the different elements that will allow us to interact with the ESP32 and to take into account the interactions with the user.
But let’s take a closer look at the HTML element that represents the LED:
<div id="led" class="%STATE%"></div>
class of this element will be determined at runtime to reflect the state of the LED, i.e. whether it is on or off:
%STATE% value is simply a marker that will allow the ESP32 to initialize the user interface with the correct
class attribute value before sending the
index.html file to the client browser. We’ll see that a little later.
The Toggle button will of course send a command to the ESP32 to invert the status of the LED, i.e. turn it on if it was off, or turn it off if it was on.