IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Arduino Discussion :

Shield Ethernet 2: Chargement d'une feuille de style depuis la carte SD


Sujet :

Arduino

  1. #1
    Rédacteur

    Avatar de naute
    Homme Profil pro
    Retraité
    Inscrit en
    Mars 2009
    Messages
    708
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Retraité

    Informations forums :
    Inscription : Mars 2009
    Messages : 708
    Points : 2 790
    Points
    2 790
    Par défaut Shield Ethernet 2: Chargement d'une feuille de style depuis la carte SD
    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

  2. #2
    Responsable Arduino et Systèmes Embarqués


    Avatar de f-leb
    Homme Profil pro
    Enseignant
    Inscrit en
    Janvier 2009
    Messages
    12 759
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Sarthe (Pays de la Loire)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Janvier 2009
    Messages : 12 759
    Points : 57 830
    Points
    57 830
    Billets dans le blog
    42
    Par défaut


    L'entete change pour du css il me semble :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    client.println(F("Content-Type: text/css"));

  3. #3
    Rédacteur

    Avatar de naute
    Homme Profil pro
    Retraité
    Inscrit en
    Mars 2009
    Messages
    708
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Retraité

    Informations forums :
    Inscription : Mars 2009
    Messages : 708
    Points : 2 790
    Points
    2 790
    Par défaut
    Bonjour f-leb

    Citation Envoyé par f-leb Voir le message
    L'entete change pour du css il me semble :
    Et il te semble bien ; ça fonctionne admirablement.

    Et je suppose que pour intégrer un fichier JavaScript, il faut mettre:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    client.println(F("Content-Type: text/javascript"));
    beaucoup!

    naute

  4. #4
    Responsable Arduino et Systèmes Embarqués


    Avatar de f-leb
    Homme Profil pro
    Enseignant
    Inscrit en
    Janvier 2009
    Messages
    12 759
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Sarthe (Pays de la Loire)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : Janvier 2009
    Messages : 12 759
    Points : 57 830
    Points
    57 830
    Billets dans le blog
    42
    Par défaut
    ou application/javascript, mais il faut plutôt demander ça aux spécialistes du Web

    Bonne continuation

  5. #5
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 650
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 650
    Points : 11 143
    Points
    11 143
    Par défaut
    c'est bien

  6. #6
    Rédacteur

    Avatar de naute
    Homme Profil pro
    Retraité
    Inscrit en
    Mars 2009
    Messages
    708
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Retraité

    Informations forums :
    Inscription : Mars 2009
    Messages : 708
    Points : 2 790
    Points
    2 790
    Par défaut
    à tous les deux et à bientôt

    amicalement,
    naute

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [XL-2010] Chargement d'une feuille excel dans une listview
    Par x109488 dans le forum Macros et VBA Excel
    Réponses: 2
    Dernier message: 05/12/2012, 11h43
  2. Chargement d'une feuille de styles
    Par Nico87 dans le forum Struts 1
    Réponses: 1
    Dernier message: 16/06/2010, 14h35
  3. Réponses: 2
    Dernier message: 08/09/2006, 15h04
  4. Desactiver une Feuille de Style
    Par mego dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 19/05/2005, 14h16
  5. Rattacher une feuille de style a un XML existant
    Par aour dans le forum XML/XSL et SOAP
    Réponses: 5
    Dernier message: 08/10/2002, 22h07

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo