Afficher courbes sur site web

Bonjour ,

Alors voila dans le cadre de mon projet je dois afficher des courbes à partir d'un fichier qui est dans ma carte SD sur un site web que j'ai déjà fais avec webduino . Ma page web sera donc formé de tel manière : -Afficher mon tableau avec mes valeurs -Afficher le graphique donnée grâce a ces valeurs .

Questions : Comment puis je afficher mes courbes ? Skywodd m'avais mis auparavant sur une piste avec l'API Line Charts de google mais d'après ce que j'ai compris c'est une envoi de requête à google qui va me renvoyer les courbes mais il faudrait donc toujours avoir une connexion internet et donc si j'ai pas Internet , il ne peux pas afficher les courbes et donc problèmes :stuck_out_tongue_closed_eyes: . Après j'ai regardé aussi du coté de Processing mais alors la il me faudra des explications car je regarde mais j'y comprend pas grand chose :sweat_smile: .

A moins que j'ai mal compris si quelqu'un a une idée ou quoi je suis preneur XD . Merci d'avance .

Roxas77: Skywodd m'avais mis auparavant sur une piste avec l'API Line Charts de google mais d'après ce que j'ai compris c'est une envoi de requête à google qui va me renvoyer les courbes mais il faudrait donc toujours avoir une connexion internet et donc si j'ai pas Internet , il ne peux pas afficher les courbes et donc problèmes :stuck_out_tongue_closed_eyes: .

Oué enfin comment tu veux mettre à jour une page web sans internet !!

Oué enfin comment tu veux mettre à jour une page web sans internet !!

B tu peux afficher une page web en local et c’est pas pour autant que t’as internet .

Enfin bref je crois avoir trouvé une solution avec la balise et un peu de javascipt mais je ne m’y connais pas du tout donc je reviens avec un morceau de code bientot :).

Roxas77: Questions : Comment puis je afficher mes courbes ? Skywodd m'avais mis auparavant sur une piste avec l'API Line Charts de google mais d'après ce que j'ai compris c'est une envoi de requête à google qui va me renvoyer les courbes mais il faudrait donc toujours avoir une connexion internet et donc si j'ai pas Internet , il ne peux pas afficher les courbes et donc problèmes :stuck_out_tongue_closed_eyes: . Après j'ai regardé aussi du coté de Processing mais alors la il me faudra des explications car je regarde mais j'y comprend pas grand chose :sweat_smile: .

Faut que tu te décides, soit tu fait une page WEB et tu utilises l'api chart de google ou une librairie graphique en javascript, exemple : http://www.rgraph.net/

Soit tu fait un client PC sous processing et là tu fait du dessin comme tu l'entends. Mais c'est pas la même chose ...

Je pense que je vais le faire en javascript ça m'inspire plus et effectivement vu ce que tu dit je n'ai pas du comprendre grand chose avec le Processing .

Et juste petite question bête mais qui a son importance je fais comment pour integrer les lib .js dans l'arduino pour pouvoir les utiliser ? Merci en tout cas pour les réponses ;).

Roxas77: Et juste petite question bête mais qui a son importance je fais comment pour integrer les lib .js dans l'arduino pour pouvoir les utiliser ? Merci en tout cas pour les réponses ;).

Soit tu fait un include en utiliser un serveur CDN externe ayant cette librairie en stock, exemple : http://www.jsdelivr.com/#!rgraph

Soit tu met le fichier sur une carte SD et tu laisses webduino se démerder pour l'accès au fichier en question ;) Si tu utilises pas webduino : tu gère la requête GET qui demande le fichier et tu l'envoi au client.

J’ai mis les 2 fichiers :-RGraph.common.core.js et RGraph.line.js dans ma carte SD et j’ai fait :

P(messageRgraph) = "<script src=\"/RGraph.common.core.js\"></script>";
    P(messageRgraph2) ="<script src=\"/RGraph.line.js\"></script>" ;       
    P(message4) =  
    "<canvas id=\"myCanvasTag\" width=\"600\" height=\"200\">[No canvas support]</canvas>"  
        "<script>"
            "data = [78,16,26,23,25,51,34,64,84,84];"
            "line = new RGraph.Line(\"myCanvasTag\", data);"
            "line.Set(\"chart.labels\", [\"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\"]);"
            "line.Draw();"
            "</script>"
      "</body></html>";
    server.printP(message1);
    server.printP(messageImage);
    server.printP(message2);
    loadTable(server , "test.csv");
    server.printP(message3);
    server.printP(messageRgraph);
    server.printP(messageRgraph2);
    server.printP(message4);

