Skip to content Skip to sidebar Skip to footer
Home / Esp-02 Can Upload Web Server Sketch

Esp-02 Can Upload Web Server Sketch

Post a Comment

In this tutorial we will check how to serve the jQuery source file from the ESP32 and develop a very simple web page that makes use of it. The tests of this ESP32 tutorial were performed using a DFRobot'southward ESP-WROOM-32 device integrated in a ESP32 FireBeetle board.

Introduction

In this tutorial we volition check how to serve the jQuery source file from the ESP32 and develop a very simple web page that makes use of it.

For this tutorial we volition be using the Arduino core and the HTTP async web server libraries. Due to the size of the files, we will be serving them from the ESP32 SPIFFS file system. You tin cheque in more than detail how to do it on this previous tutorial.

In society to make information technology easier to upload the files to the ESP32 file system, we will make use of this plugin for the Arduino IDE.

The tests of this ESP32 tutorial were performed using a DFRobot's ESP-WROOM-32 device integrated in a ESP32 FireBeetle board.

The jQuery library

jQuery is a JavaScript library that makes it easier to manipulate the HTML DOM and handling events and Ajax [i], among other features. So, it is a useful tool that many web developers apply when edifice applications.

Naturally, in order for a JavaScript application to use this library, its source lawmaking needs to somehow be included. When developing a web application, we tin include external JavaScript files using the HTML script tag and its srcattribute.

Nonetheless, some entity needs to make the source code of the jQuery library available to be fetched by the client awarding that will render the HTML page. If we are sure that the machine that is going to be running the lawmaking has access to the Cyberspace, then the jQuery source can be retrieved from a remote server or from a public Content Distribution Network (CDN). You can check here the CDN for jQuery.

Nonetheless, when it comes to Net of Things development, there are employ cases when it may be needed to present a web page to the user earlier the device is continued to the Net (this tin can exist washed with the device operating as soft AP, for case). In that example, we cannot rely on a remote server to serve any dependencies we have. And so, if our awarding uses a framework such every bit jQuery, information technology needs to be served past the device.

In this tutorial, we will bank check how to serve the jQuery library from the ESP32, which allows to develop applications that rely on this library without depending on an Internet connectedness.

To get started, nosotros need to download the jQuery compressed source file from here, as shown in figure 1. As can exist seen, I've used version iii.3.1.

Downloading jQuery production version

Figure 1 – Downloading the compressed version of jQuery.

Note that if yous open up the downloaded file you will see a lot of code without any formatting, which will not be easily readable for a person. Notwithstanding, browsers don't care about formatting and can read the file information technology that compressed format.

So, removing all the unnecessary tabs, new lines and empty spaces leads to a much smaller file. This means that at that place's less data to send over the network, which ways faster speed and more operation. In our case, besides that, it ways much less infinite occupied in the ESP32 file system, which is of farthermost importance since this is a resource constrained device.

If you want to have a look at the source lawmaking of jQuery you can download the uncompressed version from the same link. Note however that you should not apply it in production environments for the mentioned reasons.

Now that we take the jQuery source file, nosotros need to upload information technology to the ESP32. To do it, we will utilize the Arduino IDE plugin covered in this tutorial.

In short, we need to navigate to the Arduino sketch folder and there create a folder named "data". Inside that folder, we should put the jQuery source file and the HTML file that volition make employ of this library (nosotros will cover its lawmaking below). This is illustrated in figure ii.

Data folder on the ESP32 sketch containing the jQuery library source code

Figure 2 – Data binder with the jQuery and HTML files.

Note: to keep things simple nosotros are non covering hither the compression of our HTML file, but the same principle mentioned before also applies. So, to salve some space in the ESP32 and optimize the serving of the file, you should minify it in a final application. In that location are lots tools available to exercise it.

After having the files in the data folder and assuming that y'all accept already installed the mentioned Arduino IDE file upload plugin, simply go to Tools and click "ESP32 Sketch Information Upload".

Afterwards the procedure finishes, both files should be available at the root of the ESP32 file system with the names they had on the computer from which they were uploaded.

So, we should have a file with the path "/jquery-three.three.ane.min.js" and another with the path "/test.html". Note that I've chosen the HTML file test.html, but you lot can use another proper name, equally long as you laissez passer the correct value in the Arduino code shown below.

The HTML and jQuery code

The code we are going to develop will be very elementary since our aim with this tutorial is to show that information technology is possible to serve the jQuery source file from the ESP32 and not to focus too much on actual coding using this framework.

So, our elementary case will consist on a paragraph and a push that, when clicked, hides the paragraph using some jQuery functions.

In terms of jQuery, we will make use of this framework inside a JavaScript function, the one that will be called when the mentioned push is clicked. We volition telephone call our function hide.

In our office implementation, we volition use the jQuery ID selector to access a HTML element, more precisely, the paragraph we have mentioned. We are going to assume that the paragraph volition have an ID equal to "paragraph".

Then, nosotros volition use the jQuery hide method to hide the HTML chemical element. Nosotros will pass equally input an optional parameter which indicates the duration of the hiding animation. This value is specified in milliseconds and we will use the value 2000, so the paragraph will fade away instead of immediately disappearing.

function hide() { 	$("#paragraph").hide(2000); }

Regarding the total HTML code, the previous function will be enclosed in a script tag on the head section.

We volition also have an additional script tag pointing to the external jQuery file, so the the functionalities of this framework tin can be used. In this case, we need to utilize the srcaspect of the script tag to indicate the proper name of the file to exist fetched.

Since the jQuery source file will be served by the same server that is serving this HTML lawmaking (our ESP32), we should use a relative path. In our example, it is simply the proper name of the file, as nosotros will meet when configuring the routes of the server on the Arduino code.

