Flashage OTA et système de fichiers sur l’ESP-01

Pour réaliser cette manipulation, nous n’aurons pas besoin de casser la tirelire, seuls les trois modules suivants étant indispensables :

Matériel	Description
	ESP-01 : microcontrôleur ESP8266EX ; fréquence CPU : 80 MHz ; fréquence flash : 40 MHz ; mémoire flash externe : 958 448 ko ; mémoire dynamique : 81 920 ko ; alimentation : 3,3 V ; GPIO en mode UART : 2 ; GPIO en mode OTA : 3.
	Brochage de l’ESP-01 VCC : 3,3 V ; GND : 0 V (masse) ; GPIO 1 : GPIO + U0TXD ⟶ Fonction transmission UART pendant le flashage ; GPIO 3 : GPIO + U0RXD ⟶ Fonction réception UART pendant le flashage ; EN : CHIP-EN ⟶ Activation du chip : état haut = chip actif, état bas = chip inactif, la broche doit être connectée ; RST : EXT_RSTB ⟶ Réinitialisation : état normal niveau haut (pull up), niveau bas pour réinitialiser ; GPIO 0 : GPIO + doit être maintenue à l’état bas pendant le flashage ; GPIO 2 : GPIO. Note : le document technique recommande d’utiliser EN plutôt que RST pour la réinitialisation.
	Adaptateur USB↔UART pour ESP-01 : chip CH340 ; switch mode programmation / mode standard ; alimentation : 5 V (USB) ; niveau logique : 3,3 V.
	DHT22 : alimentation : 3,3 V à 6,0 V ; sortie numérique sur bus 1 conducteur ; échelle de mesure : température : -40 à +80 °C, humidité relative : 0 à 100 % ; précision : température : ± 0,5 °C, humidité relative : ± 5 % ; résolution : température : 0,1 °C, humidité relative : 0,1 %.

Une fois l’OTA mise en place, vous devrez bien sûr ajouter les éléments propres à votre projet, tout comme vous l’auriez fait sans cette technique.

Pour information, voici les trois versions de l’ESP-01 actuellement disponibles sur le marché :

Pour suivre ce tutoriel, il vous faudra :

• l’EDI Arduino version 1.6.8 ou plus récente (version actuelle : 1.8.12) ;
• le gestionnaire de carte ESP8266 installé : si ce n’est pas encore le cas, le tutoriel Débuter avec le module WiFi ESP8266 vous indiquera la marche à suivre (version actuelle : 2.6.3) ;
• l’interpréteur Python 3 installé sur votre système (version actuelle : 3.8.2) : sous Linux, Python est installé d’origine. Si vous êtes sous Mac OSX® ou Windows® et que python 3 n’est pas installé, rendez-vous sur la page de téléchargement concernée, respectivement ici et là.

Il vous faut également expliquer à l’EDI que vous allez travailler avec un ESP8266EX :

Comme il n’y a pas d’item spécifique pour le module ESP-01, vous devrez opter pour la configuration générique ESP8266 (attention à ne pas confondre avec l’ESP8285).

Le microcontrôleur ESP8266EX qui équipe le module ESP-01 ne possède pas de mémoire flash interne. En cela, d’ailleurs, l’appellation « microcontrôleur » n’est pas justifiée, car un microcontrôleur incorpore, en théorie, une mémoire programme statique sous forme de PROM, EEPROM ou, plus récemment, de mémoire flash. On va malgré tout continuer à l’appeler comme ça. Ce microcontrôleur n’a pas été conçu, à l’origine, pour être autonome, mais plutôt pour apporter la fonctionnalité Wifi à d’autres systèmes. Le voici, par exemple, implémenté par Arduino sur la carte UNO WiFi :

Pour acquérir cette autonomie, ce qui se justifie au regard de ses possibilités intrinsèques, il faut lui adjoindre de la mémoire non volatile pour stocker un programme. On utilise pour cela un chip mémoire flash série, comme le M25P10, avec lequel il communiquera via un bus SPI, ce protocole étant totalement transparent pour l’utilisateur final.

L’ESP8266EX peut gérer théoriquement jusqu’à 16 Mio de mémoire flash. Cela ne dépend que de la capacité du chip mémoire auquel il est connecté. En ce qui concerne l’ESP-01, comme vu plus haut, trois versions sont disponibles : une avec 512 Kio et deux avec 1 Mio ; dont seules les versions implémentant 1 Mio seront utilisables ici.

J’utilise personnellement la version 1 Mio qui dispose d’un voyant d’alimentation pour les raisons vues plus haut, mais c’est affaire de choix.

Tout est logiciel, il n’y a rien de figé dans l’organisation de la mémoire flash et l’on peut donc imaginer nombre de structures différentes : cela demande toutefois du savoir-faire et du travail. Heureusement, des développeurs compétents nous ont concocté des bibliothèques qui s’occupent de tout ça. Ils nous laissent même la possibilité de configurer, dans une certaine mesure, la répartition de cette mémoire pour l’adapter au mieux à nos projets en jouant sur la quantité de mémoire allouée au sketch et au système de fichiers.

