jquery #28

medic00 · 2021-04-17T18:22:08Z

medic00
Apr 17, 2021

How add jquery-1.10.2.js localy(Without Internet access)?

Apr 17, 2021

You can take the same technique as the code I provided to you in another thread. #26
However, another approach based on the same idea is needed to implement it. Because jQuery.js script code is too big to handle in Arduino's String class. To properly read JQuery.js as a local resource from ESP32's SPIFFS and return it to the client, use the streamFile function of the ESP32's WebServer class.

To deploy the JQuery library on the client browser, the HTML headers commonly written are: and you will follow them as well.

<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <!-- Access to ESP32 localhost:js/jquery.min.js -->
  <script src='js/…

View full answer

Hieromon · 2021-04-17T22:06:50Z

Hieromon
Apr 17, 2021
Maintainer

You can take the same technique as the code I provided to you in another thread. #26
However, another approach based on the same idea is needed to implement it. Because jQuery.js script code is too big to handle in Arduino's String class. To properly read JQuery.js as a local resource from ESP32's SPIFFS and return it to the client, use the streamFile function of the ESP32's WebServer class.

To deploy the JQuery library on the client browser, the HTML headers commonly written are: and you will follow them as well.

<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <!-- Access to ESP32 localhost:js/jquery.min.js -->
  <script src='js/jquery.min.js'></script>
</head>

That is, you can trap the client's access to js/jquery.js, then read js/jquery.js from SPIFFS, and return it to deploy JQuery without an internet connection, and you can implement all of them using the equipped functions of ESP32 WebServer class, excluding PageBuilder.

Place JQuery.js in SPIFFS
Download JQuery-1.10.2.zip to your PC, and expand it. Obtain jquery.min.js and place it in the data/js/jquery.js of your sketch data folder.
```
<Your sketch folder>
 |
 +-Sketch.ino
 |
 +-<data>
    |
    +-<js>
       |
       +-jquery.min.js
```
Upload the data folder to ESP32 SPIFFS
Launch Arduino IDE, select ESP32 Sketch Data Upload from Tool menu. Now, your ESP32 module has jquery.min.js on SPIFFS.

Sketching

3.1. Trap accessing to js/jquery.js
It is efficient to use the Page not found Handler of WebServer class to trap access from clients other than HTML pages. Since SPIFFS is a local resource for the WebServer class, The sketch can read resources from SPIFFS that have no on-handler registered using the page not found handler.

void handleResource(void) {
  // Get the resource URI
  String path = server.uri();
  // Confirm existence the resource
  if (SPIFFS.exists(path)) {
    // Read the file and return it to the client
    File file = SPIFFS.open(path, "r");
    // Cache on the client side
    server.sendHeader("Cache-Control", "public, max-age=86400");
    // Returns the resource
    server.streamFile(file, getContentType(path));
    file.close();
  }
  else {
    server.send(404, "text/plain", path + String(" not found"));
  }
}

3.2 Content type determination
To do this, assume the MIME type from the extension of the request file. (This logic is part of what you wanted in another topic)

String getContentType(String filename) {
  if(server.hasArg("download")) return "application/octet-stream";
  else if(filename.endsWith(".htm")) return "text/html";
  else if(filename.endsWith(".html")) return "text/html";
  else if(filename.endsWith(".css")) return "text/css";
  else if(filename.endsWith(".js")) return "application/javascript";
  else if(filename.endsWith(".png")) return "image/png";
  else if(filename.endsWith(".gif")) return "image/gif";
  else if(filename.endsWith(".jpg")) return "image/jpeg";
  else if(filename.endsWith(".ico")) return "image/x-icon";
  else if(filename.endsWith(".xml")) return "text/xml";
  else if(filename.endsWith(".pdf")) return "application/x-pdf";
  else if(filename.endsWith(".zip")) return "application/x-zip";
  else if(filename.endsWith(".gz")) return "application/x-gzip";
  return "text/plain";
}

3.3 The main
If the requested page handler is not registered when accessing the WebServer class, the not found handler will work. If the sketch reads its page content from SPIFFS, it is possible to place all static resources on SPIFFS that do not need to be changed dynamically.

#include <Arduio.h>
#include <WiFi.h>
#include <WebServer.h>
#include <FS.h>
#include <SPIFFS.h>

WebServer server;

String getContentType(String filename) {
...
}

void handleResource(void) {
...
}

void setup() {
  SPIFFS.begin(true);
  ...
  // Register the resource handler
  server.onNotFound(handleResource);
  // Start Web Server
  server.begin();
  ...
}
...

As you can see, your problem has nothing to do with PageBuilder, it's just a matter of using the WebServer class. In order to use the WebServer class properly, the user needs to learn the basics of HTTP and the programming design to realize the client-server model.
And the right subject to learn it is FSBrowser.ino, as I said.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

jquery #28

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

jquery #28

medic00 Apr 17, 2021

Replies: 1 comment

Hieromon Apr 17, 2021 Maintainer

medic00
Apr 17, 2021

Hieromon
Apr 17, 2021
Maintainer