Graphe sur server web de l'arduino yun

2 mars 2016 à 12:25:10

Bonjour,

Dans le cadre d'un essai à partir de l'exemple TemperatureWebPanel, j'essaie de tracer l'allure temporelle de la température avec le graphe smoothie.

Cependant, je n'arrive pas à envoyer la valeur de la température (qui est une variable locale du programme de l'arduino) dans le graphe. Voici mon code avec un math.random dans une des courbes.

<!DOCTYPE html>
<html>
   <head>
   <script type="text/javascript" src="zepto.min.js"></script>
   <script type="text/javascript" src="smoothie.js"></script>
     <script type="text/javascript">
     
     
         function refresh() {
           $('#content').load('/arduino/temperature');
            var chaine = document.getElementById("content").innerHTML;
            nb=parseFloat(chaine); 
           
            

        }
</script>

   </head>
   <body onload="setInterval(refresh, 1000);">
      <span id="content">0</span>
   </body>

     <head>
    <title>Smoothie Chart Example</title>
    <script type="text/javascript" src="smoothie.js"></script>
  </head>
  <body>

    <h1>Smoothie Example</h1>

    <canvas id="mycanvas" width="400" height="100"></canvas>

    <script type="text/javascript">

      // Random data
      var line1 = new TimeSeries();
      var line2 = new TimeSeries();
      setInterval(function() {

          $('#content').load('/arduino/temperature');
         var chaine = document.getElementById("content").innerHTML; 
        nb=parseFloat(chaine); 
        line1.append(new Date().getTime(), nb);
        line2.append(new Date().getTime(), 100*Math.random());
      }, 1000);

      var smoothie = new SmoothieChart({ grid: { strokeStyle: 'rgb(125, 0, 0)', fillStyle: 'rgb(60, 0, 0)', lineWidth: 1, millisPerLine: 250, verticalSections: 6 } });
      smoothie.addTimeSeries(line1, { strokeStyle: 'rgb(0, 255, 0)', fillStyle: 'rgba(0, 255, 0, 0.4)', lineWidth: 3 });
      smoothie.addTimeSeries(line2, { strokeStyle: 'rgb(255, 0, 255)', fillStyle: 'rgba(255, 0, 255, 0.3)', lineWidth: 3 });

      smoothie.streamTo(document.getElementById("mycanvas"), 1000);
    </script>

    <p><a href="tutorial.html">Return to tutorial</a></p>
  
  </body>
</html>

Je suis débutant en HTML & CSS et également en Arduino même si le language reste à porté pour ceux qui ont déjà fait du C et du language l'objet.

Je reste à votre écoute!

-
Edité par glider_973 2 mars 2016 à 18:04:16

lorrio

2 mars 2016 à 12:49:57

Un programme Javascript s’exécute coté naviagteur WEB (donc sur le PC) et non arduino le serveur WEB ni sur le processeur arduino.

De ce que j'ai rapidement compris de ton programme javascript, celui-ci interroge le serveur WEB pour charger la page /arduino/temperature toutes les secondes.

Du coup, il faudrait que ce fichier soit rafraichit automatiquement de façon à ce qu'il contienne toujours la dernière valeur de température.

Coté arduino, tu peux parfaitement écrire des fichiers grâce à la lib bridge.

Il faudrait donc que tu ai un code qui ressemble à cela :

void setup() {

  Bridge.begin();
  Serial.begin(9600);

  while(!Serial);

  FileSystem.begin();

}

void loop() {

    float temp;

    [...] // ICI: ton code pour lire la température du capteur

    File file = FileSystem.open("/var/www/arduino/temperature", FILE_WRITE);
    file.print(temp);
    file.close();

    delay(100);

}

-
Edité par lorrio 2 mars 2016 à 12:50:28

And you, are you frozen ? --- Attention aux fausses rumeurs ! Yuki est bien une louve.

glider_973

2 mars 2016 à 13:10:19

côté arduino j'avais sa:

/*

  Temperature web interface

 

 

 created  6 July 2013

 by Tom Igoe

 

 This example code is in the public domain.

 

 http://www.arduino.cc/en/Tutorial/TemperatureWebPanel

 

 */

 

#include <Bridge.h>

#include <BridgeServer.h>

#include <BridgeClient.h>

 

// Listen on default port 5555, the webserver on the Yún

// will forward there all the HTTP requests for us.

BridgeServer server;

String startString;

long hits = 0;

 

void setup() {

  Serial.begin(9600);

 

  // Bridge startup

  pinMode(13, OUTPUT);

  digitalWrite(13, LOW);

  Bridge.begin();

  digitalWrite(13, HIGH);

 

  // using A0 and A2 as vcc and gnd for the TMP36 sensor:

  pinMode(A0, OUTPUT);

  pinMode(A2, OUTPUT);

  digitalWrite(A0, HIGH);

  digitalWrite(A2, LOW);

 

  // Listen for incoming connection only from localhost

  // (no one from the external network could connect)

  server.listenOnLocalhost();

  server.begin();

 

  // get the time that this sketch started:

  Process startTime;

  startTime.runShellCommand("date");

  while (startTime.available()) {

    char c = startTime.read();

    startString += c;

  }

}

 

