Le navigateur aux commandes de l'Arduino [Tutoriel]

**naute** · 24/01/2020, 17h38

Bonjour à tous

,

j'ai le plaisir de vous présenter mon tutoriel :

Le navigateur aux commandes de l'Arduino

dans l'espoir qu'il puisse vous être utile.

Amicalement,
naute

Retrouvez les meilleurs cours et tutoriels Système embarqué

**f-leb** · 01/02/2020, 18h35

Bravo pour ce tutoriel

Enfin un Arduino connecté, le sujet est porteur et très bien traité.

J'attends la deuxième partie avec impatience

, je vais encore apprendre plein de choses...

**jpbbricole** · 01/02/2020, 19h49

Bonsoir

Envoyé par f-leb

Bravo pour ce tutoriel

Enfin un Arduino connecté, le sujet est porteur et très bien traité.

Je plussoie (10 fois!) f-leb.
Magnifique!. Je dois garder ce tuto sous le coude, j'ai découvert une chose qui m'occupe beaucoup et qui est, pour moi, un "bijou" pour développer, le M5stack Grey (~40$)et, en plus, il a tout ce qu'il faut pour appliquer ce tuto.
Donc, l'étude avant tout

Bonne soirée
Cordialement
jpbbricole

**Vincent PETIT** · 01/02/2020, 22h26

Super tuto, très intéressant !
Bravo et merci pour la communauté

J'attends aussi la partie 2 avec impatience

A+

Vincent

**naute** · 02/02/2020, 11h56

Bonjour

.

à vous trois, vos encouragements me vont droit au

.

Par contre :

Envoyé par f-leb

je vais encore apprendre plein de choses...

Il conviendrait peut-être rester dans les limites du vraisemblable

. Et comme ma phrase pourrait avoir un double sens, je précise "non pas parce-que tu ne serais pas capable d'apprendre quelque-chose, mais plutôt parce-que je ne suis pas convaincu de pouvoir t'enseigner quoi que ce soit"

.

La deuxième partie avance, mais sa rédaction me demande plus de temps que prévu. Je fais au mieux (enfin j'essaye

).

Bon dimanche,
naute

**Jay M** · 02/02/2020, 13h12

beau boulot et bel effort qui sera bien utile aux débutants - bravo !

---

Quelques petits commentaires qui se veulent constructifs

* la page HTML 5 minimum recommandée ressemble plus à cela:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
 
<html>
 
  <head>
    <title>contenu pour la barre de titre du navigateur</title>
  </head>
 
  <body>
  </body>
 
</html>

(c'est une bonne pratique que d'encapsuler la balise de titre (<title>) dans la balise d'en-tête (<head>) qui délimite des informations qui ne seront pas affichées directement dans la zone de rendu du navigateur. L'exemple ici est le titre de la page mais on y trouvera aussi un lien vers la feuille de style, une description et des mots clés, etc.)

* Vous faites un très bon point sur l'usage de la macro F() pour ne pas surcharger la SRAM

Si je peux me permettre, on peut aller un cran plus loin pour apporter un peu de simplicité pour insérer une page HTML dans le code en utilisant le concept C++ de raw string literals.

ça permet de ne pas s'encombrer des séquences d'échappement pour les guillemets et donc de copier directement de l'HTML depuis un éditeur et ça aère le code de votre programme car on n'y voit pas toute la page web, juste une référence à la variable qui contient le contenu. (ça permet aussi de ne pas répéter plusieurs fois le code de l'en-tête par exemple, on le range dans une variable et on imprime cela, si vous devez le modifier il suffit alors de le modifier qu'à un seul endroit).

Ça fonctionne comme cela: dans l'IDE vous créez un nouvel onglet, que vous appelez par exemple codeHTML.h et vous mettez dedans:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// C++ raw string literals cf http://en.cppreference.com/w/cpp/language/string_literal
// USE PROGMEM with Program Space Utilities http://www.nongnu.org/avr-libc/user-manual/group__avr__pgmspace.html
 