Nous disposons théoriquement de 1 Mio de mémoire flash. En réalité, un espace est réservé à partir de l’adresse 0xFB000, ce qui rend les vingt derniers kilooctets inexploitables par l’utilisateur final (que nous sommes). Ils sont en fait utilisés par des fichiers de configuration et des programmes « système » destinés entre autres à gérer la Wifi. Il nous reste donc environ 1004 Kio à répartir entre le sketch et un système de fichiers.

Comme nous l’avons vu, en ce qui concerne le sketch, il faut réserver au moins deux fois sa taille, car il y en aura toujours deux versions dans la mémoire flash. Quant au système de fichiers, tout dépend de l’utilisation que l’on veut en faire. Cela peut aller de zéro octet si on n’en a pas besoin, et dans ce cas le sketch peut occuper jusqu’à 502 Kio (1004 / 2), jusqu’à 512 Kio, et dans ce cas le sketch ne devra pas excéder 246 Kio ((1004 – 512) / 2).

Bien que nous n’utilisions pas, dans l’immédiat, le système de fichiers, nous garderons la configuration par défaut : elle privilégie la place accordée au sketch, mais réserve suffisamment de place pour notre utilisation future de ce système de fichiers. Cela dit, à part la configuration vue ci-dessus, toutes les autres sont utilisables sans risque particulier. Il faut bien remarquer que même la configuration qui réserve 256 Kio pour le système de fichiers laisse malgré tout environ 124 Kio pour le sketch, déduction faite de la place occupée par les bibliothèques ESP8266EX, qu’il faut comparer aux 32 Kio de l’Arduino UNO. Il y a donc de quoi travailler sans trop se poser de question.

La capture suivante montre le paramétrage proposé par défaut dans l’EDI, à savoir 64 Kio de mémoire réservée au système de fichiers, et ~470 Kio de mémoire programme utilisable, soit ~940 Kio (470 × 2). Comme on l’a vu, cette quantité de mémoire réservée au sketch actif peut ne pas être une limite absolue étant donné que le sketch téléchargé est compressé.

Vous avez peut-être remarqué que j’ai augmenté la vitesse de téléversement par rapport à sa valeur par défaut. Comme cela, je gagne un peu de temps, mais dans la mesure où les téléversements suivants sont censés être effectués en OTA, ce n’est pas vraiment nécessaire.

Voici, par exemple, à quoi peut ressembler la mémoire de L’ESP-01 après téléversement de notre sketch :

Pour des raisons de lisibilité des textes, l’échelle n’est pas respectée, mais le principe est là :

• la compilation de sketch.ino engendre le fichier sketch.bin ;
• sketch.bin est compressé pour donner sketch.bin.gz ;
• sketch.bin.gz est téléversé dans la deuxième moitié de la mémoire programme puis vérifié à l’aide d’une somme de contrôle ;
• si la vérification est positive, sketch.bin.gz est décompressé à l’adresse 0x0000 et le programme démarre.

La gestion de l’OTA est purement logicielle. Voici donc le sketch minimal permettant d’initialiser cette gestion :

#include <ArduinoOTA.h>

const char* ssid = "identité_du_routeur";  // Généralement, "routeur" = "box"
const char* password = "mot_de_passe_du_routeur";

void setup() 
{
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  while (WiFi.waitForConnectResult() != WL_CONNECTED) 
  {
    delay(1000);
    ESP.restart();
  }
  ArduinoOTA.begin();
}

void loop()
{
  ArduinoOTA.handle();
}

C’est tout. Je ne sais pas ce que vous en pensez, mais il est difficile de faire plus simple. La bibliothèque ArduinoOTA s’occupe de tout, notamment de charger les bibliothèques dont on a besoin. Les étapes sont les suivantes :

• importation de la bibliothèque ArduinoOTA ;
• fourniture des « identifiant et mot de passe » pour la connexion Wifi au routeur (box), comme pour connecter une tablette ;
• lancement de la procédure de connexion : cette procédure est répétée toutes les secondes jusqu’à ce que la connexion soit établie ;
• démarrage du service OTA ;
• utilisation des routines OTA dans la boucle principale (loop()).

Si l’on fait abstraction du code concernant la connexion Wifi proprement dite, la mise en place de l’OTA ne demande que trois lignes.

Téléversez ce code et attendez… Enfin non, n’attendez pas trop quand même. Il ne va rien se passer.

Regardez la console en bas de l’EDI :

On vous demande de faire un « reset » physique « via RTS pin » (RST pin peut-être) pour que les changements soient pris en compte. Comme il n’y a pas de bouton reset implémenté sur l’ESP-01, on fait ça à la hussarde : on débranche et on rebranche.

Maintenant, vous pouvez patienter quelques secondes sans perdre inutilement votre temps : si tout s’est bien passé, vous constaterez, en déroulant le menu « Outils ⇨ Port », l’apparition d’une nouvelle catégorie de ports intitulée « Ports réseau », et un nouvel item dans cette catégorie : il s’agit, vous vous en doutez, du port que vous allez utiliser pour faire vos mises à jour OTA. Son nom est constitué du numéro d’identification de votre ESP8266, que vous connaissez déjà grâce au sketch info-esp.ino, et de l’adresse IP que lui a attribuée le routeur sur le réseau.

