• 20 hours
  • Medium

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 7/13/17

Récupérez les informations de votre carte par réseau local

Log in or subscribe for free to enjoy all this course has to offer!

Maintenant que vous savez utiliser la carte mini-SD du shield Arduino Ethernet, passons aux choses sérieuses : connecter votre carte sur un réseau privé.

La difficulté principale, c'est que tout ne dépend plus uniquement de la carte Arduino. En effet, il existe une multitude de configurations de réseaux locaux.

Pour présenter ce chapitre, je vais donc tenter de donner des informations d'ordre général, c'est-à-dire qui fonctionnent dans la majorité des cas. Il est possible que dans certaines configurations, il faille paramétrer votre routeur (qui est souvent votre box) pour qu'elle accepte d'ouvrir la communication à votre Arduino en interne.

Mais nous n'en sommes pas là...

Dans ce chapitre, vous allez connecter votre carte au réseau local, il vous faudra donc une prise RJ45 et de quoi la connecter à l'autre bout. Vous apprendrez ensuite à créer les programmes de base pour communiquer avec l'Arduino par le réseau. Nous verrons enfin une interface un peu plus développée pour vous donner une idées des possibilités offertes par la carte.

Commençons donc par un peu de connectique...

Connectez la carte Arduino sur le réseau

Comme je vous en parlais dans le chapitre précédent, le shield Ethernet possède une entrée RJ45. Donc si vous avez le câble (et c'est souhaitable, car la suite ne sera pas utile sinon ;) ), il vous suffit de le connecter à l'endroit de la carte prévu à cet effet.

On imagine à partir de maintenant que votre Shield Ethernet est correctement enfichée sur la carte Arduino et que le cable RJ45 est connecté.

Où est-ce que je mets l'autre bout du câble ?

(Non Lukas, cette petite blague, qui fait envie, n'est pas la bonne réponse...)

Et bien voilà déjà que les différences commencent. Deux solutions éventuelles :

  • Soit vous le connectez directement sur votre box (il y a normalement des entrées RJ45) ;

  • Soit votre réseau interne comporte des prises murales (oui c'est ça, sur les murs...) et dans ce cas vous pouvez vous connecter dessus. Il faut bien sûr s'assurer que la prise est bien reliée à la box. 

L'adresse du shield

Bien. une fois ces vérifications effectuées, vous allez devoir tout débrancher, jusqu'à enlever votre shield Ethernet de la carte Arduino.

(Oui Cunégonde, j'aurais pu le dire avant, mais on en est là maintenant, alors...)

Si vous retournez le shield, vous allez normalement voir une série de chiffres et de lettres sur une étiquette.Si vous avez suivi le cours depuis le début, vous reconnaîtrez (en tout cas je l’espère ;)) des nombres hexadécimaux. C'est l'adresse matérielle de votre carte, que l'on appelle l'adresse MAC (pour Media Access Control). 

Notez la, car elle vous sera utile à chaque programme lié au réseau. Pour ma part, j'ai décollé l'étiquette et l'ai mise sur le dessus du shield ;).

Une fois l'adresse notée, vous pouvez tout reconnecter !

Voyons maintenant notre premier programme simple (enfin presque simple ) qui va transformer l'Arduino en serveur web !

Un serveur web Arduino

Un réseau interne est un réseau de machines qui peuvent communiquer entre elles sans être connectées sur le Web mondial. Chaque machine dispose d'une adresse matérielle définie (pour l’Arduino, l’adresse MAC que vous avez notée) et d'une adresse liée au réseau : la fameuse adresse IP.

Je ne vais pas m'étendre sur les types d'adresses IP, la façon dont elles sont construites et les autres masques de sous-réseaux. Il faut juste comprendre que pour le moment, l'adresse IP de votre carte doit être construite pour que toute connexion soit possible.

Pour le réseau local, vous pouvez proposer vous-mêmes une adresse IP si votre routeur (votre box par exemple) est configuré pour, ou bien demander au réseau de vous en créer une.

Une fois l'IP construite,  il vous faudra aussi décider d'un port de communication.

Alors pour le moment nous allons nous baser sur la configuration suivante :

  • Adresse IP : 192.168.1.123

  • Port : 80, c'est le port utilisé pour la communication HTTP, c'est-à-dire par le navigateur web.

Pourquoi choisir de créer un serveur web ?

En effet, nous pourrions communiquer différemment, mais il nous faudrait dans ce cas créer des interfaces avec des logiciels et langages externes (Python, C, C++, Processing...), ce qui nous amènerait à apprendre une partie de ces langages. C'est assez fastidieux.

(Je vois Lukas que vous êtes d'accord avec moi sur ce point, je vous laisse convaincre Cunégonde ...)

Nous allons donc apprendre une partie d'un langage plus simple à mettre en oeuvre : le HTML. Vous allez le découvrir plus loin.

De plus, vous avez un logiciel (même plusieurs) qui décodent sans problème  ce langage : les navigateurs web. Pour en citer quelques uns : Safari, Firefox, Google Chrome. J'aimerais dire Internet Explorer, mais ce logiciel est terriblement propice au bugs, et la page la plus souvent affichée est du style : "Nous sommes désolés, Internet Explorer à rencontré une erreur !". Et il nous laisse plantés là. Donc préférez les autres que celui-là, désolé Bill G.

Le début du programme pour créer un serveur Web Arduino

Comme à chaque fois, si un shield existe, une bibliothèque n'est pas loin. C'est encore le cas pour le shield Ethernet ! Il existe une bibliothèque, incluse par défaut dans l'IDE, qui s'appelle...

...Ethernet.h (ben ça alors, si je m'y attendais ! ;) ). 

Et comme le shield communique avec la carte Arduino par le protocole SPI, nous devons aussi inclure la bibliothèqueSPI.h.

Il nous faut ensuite préparer la communication entre la carte Ethernet, le réseau et la carte Arduino. Nous allons utiliser les adresses MAC et IP.

Voici le programme de base :

#include <SPI.h> //bibliothèqe pour SPI
#include <Ethernet.h> //bibliothèque pour Ethernet
byte mac[] = {0x90, 0xA2, 0xDA, 0x0F, 0xDF, 0xAB}; // tableau pour l'adresse MAC de votre carte
byte ip[] = {192, 168, 1, 123}; //tableau pour l'adresse IP

void setup() {
  Serial.begin (9600); //initialisation de communication série
  Ethernet.begin (mac, ip); //initialisatio de la communication Ethernet
  Serial.print("\nLe serveur est sur l'adresse : ");
  Serial.println(Ethernet.localIP()); //on affiche l'adresse IP de la connexion
}

void loop() {
}

Vous remarquez que l'adresse MAC et l'adresse IP sont dans des tableaux de variables de typebyte.

L'objet que l'on crée avec ces deux adresses est de type Ethernet, on ne peut pas le renommer.

En ce qui concerne les adresses de type IP, vous pouvez aussi les déclarer avec la fonction prévue de la bibliothèqe. Ce qui donne pour nous :

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

Bien. Si vous lancez ce programme, et que tout se déroule comme prévu, vous avez un message sur le moniteur série qui confirme bien l'adresse que nous avons indiqué.

Le serveur

Nous parlons de serveur depuis tout à l'heure, sans vraiment avoir fait un point sur ce que c'est.

(Oui sauf vous Cunégonde, mais pour une fois, laissez moi expliquer...)

Un serveur est une machine (ordinateur, Arduino...) qui écoute le réseau en attente de clients. Il écoute le réseau sur le port qu'on lui a indiqué. Si un client arrive (en se connectant à l'adresse du serveur), il l'accueille et lui envoie une série d'informations. Pour un serveur web, il envoie souvent une page HTML, que le client verra s'afficher sur son navigateur.

Pour que notre Arduino se transforme en serveur,  il va donc falloir créer un objet serveur, qui écoutera sur le port qu'on lui indiquera (le port 80 pour l'HTTP).

Cet objet est créé avant lesetup() comme objet global. 

Puis nous lançons l'écoute avec la fonctionbegin(), qui va attendre un éventuel client, c'est-à-dire des informations de connexion envoyées sur l'adresse du serveur au port indiqué.

Voici un programme qui initialise l'objet serveur et démarre l'écoute :

#include <SPI.h> //bibliothèqe pour SPI
#include <Ethernet.h> //bibliothèque pour Ethernet
byte mac[] = {0x90, 0xA2, 0xDA, 0x0F, 0xDF, 0xAB}; //adresse mac de votre carte
byte ip[] = {192, 168, 1, 123}; //adresse IP
EthernetServer serveur(80); // déclare l'objet serveur au port d'écoute 80

void setup() {
  Serial.begin (9600); //initialisation de communication série
  Ethernet.begin (mac, ip); //initialisatio de la communication Ethernet
  Serial.print("\nLe serveur est sur l'adresse : ");
  Serial.println(Ethernet.localIP()); //on affiche l'adresse IP de la connexion
  serveur.begin(); // démarre l'écoute
}

void loop() {
  if (serveur.available()){ //si client connecté
    Serial.println("Client"); //on le dit...
  }
}

Maintenant que vous avez rencontré le serveur, laissez-moi vous présenter le client !

Le client

Un client, sur le web ou sur le réseau local, est une machine qui se connecte à un serveur pour récupérer les informations qu'il peut donner. Un client peut envoyer des données qui seront analysées par le serveur, qui renverra à son tour un résultat.

C'est le principe des sites Internet : on se connecte, une page s'affiche ; on clique sur des liens, le serveur nous envoie d'autres pages, etc.

Pour que notre programme réagisse, il faut connecter un ordinateur (ou tablette ou smartphone...)  à l'Arduino par le réseau. C'est là que vous allez utiliser votre navigateur (pour ma part, Safari).

Le navigateur web

Le navigateur web est un programme qui permet de transformer les échanges d'information entre les machines en résultats visibles par l'humain (les pages web par exemple). Il est capable d'interpréter plusieurs langages (HTML, PHP, ASP, JavaScript...) si les serveurs sont configurés pour et si les protocoles (les règles) d'échange d'information sont respectés.

Pour vous connecter à votre serveur Arduino, vous allez donc ouvrir votre navigateur (Firefox, Safari, Chrome...) et taper dans la barre d'adresse (la barre en haut de votre navigateur) directement l'adresse IP de l'Arduino, dans notre cas : 192.168.1.123. On la tape sans rien mettre devant (donc sans "http://") car il s'agit d'un réseau local.

Rien ne se passe sur votre navigateur, en revanche sur le moniteur série de l'Arduino, vous voyez le mot "Client" s'afficher en série.

Si c'est le cas, c'est cool !!! C'est que vous allez pouvoir passer à la suite ! 

Donc du côté du serveur (l'Arduino), on reçoit une communication, mais du côté du client (votre ordinateur, tablette...) ça réfléchit sans rien afficher. C'est normal ! Nous n'avons rien programmé dans ce sens !

Faites répondre le serveur au client

Pour répondre au client, nous allons créer un objet client lorsqu'il est reçu par le serveur, puis répondre à cet objet.

Nous allons le faire en plusieurs étapes :

  • On attend que le serveur reçoive un client avec la fonction available();

  • On crée un client avecEthernetClient  qui récupère le client en attente ;

  • Si le client est connecté, on lit ses informations et on les affiche sur le moniteur ;

  • Une fois toutes les informations lues (donc un saut de ligne suivi d'un retour chariot), on répond au client ;

  • On déconnecte le client.

#include <SPI.h> //bibliothèqe pour SPI
#include <Ethernet.h> //bibliothèque pour Ethernet
byte mac[] = {0x90, 0xA2, 0xDA, 0x0F, 0xDF, 0xAB}; //adresse mac de votre carte
byte ip[] = {192, 168, 1, 123}; //adresse IP
EthernetServer serveur(80); // déclare l'objet serveur au port d'écoute 80

void setup() {
  Serial.begin (9600); //initialisation de la communication série
  Ethernet.begin (mac, ip); //initialisation de la communication Ethernet
  Serial.print("\nLe serveur est sur l'adresse : ");
  Serial.println(Ethernet.localIP()); //on affiche l'adresse IP de la connexion
  serveur.begin(); // démarre l'écoute
}

void loop() {
  EthernetClient client = serveur.available(); //on écoute le port
  if (client) { //si client connecté
    Serial.println("Client en ligne\n"); //on le dit...
    if (client.connected()) { // si le client est en connecté
      while (client.available()) { // tant qu'il a des infos à transmettre
        char c=client.read(); // on lit le caractère  
        Serial.write(c);// on l'écrit sur le moniteur série
        delay(1); //délai de lecture
      }
      //réponse au client
      client.println("<!DOCTYPE HTML>"); // informe le navigateur du type de document à afficher
      client.println("<html>Bonjour OpenClassRooms !<br></html>"); //code html
      client.stop(); //on déconnecte le client
      Serial.println("Fin de communication avec le client");
    }
  }
}

Nous allons voir après ce que signifie le code HTML. Pour le moment, si vous lancez ce programme, puis que vous lancez votre navigateur avec dans la barre d'adresse 192.168.1.123, vous devriez voir sur le moniteur série un long message du genre :

Le serveur est sur l'adresse : 192.168.1.123
Client en ligne
GET / HTTP/1.1
Host: 192.168.1.123
Accept-Encoding: gzip, deflate
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/600.7.12 (KHTML, like Gecko) Version/8.0.7 Safari/600.7.12
Accept-Language: fr-fr
Cache-Control: max-age=0
Connection: keep-alive

Fin de communication avec le client

Et sur votre navigateur l'affichage : "Bonjour OpenClassRooms !". C'est ce que nous voulions afficher.

Les infos sur la console correspondent à ce que votre navigateur a envoyé à l'Arduino pour se connecter. Nous verrons plus loin que tout n'est pas utile pour communiquer avec l'Arduino. Mais avant, faisons un point HTML... 

Les bases du langage HTML

Pour pouvoir créer des pages web grâce à l'Arduino en mode serveur, il vous faut acquérir quelques notions en HTML. Rassurez-vous, c'est plutôt simple et rapide. Quelques points pour commencer :

  • le HTML (Hypertext Markup Language) est un langage conçu pour décrire aux navigateurs web les éléments à afficher sur une page web. C’est un langage qui utilise des balises (non Lukas, pas valises !), c’est-à-dire qu’il décrit chaque élément à afficher en les entourant de balises (une balise ouvrante et une balise fermante) ainsi :<mot-clé>Élement à afficher</mot-clé>, où lemot-clé désigne un type d’élément comme un titre, une image, etc.

  • Le HTML n'est pas un langage dynamique : le navigateur va lire votre code du début à la fin, l'interpréter et l'afficher, mais une fois la page créée, l'affichage est statique (c'est un résultat). Pour modifier une page, il faudra la créer à nouveau avec les éventuelles modifications (principe des liens ou des formulaires).

  •  Les pages web ne contiennent pas QUE du HTML, elles peuvent aussi comporter d’autres objets intégrés codés avec d’autres langages comme JavaScript, PHP, ASP, Flash... qui permettent de réaliser des animations, ou des objets dynamiques.

L'un des gros avantages du HTML, c'est qu'il peut être conçu à partir de n'importe quel éditeur de texte (Bloc-notes par exemple). Il suffit que l'extension de votre fichier soit de type .html ou .htm.

Les premières balises à connaître sont :

  • <!DOCTYPE HTML>  : cette balise indique à votre navigateur le type de document qu'il doit interpréter. Elle n'a pas de balise de fermeture associée.

  • <html> </html>  : c'est le jeu de balise de base. Entre ces balises se situera le code HTML.

  • <head> </head>  : ce qu'il y aura entre ces balises ne sera pas affiché sur votre navigateur mais sera interprété.

  • <title> </title>  : modifie le titre de la fenêtre en cours d'affichage de votre navigateur. Elle se met entre les balises <head> </head>.

  • <body>  </body>  : ces balises vont encadrer le corps de votre page HTML. C'est ce qui sera affiché dans votre navigateur.

  • <br>  : balise qui permet de faire un retour à la ligne. Sans cette balise, le texte s'affiche en une seule ligne, même si dans votre éditeur vous avez sauté une ligne.

Voici une page simple, que vous pouvez créer avec un éditeur de texte, l'enregistrer en mettant en extension .html, et l'ouvrir avec votre navigateur :

<!DOCTYPE HTML>
<html>
    <head>
        <title>Ma belle page</title>
    </head>
    
    <body>
        Bonjour, voici ma première page HTML <br>
        Et j'en suis fier !<br>
    </body>
</html>

Si tout se passe bien, en ouvrant le fichier avec votre navigateur, vous devriez voir une page de deux lignes avec un titre pour la fenêtre de la page.

Ce squelette de page HTML va nous servir à créer nos pages grâce à l'Arduino ! En effet, nous allons faire créer à l'Arduino cet affichage, qu'il enverra ensuite au navigateur du client.

Que diriez vous d'un peu d'exercice pour vous dégourdir les neurones ?

TP : Affichez l’état des pins analogiques de l’Arduino sur une page web

Je vous propose de modifier notre programme de serveur pour qu'il affiche une page web un peu plus sympa qui contienne : 

  • Un titre de fenêtre : "Relevés analogiques" (on utilise les balises <title></title> ) ;

  • Un titre de page : "État des pins analogiques" (on l'encadre avec les balises<h1>  </h1>  qui modifient la taille de la police et sautent une ligne) ;

  • Une ligne horizontale : on utilise la balise<hr> (horizontal rule) sans avoir à la fermer ;

  • L'affichage de la lecture des 6 pins analogiques. (Il va vous falloir construire ces lignes en dynamique). Avec un affichage du genre : "pin A0 : " suivi de la lecture du pin ;

  • Une ligne horizontale pour finir la page.

Cet exercice vous permettra de mieux comprendre l'utilisation des balises HTML et leur création dynamique par l'Arduino. Je vous laisse donc essayer seul(e)s. N'hésitez pas à faire des tests, à vous tromper, à essayer de comprendre pourquoi, à recommencer différemment, à essayer d'autres présentations ! C'est tout l'intérêt de nos petits projets. ;)

Allez zou ! Au boulot !

TP : Correction

Le programme en lui-même n'est pas compliqué. En revanche, il faut être attentif à son organisation pour ne pas se retrouver avec des erreurs.

Voici donc le code que je vous propose (j'ai gardé l'affichage sur le moniteur série, mais il n'est pas obligatoire) :

#include <SPI.h> //bibliothèqe pour SPI
#include <Ethernet.h> //bibliothèque pour Ethernet
byte mac[] = {0x90, 0xA2, 0xDA, 0x0F, 0xDF, 0xAB}; //adresse mac de votre carte
byte ip[] = {192, 168, 1, 123}; //adresse IP
EthernetServer serveur(80); // déclare l'objet serveur au port d'écoute 80

void setup() {
  Serial.begin (9600); //initialisation de communication série
  Ethernet.begin (mac, ip); //initialisation de la communication Ethernet
  Serial.print("\nLe serveur est sur l'adresse : ");
  Serial.println(Ethernet.localIP()); //on affiche l'adresse IP de la connexion
  serveur.begin(); // démarre l'écoute
}

void loop() {
  EthernetClient client = serveur.available(); //on écoute le port
  if (client) { //si client connecté
    Serial.println("Client en ligne\n"); //on le dit...
    if (client.connected()) { // si le client est en connecté
      while (client.available()) { // tant qu'il a des infos à transmettre
        char c=client.read(); // on lit le caractère  
        Serial.write(c);// on l'écrit sur le moniteur série
        delay(1); //delai de lecture
      }
      //réponse au client
      client.println("<!DOCTYPE HTML>"); // informe le navigateur du type de document à afficher
      client.println("<html>"); //début du code html
      client.println("<head>"); //entête
      client.println("<title>Relevés analogiques</title>"); //titre de la fenêtre
      client.println("</head>");//fin d'entête
      client.println("<body>"); //corps
      client.println("<h1>Etat des pins analogiques</h1>"); //titre en grosse lettres
      client.println("<hr>"); //ligne horizontale
      for (int p=0;p<6;p++){ // boucle pour parcourir les pins
        client.print("pin A"); // affichage
        client.print(p); //numéro de pin
        client.print(" : "); // affichage
        client.print(analogRead(p)); //valeur donnée par le CAN
        client.print("<br>"); //saut de ligne
      }
      client.println("<hr>"); //ligne horizontale
      client.println("</body>"); //fin du corps
      client.println("</html>"); //fin du code html
      client.stop(); //on déconnecte le client
      Serial.println("Fin de communication avec le client");
    }
  }
}

Si vous lancez ce programme puis connectez votre navigateur à la bonne adresse IP (ici 192.168.1.123), vous devriez obtenir l'état des pins analogiques avec une présentation un peu plus sympa. ;)

Nous voyons tout de même que la construction d'une page HTML "mange" pas mal d'espace mémoire à l'Arduino. C'est la raison pour laquelle le shield propose la possibilité de stocker des informations sur une carte mini-SD .

On peut donc très bien imaginer que toute la première partie (la construction de la page) soit stockée dans un fichier qui sera lu pour être envoyé au client, puis qu'on y ajoute les éléments dynamiques et ferme la page.

Vous pouvez directement écrire votre début de page web sur un fichier que vous mettez sur votre carte SD pour être lu par l'Arduino. Mais vous pouvez aussi concevoir un programme qui écrit sur un fichier les lignes qui vous intéressent (en les saisissant une par une sur le moniteur), pour qu'il soit utilisé ensuite.

Pour les plus courageux, je vous propose d'essayer de créer ce programme vous-mêmes. Pour les autres, Je vais vous en donner un version simple...

Programme pour créer un fichier avec du texte

Ce programme permet de saisir du texte ligne par ligne. Il peut vous servir à créer votre page HTML directement depuis l'IDE.

/*
 * Programme de création de fichier simple
 * à stocker sur la carte mini-SD du shield ethernet
 * Ce programme peut servir à créer rapidement des entêtes
 * pour des pages html
 * le mot clef "efface" supprime le fichier s'il existe
 * Il vous faut modifier le nom de fichier pour qu'il vous corresponde
 * /!\ attention pas plus de 8 caractères sans accents
 * Nanomaitre pour openClassRooms 2015
 * Ce programme est dans le domaine public
 */

#include <SPI.h> // bibliothèque pour com SPI
#include <SD.h> // bibliothèque pour carte SD
char nom[] = "entete.ard"; //à modifier en fonction des besoins
File monFichier; // objet file

void setup() {
  Serial.begin(9600); // début communication moniteur
  Serial.println("* Start *"); //mise en page
  if (!SD.begin(4)) { // test et démarrage connexion carte SD
    Serial.println("Pb avec la carte");
    return;
  };
  //pour info
  Serial.print ("Nom de fichier : ");
  Serial.println(nom);
}


void loop() {
  Serial.println("Saisissez votre texte :");
  while (!Serial.available()); //attente de saisie
  String ligne = ""; //chaîne de récupération
  while (Serial.available()) { // tant que caractères à lire
    char c = Serial.read(); // lecture du caractère
    if (c != 10 && c != 13) { //on enlève les fins de ligne
      ligne += c; // on construit la ligne
    }
    delay(10); //attente pour communication
  }
  if (ligne == "efface") { // test mot-clé
    //effacement du fichier
    if (SD.exists(nom)) {
      SD.remove(nom);
      Serial.println("Effacement ok !");
    }
    else {
      Serial.println("Pas de fichier");
    }
  }
  else {
    //écriture du fichier
    monFichier = SD.open(nom, FILE_WRITE);
    monFichier.println(ligne);
    monFichier.close();
  }
  //affichage du contenu du fichier
  Serial.println("Le ficher contient :");
  monFichier = SD.open(nom, FILE_READ);
  char c = 0;
  while (c != -1) {
    c = monFichier.read();
    Serial.print(c);
  }
  Serial.println();
  monFichier.close();
}

Ce petit programme n'est utile que pour des saisies ponctuelles et simples. Le mot-clé "efface" permet de supprimer le fichier pour recommencer. Vous devez saisir dans le code le nom de votre fichier.

Dans l'exemple le fichier s'appelle "entete.ard". Voilà ce que j'y ai saisi (en plusieurs lignes) :

<!DOCTYPE HTML>
<html>
<head>
<title>Lecture analogique</title>
</head>
<body>
<h1>Etat des pins analogiques</h1>
<hr>
<br>

J'ai donc ici mon en-tête de créée. Je peux donc aller la chercher sur la carte SD au moment de la fabrication de ma page HTML. Il faut ensuite penser à bien fermer les balises qui sont restées ouvertes.

Programme pour construire la page web à partir du fichier

Voici donc le programme serveur modifié avec la lecture sur la carte SD :

#include <SPI.h> //bibliothèqe pour SPI
#include <Ethernet.h> //bibliothèque pour Ethernet
#include <SD.h> // bibliothèque pour la carte SD
byte mac[] = {0x90, 0xA2, 0xDA, 0x0F, 0xDF, 0xAB}; //adresse mac de votre carte
byte ip[] = {192, 168, 1, 123}; //adresse IP
EthernetServer serveur(80); // déclare l'objet serveur au port d'écoute 80

void setup() {
  Serial.begin (9600); //initialisation de communication série
  if (!SD.begin(4)) { // test et démarrage connexion carte SD
    Serial.println("Pb avec la carte");
    return;
  };
  Ethernet.begin (mac, ip); //initialisation de la communication Ethernet
  Serial.print("\nLe serveur est sur l'adresse : ");
  Serial.println(Ethernet.localIP()); //on affiche l'adresse IP de la connexion
  serveur.begin(); // démarre l'écoute
}

void loop() {
  EthernetClient client = serveur.available(); //on écoute le port
  if (client) { //si client connecté
    Serial.println("Client en ligne\n"); //on le dit...
    if (client.connected()) { // si le client est en connecté
      while (client.available()) { // tant qu'il a des infos à transmettre
        char c = client.read(); // on lit le caractère
        Serial.write(c);// on l'écrit sur le moniteur série
        delay(1); //delai de lecture
      }
      //réponse au client
      entete(client);
      for (int p = 0; p < 6; p++) { // boucle pour parcourir les pins
        client.print("pin A"); // affichage
        client.print(p); //numéro de pin
        client.print(" : "); // affichage
        client.print(analogRead(p)); //valeur donnée par le CAN
        client.print("<br>"); //saut de ligne
      }
      client.println("<br><hr></body></html>"); //ligne horizontale et fermeture des balises
      client.stop(); //on déconnecte le client
      Serial.println("Fin de communication avec le client");
    }
  }
}
//fonction d'affichage de l'entête HTML
void entete(EthernetClient cl) {
  File monFichier = SD.open("entete.ard", FILE_READ);
  char c = 0;
  while (c != -1) {
    c = monFichier.read();
    if (c > 31 || c == 10) { //permet d'éviter des charactères non affichables
      cl.write(c);
    }
  }
  monFichier.close();
}

J'ai mis la lecture du fichier dans une fonction. Pour pouvoir envoyer l'info à l'objet client, la fonction contient en paramètre l'attente d'un objet client (typeEthernetClient), ce qui permet ensuite de l'utiliser dans la fonction.

Bien, maintenant, comme je l'ai indiqué plus haut, nous allons rafraîchir cette page automatiquement.

Pour pouvoir le faire, il faut que le serveur (ici notre Arduino) envoie au navigateur du client le temps de rafraîchissement.

Rafraîchissez une page web automatiquement

En fait nous allons en profiter aussi pour valider le type de codage de caractères. Avant de construire la page, le serveur doit envoyer certaines informations au client, dont notamment le type de document, le taux de rafraîchissement éventuel, le codage des caractères, le type de maintien de la connexion.

Voici ce qui doit être placé avant la balise<!DOCTYPE HTML> (côté serveur) :

HTTP/1.1 200 OK
Content-Type: text/html; charset=ascii
Connection: close
Refresh: 5

Je l'ai placé directement dans ma fonction d'en-tête. Vous auriez pu l'ajouter au fichier stocké sur la carte SD.

 

Programme final d’affichage des états des pins sur une page web

Voici donc le programme final, avec utilisation de la carte mémoire, les infos serveurs, et la mise en page :

#include <SPI.h> //bibliothèqe pour SPI
#include <Ethernet.h> //bibliothèque pour Ethernet
#include <SD.h> // bibliothèque pour la carte SD
byte mac[] = {0x90, 0xA2, 0xDA, 0x0F, 0xDF, 0xAB}; //adresse mac de votre carte
byte ip[] = {192, 168, 1, 123}; //adresse IP
EthernetServer serveur(80); // déclare l'objet serveur au port d'écoute 80

void setup() {
  Serial.begin (9600); //initialisation de communication série
  if (!SD.begin(4)) { // test et démarrage connexion carte SD
    Serial.println("Pb avec la carte");
    return;
  };
  Ethernet.begin (mac, ip); //initialisation de la communication Ethernet
  Serial.print("\nLe serveur est sur l'adresse : ");
  Serial.println(Ethernet.localIP()); //on affiche l'adresse IP de la connexion
  serveur.begin(); // démarre l'écoute
}

void loop() {
  EthernetClient client = serveur.available(); //on écoute le port
  if (client) { //si client connecté
    Serial.println("Client en ligne\n"); //on le dit...
    if (client.connected()) { // si le client est en connecté
      while (client.available()) { // tant qu'il a des infos à transmettre
        char c = client.read(); // on lit le caractère
        Serial.write(c);// on l'écrit sur le moniteur série
        delay(1); //délai de lecture
      }
      //réponse au client
      entete(client);
      for (int p = 0; p < 6; p++) { // boucle pour parcourir les pins
        client.print("pin A"); // affichage
        client.print(p); //numéro de pin
        client.print(" : "); // affichage
        client.print(analogRead(p)); //valeur donnée par le CAN
        client.print("<br>"); //saut de ligne
      }
      client.println("<br><hr></body></html>"); //ligne horizontale et fermeture des balises
      client.stop(); //on déconnecte le client
      Serial.println("Fin de communication avec le client");
    }
  }
}
//fonction d'affichage de l'entête HTML
void entete(EthernetClient cl) {
  cl.println("HTTP/1.1 200 OK"); // type du HTML
  cl.println("Content-Type: text/html; charset=ascii "); //type de fichier et encodage des caractères
  cl.println("Connection: close");  // fermeture de la connexion quand toute la réponse sera envoyée
  cl.println("Refresh: 5");  // rafraîchissement automatique de la page toutes les 5 secondes
  cl.println(); //saut de ligne obligatoire avant la suite
  File monFichier = SD.open("entete.ard", FILE_READ);
  char c = 0;
  while (c != -1) {
    c = monFichier.read();
    if (c > 31 || c == 10) { //permet d'éviter des caractères non affichables
      cl.write(c);
      Serial.write(c);
    }
  }
  monFichier.close();
}

En résumé

Vous avez appris à connecter votre carte Arduino sur votre réseau local et à créer un serveur qui peut afficher ce qui est lu par la carte.

Vous avez, de plus, abordé quelques notions en HTML, qui sont indispensables pour construire une page lisible par un navigateur web.

Vous avez aussi conçu un programme permettant d'écrire des informations sur la carte SD.

On peut imaginer, sans trop de difficulté, un programme qui lit régulièrement les états des pins analogiques (toutes les minutes par exemple), qui les stocke sur la carte SD, et qui lorsqu'un client arrive, affiche le résultat de l'ensemble des mesures...

Le chapitre suivant va vous apprendre à envoyer des informations à l'Arduino via le réseau local, tout un programme. ;)

Example of certificate of achievement
Example of certificate of achievement