Arduino - Serveur Web

Serveur Web version minimum

Dans l'EDI Arduino, ouvrir le fichier exemple "WebServer".

Dans le programme, modifier l'adresse MAC selon celle inscrite sur votre Shield Ethernet et mettre une adresse IP faisant parti du réseau sur lequel vous vous trouvez.

Remarques :

chaque adresse mac doit être unique sur le réseau
au lycée Louis Armand, la plage d'adresses IP utilisables est 192.168.8.220 à 192.168.8.228

Pour éviter les conflits d'IP entre toutes les cartes, nous allons configurer les Shield Ethernet en DHCP. Pour cela, remplacer dans le programme (fonction Setup()) la ligne (N°41) :

Ethernet.begin(mac, ip);

Par :

Ethernet.begin(mac);

La ligne (N°25) devient alors inutile, elle peut être supprimée ou mise en commentaire :

IPAddress ip(192,168,1,177);

Connecter le shield Ethernet au réseau et la carte Arduino à l'ordinateur.

Téléverser le programme.

Ouvrir le moniteur série (Outils => Moniteur série) et relever l'adresse IP de votre Shield Ethernet.

Dans un navigateur, taper dans la barre d'adresse l'adresse IP de votre Shield Ethernet.

La page ci-contre doit s'afficher. Elle est automatiquement actualisée toutes les 5 secondes.

Analyse du programme

Copie d'écran navigateur avec http Arduino sur port 8080

La partie "Initialisation" ne comporte pas de nouveautés par rapport aux précédents travaux. On peut remarquer la ligne :

EthernetServer server(80);

Cette ligne indique au serveur qu'il doit "écouter" sur le port 80. Ce port est le port par défaut pour le protocole HTTP (serveur WEB).

Il est donc possible ici de modifier ce port. Le site web sera alors accessible en tapant : adresseIPduServeur:NuméroDuPort

Faire un test en faisant "écouter" votre serveur sur le port 8080.

Un peu d'HTML

La page précédente est très minimaliste, elle comporte uniquement une balise <HTML> et le texte de la page.

Pour avoir une version plus correcte, il faudra ajouter les balises <HEAD> et <BODY>. La balise <HEAD> permettra de déclarer des fonctions javascript, des feuilles de style (CSS) ou simplement mettre un titre (balise <TITLE>) qui apparaitra dans l'onglet du navigateur à la place de l'adresse IP.

Copie d'écran code minimum d'une page HTML

Quelques autres balises (de base) utiles :

<br/> : Saut de ligne
<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
... les balise <h..> vont jusqu'au niveau 6

Codage des lettres accentuées :

Pour aller plus loin en HTML

Utilisation d'une bibliothèque Javascript

Pour embellir une page WEB il est possible (entre autre) d'utiliser du Javascript. Il existe des bibliothèques prédéfinies, faciles à utiliser et donnant des résultats visuellement très intéressants.

à partir de la page https://developers.google.com/chart/interactive/docs/gallery/gauge?hl=fr modifier le code précédent pour obtenir l'affichage ci-dessous :

Copie d'écran navigateur avec http Arduino et danger shield et gauges

Conseil : Dans un premier temps, créer simplement un fichier .html générant une page identique à celle proposée ci-dessus et seulement dans un deuxième temps faire générer cette page par l'Arduino.

Utilisation d'un formulaire

Un formulaire permet d'envoyer des informations du client vers le serveur WEB. Il va ici permettre de commander les LED et l'afficheur 7 segment de la carte Danger Shield directement depuis un navigateur.

Les éléments de formulaires sont répartis en 3 classes :

Input : Champs de saisie de texte et différents types de boutons (boutons radio, sliders, boutons,...)
Select : Listes (menus déroulants et ascenseurs)
Textarea : Zone de saisie de texte libre

Chaque élément doit être nommé, pour cela on utilise l'attribut NAME. Le nom ainsi défini permet d'identifier les données lors de leur envoi. Il doit être unique, sauf dans le cas d'un ensemble composé de plusieurs éléments (boutons radio par exemple). Un autre attribut VALUE est commun à ces balises, mais son rôle est différent selon le type d'élément utilisé.

Etude de la commande POST

Se rendre sur la page http://sen-louis-armand.fr/Fichiers/formulaire.html

Lancer une capture Wireshark et changer ou cliquer sur un des éléments du formulaire (le changements ne sont pas mémorisés mais nous voulons simplement capturer l'envoie des informations suite à un changement ou un clic). Arrêter la capture. Appliquer le filtre : http.request.method == "POST", il ne devrait pas alors rester beaucoup de trames...

Visualiser le code source de la page "formulaire.html" (dans le navigateur Firefox, clic droit dans la page et "Code source de la page"). Relever le nom des différents contrôles du formulaire.

Rechercher dans la trame POST relevée dans Wireshark où et comment sont transmises les informations contenues dans le formulaire (exemple capture d'écran ci-dessous).

Capture d'écran Wireshark trame HTTP METHOD POST

à partir de la page des éléments trouvés et des travaux déjà réalisés avec la carte Danger Shield, modifier le code précédent pour obtenir l'affichage ci-dessous ainsi que la commande de la carte Danger Shield par le formulaire.

Notes :

Pour insérer (dans un programme Arduino) le caractère " dans une chaine de caractère il faut le faire précéder du caractère \ : Exemple : "<input type=\"radio\">"
Une solution possible pour retrouver les différents paramètres dans la chaine renvoyée par la méthode POST consiste à utiliser la méthode "lastIndexOf" du langage Arduino.
Afin de simplifier le code, il peut-être intéressant de créer des fonctions séparées pour l'envoie de la page Web et pour le traitement des données reçues.
Le contrôle type "range" nécessite un navigateur compatible avec le HTML 5, il peut-être remplacé par une liste déroulante (<select>)
Travaillez en trois temps :
1. Taper le code HTML du formulaire ci-dessous dans un simple fichier texte .html
2. Faire générer ce code html par l'Arduino
3. Traiter les données renvoyées par le formulaire

Capture d'écran du formulaire http post généré par l'Arduino shield ethernet

Articles connexes

Premiers pas avec Arduino UNO
Arduino - Capteur de température 1-Wire DS18S20
Arduino - Capteur à ultrasons SRF-05
Arduino - Ports, CAN et Console
Arduino - Carte mémoire
Arduino - GPS et Serveur WEB

Vous avez apprécié cet article ? Partagez le !