Si vous ne pouvez pas changer l’adresse IP, qui est laissée à la seule initiative du routeur, vous pouvez par contre personnaliser la partie identification, de manière à retrouver plus facilement l’ESP concerné par le sketch en cours dans l’EDI, dans le cas où vous en auriez plusieurs de connectés.

Il vous suffira de saisir la ligne suivante avant la ligne ArduinoOTA.begin(); :

ArduinoOTA.setHostname("Bureau");

« Bureau » étant bien entendu un exemple. Dans ce cas, l’intitulé du port devient Bureau at 192.168.1.37.

Comme nous n’avons pas encore téléversé de sketch, à part bien sûr celui concernant la mise en place de l’OTA, ce que nous allons faire maintenant n’est pas, stricto sensu, une mise à jour. Cependant, en pratique, il n’y a aucune différence.

Le code vu dans le chapitre précédent fera à présent toujours partie de votre sketch. La mise en place doit impérativement être renouvelée à chaque écriture, car le code en cours va être écrasé par le nouveau, avec toutes ses fonctionnalités, y compris l’OTA.

Ce code a été une première fois envoyé via la liaison série, c’était la seule disponible, et il va à partir de maintenant être acheminé via l’OTA puisque celle-ci est opérationnelle. Si vous l’oubliez, votre mise à jour fonctionnera, mais vous ne bénéficierez plus de l’OTA. Ce n’est pas dramatique dans la mesure où on peut recommencer la manipulation en utilisant le port série, mais si ça vous impose un démontage de l’ESP, c’est ennuyeux. Ce n’est pas le but de la manœuvre.

Pour que l’on parle bien de la même chose, maintenant que vous avez le « squelette » OTA en place (que vous pouvez d’ailleurs sauvegarder dans un fichier appelé par exemple template‑ota.ino), le mot sketch ne concernera plus que ce que vous auriez écrit si vous n’utilisiez pas l’OTA. Et en l’occurrence, vous écrirez vos sketchs exactement comme d’habitude.

Pour faire simple et pour revenir à la tradition, nous allons faire clignoter une LED. Réalisez le montage suivant, ou du moins quelque chose d’analogue :

et téléversez le code que voilà :

/***** Include et  déclarations OTA ***********************/
#include <ArduinoOTA.h>
const char* ssid = "identité_du_routeur";
const char* password = "mot_de_passe_du_routeur";
/**********************************************************/

// Déclarations du sketch
int led = 2;
unsigned long reference = 0;

void setup()
{
  // Setup du sketch
  pinMode(led, OUTPUT);



  /***** Setup OTA ****************************************/
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  while (WiFi.waitForConnectResult() != WL_CONNECTED)
  {
    delay(1000);
    ESP.restart();
  }
  ArduinoOTA.begin();
  /********************************************************/
}


void loop()
{
  /***** Procédure OTA ************************************/
  ArduinoOTA.handle();
  /********************************************************/

  // Sketch
  unsigned long instant = millis();
  if (instant - reference >= 500)
  {
    reference = instant;
    digitalWrite(led,  ! digitalRead(led));
  }
}

Si votre LED est bien élevée, elle devrait clignoter.

Ne soyez pas étonné si le résultat n’est pas immédiat. Le code que vous venez de téléverser doit d’abord être vérifié puis, seulement si le résultat est conforme, il va être décompressé à la place de l’ancienne version. Ces opérations prennent du temps. Prévoyez environ vingt-cinq secondes.

Dans la capture suivante, les zones grisées représentent le code auquel vous ne devez pas toucher, du moins si vous désirez conserver les fonctionnalités OTA. Vous ne vous en occupez plus : il fait partie des meubles. Pour le reste, vous faites ce que vous voulez.

On peut s’interroger quant à la possibilité d’utiliser la WiFi dans nos sketchs, alors qu’on sait qu’elle est utilisée par l’OTA : c’est évidemment possible, heureusement. L’OTA ne vous limite en rien, et mis à part les quelques lignes nécessaires à son fonctionnement, vous n’avez rien à changer à vos habitudes de travail.

Voici par exemple un sketch permettant de télécommander l’allumage d’une LED depuis un navigateur, adapté librement, pour l’OTA, du sketch « WiFiManualWebServer.ino » que vous trouverez dans le menu Fichier ⇨ Exemples ⇨ ESP8266WiFi. Ce sketch utilise le même montage que le sketch précédent.

/***** Include et  déclarations OTA ***********************/
#include <ArduinoOTA.h>
const char* ssid = "identité_du_routeur";
const char* password = "mot_de_passe_du_routeur";
/**********************************************************/

// Déclarations du sketch

WiFiServer serveur(80);

const int led = 2;
const int ledTx = 1;


void setup()
{
  // Setup du sketch
  pinMode(ledTx, OUTPUT);
  digitalWrite(ledTx, HIGH);

  /***** Setup OTA ****************************************/
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  while (WiFi.waitForConnectResult() != WL_CONNECTED)
  {
    delay(1000);
    ESP.restart();
  }
  ArduinoOTA.begin();
  /********************************************************/

  serveur.begin();
  
  // La led émet 5 flashes pour avertir de la fin de la mise à jour
  for (int i = 0; i < 5; i++)
  {
    digitalWrite(ledTx, LOW);
    delay(100);
    digitalWrite(ledTx, HIGH);
    delay(300);    
  }
}