et il ne trace pas la courbe .

J'ai fail, c'est TinyWebServer qui gère tout seul les fichiers ... Pour webduino il faut que tu fasses une callback sur le nom de ton fichier ("/RGraph.common.core.js" par exemple) qui ouvre le fichier sur la carte sd et l'envoi au client.

Exemple sans la partie carte SD : https://github.com/sirleech/Webduino/tree/master/examples/Web_Image

Ouaip j’ai vu ça mais je comprend pas un truc x) .
Quand je l’appelle normalement il va chercher le fichier mais il affiche le Header sur ma page x) pas compris ^^ . je te met un screenshot en PJ .

→ le code …

Ah oui mince x)

if (type == WebServer::GET)
  {
    /* store the HTML in program memory using the P macro */
    P(message1) = 
      "<html><head><title >Simulateur </title></head>"
      "<body style=\"text-align:left;\">"     
      "<div style=\"font-size:200%;font-weight:bold; border: 2px black solid;\">";
    P(message2) =    
      "<span style=\"text-indent:50%;margin-left:150px;margin-top:25px;\">Simulation thermique</span></div>"
      "<center>";
    P(message3) = "</center>";
    P(messageRgraph) = "<script src=\"/RGraph.common.core.js\"></script>";
    P(messageRgraph2) ="<script src=\"/RGraph.line.js\"></script>" ;       
    P(message4) =  
    "<canvas id=\"myCanvasTag\" width=\"600\" height=\"200\">[No canvas support]</canvas>"  
        "<script>"
            "data = [78,16,26,23,25,51,34,64,84,84];"
            "line = new RGraph.Line(\"myCanvasTag\", data);"
            "line.Set(\"chart.labels\", [\"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\"]);"
            "line.Draw();"
            "</script>"
      "</body></html>";
    server.printP(message1);
    server.printP(messageImage);
    server.printP(message2);
    loadTable(server , "test.csv");
    server.printP(message3);
    server.printP(messageRgraph);
    server.printP(messageRgraph2);
    server.printP(message4);
  }

Load Table

void loadTable(WebServer &server , char* table ){
  server.printP(http200Ok);
  server.println();
  server.printP(httpContentJS); //P(httpContentJS) = "Content-Type: application/javascript";
  server.println();
  server.println();
  Ftable = SD.open(table, FILE_READ);
  int c ;
  while((c = Ftable.read()) >= 0){
    server.print((char)c);
  }
  Ftable.close();
}

L'entête de réponse HTTP t'est sensé l'envoyé AVANT le contenu ... Et puis là c'est pas logique, tu envois du html, puis tu envois un entête HTTP pour du javascript ...

Je comprend pas ... Pour mon image je fais pareil et sa s'ouvre correctement ...

1 requête HTTP = 1 contenu = 1 entête = 1 type de contenu.
Tu peut pas mixer plusieurs morceaux de trame HTTP dans un même document.

Ici tu doit avoir 3 handlers différents dans ton code webduino :
/index.html
/RGraph.common.core.js
/RGraph.line.js

Dans ton index.html tu envois un 200 OK, suivit du code html (qui fait des pour inclure les différents fichiers js).
Dans les 2 fichiers js de RGrapj tu envois le contenu stocké sur la carte SD.

Si tu ne comprend pas le principe retourne bouquiner le protocole HTTP et les base du HTML, sinon tu comprendras rien du tout à la librairie Webduino :wink:

Nan mais j'ai compris le principe de HTTP mais ce que je ne comprend pas c'est ce qui ne va pas , il ne devrait pas m'afficher mon Content type sur ma page

server.printP(message1); // Tu envois du texte, webduino ajoute donc la réponse http par défaut avant
    server.printP(messageImage); // Tu envois du texte
    server.printP(message2); // Tu envois du texte
    loadTable(server , "test.csv"); // Tu appelles ta fonction loadTable qui renvoi le header 200 OK et le content type -> probléme !
    server.printP(message3); // Tu envois du texte
    server.printP(messageRgraph); // Tu envois du texte
    server.printP(messageRgraph2); // Tu envois du texte
    server.printP(message4); // Tu envois du texte et fin.

Ah oui désolé c moi qui me suit trompé , LoadTable renvoie bien du texte ( il renvoi le .csv) donc pas de souci a ce niveau la mon tableau se charge bien . Mon souci c’est d’afficher le petit exemple que RGraph donne

