Bonjour

je commande, entre autre, des éclairages depuis un navigateur, sur PC, tablette ou SmartPhone. Pour des raisons d'encombrement de la mémoire, relativement limitée, de l'arduino UNO, mes pages sont stockées sous forme de fichiers HTML (ici "index.html" pour le test), sur une carte SD insérée dans le logement "ad hoc" du shield Ethernet_2 et ça fonctionne correctement.

J'aimerais améliorer la présentation et l'ergonomie de cette "télécommande", et pour ce faire, utiliser du JavaScript et du CSS. J'ai donc fait un petit test pour charger une feuille de style, dans un premier temps, stockée dans un fichier "style.css" (quelle originalité) sur cette même carte SD.

Quand je charge ma page, la balise <link> fait son travail et envoie une requête à Arduino via le shield Ethernet, pour qu'on lui fasse parvenir, dans les plus brefs délais, le fichier "style.css" dont elle a besoin pour refaire les peintures.

Je traite la requête, pour éviter de renvoyer la page, et j'envoie donc le fichier "style.css" de la même manière que celle utilisée pour le fichier "index.html", on ne change pas une équipe qui gagne, mais là... Elle ne gagne pas . Rien ne se passe: la page s'affiche, bien sûr, mais sans les mises en forme.

Je ne connais pas les mécanismes utilisés par les navigateurs pour le traitement des fichiers qu'ils reçoivent sur une demande de la page affichée, ce qui fait que je ne vois pas comment résoudre mon problème. Il est tout à fait possible qu'il faille suivre un protocole particulier pour envoyer le fichier css, différent de celui utilisé pour le fichier html. Et peut-être également pour les fichiers javaScript ou les fichiers "image" comme jpeg ou png.

Voici mon code test, bien standard,
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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 
/*
   CONTEXTE:
   Arduino UNO rev3
   Shield Ethernet 2
      SPI Ethernet: SS = 10
      SPI SD: SS = 4
   Carte micro SDHC 8Gio
   IDE 1.6.8
 
   OBJECTIF:
   Lire le contenu du fichier "index.html" depuis la carte micro SD pour l'afficher dans la console,
   puis l'envoyer par le réseau Ethernet au navigateur, récupérer le fichier "style.css" demandé
   dans la balise "<link>" pour afficher la page mise en forme.
*/
 
#include <SPI.h>
#include <Ethernet2.h>
#include <SdFat.h>
SdFat SD;
 
 
 
//CONSTANTES
byte mac[] = {0x90, 0xA2, 0xDA, 0x10, 0x4F, 0x25};  //Adresse MAC du shield Ethernet (non critique)
const int carteSD = 4;      //Broche de commande par défaut pour le shield Ethernet Arduino
 
//VARIABLES
String reception = "";      //Chaine reçue par le serveur (première ligne uniquement <=> requète)
char carLu;
 
//INSTANCIATIONS
EthernetServer serveurHTTP(80); //Instanciation d'un serveur sur le port 80 (port HTTP par défaut)
 
//INITIALISATIONS
void setup()
{
  Serial.begin(115200);               //Penser à paramétrer le terminal série avec la même valeur
 
  if (SD.begin(carteSD))              //Si la fonction d'initialisation renvoi TRUE,
  {
    Serial.println(F("Initialisation OK!"));
  }
  else   //sinon compte rendu d'échec
  {
    Serial.println(F("Erreur SD!"));
    return;
  }
 
  Ethernet.begin(mac);                         //Initialisation du serveur
  delay(1000);                                 //Délais d'initialisation du Shield Ethernet 2
  if (Ethernet.localIP() != NULL)              //Petite vérification avant démarrage du serveur
  {
    Serial.print(F("Serveur a l'adresse '"));
    Serial.print(Ethernet.localIP());
    Serial.println(F("' OK!'"));
  }
  else
  {
    Serial.println(F("Erreur serveur"));
  }
}
 