void loop()
{
  /***** Procédure OTA ************************************/
  ArduinoOTA.handle();
  /********************************************************/

  // Sketch
  WiFiClient client = serveur.available();
  if (!client) return;
  client.setTimeout(1000);
  String reception = client.readStringUntil('\r'); // On ne lit que la première ligne
  while (client.available()) client.read(); // puis on vide le buffer
  // On traite la requête  
  if (reception.indexOf(F("?ON")) != -1) digitalWrite(led, HIGH);
  else digitalWrite(led, LOW);
  // On envoie la réponse
  client.println(F("HTTP/1.1 200 OK"));
  client.println(F("Content-Type: text/html"));
  client.println("");
  client.println(F("<!DOCTYPE HTML>"));
  client.println(F("<html>\n"));
  client.println(F("<meta charset='utf-8'/>\n"));
  client.println(F("<body>"));
  client.print(F("\t<p>La LED est "));
  if (digitalRead(led) == HIGH) client.print(F("allumée !"));
  else client.print(F("éteinte !"));
  client.println("</p>");
  client.print(F("\t<p>Cliquez <a href='?ON'>ici</a> pour allumer la LED, ou <a href='?OFF'>ici</a> pour l'éteindre.</p>"));
  client.println(F("</body>\n"));
  client.print(F("</html>"));
}

  for (int i = 0; i < 5; i++)
  {
    digitalWrite(ledTx, LOW);
    delay(100);
    digitalWrite(ledTx, HIGH);
    delay(300);    
  }

• La durée d’une mise à jour peut facilement dépasser les trente secondes. Elle commence avec la compilation, puis continue avec la compression, le téléversement, la vérification, la décompression et le redémarrage. Soyez patient.
• Quand vous effectuez une mise à jour OTA, votre module peut très bien, et c’est l’intérêt, être en fonction en dehors de votre environnement immédiat : vous ne savez donc pas forcément ce qu’il est en train de faire. Or, l’exécution du programme en cours peut être interrompue pendant quelques dizaines de secondes, en fonction de la taille du code. Si le traitement de l’action en cours dépend de cette exécution, il peut être judicieux de veiller soit à l’achèvement préalable de cette action si elle est critique, soit à la reprise de son traitement par la nouvelle version au lancement de celle-ci.

• Utilisation de la broche GPIO 1 :

  • son usage standard est la connexion Tx de l’UART ;
  • la LED intégrée est reliée à cette sortie, mais ne peut pas être invoquée en tant que LED_BUILTIN. On y accède avec son numéro GPIO (1). À noter qu’elle est allumée à l’état bas ;
  • la broche en elle-même ne semble pas utilisable en tant que broche GPIO.

• Utilisation du reset matériel (mise à l’état bas de la broche RST) :

  • déconseillé par Espressif au profit de l’utilisation de la broche EN ;
  • à proscrire en cas d’utilisation de l’OTA : le chip ne redémarre pas.
• Broche EN : pour un fonctionnement standard du module, la broche EN doit être maintenue à l’état haut (3,3 V). En positionnant cette broche à l’état bas, on met le microcontrôleur à l’état de veille, c’est-à-dire en état de consommation minimale d’énergie. Le déroulement du programme est arrêté. Cette broche ne doit pas rester « en l’air », et sera donc généralement connectée au VCC par l’intermédiaire d’une résistance de tirage (typiquement 10 kΩ), ce qui permettra la mise à la masse à l’aide d’un bouton en cas de besoin (reset).

Je cite le système de fichiers SPIFFS (SPI Flash File System) pour la forme, car nous ne l’utiliserons pas. Il fonctionne très bien et est parfaitement adapté aux espaces mémoire et aux fichiers de taille réduite en raison de la petite taille de ses clusters (256 octets). De plus, c’est le système de fichiers « historique » et c’est celui que j’utilise (ou du moins que j’utilisais jusqu’à présent). Malheureusement, son évolution est en stand by et il va probablement être supprimé dans les prochaines versions du gestionnaire de cartes ESP8266, au profit du système LittleFS plus performant et activement maintenu. Il est donc préférable, pour des raisons de pérennité, de passer au petit nouveau.

Réputé pour être plus rapide que le SPIFFS dans la plupart des cas, il implémente en outre une véritable arborescence avec gestion des répertoires. Son inconvénient majeur pour l’utilisation dans une configuration modeste, comme celle de l’ESP-01, est la taille de ses clusters : 4 kio. À part ça, son utilisation est pratiquement identique à celle du SPIFFS et le passage de l’un à l’autre ne pose aucun problème.

VI-B-1. Installation de ESP8266LittleFS▲

Il va falloir, dans un premier temps, « installer » l’outil de téléversement du système de fichiers dans l’EDI Arduino. Je mets « installer » entre guillemets, car il s’agit en réalité d’une simple copie de fichier dans un répertoire spécifique.

Commencez dans un premier temps par télécharger sur Github la dernière version du fichier ESP8266LittleFS-x.y.z, actuellement ESP8266LittleFS-2.6.0, puis décompressez-la dans le répertoire /tools qui se trouve dans la racine du répertoire d’installation de l’EDI Arduino que vous utilisez. Si ce répertoire (/tools) n’existe pas, ce qui peut être le cas si vous n’avez pas encore installé d’outil externe, créez-le.