const char webRoot[] PROGMEM = R"--8<--8<--(HTTP/1.1 200 OK
Content-Type: text/html
Connection: close
 
<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8" />
<title>Ma première page</title>
<body>
  <div>
    <h3>Informations sur la page</h3>
    <p>Cette page HTML ne contient qu’un peu de texte, avec un minimum de mise en forme pour l’exemple. Elle fait appel aux fonctionnalités de base d'un navigateur, à savoir afficher du texte et établir un hyperlien. Sa syntaxe satisfait aux exigences du W3C.</p>
    <p>Le <a href="https://fr.wikipedia.org/wiki/World_Wide_Web_Consortium">W3C</a> (<i>World Wide Web Consortium</i>), est l’organisme ayant en charge la promotion et la standardisation du Web.</p>
  </div>
</body>
</html>
)--8<--8<--";

Je déclare donc une constante nommée webRoot de type tableau de caractère qui est stocké en mémoire flash (grace au PROGMEM) et notez le R (pour raw) juste après le signe = et avant le texte HTML. C'est qui introduit cette notion de raw littéral. Il y a usage d'une séquence d'identification de début et fin de texte (ici j'ai mis --8<--8<--).

ensuite dans le .ino du programme principal il suffit d'inclure codeHTML.h et on accède aux données comme pour une cString stockée en mémoire programme, par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
#include "codeHTML.h"
 
void setup() {
  Serial.begin(115200);
  uint16_t nbBytes = strlen_P(webRoot); // la taille en octets du buffer
  Serial.print(F("Voici les "));
  Serial.print(nbBytes);
  Serial.println(F(" octets de la page web"));
  Serial.println(F("-----------"));
  Serial.println((const __FlashStringHelper *) webRoot);  // on transforme le type pour que la fonction print s'y retrouve
}
 
void loop() {}

* Enfin personnellement (surtout sur un UNO) je recommanderais de ne pas utiliser la classe String pour bâtir caractère par caractère la requête mais d'utiliser simplement une cString (un tableau de char) que vous remplissez. ça va libérer plein de mémoire programme (utile pour votre code HTML) et évite aussi des risques de fragmentation mémoire et de crash intempestifs. au lieu de indexOf() pour voir si un mot clé est reconnu, on utilisera alors la fonction strstr()

Tout cela n'est pas obligatoire et votre tuto est très bien tel qu'il est, mais j'espère que cela peut aider. Merci encore pour ce super boulot.

**naute** · 03/02/2020, 15h30

Bonjour Jay M

,

et merci pour vos commentaires.

Envoyé par Jay M

la page HTML 5 minimum recommandée ressemble plus à cela...

Sur la page du W3Schools concernant la balise <head>, on trouve la mention suivante :

Differences Between HTML 4.01 and HTML5
In HTML 4.01 the <head> element is required.
In HTML5, the <head> element can be omitted. The following code will validate as HTML5:

Donc, à priori, mon code minimal est correct. La balise <head> n'est toutefois pas interdite, mais son usage semble laissé à l'appréciation de la clientèle. Cela dit, je l'utilise d'une manière générale, mais dans le cas présent, étant donné le peu d'entrées se trouvant dans l'entête, j'ai décidé de m'en passer. Ce n'est pas un oubli.

Envoyé par Jay M

Si je peux me permettre

Bien sûr, on est là pour ça

.

Envoyé par Jay M

on peut aller un cran plus loin pour apporter un peu de simplicité pour insérer une page HTML dans le code en utilisant le concept C++ de raw string literals.

