Le navigateur aux commandes de l'Arduino - Partie 2 : mettre en place les mécanismes pour envoyer au navigateur des fichiers (HTML, CSS...) écrits sur une carte microSD,

Un tutoriel d'Hervé Troadec

Le 2020-03-26 14:41:10, par naute, Rédacteur

Bonjour .

J'ai le plaisir de vous annoncer la mise en ligne du tutoriel :

Le navigateur aux commandes de l’Arduino - 2

dont l'objet est de mettre en place les mécanismes permettant d'envoyer au navigateur des fichiers (HTML, CSS...) écrits sur une carte microSD.

Ce tutoriel fait suite au tutoriel Le navigateur aux commandes de l’Arduino. La troisième et dernière partie, consacrée à la gestion des requêtes avec AJAX est en cours de finalisation.

J'espère que ce tutoriel pourra vous être utile et je vous en souhaite une bonne lecture.

Amicalement,
naute

Retrouvez les meilleurs cours et tutoriels pour apprendre Arduino

Discussion forum

19 commentaires

Jay M

Expert confirmé

Envoyé par naute

J'ai le plaisir de vous annoncer la mise en ligne du tutoriel :

Merci pour cela. Quelques commentaires constructifs (éventuellement ) sur des points de détails (ou pas)

Comme vous pouvez le constater, j’ai légèrement remanié ce code pour le rendre plus lisible, notamment en ajoutant les indentations. Je peux à présent le faire sans soucis, car ce code ne sera plus intégré au sketch Arduino, et donc, la place qu’il occupe ne sera plus un problème.

--> comme vous le dites plus loin, il faudra quand même un jour ou l'autre émettre ce texte vers un client. Moins on aura d'octets à envoyer, plus rapide sera la transmission. Alors bien qu'en théorie c'est sympa d'avoir un fichier HTML lisible et bien indenté, en pratique il vaudrait mieux le stocker le plus compact possible.

Dans le code d'exemple de réception

Code :