<script src="jquery-3.3.i.min.js"></script>

After the head section we will have the HTML elements on the body section, as shown below in the complete final code. As already pointed, the paragraph should have an ID equal to "paragraph" and the button should invoke the hide function we have defined on our JavaScript script, when clicked.

<!DOCTYPE html> <html>      <head>         <script src="jquery-3.3.1.min.js"></script>         <script>             function hide() {                 $("#paragraph").hide(2000);             }         </script>     </head>      <torso>          <p id="paragraph">Text to be subconscious</p>         <push onclick="hide()">Hide</button>      </trunk>  </html>

The Arduino code

In terms of coding, this tutorial is very like to what nosotros have been washed before when serving files from the file system.

So, we start by including the libraries needed. We need the WiFi.h to connect the ESP32 to a WiFi network, the SPIFFS.h to be able to serve files from the file system and theESPAsyncWebServer.h and so we can setup the web server.

Followed by that, nosotros volition demand to declare the WiFi network credentials and then the ESP32 can subsequently connect to it.

To finalize the global variables proclamation, we demand an object of course AsyncWebServer, which will exist used to setup the server.

#include "WiFi.h" #include "SPIFFS.h" #include "ESPAsyncWebServer.h"  const char* ssid = "yourNetworkName"; const char* countersign = "yourNetworkPassword";  AsyncWebServer server(lxxx);

Moving on to the setup role, we perform the usual procedure. First nosotros open the serial connection, then we initialize the file system and afterward that nosotros connect the ESP32 to the WiFi network.

Serial.brainstorm(115200);  if(!SPIFFS.brainstorm()){      Serial.println("An Error has occurred while mounting SPIFFS");      render; }  WiFi.begin(ssid, password);  while (WiFi.status() != WL_CONNECTED) {     delay(1000);     Serial.println("Connecting to WiFi.."); }  Serial.println(WiFi.localIP());

Now we need to take care of setting the server routes. The showtime road nosotros will configure is the one that volition serve the HTML file. We will call that route "/html" and since the client will only fetch the HTML code, it should mind to HTTP GET requests.

The handling part volition consist on returning back to the customer the HTML file that we previously uploaded to the file organisation. To do it, we need to laissez passer to the send method of theAsyncWebServerRequest the SPIFFS object and the path of the file every bit first and 2nd arguments, respectively.

The SPIFFS object will be used under the hood by the web server framework to access the file. The consummate path of the file is "/examination.html", every bit we accept seen before.

As 3rd and final argument of the send method we will laissez passer a string with the content-type, which is "text/html".

server.on("/html", HTTP_GET, [](AsyncWebServerRequest *asking){     asking->send(SPIFFS, "/test.html", "text/html"); });

We still need to declare a 2d route, which will be responsible for serving the jQuery source file. The route name volition be the same as the file name:"/jquery-3.3.i.min.js". Again, the route will merely answer to HTTP GET requests, since no other HTTP method makes sense.

The treatment function will as well return back to the client the JQuery source file from the file organisation. So, again, we laissez passer the SPIFFS object as outset input of the send method and the complete path of the file as second. The complete path should be"/jquery-3.3.1.min.js".

Finally, nosotros volition set the content-type to "text/javascript". In this case the content-type is non "text/html"because we are only serving JavaScript code, which is different from having some JavaScript embedded on a HTML file.

server.on("/jquery-iii.3.1.min.js", HTTP_GET, [](AsyncWebServerRequest *request){     request->send(SPIFFS, "/jquery-3.3.1.min.js", "text/javascript"); });

After that, we simply need to call the begin method on the server object, and then it starts listening to incoming requests. Later that, the server should be upwards and running. The last source code can exist seen below.

#include "WiFi.h" #include "SPIFFS.h" #include "ESPAsyncWebServer.h"  const char* ssid = "yourNetworkName"; const char* password =  "yourNetworkPassword";  AsyncWebServer server(80);  void setup(){   Serial.begin(115200);    if(!SPIFFS.begin()){      Series.println("An Fault has occurred while mounting SPIFFS");      return;   }    WiFi.begin(ssid, password);    while (WiFi.status() != WL_CONNECTED) {     filibuster(thousand);     Serial.println("Connecting to WiFi..");   }    Serial.println(WiFi.localIP());    server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){     request->ship(SPIFFS, "/test.html", "text/html");   });    server.on("/jquery-3.3.one.min.js", HTTP_GET, [](AsyncWebServerRequest *asking){     request->send(SPIFFS, "/jquery-three.3.i.min.js", "text/javascript");   });    server.begin(); }  void loop(){}

Testing the code

Bold that you accept already uploaded the files to the SPIFFS file system of the ESP32, simply compile and upload the Arduino code to the device. Once the procedure finishes, open the Arduino IDE serial monitor and copy the IP address that was printed later on the connection to the WiFi network is established.

So, open a web browser of your choice and type the post-obit in the address bar, irresolute #yourIP# by the IP address y'all take just copied:

http://#yourIP#/html

To ostend that the jQuery file was loaded, yous can open your web browser'southward developer tools and check the requests fabricated. Figure iii shows the rendered web page and, on the right, the asking made to fetch the jQuery source from the server.

Serving the jQuery library to the browser from the ESP32

Figure 3 – Serving jQuery from the ESP32.

If you click the "hide" button, and then the paragraph should fade way, equally described before.

References

[1] https://jquery.com/download/

hoagsomematim.blogspot.com

Source: https://techtutorialsx.com/2018/09/11/esp32-arduino-web-server-serving-jquery/

Post a Comment for "Esp-02 Can Upload Web Server Sketch"