WebServer, problème contenant le.css et récupération des données de la page Web

International Français
#1

Bonjour,

Je me suis lancée dans un projet pour la fac il y a deux mois avec Arduino uno et mega, shield Ethernet, shield MP3 et différents capteurs.

J’ai réussi à gérer les capteurs, MP3 et communication entre Arduino ainsi qu’une page web (allumer et éteindre le prototype).

Mais j’ai deux soucis.

Le premier est que je n’arrive pas à utiliser mon fichier .css sur la carte SD.
Je me suis renseignée, j’ai testé plusieurs exemples mais je ne comprends pas, je n’y arrive pas.

Pourtant, le fichier est bien détecté par l’Arduino lorsque je liste le contenu de la carte SD.

Dernièrement, j’ai trouvé un exemple mettant en oeuvre un .css sur la carte SD, seulement, je ne m’y connais pas encore assez bien pour comprendre ce dont j’ai besoin dans ce code, je n’arrive pas à m’en sortir…

→ Arduino Web Enabled Aquarium Controller | andremiller.net

Mon deuxième problème:

J’ai un sonar dans mon projet qui lance une musique lorsque quelqu’un s’approche à une certaine distance.

Et j’aimerais paramétrer cette distance à partir de ma page web.
C’est à dire pouvoir écrire une valeur sur la page web (dans un formulaire, une textbox ou autre) puis récupérer cette valeur et ensuite l’enregistrer dans une variable dans Arduino pour pouvoir changer le comportement du prototype.

J’ai testé avec du PHP mais j’ai lu que ça ne fonctionnait pas sur Arduino à plusieurs endroit donc j’ai laissé tombé.

Encore une fois, j’ai cherché à beaucoup d’endroits mais je ne trouve rien qui corresponde à ce que je cherche…

Je joins mon code, mais il n’est probablement pas complet au niveau de l’appel de la page .css.

Si quelqu’un a une idée… Je suis désespérée :wink:

Merci d’avance!

Slave.ino (19.6 KB)

#2

Je ne peux pas t'aider pour le problème CSS,

Pour le 2ème problème, il faut que l'url de la page que tu demandes, contienne une chaine spécifique que ton programme va reconnaitre. A partir de là, tu peux chercher la valeur.

Plus concret : si ton arduino à l'IP 1.1.1.1. Tu peux par exemple demander la page : http://1.1.1.1:80/variable/500.
Ton arduino reçoit cette page, mais lorsque l'url contient le mot "variable' tu sais que c'est pas une page, et qu'il faut analyser la suite de l'URL pour récupérer le 500

DSL, je peux pas faire mieux pour toi, j'ai pas de shield pour tester là

EDIT : par rapport à ton code actuel
Ca se passe à la ligne *if (c == '\n') { *
A ce moment là il faut que tu analyses le contenu de readString (d'ailleurs petite info, tu ferais mieux de changer le nom de cette variable qui apparemment correspond déjà à autre chose en C++)

#3

Déjà un grand merci pour ta réponse, j'étais désespérée mais grâce à toi j'ai un nouvel espoir :wink:

Il y a juste une chose qui m’embête: lorsqu'on demande une page comme ça, c'est pas une page qui est déjà créée à l'avance?

Je vais changer ça, j'ai étudié le c++ ça vient sans doute de la :wink:

#4

Tsatsar:
Il y a juste une chose qui m’embête: lorsqu'on demande une page comme ça, c'est pas une page qui est déjà créée à l'avance?

Non, comme pour l'exemple ServerWeb de la lib ethernet, la page web que tu envoies à ton navigateur n'est pas stoquée sur la carte SD, tu la crée au fil des conditions rencontrées avec les méthodes client.print() et client.println()
Mais évidement, il est possible de créer ces pages à l'avance, de les stocker sur carte SD. Et de les "remplir" au moment désiré. J'ai vu passer des posts à ce sujet, mais je retrouve pas

Même chose pour ton problème de CSS, quelqu'un avait proposé une lib qui se chargeait de ça (c'était pourtant ces 15 derniers jours)

#5

Je vais regarder, un grand merci =)

#6

Pour traiter la chaîne de caractère, la fonction strtok (Page manuel de STRTOK) convient bien?

Sinon, j’ai cherché dans les 16-17 dernières pages du forum français, je n’ai rien trouvé qui m’aide plus, surtout pour le css :confused:

#7

Tsatsar:
Pour traiter la chaîne de caractère, la fonction strtok (Page manuel de STRTOK) convient bien?

Sinon, j’ai cherché dans les 16-17 dernières pages du forum français, je n’ai rien trouvé qui m’aide plus, surtout pour le css :confused:

bonsoir
j’ai vu passer qq chose là dessus (pas testé) mais ce n’etait pas dans les 15 derniers jours :grin:

regarde ça

#8

C'était ça il me semble ICI

#9

SAlut , j’ai triché en stockant mon css sur un site perso free en pointant le fichier comme cela :

          // Répond au client avec une en-tête http standard
      client.println(F("HTTP/1.1 200 OK"));
      client.println(F("Content-Type: text/html"));
      client.println();
      client.println(F("<meta name='viewport' content='width=device-width'/>")); // adapter la taille du site a celle de l'écran du client (pour un bon affichage sur les portables)
      client.println(F("<!DOCTYPE html><html><head><meta charset='utf-8' />"));

// Lien vers le fichier de mise en forme CSS
      client.println(F("<link rel='stylesheet' type='text/css' href='http://tonsite.free.fr/arduino/thermostat/ThermostatV3.css' >"));

Bon cela ne répond pas vraiement a ta question mais peu etre cette solution peu te convenir.

Pour récupérer des valeurs de formulaire tu peux d’inspirer de ca :