C'est un peu une question de point de vue : techniquement, l'utilisation de "l'échappement" est très simple (à défaut d'être élégant dans notre cas, je le reconnais volontiers) et a le mérite d'être largement répandu dans les différents langages de programmation. Il ne faut pas oublier que les utilisateurs d'Arduino viennent d'horizon différents et ne manipulent pas forcément le C/C++ avec allégresse et aisance

. Je préfère donc, dans la mesure du possible, m'en tenir à la manipulation des éléments courants du langage Arduino sur lesquels on ne peut pas faire l'impasse. De même, stocker le texte dans un autre fichier est intéressant, mais il me semble préférable dans un tutoriel destiné plutôt au débutants, de rester centré sur le sujet. J'ai déjà assez tendance à m'en éloigner involontairement pour ne pas en rajouter volontairement. La remarque est cependant tout à fait justifiée.

Envoyé par Jay M

ça permet aussi de ne pas répéter plusieurs fois le code de l'en-tête par exemple

Je traite ce problème, mais d'une façon différente, dans la deuxième partie (à venir), car là, c'est pertinent. Ici, le code de l'entête n'est utilisé qu'une fois, donc le stocker différemment dans le but de le réutiliser n'a techniquement pas d'intérêt.

Merci pour le mode d'emploi de raw string literals. Winjerome m'avait déjà suggéré de l'utiliser, mais j'ai préféré m'en tenir à "l'échappement" pour les raisons évoquées plus haut.

Je suis également d'accord sur vos remarques concernant la classe String, mais comme je l'ai dit plus haut, je préfère m'en tenir le plus possible au langage Arduino, c'est-à-dire aux éléments qui sont détaillés dans la référence officielle de ce langage, à laquelle tous les utilisateurs ont accès depuis l'EDI. Cette classe est facile à utiliser et fournit globalement toutes les méthodes de gestion de chaîne dont on peut avoir besoin. Il est vrai qu'elle peut poser problème dans certains cas, mais ça ne m'est jamais arrivé. Il faut dire que la gestion du texte avec Arduino n'est pas mon utilisation standard de la plateforme.

Merci encore pour votre intervention

,
amicalement,
naute

**Jay M** · 03/02/2020, 17h22

Bonsoir

bon point sur le code minimal en HTML5 effectivement.

bien sûr l'échappement est une technique standard, tout comme les raw string literals qui font partie du langage - mais je comprends votre objectif de simplicité. (notez qu'on n'est pas obligé de le mettre dans un autre fichier c'est juste pour simplifier le code principal)

Pour les chaînes de caractère la référence officielle mentionne qu'on peut les représenter du texte de deux façons. Une fois que l'on a une cString on peut utiliser donc toute la richesse de la bibliothèque standard du langage C ou C++. (stdlib.h et string.h )

Personnellement j'évite comme la peste la classe String car le jour où vous avez un souci de stabilité (pour des applications qui doivent tourner longtemps) pour débugger c'est difficile.

Pour des petits programmes qui ont vocation à tourner quelques minutes ou pour lesquels l'usage de la classe se résume à une seule String allouée dynamiquement en variable locale (et détruite à la fin de la fonction) alors c'est jouable.

Cela se fait aussi au prix quand même d'un usage plus conséquent de la mémoire car la classe String est gourmande. Pour s'en convaincre, si vous compilez

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
String message = "Hello World";
 
void setup() {
  Serial.begin(115200);
  Serial.println(message);
  if (message.indexOf("World")) Serial.println(F("'World' PRESENT"));
}
 
void loop() {}

Le croquis utilise 3366 octets et Les variables globales utilisent 216 octets

et si vous compilez le programme suivant qui fait la même chose

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
char message[] = "Hello World";
 
void setup() {
  Serial.begin(115200);
  Serial.println(message);
  if (strstr(message,"World")) Serial.println(F("'World' PRESENT"));
}
 
void loop() {}

Le croquis utilise 1906 octets et Les variables globales utilisent 206 octets

--> on a gagné 10 octets de RAM et 1 460 de mémoire programme...

Quand on joue avec du HTML sur nos petits Arduinos, on peut stocker quand même pas mal de contenu web dans ces 1460 octets.

mais bon - je conviens que ces considérations sont un peu éloignées de votre objectif premier de découverte de la communication http. éventuellement à ajouter dans un autre chapitre 'pour aller plus loin'

**Baptou88** · 30/10/2020, 16h29

Bonjour,
merci pour ce tuto très intéressant !
plutôt nouveau dans le monde de l’Arduino je tente de dialoguer entre le client et le serveur afin d'échanger une valeur