N’hésitez pas à vérifier ici que la procédure d’installation n’a pas changé, on ne sait jamais.

Vous devriez obtenir une arborescence de ce genre :

/home/user/../arduino-1.8.12/tools/ESP8266LittleFS/tool/esp8266littlefs.jar

en admettant que le répertoire de votre version courante d’Arduino s’appelle /arduino‑1.8.12. Lors de futures mises à jour, il vous suffira de remplacer le fichier esp8266littlefs.jar par la nouvelle version.

Ouvrez l’EDI Arduino ou relancez-le s’il était déjà ouvert puis déroulez le menu « Outils ». L’entrée ESP8266 LittleFS Data Upload doit s’y trouver :

Vous pouvez remarquer, juste en dessous, l’entrée ESP8266 Sketch Data Upload qui correspond au même outil, mais pour le système de fichiers SPIFFS.

VI-B-2. Téléversement des fichiers▲

Commencez par réaliser ce montage (ou un montage équivalent) :

À l’emplacement qui vous conviendra le mieux, créez le dossier /meteo. Dans ce dossier, créez un fichier texte vide, nommez-le meteo.ino et copiez dedans le sketch suivant :

/***** Include et  déclarations OTA ***********************/
#include <ArduinoOTA.h>
const char* ssid = "Identification du routeur (box)";
const char* password = "Mot de passe du routeur (box)";
/**********************************************************/


// includes et déclarations du sketch

#include "LittleFS.h"
#include "DHT.h"

#define DHTTYPE DHT22

unsigned long reference = 0;
const byte ledBuiltIn = 1;
const byte brocheDHT = 2;
float hygrometrie = 0.0;
float temperature = 0.0;

DHT capteurDHT(brocheDHT, DHTTYPE);
WiFiServer serveur(80);

void setup()
{
  // Setup du sketch
  pinMode(ledBuiltIn, OUTPUT);
  digitalWrite(ledBuiltIn, HIGH);
  LittleFS.begin();
  capteurDHT.begin();

  /***** Setup OTA ****************************************/
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  while (WiFi.waitForConnectResult() != WL_CONNECTED)
  {
    delay(1000);
    ESP.restart();
  }
  ArduinoOTA.begin();
  /********************************************************/

  serveur.begin();
  // La led clignote 5 fois pour avertir de la fin de la mise à jour
  for (int i = 0; i < 5; i++)
  {
    digitalWrite(ledBuiltIn, LOW);
    delay(200);
    digitalWrite(ledBuiltIn, HIGH);
    delay(200);    
  }
}


void loop()
{
  /***** Procédure OTA ************************************/
  ArduinoOTA.handle();
  /********************************************************/

// Sketch
  /* Récupération des données issues du capteur DHT22 */
  
  unsigned long instant = millis();
  if (instant - reference >= 2500) // Pause entre deux mesures (ce capteur est très lent) 
  {
    hygrometrie = capteurDHT.readHumidity();
    temperature = capteurDHT.readTemperature(); // °C par défaut : (true) pour Fahrenheit
    if (isnan(hygrometrie) || isnan(temperature)) // à tout hasard
    {
      hygrometrie = 0.0;
      temperature = 0.0;
    }
    reference = instant;  
  }

  /* Implémentation du serveur */
  
  WiFiClient client = serveur.available();
  if (!client) return;
  client.setTimeout(1000);

  /* Récupération de la requête */
  
  String reception = client.readStringUntil('\r'); // On ne lit que la première ligne
  while (client.available()) client.read(); // puis on vide le tampon

  /* Traitement de la requête */  

  if (reception.indexOf("ajax?") != -1) // Si requête ajax
  {
    if (reception.indexOf("maj?") == -1) // Si pas maj
    {
      reception.replace("GET /ajax?", "");
      reception.replace("HTTP/1.1", "");
      reception.trim();
    }
    arHtml(client, "application/json");
    maj(client, hygrometrie, temperature);
  }
  else
  {
    if (reception.startsWith("GET / HTTP/1.1"))
    {
      arHtml(client, "text/html");
      envoiFichier(client, "/meteo.html");
    }
    else if (reception.indexOf("tCadran.js") != -1)
    {
      arHtml(client, "application/javascript");
      envoiFichier(client, "/tCadran.js");
    }
    else if (reception.indexOf("ajax.js") != -1)
    {
      arHtml(client, "application/javascript");
      envoiFichier(client, "/ajax.js");
    } 
    else if (reception.indexOf("thermo.js") != -1)
    {
      arHtml(client, "application/javascript");
      envoiFichier(client, "/thermo.js");
    }
    else if (reception.indexOf("hygro.js") != -1)
    {
      arHtml(client, "application/javascript");
      envoiFichier(client, "/hygro.js");
    }  
    delay(1);
  }
  client.stop();
}

// FONCTIONS

void arHtml(WiFiClient& nomClient, String type)
{
  nomClient.println(F("HTTP/1.1 200 OK"));
  nomClient.println("Content-Type: " + type +"");
  nomClient.println(F("Connection: close"));
  nomClient.println(F(""));
}

