OK donc maintenant on a dans le système de fichier de la mémoire flash un petit fichier HTML.
c'était pas si dur que cela, n'est-ce pas? en gros on met dans le répertoire data du sketch ce que l'on veut envoyer côté SPIFFS et on utilisera le menu pour le charger... simple !
Ecrivons un bout de code qui va nous permettre de le voir dans un navigateur web
Pour cela il nous faudra utiliser les fonctions de la libraire SPIFFS et donc notre code doit contenir un
#include "FS.h"
Vous pouvez lire sur cette page les commandes (comme begin() open(), rename() etc ) proposées par la librairie
Mettez le code suivant dans votre sketch en adaptant le SSID et le mot de passe à votre réseau Wi-Fi personnel
#include "FS.h" // pour le SPIFFS
const char * nomDeFichier = "/hello.html";
// provient de https://github.com/esp8266/Arduino
// télécharger et installer à la main la dernière version
#include <ESP8266WiFi.h>
const char* ssid = "*****"; // <<--- METTRE ICI VOTRE NOM RESEAU WIFI
const char* password = "*******"; // <<--- METTRE ICI VOTRE MOT DE PASSE WIFI
const uint16_t HTTPPort = 80;
WiFiServer serveurWeb(HTTPPort); // crée un serveur sur le port HTTP standard
void printHTTPServerInfo()
{
Serial.print(F("Site web http://")); Serial.print(WiFi.localIP());
if (HTTPPort != 80) {
Serial.print(F(":"));
Serial.print(HTTPPort);
}
Serial.println();
}
void testRequeteWeb()
{
boolean currentLineIsBlank = true;
WiFiClient client = serveurWeb.available();
if (!client) return; // pas de client connecté
while (client.connected()) {
if (client.available()) {
// on lit toute la trame HTPP, ici sans se soucier de la reqête
char c = client.read();
if (c == '\n' && currentLineIsBlank) { // une requête HTTP se termine par une ligne vide
// ON GENERE LA PAGE WEB
// On envoie un en tête de réponse HTTP standard
client.println(F("HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n"));
if (SPIFFS.exists(nomDeFichier)) {
File pageWeb = SPIFFS.open(nomDeFichier, "r");
client.write(pageWeb);
pageWeb.close();
} else {
Serial.println(F("Erreur de fichier"));
}
// on sort du while et termine la requête
break;
}
if (c == '\n') currentLineIsBlank = true;
else if (c != '\r') currentLineIsBlank = false;
} // end if available
} // end while
delay(1);
client.stop(); // termine la connexion
}
void setup() {
Serial.begin(74880); // parce que mon Wemos et par défaut à peu près à cette vitesse, évite les caractères bizarre au boot
Serial.println("\n\nTest SPIFFS\n");
// on démarre le SPIFSS
if (!SPIFFS.begin()) {
Serial.println("erreur SPIFFS");
while (true); // on ne va pas plus loin
}
WiFi.begin(ssid, password);
Serial.println();
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.write('.');
}
Serial.println();
// on démarre le serveur
serveurWeb.begin();
printHTTPServerInfo();
}
void loop() {
testRequeteWeb();
}
La fonction testRequeteWeb() se met en attente d'un client web, quand elle en a un elle se met en attente de la requête HTPP qui se termine par une ligne vide (dans ce code on ne fait rien d'autre qu'attendre cette ligne vide) et une fois qu'on a eu la ligne vide on a ce bout de code tout simple à comprendre:
// On envoie un en tête de réponse HTTP standard
client.println(F("HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n"));
if (SPIFFS.exists(nomDeFichier)) {
File pageWeb = SPIFFS.open(nomDeFichier, "r");
client.write(pageWeb);
pageWeb.close();
dans un premier temps on envoie un petit en-tête HTTP correct, puis on ouvre le fichier en lecture et si ça a fonctionné alors on l'envoie directement au client et on referme le fichier, puis on sort du while et on termine la connexion.
Compilez et chargez ce code dans votre ESP. La console Série, que vous avez pris soin de régler à 74880 bauds va vous afficher
```
ets Jan 8 2013,rst cause:2, boot mode:(3,6)
load 0x4010f000, len 1384, room 16
tail 8
chksum 0x2d
csum 0x2d
v303a71de
~ld
Test SPIFFS
...
Site web http://192.168.1.46
```
Prenez un navigateur web, tapez l'URL du site web http://192.168.1.46 que vous pouvez lire dans la console... et magie, notre page web est envoyée.
Voilà une première bonne chose de faite ! vous pouvez essayer avec des pages web plus importantes, vous verrez que ça va assez vite et c'est beaucoup mieux que d'avoir des client.print() comme on les trouve dans les sketches d'exemple