1
2
3
4
5
6
7
8
9
10
11
 while (client.available())
      {
        char carLu = client.read();
        if (carLu != 10)
        {
          reception += carLu;
        }
        else
        {
          break;
        }

il vaut mieux éviter les chiffres magique et remplacer 10 directement par '\n' (et mettre un petit commentaire // a-t-on reçu la fin de ligne.)

Cette réception n'est pas correcte en général. Elle fonctionne car vous avez un peu de chance sur le timing.
Il se pourrait que "client.available()" soit vide mais qu'on n'ait pas encore reçu toute la requête si la connexion ethernet est très lente ou le client pas rapide et donc que vous n'ayez pas encore reçu tout le "GET / HTTP/1.1" dans votre chaîne.

Normalement il faut lire jusqu'à une ligne vide (fin de l'en-tête) ou un timeout éventuellement et pas dépendre de la rapidité de vidage du buffer client par rapport à la rapidité de remplissage.

La documentation Arduino propose

Code :

1
2
3
4
5
6
7
8
9
10
11
    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        // if you've gotten to the end of the line (received a newline
        // character) and the line is blank, the http request has ended,
        // so you can send a reply
        if (c == '\n' && currentLineIsBlank) {
          ...

Vous pourriez prendre la même approche pour lire jusqu'au '\n'.

Cela dit et en référence à votre premier tuto où vous dites

Pourquoi ce test, alors que la ligne reception += carlu; suffit pour récupérer la chaîne reçue ? En fait, comme nous le verrons ultérieurement, seule la première ligne envoyée par le navigateur du client nous intéresse. Chaque ligne se termine par le caractère de code ASCII 10, appelé caractère de fin de ligne (LF pour Line Feed en anglais). Ce test, qui nous permet de détecter la fin de la première ligne, va donc également nous permettre d’empêcher la récupération des caractères inutiles contenus dans le tampon. Cela permet, d’une part, de gagner du temps, et, d’autre part, de ne stocker dans la variable reception que les renseignements utiles et donc d’éviter d’encombrer pour rien la mémoire vive dont la capacité n’est pas phénoménale

--> A noter que la bibliothèque considère qu'un client est toujours connecté même si on a envoyé close tant qu'on n'a pas vidé son buffer (available() n'est pas nul). Le client n'est pas libéré, j'ai jamais regardé en détail mais il y a peut-être une fuite mémoire si on ne vide pas ce buffer.

Quand vous dites:

Malheureusement, la bibliothèque SdFat ne gère pas la réinscription automatique du lecteur sur le bus SPI lors de la réinsertion de la carte microSD

ce n'est pas la faute du développeur. ça vient du fait que les lecteurs n'ont pas pour la plupart le mécanisme de détection d'éjection. il l'a mentionné ici

There is no reliable way to detect insertion of an SD without a detect switch. Many sockets have pull-ups or other problems so SdFat does not have a function to detect SD insertion

.

Quand vous faites votre fonction accusé de réception

Code :

1
2
3
4
5
6
7
8
void arHtml(EthernetClient nomClient, char type)
{
  nomClient.println(F("HTTP/1.1 200 OK"));
  nomClient.print(F("Content-Type: "));
  nomClient.println(type);
  nomClient.println(F("Connection: close"));
  nomClient.println();
}

il faut passer le client par référence -->

Code :

 void arHtml(EthernetClient& nomClient, char type)

sinon vous dupliquez l'objet client et il n'est pas prévu pour cela (+impact mémoire).

de manière générale, la duplication mémoire dans un buffer n'est pas nécessaire quand vous faites

Code :

1
2
3
4
5
void envoiFichier(EthernetClient nomClient, String fichierEnCours)
{
  char tableau[fichierEnCours.length()+1];
  fichierEnCours.toCharArray(tableau, fichierEnCours.length()+1);
  if (SD.exists(tableau)) {....

Comme la méthode appelée ne modifie pas la cString passée en paramètre, il suffirait de demander la cString sous-jacente à votre String . De plus là encore on ne veut pas dupliquer la mémoire pour le nom du fichier il faut donc passer par référence.

On ferait donc

Code :

1
2
3
void envoiFichier(EthernetClient& nomClient, String& fichierEnCours)
{
  if (SD.exists(fichierEnCours.c_str())) {....

MAIS - comme vous appelez ces fonctions directement avec un cString, le plus simple reste de définir le paramètre de la bonne façon:

Code :

1
2
3
void envoiFichier(EthernetClient& nomClient,  const char* fichierEnCours)
{
  if (SD.exists(fichierEnCours)) {....

Dans l'absolu on essayerait d'éviter toute la classe String, elle prend aussi plein de place en mémoire (elle vous fait perdre 1.5ko de mémoire flash), et travailler avec des tableaux de caractères. c'est une bonne habitude à prendre sur petits micros-contrôleurs.

En espérant que ce soit utile

bonne journée de confinement à toutes et tous!

le 30/03/2020 à 12:03

Jay M
Expert confirmé
Envoyé par naute

Le type char est accepté par la fonction exists() mais pas le type String.

Pour être plus précis c'est uniquement le type (const) char* qui est accepté (cf le code)

je pense que Baptou88 a dû tester après avoir changé l'en-tête de la fonction en
Code :
```
void envoiFichier(EthernetClient& nomClient,  const char* fichierEnCours)
```
et sans le remettre en String
le 08/11/2020 à 17:58
naute
Rédacteur

Envoyé par Jay M
Pour être plus précis c'est uniquement le type (const) char* qui est accepté[/URL])

J'aurais effectivement pu écrire :

Ça aurait été plus rigoureux.

Envoyé par Jay M
je pense que Baptou88 a dû tester après avoir changé l'en-tête de la fonction

C'est tout à fait possible. En tout cas, une chose est sûre, exists() n'accepte pas les String (c'est pourtant pas vilain ).

le 08/11/2020 à 19:45
Jay M
Expert confirmé

Salut

C’est plus sur la faute de frappe

Le type char est accepté par la fonction exists()

que j’avais réagi (manquait le *) - ensuite qu’on déclare un pointeur (dans ce cas il vaut mieux un const char *) ou un tableau c’est similaire côté encombrement mémoire et le nom du tableau est bien de type char* lors de l’appel de fonction.

La personne qui a écrit SDFat n’a pas voulu encourager sans doute cet usage, et même si vous avez une String nomFichier dans votre code, il suffit d’appeler avec nomFichier.c_str() et ça passe la cSting sous jacente.

le 08/11/2020 à 20:03

naute

Rédacteur

Envoyé par Baptou88

ce code compile très bien avec la librairie : #include <SD.h> mais pas avec la libraire #include <SdFat.h>

En effet, ceci parce-que la bibliothèque SD, qui est un sous-ensemble de la bibliothèque SdFat, surcharge la méthode exists() comme suit :

Code c :

1
2
3
4
5
6
  
      // Methods to determine if the requested file path exists. 
      boolean exists(const char *filepath); 
      boolean exists(const String &filepath) { 
        return exists(filepath.c_str()); 
      }

ce qui correspond exactement à la proposition de Jay M :

Envoyé par Jay M

si vous avez une String nomFichier dans votre code, il suffit d’appeler avec nomFichier.c_str() et ça passe la cSting sous jacente.

le 09/11/2020 à 19:25

Bonsoir,

Le lien était effectivement erroné. C'est corrigé .

le 04/04/2022 à 19:45
ThierryCalvet
Nouveau Candidat au Club

Bonjour,
Pourriez-vous mettre en ligne la version pdf?
Le lien ne fonctionne pas.

D'avance merci,

Thierry Calvet

le 30/03/2020 à 10:52

naute

Rédacteur

Bonjour .

@ThierryCalvet

Les téléchargements sont à présent actifs.

@Jay M

Envoyé par Jay M

C'est exact, mais c'est également valable pour la plupart des fichiers HTML, écrits par des professionnels, qui circulent sur le Web, et apparemment ça ne pose de problème à personne. En ce qui concerne le tuto, le fichier HTML est tout petit et le gain de temps sera vraisemblablement négligeable, d'autant plus que ce fichier est destiné à n'être chargé qu'une fois par session, comme on le verra dans la troisième partie.

Envoyé par Jay M

il vaut mieux éviter les chiffres magique et remplacer 10 directement par '\n' (et mettre un petit commentaire // a-t-on reçu la fin de ligne.)

Question de point de vue. Pour moi, c'est plutôt le '\n' qui est magique. Le caractère ASCII "10" et sa signification sont, quant à eux, connus de tous les langages de programmation et donc d'un usage universel. Quant aux commentaires, si à l'évidence je suis convaincu de leur utilité dans le code, je trouve plus clair et plus logique, s'agissant d'un tutoriel, de les mettre en dehors.

Envoyé par Jay M

Cette réception n'est pas correcte en général. Elle fonctionne car vous avez un peu de chance sur le timing.
.../...

Ce n'est pas faux, et d'ailleurs, avant je vidais le buffer avec un truc comme ça :

Code arduino :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  
String reception; 
boolean flag = true; 
while (client.available()) 
{ 
  char carLu = client.read(); 
  if (flag) 
  {   
    if (carLu != 10) 
    { 
      reception += carLu; 
    } 
    else flag = false; 
  } 
}

À force de faire des essais, j'ai fini par me rendre compte que ça ne fonctionnait pas plus mal sans vider le buffer, alors j'ai simplifié .

Envoyé par Jay M

...ce n'est pas la faute du développeur.

Je n'ai bien évidemment jamais voulu dire ça !

Envoyé par Jay M

il faut passer le client par référence -->

Code :

 void arHtml(EthernetClient& nomClient, char type)

sinon vous dupliquez l'objet client et il n'est pas prévu pour cela (+impact mémoire).
.../...

Tout à fait exact : je vais envisager une mise à jour.

Envoyé par Jay M

Dans la troisième partie, je donne une version qui se passe de la classe String et qui utilise donc les tableaux de caractères. On gagne à peu près 2 Kio de mémoire flash mais on y perd un peu en simplicité. De plus, la mémoire dynamique est impactée, car pour ne pas compliquer encore plus le code avec des réallocations de mémoire, je déclare un tableau de taille fixe, et donc pour être tranquille, supérieur à mes besoins réels. Cela dit, en production, on peut ajuster précisément cette taille.

Envoyé par Jay M

En espérant que ce soit utile

Bien sûr .

Merci pour vos commentaires,
amicalement,
naute

le 30/03/2020 à 15:59

Jay M
Expert confirmé
Oui - pour la taille du fichier HTML l'idée était plus de faire la remarque que c'est à prendre en compte. Quand on travaille sur un ordinateur qui a de la mémoire en Giga-octets et une liaison ethernet Gigabit ou 10 Gigabits, on peut se le permettre. Certains serveur web vont même faire le ménage à l'émission pour compresser ce qui est envoyé... mais là on est sur un petit arduino

pour le '\n' OK, chacun son point de vue le votre est tout à fait valide.

Pour le
Code :
```
 while (client.available()) {
```
ce n'est pas non plus tout à fait correct. Ce qu'il se passe c'est que pendant que vous videz le buffer en appelant client.read(); il se remplit de l'autre côté potentiellement par interruptions. Si vous veniez à vider le buffer plus vite qu'il ne se remplit la condition de votre while devient fausse et vous sortez sans avoir lu le '\n' potentiellement. En pratique ce sera rare mais ça reste un risque, donc le plus simple serait d'itérer sur "tant que je n'ai pas reçu le '\n' alors si un truc est dispo je le lis"

Oui la classe String apporte quelques simplifications mais si on est habitué au fonctions standard, on retrouve assez facilement ses petits et comme vous le dites on gagne pas mal de place Flash.

Merci encore pour le travail !
le 30/03/2020 à 16:30

Baptou88

Membre du Club

Bonsoir à tous,

je suis actuellement en train d'implémenter ce tuto pour mon serveur web existant ( Heltec ESP32 Wifi ), mais je ne parvient pas à compiler cette fonction:

Code :

1
2
3
4
void envoiFichier(EthernetClient nomClient, String fichierEnCours) 
{ 
  char tableau[fichierEnCours.length()+1]; 
  fichierEnCours.toCharArray(tableau, fichierEnCours.length()+1);

Visual Studio m'indique "l'expression doit avoir une valeur de constante"

Comment remédier à ce problème ?

Cordialement Baptiste

le 06/11/2020 à 22:25

Poster une réponse