void envoiFichier(WiFiClient& nomClient, String fichierEnCours)
{
  
  if (LittleFS.exists(fichierEnCours))
  {
    File fichier = LittleFS.open(fichierEnCours, "r");
    while (fichier.available())
    {
      nomClient.write(fichier.read());
    }
    fichier.close();
  }
  else
  {
    nomClient.println("Page '" + fichierEnCours + "' introuvable...");
  }
}

void maj(WiFiClient& nomClient, float h, float t)
{
  String reponseJSON = "{";
  reponseJSON.concat("\"hygrometrie\":");
  reponseJSON.concat(h);
  reponseJSON.concat(",\"temperature\":");
  reponseJSON.concat(t);  
  reponseJSON.concat("}");
  nomClient.println(reponseJSON);
}

Pour la suite, créer le fichier toto.ino signifiera créer un fichier texte vide et le nommer toto.ino.

Toujours dans le dossier /meteo, créez le dossier /data et ouvrez-le. Dans ce dossier :

• créez le fichier meteo.htmlet copiez dedans le code suivant :

<!DOCTYPE html>

<html lang="fr">

  <head>
    <meta charset="utf-8" />
    <style>
      .cadran {padding: 15px; }
      table {border-collapse: collapse; background-color: rgb(100,100,100);}
      td {border: 1px solid rgb(80,80,80); }
    </style>
    <script src="tCadran.js"></script>
    <script src="ajax.js"></script>
    <title>Météo</title>
  </head>

  <body onload="maj()">
    <table style="padding: 15px">
      <tr>
        <td class="cadran"><canvas id="thermo"></canvas></td>
        <td class="cadran"><canvas id="hygro"></canvas></td>
      </tr>
    </table>
    <script src="thermo.js"></script>
    <script src="hygro.js"></script>
  </body>

</html>

• créez le fichier tCadran.js et copiez dedans le code suivant :

/*
  Dessin d'un cadran gradué circulaire
*/

