![]() ![]() The type attribute is set to “text/css” to indicate that you’re using a CSS file for the styles. The rel attribute specifies the nature of the external file, in this case that it is a stylesheet-the CSS file-that will be used to alter the appearance of the page. The tag tells the HTML file that you’re using an external style sheet to format how the page looks. The following line should be added between the tags: We just need to create a heading for the web page, a paragraph to display the GPIO state and two buttons.Ĭreate an index.html file with the following content or download all the project files here: īecause we’re using CSS and HTML in different files, we need to reference the CSS file on the HTML text. The HTML for this project is very simple. The HTML and CSS files should be saved inside a folder called data inside the Arduino sketch folder, as shown below: The Arduino sketch, the HTML file and the CSS file. To build the web server you need three different files. Move the AsyncTCPfolder to your Arduino IDE installation libraries folder.Rename your folder from AsyncTCP-master to AsyncTCP.zip folder and you should get AsyncTCP-master folder Click here to download the AsyncTCP library.Follow the next steps to install that library: The ESPAsyncWebServer library requires the AsyncTCP library to work. Installing the Async TCP Library for ESP32 Move the ESPAsyncWebServer folder to your Arduino IDE installation libraries folder.Rename your folder from ESPAsyncWebServer-master to ESPAsyncWebServer.zip folder and you should get ESPAsyncWebServer-master folder Click here to download the ESPAsyncWebServer library.For more information about that library, check the following link:įollow the next steps to install the ESPAsyncWebServer library: The ESPAsyncWebServer library is well documented on its GitHub page. One of the easiest ways to build a web server using files from the filesystem is by using the ESPAsyncWebServer library. With SPIFFS, you can write the HTML and CSS in separated files and save them on the ESP32 filesystem. In most of our projects we’ve created the HTML and CSS files for the web server as a String directly on the Arduino sketch. The placeholder for the GPIO state is written directly in the HTML file between % signs, for example %STATE%. On the web page, there is a placeholder for the GPIO state.When you click the OFF button, you are redirected to the root URL followed by /off and the LED is turned off.When you click the ON button, you are redirected to the root URL followed by /on and the LED is turned on.When you make a request on a specific URL using your browser, the ESP32 responds with the requested files.The HTML and CSS files are stored on the ESP32 SPIFFS (Serial Peripheral Interface Flash File System).The ESP32 runs a web server code based on the ESPAsyncWebServer library. ![]()
0 Comments
Leave a Reply. |