/*
Récupère la valeur GET dans la Requette HTTP du Client
Doit etre de la forme :

http://192.168.1.98:2908/?Requete_GET=12345
=>Requete_GET_1=123
=>Requete_GET_2=45


*/


#include <SPI.h>
#include <Ethernet.h>

byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};
IPAddress ip(192, 168, 1, 98);
EthernetServer serveur_HTML(2908);
EthernetClient client;

byte Requete_GET_1=0;
byte Requete_GET_2=0;


void setup() {
  
  Serial.begin(9600);// Demarre liaison série entre Arduino et PC pour la console
  Ethernet.begin(mac, ip);//Initialise la librairie ethernet et les paramètres du réseau.
  serveur_HTML.begin();   //Demande au serveur de commencer à écouter les connexions entrantes.
}


void loop() {
  
Affiche_la_Page_Web();

}


void Affiche_la_Page_Web(){
 
  String HTTP_req="";  // Stock la requête HTTP reçue
  
  client = serveur_HTML.available(); // création de 'client' s'il y a des données dans 'serveur_HTML'
  if (client) {// si tu detecte q'un client est connecté (Un client HTTP est un logiciel conçu pour se connecter à un serveur HTTP.)
                                                        //(Dans le cas le plus courant, il s'agit d'un navigateur Web)
    boolean Ligne_en_cours_est_vide = true;
    
    while (client.connected()) {// tant que le client est connecté
      if (client.available()) { // si il y a des données a lire
        char c = client.read(); //Associe chaque caractere entrant à c
        Serial.write(c); // Affiche 'c' sur la console
        
        if (HTTP_req.length() < 23) { // ne conserve que les 22 premier caractere de requête HTTP
            HTTP_req += c;
        }
        if (c == '\n' && Ligne_en_cours_est_vide) { // si la ligne en cour est vide 
                                                    // et que l'on commence une nouvelle ligne
                                                    // la requête HTTP est terminée
          // Vérifie si une requête GET est présente dans la requête HTTP
          Serial.println(HTTP_req);
          if (HTTP_req.substring (0,6) == "GET /?") { // si la partie entre le caractere 0 et 6 de HTTP_req est egale à : "GET /?" => une requette GET est présente
              Requete_GET_1=(HTTP_req.substring (18,21)).toInt();
              Requete_GET_2=(HTTP_req.substring (21,23)).toInt();
              Serial.println(Requete_GET_1);
              Serial.println(Requete_GET_2);
          }
          // Répond au client avec une en-tête http standard
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();
          client.println("<!DOCTYPE HTML>");
          client.println("<html>");
          client.println("Page Web Moche");
          client.println("</html>");
          break;//L'instruction break est utilisée pour sortir de la boucle while
        }
        // si '\n' est suivi de '\r' => la ligne est vide
        if (c == '\n') { // si on commence une nouvelle ligne
          Ligne_en_cours_est_vide = true;
        }
        else if (c != '\r') { // si il y a un carractere autre que retour a la ligne
          Ligne_en_cours_est_vide = false; // la ligne n'est pas vide
        }
      }
    }
    delay(1);// laisser le temps au navigateur Web pour recevoir les données
    client.stop(); //Déconnecte le client du serveur. 
  }  
}

derniere chose pour limiter ta consommation de mémoire place tes nombreux client.print avec la macor “F” devant.

ainsi :

client.println("");

tu l’écrit

client.println(F(""));

#10

Un grand merci à tous, je vais essayer de faire ce que je veux faire avec vos tuyaux :wink:

Je reviens vers vous si je ne m'en sors pas :wink:

#11

Merci pour vos réponses, j'ai avancé mais j'ai encore un soucis...

Bon, déjà j'ai laissé tombé les images en css, je ne m'en suis pas sortie. Donc j'ai juste mis un fond et différentes couleurs dans une balise Style de ma page HTML.

J'ai réussi à récupérer un URL du type : "http://192.168.1.100/Req?ra=287&rb=OK&rc=527&rd=KO&re=2&rf=257"

J'ai bien compris l'exemple donné par manuo1 mais comme les nombres peuvent contenir plusieurs chiffres, je n'ai pas d'indices fixes.
J'aimerais récupérer ce qu'il y a entre chaque "=" et "&" ainsi que celui après le dernier "=" et la fin de la chaine.

Je voulais faire plusieurs "if" pour tout récupérer en me basant sur un exemple de Skywodd mais je ne vois pas comment faire..

char test[] = "abc 123 def"; // La chaine de char d'origine
char *ptr = test; // Le pointeur vers le début de ta sous chaine (si elle existe)

// Avance le pointeur ptr jusqu'au premier espace, puis le saute
while(*ptr != ' ' && *ptr != '\0') ++ptr;
if (*ptr != '\0')
  ++ptr;
else
  return; // Si fin de chaine = pas de sous chaine trouvé -> return

// Cherche l'espace suivant puis le remplace par un \0 (fin de chaine)
while(*ptr != ' ' && *ptr != '\0') ++ptr;
if (*ptr != '\0') *ptr = '\0';

// ptr pointe désormais sur le morceau "123"

Je ne m'en sort pas du tout.

Quelqu'un pourrait m'aiguiller?

#12

Pour l'instant j'ai fait avec la méthode de manuo1, mais ça m’empêche de rentrer ce que je veux...

Personne pour m'aider?

#13

Personne? =3

#14

Salut,,
je peux pas trop t'aider sur le probleme de l'url, mais l'arduino ne peut pas ouvrir plusieurs fichiers a la fois (corrigez moi si je me trompe), donc il faut que pour chaque page de ton site, tu mettes ton css dans la page HTML.
Désolé de ne pas pouvoir plus aider.

#15

Merci pour ta réponse =)

C'est effectivement ce que j'ai fini par faire..

#16