TCadran = function (params)
{
  const DEMI_PI           = Math.PI / 2;
  const DEUX_PI           = Math.PI * 2;
  const DEB_RAD           = DEMI_PI + Math.PI / 6;
  const FIN_RAD           = DEUX_PI + DEMI_PI - Math.PI / 6;
  const LARGEUR_SECTEUR   = 16;

  var decalage = 20;
  if (this.encadrement == false) decalage = 2;

  this.idCanvas         = params.idCanvas;
  this.dimCanvas        = params.dimCanvas;
  this.mesure           = params.mesure;

  this.rayon            = this.dimCanvas / 2;
  this.centreX          = this.dimCanvas / 2;
  this.centreY          = this.dimCanvas / 2;

  this.clFondCadran     = params.clFondCadran;

  this.encadrement      = params.encadrement;
  this.clBordure        = params.clBordure;
  this.clBiseauExt      = params.clBiseauExt;
  this.clBiseauInt      = params.clBiseauInt;

  this.bandeau          = params.bandeau;
  this.valeurMini       = params.valeurMini;
  this.valeurMaxi       = params.valeurMaxi;
  this.secteurs         = params.secteurs;
  this.clGraduations    = params.clGraduations;
  this.nbPetiteGrad     = params.nbPetiteGrad;
  this.nbMoyenneGrad    = params.nbMoyenneGrad;
  this.nbGrandeGrad     = params.nbGrandeGrad;

  this.policeLegendes   = params.policeLegendes;
  this.ajustLegendX     = params.ajustLegendX;
  this.ajustLegendY     = params.ajustLegendY;

  this.titre            = params.titre;
  this.policeTitre      = params.policeTitre;
  this.posTitre         = params.posTitre;
  this.clTitre          = params.clTitre;

  this.sousTitre        = params.sousTitre;
  this.policeSousTitre  = params.policeSousTitre;
  this.posSousTitre     = params.posSousTitre;
  this.clSousTitre      = params.clSousTitre;

  this.largeurAiguille  = params.largeurAiguille;
  this.clAiguille       = params.clAiguille;
  this.largeurCentre    = params.largeurCentre;
  this.clCentre         = params.clCentre;






  this.dessineFondCadran = function(context)
  {
    context.arc(this.centreX ,this.centreY ,this.rayon, 0, DEUX_PI);
    context.fillStyle = this.clFondCadran;
    context.fill();
  };


  this.dessineEncadrement = function(context)
  {
    context.lineWidth = 2;
    context.beginPath();
    context.arc(this.centreX, this.centreY, this.rayon - 1, 0, DEUX_PI);
    context.strokeStyle = this.clBordure;
    context.stroke();

    context.lineWidth = 8;
    context.beginPath();
    context.arc(this.centreX ,this.centreY ,this.rayon - 6 , 0, DEUX_PI);
    context.strokeStyle = this.clBiseauExt;
    context.stroke();

    context.beginPath();
    context.arc(this.centreX ,this.centreY ,this.rayon - 14 , 0, DEUX_PI);
    context.strokeStyle = this.clBiseauInt;
    context.stroke();
  };


  this.dessineSecteurs = function(context)
  {
    var nbDiv = this.valeurMaxi - this.valeurMini;
    var divRad = (FIN_RAD - DEB_RAD) / nbDiv;
    for (var i = 0; i < this.secteurs.length; i++)
      {
        context.lineWidth = LARGEUR_SECTEUR;
        context.beginPath();
        context.arc(this.centreX, this.centreY, this.rayon - decalage - LARGEUR_SECTEUR / 2 , DEB_RAD + (this.secteurs[i][0] - this.valeurMini) * divRad, DEB_RAD + (this.secteurs[i][1] - this.valeurMini) * divRad);
        context.strokeStyle = this.secteurs[i][2];
        context.stroke();
      }
  };


  this.graduations = function(context, epGrad, nbGrad, lgGrad)
  {
    context.lineWidth = epGrad;
    for (var i = 0; i <= nbGrad; ++i)
    {
      context.beginPath();
      context.strokeStyle = this.clGraduations;
      var angle = (((FIN_RAD - DEB_RAD) / nbGrad) * i) + DEB_RAD;
      context.arc(this.centreX, this.centreY, this.rayon - decalage, angle, angle);
      context.arc(this.centreX, this.centreY, this.rayon - decalage - lgGrad, angle, angle);
      context.closePath();
      context.stroke();
    }
  };


  this.dessineGraduations = function (context)
  {
    this.graduations(context, 1, this.nbPetiteGrad, 7);
    this.graduations(context, 3, this.nbMoyenneGrad, 10);
    this.graduations(context, 3, this.nbGrandeGrad, 15);
  };


  this.dessineLegendes = function (context)
  {
    context.font = this.policeLegendes;
    context.fillStyle = this.clGraduations; // Même couleur que pour les graduations
    for (var i = 0; i <= this.nbGrandeGrad; ++i)
    {
      var angle = (((FIN_RAD - DEB_RAD) / this.nbGrandeGrad) * i) + DEB_RAD;
      var y = this.centreY + Math.sin(angle) * (this.rayon + this.ajustLegendY - decalage - LARGEUR_SECTEUR - 15);
      var x = this.centreX + Math.cos(angle) * (this.rayon + this.ajustLegendX - decalage - LARGEUR_SECTEUR - 15);

      context.textAlign = "center";
      var val = 10 * i + this.valeurMini;
      context.fillText(val.toString(), x, y + 5);
    }
  };


  this.dessineTitre = function(context)
  {
    context.font = this.policeTitre;
    context.fillStyle = this.clTitre;
    context.textBaseline = "middle";
    context.fillText(this.titre, this.centreX, this.posTitre);
  };


  this.dessineSousTitre = function(context)
  {
    context.font = this.policeSousTitre;
    context.fillStyle = this.clSousTitre;
    context.textBaseline = "middle";
    context.fillText(this.sousTitre, this.centreX, this.posSousTitre);
  };


  this.dessineAiguille = function (context)
  {
    var valeur = this.mesure - this.valeurMini;
    context.translate(this.centreX, this.centreY);
    context.rotate((((FIN_RAD - DEB_RAD) / (this.valeurMaxi - this.valeurMini)) * valeur) + DEB_RAD);
    context.beginPath();
    context.arc(0,  0,  this.largeurAiguille, DEMI_PI,  DEMI_PI * 3);
    context.lineTo(this.rayon - decalage - LARGEUR_SECTEUR / 2, 0);
    context.closePath();
    context.fillStyle = this.clAiguille;
    context.fill();
    context.beginPath();
    context.arc(0,  0,  this.largeurCentre, 0,  DEUX_PI);
    context.fillStyle = this.clCentre;
    context.fill();
  };


  this.dessineCadran = function()
  {
    canvas = document.getElementById(this.idCanvas);
    canvas.width = this.dimCanvas;
    canvas.height = this.dimCanvas;

    ctxA = canvas.getContext("2d");
    ctxB = canvas.getContext("2d");

    this.dessineFondCadran(ctxA);
    if (this.encadrement)
    {
      this.dessineEncadrement(ctxA);
    }
    if (this.bandeau)
    {
      this.dessineSecteurs(ctxA);
    }
    this.dessineGraduations(ctxA);
    this.dessineLegendes(ctxA);
    this.dessineTitre(ctxA);
    this.dessineSousTitre(ctxA);
    this.dessineAiguille(ctxB);
  };
};

• créez le fichier ajax.js et copiez dedans le code suivant :

const typeReq = "ajax?";
const reqMaj  = "maj?";
var requete   = "";

function maj()
{
  requete = typeReq + reqMaj;
  setInterval(requeteAjax, 1000);
}

function requeteAjax()
{
  var xhr = new XMLHttpRequest();
  xhr.open("GET", requete , true);
  xhr.send(null);
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState == 4)
        {
            actualisation(xhr.responseText);
        }
    }
}

function actualisation(reponse)
{
    var retour = JSON.parse(reponse);

  cadranThermo.mesure = retour.temperature;
  cadranThermo.dessineCadran();

  cadranHygro.mesure = retour.hygrometrie;
  cadranHygro.dessineCadran();

  requete = typeReq + reqMaj;
}

• créez le fichier thermo.js et copiez dedans le code suivant :