j'ai réaliser un serveur wifi sur ma carte Arduino avec une page HTML composé de 2 boutons qui pilote l’état de ma LED (donc code très similaire à ce tuto)
ma page HTML possède en plus un slider pour choisir une valeur entre 0 et 100 avec un petit code JavaScript
j'arrive bien à réceptionner l'info du slider sur ma carte ( -> GET /VALUE=65 HTTP/1.1 ) mais je souhaiterai pouvoir isoler la valeur numérique, Comment faire?

Cordialement Baptiste

**Jay M** · 31/10/2020, 00h29

Envoyé par Baptou88

Bonjour,
j'arrive bien à réceptionner l'info du slider sur ma carte ( -> GET /VALUE=65 HTTP/1.1 ) mais je souhaiterai pouvoir isoler la valeur numérique, Comment faire?

Si vous utilisez le code du tutorial, votre requête GET est dans la String réception donc vous pouvez utiliser toutes les méthodes de cette classe

Vous pouvez vérifier comme dans le tuto si la chaîne commence par "GET" et se termine par "HTTP/1.1" et si oui trouver la position de "VALUE=" Et si cette position existe, utiliser toInt() sur la sous chaîne (substring(from)) qui commence après cette position+Les 6 caractères de "VALUE="

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 reception.trim();
      if ((reception.startsWith("GET /")) && (reception.endsWith(" HTTP/1.1")))
      {
        int pos = reception.indexOf("VALUE=");
        if (pos != -1) {
          // il y a bien une VALUE
          // a écrire. Utiliser reception.subString(à remplir).toInt();
        } else {
          // pas trouvé
        }
...

**Baptou88** · 31/10/2020, 09h37

Merci pour le retour !

**Beginner.** · 15/02/2021, 20h56

Salut et merci pour ce tuto,

Si j'ai bien compris ici le PC et la carte Arduino sont connectés au réseau local d'une box, c'est bien ça ?

C'est-à-dire qu'il ne s'agit pas d'une commande à distance (via Internet) de la carte Arduino, c'est bien ça ?

**Jay M** · 16/02/2021, 17h56

pour que le tuto fonctionne, il faut bien sûr que le navigateur ait accès à l'IP de la carte cible.

(ça peut être sur réseau local ou sur internet, tout dépend effectivement de la configuration réseau pour que la requête HTTP arrive au module)

**Jay M** · 19/02/2021, 15h27

Mais je pense (?) que ce n'est pas possible sur tous les matériels

Sur la majorité des ordinateurs effectivement il y a une adresse MAC codée en dur dans la carte, ça permet d'éviter les soucis de 2 appareils se retrouvant identifiés de la même façon. L'OS (ou les couches basses du firmware de la carte) vont lire cette adresse et c'est avec cela qu'il se présente sur le réseau. Mais comme tout cela est "logiciel" vous pouvez vous présenter avec une adresse MAC qui n'est pas la votre si vous voulez - c'est pour cela qu'il ne faut pas fonder sa politique de sécurité sur les adresses MAC.

**Beginner.** · 21/02/2021, 20h25

Ok merci à tous pour vos explications.

Alors oui je pensais d’après ce que j'avais lu que toutes les cartes se voyaient attribuées par le constructeur une adresse MAC unique mais effectivement si ce n'est pas le cas des shield Ethernet alors tout s'explique...

**electroremy** · 08/03/2021, 00h03

Bonjour,

Merci pour ce tutoriel, je suis en plein dans ces choses là en ce moment moi aussi...

Petite question : dans ton header HTTP tu ne mets pas de "Content-length: ".
J'en ai mis avec mon projet et c'est pas facile car on connait la longueur qu'à la fin.
As-tu vérifié le résultat avec W3C (une redirection pour rendre temporairement la carte accessible est requise) ?

Quid de la fragmentation de packets ?
Sur ce forum j'avais proposé une version modifiée de Socket() pour pouvoir à la fois écrire en plusieurs fois les données tout en ayant un seul packet d'une taille allant jusqu'à la taille du buffer du W5500.
La fragmentation de packets c'est pas très grave si le client est un PC ou un smartphone, en revanche si c'est pour communiquer avec un autre Arduino ça ne marchera pas.

La carte https://www.keyestudio.com/keyestudi...poe-p0368.html est très intéressante...
Surtout si c'est un "vrai" W5500 (et pas un W5100 ou W5200)
Elle est moins chère et plus compacte...
Est-ce la même qualité ? (notamment la connectique)
Les alimentations 5V et 3.3V peuvent-elle fournir autant de courant ?
Je trouve la position du bouton reset peut pratique mais c'est un détail.
Peut-on utiliser le port SPI avec d'autres périphériques (comme ce que je fais actuellement avec mon port SPI partagé avec le shield Ethernet et l'écran TFT ILI9341) ?