void loop() {

  // Get clients coming from server

  BridgeClient client = server.accept();

 

  // There is a new client?

  if (client) {

    // read the command

    String command = client.readString();

    command.trim();        //kill whitespace

    Serial.println(command);

    // is "temperature" command?

    if (command == "temperature") {

 

      // get the time from the server:

      Process time;

      time.runShellCommand("date");

      String timeString = "";

      while (time.available()) {

        char c = time.read();

        timeString += c;

      }

      Serial.println(timeString);

      int sensorValue = analogRead(A1);

      // convert the reading to millivolts:

      float voltage = sensorValue * (5000.0f / 1024.0f);

      // convert the millivolts to temperature celsius:

      float temperature = (voltage - 500.0f) / 10.0f;

      // print the temperature:

      client.print("Current time on the Y&uacute;n: ");

      client.println(timeString);

      client.print("<br>Current temperature: ");

      client.print(temperature);

      client.print(" &deg;C");

      client.print("<br>This sketch has been running since ");

      client.print(startString);

      client.print("<br>Hits so far: ");

      client.print(hits);

    }

 

    // Close connection and free resources.

    client.stop();

    hits++;

  }

 

  delay(50); // Poll every 50ms

}

temperature est ma variable locale stockée dans la mémoire de l'arduino.

-
Edité par glider_973 2 mars 2016 à 18:03:35

glider_973

2 mars 2016 à 13:11:35

A quoi sert la ligne 18 de ton code?

lorrio

2 mars 2016 à 14:02:33

Je n'ai rien dis la première fois mais là, il faut bien avouer que c'est illisible.

Ce serait bien que tu posts tes codes en utilisant le bouton </> prévu à cet effet.

And you, are you frozen ? --- Attention aux fausses rumeurs ! Yuki est bien une louve.

glider_973

2 mars 2016 à 18:04:37

C'est fait!

lorrio

2 mars 2016 à 18:44:41

Autant pour moi, avec ton code sans les balises, je n'avais pas vu que tu utilisé le BridgeServeur.

Donc si je comprends bien, tu as ta page WEB qui charge en permanence /arduino/temperature et cette requête attire sur ton arduino au travers de la lib bridge.

client.print("Current time on the Y&uacute;n: ");
client.println(timeString);
client.print("<br>Current temperature: ");
client.print(temperature);
client.print(" &deg;C");
client.print("<br>This sketch has been running since ");
client.print(startString);
client.print("<br>Hits so far: ");
client.print(hits);

Du coup, sur ta page WEB, je suppose que tu vois un petit bout de texte qui s'affiche dans ton span#content :

Current time on the Yun: ...
Current temperature: ...°C
This sketch has been running since ...
Hits so far: ...

Est-ce bien le cas ?

Si c'est bien le cas, la suite de ton script JS exécute ceci :

var chaine = document.getElementById("content").innerHTML;
nb=parseFloat(chaine);
line1.append(new Date().getTime(), nb);
line2.append(new Date().getTime(), 100*Math.random());

Tu as donc 2 séries :

Une qui devrait "théoriquement" contenir la température (sauf que je suppose qu'en pratique, tu as toujours 0)

Une qui contient des données complètement random

Est-ce bien le cas ?

Si c'est bien le cas, il reste à voir ce problème du 0.

Dans ton code JS, tu essayes de convertir le contenu de ton span#content en nombre sauf que tu oublies que ce span#content contient tout un tas de chose :

Current time on the Yun: ...
Current temperature: ...°C
This sketch has been running since ...
Hits so far: ...

Du coup, le script JS va avoir bien du mal à convertir tout ce texte en un seul nombre...

Tu as plusieurs solutions possible :

Soit changer ton code arduino pour qu'il n'envoie que la température et pas tout ce texte superflue

Soit utiliser des regexp pour ne réccupérer que la température du span#content

Soit faire une requête sur une autre commande de ton arduino qui ne renverrait que la température

Si l'on met en place la seconde solution, ton code JS devrait être comme ceci :

var chaine = document.getElementById("content").innerHTML;
var regdata = /temperature: ([0-9\\.]+)/.exec(chaine)
nb = parseFloat(regdata[1]);
line1.append(new Date().getTime(), nb);
line2.append(new Date().getTime(), 100*Math.random());

-
Edité par lorrio 2 mars 2016 à 18:46:14

And you, are you frozen ? --- Attention aux fausses rumeurs ! Yuki est bien une louve.

glider_973

3 mars 2016 à 12:19:17

Merci sa marche ! Je lis bien les valeurs. Il faut que je me penche sur l'usage du content et comprendre l'indexation des données.