Niveau:3
Introduction:
Nous allons maintenant utiliser la fonctionnalité SPIFFS (SPI Flash File System). Cette fonctionnalité vous permet d’accéder à la mémoire flash de lire , écrire dans les fichiers, et créer des dossiers. Nous pourrons mettre à jour notre client web plus facilement, et nous embarquerons le script jscolor en le compressant.
Configuration et paramétrages de l’IDE Arduino pour ESP01:
La version de mon ESP01 possède que 512KB de mémoire. Nous allons réservé 64KB pour la fonctionnalité SPIFFS; pour cela, choisir dans la liste une répartition de la mémoire avec 64K en SPIFFS.
Pour charger le client web depuis l’IDE, nous allons ajouter la fonctionnalité ESP8266 Sketch Data Upload. Pour cela, télécharger depuis le site suivant https://githhttps://github.com/esp8266/arduino-esp8266fs-plugin/releases ou ESP8266FS-0.5.0.zip.
Remarque: Cette version fonctionne avec le SDK 2.6 qui est compatible avec esptool.py écrit en Python 3.
Décompresser l’archive et installer le fichier esp8266fs.jar à l’emplacement : <home_dir>/Arduino/tools/ESP8266FS/tool/esp8266fs.jar
Redémarrer l’IDE. Maintenant vous avez la fonctionnalité dans le menu.
Modification de notre programme afin d’utiliser la mémoire SPIFFS:
Ajouter la déclaration de la bibliothèque fs.h.
#include <FS.h> // Inclusion bibliothèque SPIFFS
Supprimer les déclarations pour le client web.
extern const char index_html[]; extern const char main_js[];
Ajouter la déclaration des variables globales suivantes:
String getContentType(String filename); // convert the file extension to the MIME type bool handleFileRead(String path); // send the right file to the client (if it exists)
Dans le sous programme setup (void setup()). Supprimer les lignes ci-dessous:
server.on("/", srv_handle_index_html); server.on("/main.js", srv_handle_main_js); server.onNotFound(srv_handle_not_found);
Et ajouter en dessous de wifi_setup();
SPIFFS.begin(); // Start the SPI Flash Files System
puis en dessous de Serial.println(« Serveur HTTP initialisé »);
server.onNotFound([]() { // If the client requests any URI if (!handleFileRead(server.uri())) // send it if it exists server.send(404, "text/plain", "404: Not Found"); // otherwise, respond with a 404 (Not Found) error });
Nous allons maintenant ajouter sous webserver Functions les sous-programmes permettant d’utiliser les fonctionnalités de la bibliothèques FS.
/* ##################################################### # Webserver Functions ##################################################### */ String getContentType(String filename) { // convert the file extension to the MIME type 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(".ico")) return "image/x-icon"; else if (filename.endsWith(".gz")) return "application/x-gzip"; return "text/plain"; } bool handleFileRead(String path){ // send the right file to the client (if it exists) Serial.println("handleFileRead: " + path); if(path.endsWith("/")) path += "index.html"; // If a folder is requested, send the index file String contentType = getContentType(path); // Get the MIME type String pathWithGz = path + ".gz"; if(SPIFFS.exists(pathWithGz) || SPIFFS.exists(path)){ // If the file exists, either as a compressed archive, or normal if(SPIFFS.exists(pathWithGz)) // If there's a compressed version available path += ".gz"; // Use the compressed version File file = SPIFFS.open(path, "r"); // Open the file size_t sent = server.streamFile(file, contentType); // Send it to the client file.close(); // Close the file again Serial.println(String("\tSent file: ") + path); return true; } Serial.println(String("\tFile Not Found: ") + path); return false; // If the file doesn't exist, return false }
Puis supprimer les sous programme suivants:
void srv_handle_not_found() { server.send(404, "text/plain", "File Not Found"); } void srv_handle_index_html() { server.send_P(200,"text/html", index_html); } void srv_handle_main_js() { server.send_P(200,"application/javascript", main_js); }
Gestion du client web et des répertoires:
Dans le répertoire de votre projet, créer un sous répertoire data.
Déplacer index.html.cpp et main.js.cpp dans le répertoire data. Renommer les deux fichiers en supprimant l’extension .cpp. Editer chacun des fichiers pour supprimer les lignes ci-dessous:
Dans le fichier index.html
#include <pgmspace.h> char index_html[] PROGMEM = R"=====(
Dans le fichier main.js
#include <pgmspace.h> char main_js[] PROGMEM = R"=====(
et
)=====";
Compression de jscolor.js pour le client web.
Télécharger jscolor2.0.4 http://jscolor.com/release/latest.zip ou ici.
Décompresser l’archive. Puis aller sur le site http://cnvyr.io/online pour compresser le script en fichier GZ. Ouvrir avec un éditeur le fichier jscolor.min.js et copier le contenu; puis le coller sur le site pour le compresser.
Faire un clique sur sumbit, puis download. Renomer le fichier en jscolor.js.gz. Voici mon fichier jscolor.js.gz
Mettre le fichier dans le répertoire data.
Ajout de notre icone pour qu’il s’affiche dans le navigateur. source de l’icone https://icon-icons.com/fr/ . Voici mon fichier favicon.ico
Mettre le fichier dans le répertoire data.
Editer le fichier index.html pour remplacer la ligne suivante:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
par
<script type="text/javascript" src="jscolor.js"></script>
Transfert du programme et du client web:
Téléverser le programme.
Faire un reset et transférer le client web avec la fonction ESP8266 Sketch Data Upload.
Voici l’ensemble du projet:esp8266_webinterface_1.4.0.zip