cadranThermo = new TCadran(
{
  idCanvas        : "thermo",
  mesure          : 22.5,
  dimCanvas       : 300,

  clFondCadran    : "#404040",

  encadrement     : true,
  clBordure       : "#808080",
  clBiseauExt     : "#EEEEEE",
  clBiseauInt     : "#BBBBBB",

  bandeau         : false,
  valeurMini      : -10,
  valeurMaxi      : 40,
  secteurs        : [[-10, 15, "#0000FF"],[15, 30, "#00DD00"],[30, 40, "#FF5000"]],
  clGraduations   : "#FFFFFF",
  nbPetiteGrad    : 50,
  nbMoyenneGrad   : 10,
  nbGrandeGrad    : 5,

  policeLegendes  : "17px Arial",
  ajustLegendX    : 0,
  ajustLegendY    : 0,

  titre           : "Thermomètre",
  policeTitre     : "italic 20px Arial",
  posTitre        : 100,
  clTitre         : "#FFFFFF",

  sousTitre       : "°C",
  policeSousTitre : "bold 20px Arial",
  posSousTitre    : 200,
  clSousTitre     : "#FFFFFF",

  largeurAiguille : 15,
  clAiguille      : "#DDDDFF",
  largeurCentre   : 25,
  clCentre        : "#BB0000"
});

• créez le fichier hygro.js et copiez dedans le code suivant :

cadranHygro = new TCadran(
{
  idCanvas        : "hygro",
  mesure          : 60,
  dimCanvas       : 300,

  clFondCadran    : "#404040",

  encadrement     : true,
  clBordure       : "#808080",
  clBiseauExt     : "#EEEEEE",
  clBiseauInt     : "#BBBBBB",

  bandeau         : true,
  valeurMini      : 0,
  valeurMaxi      : 100,
  secteurs        : [[0, 30, "#FFFF00"],[30, 70, "#00DD00"],[70, 100, "#0000FF"]],
  clGraduations   : "#FFFFFF",
  nbPetiteGrad    : 100,
  nbMoyenneGrad   : 20,
  nbGrandeGrad    : 10,

  policeLegendes  : "17px Arial",
  ajustLegendX    : 0,
  ajustLegendY    : 0,

  titre           : "Hygromètre",
  policeTitre     : "italic 20px Arial",
  posTitre        : 100,
  clTitre         : "#FFFFFF",

  sousTitre       : "%",
  policeSousTitre : "bold 20px Arial",
  posSousTitre    : 200,
  clSousTitre     : "#FFFFFF",

  largeurAiguille : 15,
  clAiguille      : "#DDDDFF",
  largeurCentre   : 25,
  clCentre        : "#BB0000"
});

Cette application est fournie à titre d’exemple pour illustrer ce que l’on a vu dans cet article. Je ne vais donc pas la détailler, car ce n’est pas le sujet de ce tutoriel. Vous trouverez l’explication des mécanismes liés au fonctionnement du serveur et du client dans les tutoriels :

• Le navigateur aux commandes de l’arduino – Partie 1 ;
• Le navigateur aux commandes de l’arduino – Partie 2 ;
• Le navigateur aux commandes de l’arduino – Partie 3.

Vous avez deux téléversements à effectuer : le sketch et les fichiers contenus dans le répertoire /data. Vous pouvez bien entendu effectuer ces deux téléversements dans l’ordre qui vous convient, mais comme vous ne disposez pas encore de la fonctionnalité OTA, il est préférable de téléverser d’abord le sketch, en utilisant le port série, pour mettre en même temps cette fonctionnalité en place. Comme cela, dans un deuxième temps, vous pourrez téléverser le système de fichiers en utilisant l’OTA.

La marche à suivre est simple :

• vous téléversez le sketch meteo.ino en suivant la procédure décrite au chapitre IV. Programmation de l’ESP-01 avec l'adaptateurProgrammation de l’ESP-01 avec l’adaptateur ;
• vous téléversez le système de fichiers selon la procédure expliquée au chapitre VI.B.2 Téléversement des fichiersTéléversement des fichiers en optant bien entendu pour le téléversement OTA. Remarquez que la majeure partie de cette procédure vient d’être réalisée dans la section VII.A PréparationPréparation du présent chapitre.

C’est tout. Toutes vos prochaines mises à jour, que ce soit pour le sketch ou pour le système de fichiers se feront via l’OTA.

Ouvrez votre navigateur préféré et connectez-vous à l’adresse que vous a attribuée votre routeur DHCP et que vous avez utilisée pour le téléversement OTA. Vous devriez obtenir quelque chose qui ressemble à ceci :

Chacun de ces deux cadrans représente une instance de l’objet TCadran (Type Cadran) implémenté dans le fichier JavaScript tCadran.js. La meilleure place pour l’appel de ce fichier est l’entête du fichier HTML, mais ce n’est pas obligatoire. Il suffit qu’il soit appelé avant la (ou les) demande(s) de création d’une instance de cet objet.

Pour cette réalisation, le code de création de ces deux instances se trouve respectivement dans les fichiers thermo.js et hygro.js. L’appel de ces deux fichiers se fait dans la section <body></body> du fichier HTML, à l’emplacement où l’on souhaite dessiner chaque cadran. La personnalisation des cadrans se fait dans ces fichiers en modifiant les paramètres. N’hésitez pas à le faire.

});

}).dessineCadran();

  mesure          : 22.5,