//PROGRAMME
void loop()
{
  EthernetClient client = serveurHTTP.available();           //Instanciation d'un client
  if (client)                                                //Si le client existe
  {
    reception = "";
    if (client.connected())                                  //Si le client est connecté
    {
      Serial.println(F("Client connecte"));
      if (client.available()) carLu = client.read();
      while (client.available() && carLu != 10) //Tant qu'il reste au moins 1 octet à lire sur la première ligne
      {
        reception = reception + carLu;
        carLu = client.read();
      }
      Serial.print(F("\n'reception' = "));
      Serial.println(reception);
      if (reception.startsWith("GET"))                        //Si la chaine reçue contient une requète
      {
        Serial.println(F("Requete valide (GET)"));
        client.println(F("HTTP/1.1 200 OK"));                 //On envoi l'accusé de bonne réception au client
        client.println(F("Content-Type: text/html"));         //On indique le type du contenu de la réponse
        client.println(F("Connection: close"));               //La connexion sera fermée en fin de réception
        client.println("");                                   //Ligne blanche imposée par le protocole HTTP
        delay(10);
        if (reception.startsWith("GET / HTTP/1.1"))           //Requête sans paramètre => affichage de la page
        {
          if (SD.exists("index.html"))                        //Si le fichier "index.html" existe on l'ouvre en
          {                                                   //lecture, puis on lit son contenu caractère par
            File fichier = SD.open("index.html", FILE_READ);  //caractère que l'on envoie en même temps vers
            while (fichier.available())                       //le client pour affichage.
            {
              char carTemp = fichier.read();
              Serial.write(carTemp);
              client.write(carTemp);
            }
            fichier.close();
          }
          else
          {
            Serial.println(F("Fichier 'index.html' absent"));
            return;
          }
        }
        else if (reception.indexOf("style.css") != -1)       //Si demande d'envoi du fichier 'style.css'
        {                                                    //(balise <link> dans le fichier html)
          if (SD.exists("style.css"))                        //Si le fichier "style.css" existe on l'ouvre en
          {                                                  //lecture, puis on lit son contenu caractère par
            File fichier = SD.open("style.css", FILE_READ);  //caractère que l'on envoie en même temps vers
            while (fichier.available())                      //le client pour affichage.
            {
              char carTemp = fichier.read();
              Serial.write(carTemp);
              client.write(carTemp);
            }
            fichier.close();
          }
          else
          {
            Serial.println(F("Fichier 'style.css' absent"));
            return;
          }
        }
      }
      else Serial.println(F("Requete non conforme"));
      delay(1);                                               //La transmission est rapide mais pas instantanée
      client.stop();                                          //Fermeture de la connexion
    }
  }
 
}
 
 
//FONCTIONS
et voilà le retour console qui affiche bien le texte des deux fichiers, sachant que la transmission vers le navigateur est opérationnelle étant donné que la page s'affiche bien, même si elle s'affiche sans la mise en forme.
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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
Initialisation OK!
Serveur a l'adresse '192.168.1.18' OK!'
Client connecte
 
'reception' = GET / HTTP/1.1
 
Requete valide (GET)
<!DOCTYPE html>
<html>
	<head>
		<title>Test d'affichage du fichier "index.html" stocké sur la carte SD du shield Ethernet 2 Arduino</title>
		<link rel="stylesheet" href="style.css" type="text/css"/>
	</head>
	<body>
		<center>
			<div>		
				<h3>Test d'affichage du fichier "index.htm"</h3>
				<p>Le fichier 'index.html' codant pour cette page se trouve dans la racine d'une carte microSD de 8Go insérée dans son support sur un shield Ethernet 2 connecté à une carte Arduino UNO v3.</p>
				<p>Les paramètres de mise en page se trouvent dans le fichier 'style.css' présent sur la même carte, et qui est invoqué par la balise link</p>
			</div>
		</center>
	</body>
</html>Client connecte
 
'reception' = GET /style.css HTTP/1.1
 
Requete valide (GET)
body
{
	background-color: rgb(222,222,222);
}
 
div 
{
	width: 400px; 
	color: rgb(250,160,60); 
	background-color: rgb(0,151,156); 
	padding: 10px;
}
 
p 
{
	text-align: justify;
}
Si quelqu'un a une idée pour me tirer du pétrin, je suis preneur.

Merci d'avance ,

naute