P(messageRgraph) = "<script src=\"/RGraph.common.core.js\"></script>";
    P(messageRgraph2) ="<script src=\"/RGraph.line.js\"></script>" ;       
    P(message4) =  
    "<canvas id=\"myCanvasTag\" width=\"600\" height=\"200\">[No canvas support]</canvas>"  
        "<script>"
            "data = [78,16,26,23,25,51,34,64,84,84];"
            "line = new RGraph.Line(\"myCanvasTag\", data);"
            "line.Set(\"chart.labels\", [\"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\"]);"
            "line.Draw();"
            "</script>"

C’est lui qui ne s’affiche pas , Quand je fais examiner l’élément il me sort dans la console web l’erreur :

[17:03:11,123] ReferenceError: RGraph is not defined @ http://192.168.X.XXX/test.csv:4

Au lieu de donner des petits morceaux de code donne le code complet ... Je suis sûr que le probléme vient d'un autre morceau que celui que tu donnes :roll_eyes:

Tout ce que j’utilise pour ce morceau c’est ça :

//Content-Type :

P(http200Ok) ="HTTP/1.1 200 OK";
P(httpContentJPG) = "Content-Type: image/jpeg";
P(httpContentText) ="Content-Type: text/plain";
P(httpContentJS) = "Content-Type: application/javascript";
void Tableau(WebServer &server, WebServer::ConnectionType type, char *url_tail, bool tail_complete)
{
  if (type == WebServer::POST)
  {
    // ignore POST data
    server.httpFail();
    return;
  }
  /* for a GET or HEAD, send the standard "it's all OK headers" */
  //server.httpSuccess("application/javascript");
  if (type == WebServer::GET)
  {
    /* store the HTML in program memory using the P macro */
    P(message1) = 
      "<html><head><title >Simulateur </title></head>"
      "<body style=\"text-align:left;\">"     
      "<div style=\"font-size:200%;font-weight:bold; border: 2px black solid;\">";
    P(message2) =    
      "<span style=\"text-indent:50%;margin-left:150px;margin-top:25px;\">Simulation thermique</span></div>"
      "<center>";
    P(message3) = "</center>";
    P(messageRgraph) = "<script src=\"/RGraph.common.core.js\"></script>";
    P(messageRgraph2) ="<script src=\"/RGraph.line.js\"></script>" ;       
    P(message4) =  
    "<canvas id=\"myCanvasTag\" width=\"600\" height=\"200\">[No canvas support]</canvas>"  
        "<script>"
            "data = [78,16,26,23,25,51,34,64,84,84];"
            "line = new RGraph.Line(\"myCanvasTag\", data);"
            "line.Set(\"chart.labels\", [\"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\"]);"
            "line.Draw();"
            "</script>"
      "</body></html>";
    server.printP(message1);
    server.printP(messageImage);
    server.printP(message2);
    loadTable(server , "test.csv");
    server.printP(message3);
    server.printP(messageRgraph);
    server.printP(messageRgraph2);
    server.printP(message4);
  }  
}

void jscript(WebServer &server, WebServer::ConnectionType type, char *url_tail, bool tail_complete)
{
  loadGraph(server,"RGraph.line.js");
}
void jscript2(WebServer &server, WebServer::ConnectionType type, char *url_tail, bool tail_complete)
{
  loadGraph(server,"RGraph.common.core.js");
}

void loadGraph(WebServer &server , char* fichier ){
  server.printP(http200Ok);
  server.println();
  server.printP(httpContentJS);
  server.println();
  server.println();
  Fgraph = SD.open(fichier, FILE_READ);
  int c ;
  while((c = Fgraph.read()) >= 0){
    server.print((char)c);
  }
  Fgraph.close();
}
void loadTable(WebServer &server , char* table ){

  Ftable = SD.open(table, FILE_READ);
  int c ;
  while((c = Ftable.read()) >= 0){
    server.print((char)c);
  }
  Ftable.close();
}

//setup : webserver.addCommand("test.csv", &Tableau);

Un jour les gens comprendrons que donner des morceaux de code ne sert à rien si on ne peut pas le compiler / lire entièrement.

Bon sinon …
Il te manque 2 webserver.addCommand() dans setup() pour les fichiers javascript de RGraph.
Du coup ton navigateur ne trouve jamais les fichiers js, du coup → RGraph n’existe pas (not defined).