A bientôt

**naute** · 08/03/2021, 10h05

Bonjour

.

Envoyé par electroremy

Petite question : dans ton header HTTP tu ne mets pas de "Content-length: ".

Ce n'est pas nécessaire dans notre cas de figure. N'oublie pas qu'il ne s'agit pas d'un cours de HTML : je détermine un cahier des charges et je le traite au plus près, du moins j'essaye.

Envoyé par electroremy

As-tu vérifié le résultat avec W3C (une redirection pour rendre temporairement la carte accessible est requise) ?

Non, mais rien ne t'interdit d'effectuer cette vérification et de nous faire profiter des résultats

.

Envoyé par electroremy

Quid de la fragmentation de packets ?
La fragmentation de packets c'est pas très grave si le client est un PC ou un smartphone,

Ce qui est le cas ici !

Envoyé par electroremy

en revanche si c'est pour communiquer avec un autre Arduino ça ne marchera pas.

Par contre, ce cas de figure est hors sujet en ce qui concerne ce tutoriel.

Pour ce qui est de la carte KeyesStudio :

Envoyé par electroremy

La carte https://www.keyestudio.com/keyestudi...poe-p0368.html est très intéressante...

Je confirme ! Elle remplace avantageusement le couple Arduino UNO / Shield Ethernet 2, tant en ce qui concerne son coût que son encombrement.

c'est un "vrai" W5500" (sérigraphié et tout) ;
sur ma carte, j'ai eu des petits soucis avec le slot accueillant la carte microSD : celle-ci n'est pas toujours reconnue et il faut parfois la réinsérer pour régler le problème ;
**en ce qui concerne les capacités de l'alimentation, je n'ai pas testé, mais il ne faut pas oublier que dans le couple Arduino UNO / Shield Ethernet 2, la carte UNO doit alimenter le shield Ethernet 2, ce qui diminue d'autant sa capacité à alimenter les éléments d'un montage ou d'autres périphériques ;
**pour le bus SPI, je ne vois pas pourquoi tu ne pourrais pas l'utiliser en même temps avec plusieurs périphériques. Le microcontrôleur est un ATMEGA328P, le même que sur la carte UNO, et les fonctionnalités n'ont aucune raison d'être différentes. Cela dit, je n'ai pas testé non plus.

**Je rappelle que je précise ceci dans le tuto :

Quand je parle de « mes tests », je veux dire que tout ce que j’ai fait avec cette carte a fonctionné de la même manière qu’avec les cartes officielles. Je n’ai pas mené une batterie de tests exhaustive visant à « homologuer » le produit

Amicalement,
naute

**electroremy** · 08/03/2021, 11h44

Salut,

J'utilise beaucoup la validation W3C car comme tu l'as dit, les navigateurs sont trop tolérants et ne permettent pas de vérifier qu'une page HTML est correcte.
Le gag étant que cette tolérance n'est pas la même entre les différents navigateurs, en fonction de leur version.

En tout ce qui est bien dans ton tutoriel, c'est que j'ai vu qu'on pouvait avoir des boutons en plus que "submit" et "reset"
Je ne savais pas que c'était possible, et c'est pratique !

A bientôt !

Le navigateur aux commandes de l'Arduino [Tutoriel]

Arduino

Vue hybride

Discussions similaires

Partager

Partager