Ignorer la navigation

Partie 2.2 : arduino en mode client


Maintenant le arduino est en mode client :  il envoie des demandes au serveur, qui est votre ordinateur ici. Il va en fait envoyer la température relevée sur son capteur à un programme présent sur le serveur (add.php) . Ce programme va écrire la valeur dans la base de donnée. Ci-dessous le schéma de principe :

Ensuite nous allons être aussi client et demander à voir une page générée par le serveur  (index.php) contenant les données que l'on veut visualiser (ici la température) suivant le principe :

Au final nous allons avoir 2 pages à créer, une qui va être appelée par arduino et qui va écrire les données dans la base de donnée (add.php) et une que nous appellerons nous (index.php) qui va afficher sur notre écran les données).

 
Etape 1 : création de la table dans la base de données

   Aller dans phpMyAdmin (menu  WampServeur) et choisir votre base de donnée « test ».

Créez une nouvelle table « temp » (2 colonnes) ….. cliquer sur « Exécuter » pour valider


Paramétrons cette table :
  • la première donnée (colonne) sera :

               nom : date         type : TIMESSTAMP    Défaut : CURRENT_TIMESTAMP        Index : UNIQUE

  • la 2ème donnée :

               nom : valeur    type : FLOAT


puis cliquer sur « sauvegarder ». Voilà, votre table est créée.


Essayons de la remplir à la main :
Cliquez sur l'onglet « Insérer » et rentrez une valeur, par exemple 18,6 :


et cliquez sur « exécuter » pour valider

Vous remarquerez que phpMyAdmin vous bascule automatiquement sur l'onglet « SQL » dans lequel la vraie requête est écrite. Remettez vous dans l'onglet « insérer » et recommencer avec 4 ou 5 valeurs différentes.
Retourner dans l'onglet « Afficher » pour voir ce qui s'est passé.
1. Que contient notre champ 'date' ?
2. Recopier la requête proposée.
3. Expliquez les différents éléments de cette requête et ce qu'elle fait exactement.





Etape 2 : création de la page php ('add.php') qui va écrire dans la base de données

  

Soit la page « add.php » suivante :

<?php
 try
{    // connection à la base de données
    // On se connecte à MySQL
    $bdd = new PDO('mysql:host=adresse du serveur;dbname=nom de la base de données', 'nom de l'utilisateur', 'mot de passe');
}
catch(Exception $e)
{
        die('Erreur : '.$e->getMessage());  // En cas d'erreur, on affiche un message et on arrête tout
}
    
if (isset($_GET['temp1'])) // test si la variable existe
        {
        $_GET['temp1'] = floatval($_GET['temp1']); // force le type float pour la variable
        echo ('donnee ' .$_GET["temp1"]. ' en cours d\'ecriture</br>');
        $bdd->exec('INSERT INTO temp (valeur) VALUES('.$_GET["temp1"].')');
         echo ('donnee ' .$_GET['temp1']. ' ecrite!');
        }
?>


4. Modifiez la page 'add.php' avec les caractéristiques de notre base de données (ligne 5) et enregistrez la dans votre répertoire de travail Wamp (normalement : c:\wamp\test2_votre nom de famille\)
    adresse du serveur : localhost
    nom de la base de donnée : test
    nom de l'utilisateur : root
    pas de mot de passe (mettre '')

 

Maintenant on va envoyer une température à la base de données en appelant le programme add.php et en lui transmettant la température dans l'URL (ce que fera Arduino plus tard).
Essayez avec l'URL suivante : http://localhost/test2_votre nom de famille/add.php?temp1=22.4
5. Que se passe-t-il ? Allez voir dans la base de donnée si tout s'est bien passé (phpMyAdmin)

 


Etape 3 : création de la page 'index.php' qui va lire dans la base de données et afficher une page web avec nos valeurs

   soit la page « index.php » suivante:

<?php
try
{     // connection à la base de données
    $bdd = new PDO('mysql:host=adresse du serveur;dbname=nom de la base de données', 'nom de l'utilisateur', 'mot de passe');
}
catch(Exception $e)
{
        die('Erreur : '.$e->getMessage());     // En cas d'erreur, on affiche un message et on arrête tout
}     
?>

<html>  < !--  début de la page web -->
   <head>
      <title>données</title>
    <meta http-equiv="refresh" content="5"/>
        <link rel="stylesheet" href="style.css" />
   </head>
<body>
   <h1>Donn&eacute;es</h1>
   <table border="1" cellspacing="1" cellpadding="1" >
        <tr class='titre_tab'>
            <td>&nbsp;Date & heure&nbsp;</td>
            <td>&nbsp;valeur&nbsp;</td>
        </tr>
     <?php
    $reponse = $bdd->query('SELECT * FROM temp ORDER BY date DESC LIMIT 0, 12');

    while ($donnees = $reponse->fetch())
    {
    ?>
      <tr><td>
          <?php echo $donnees['date']; ?> </td><td> <?php echo $donnees['valeur']; ?>
        </td></tr>
    <?php
    }
    $reponse->closeCursor(); // Termine le traitement de la requête

      ?>
</table>
</body>
</html>

6. Copiez ces 2 fichiers dans votre répertoire de travail (en modifiant la ligne 4 de 'index.php' avec les caractéristiques de votre base de données).
7. Essayez et commentez ce qui se passe (le fichier est accessible dans mozilla à l'adresse : http://localhost/test2_votre nom de famille/index.php)
8. Tirez du programme index.php la commande adressée à la base de données et expliquez-la.



 


Etape 4 : maintenant le programme arduino qui va écrire dans la base de données

   Pour mettre en œuvre le programme arduino il nous manque quelques données notamment l'adresse IP de votre ordinateur sur le réseau local.

9. Ouvrez le menu « démarrer » de windows puis dans la barre de recherche taper « cmd », choisir « cmd.exe » (en cliquant dessus). Une fenêtre s'ouvre. Taper « ipconfig » puis la touche « entrer ». Relevez l'adresse IP (IPv4) de votre ordinateur/serveur.
10. Allez dans le menu Wampserveur et cliquer sur « Put Online (mettre en ligne ) afin que votre ordinateur/serveur soit visible et accessible par le réseau local.
11. Copier le programme suivant dans arduino en ayant d'abord modifié:
  • l'adresse Mac (ligne 5) de la carte Ethernet Shield
  • l'adresse IP de l'ethernet shield (ligne 7)
  • l'adresse du serveur (l'adresse IP de votre ordinateur) en lignes 42 et 48
  • l'adresse du ficher « add.php » à la ligne 44


Le programme arduino :

#include <SPI.h>
#include <Ethernet.h>   //Inclure la bibliothèque Ethernet

// Adresse MAC du shield (ici choisie par défaut), l'adresse IP dépend de votre réseau local
byte mac[] = { 0x90, 0xA2, 0xDA, 0x0F, 0x15, 0x15 };  //90-A2-DA-0F-15-15
//L'adresse MAC du shield est associée à une adresse IP réseau
IPAddress ip(192,168,1,62);   //192.168.1.62  à choisir sur votre réseau local
int CAPTEUR_TEMP_PIN = 4; // adressage du capteur de temperature (PIN) //
int temp = 0; //définition de la variable entière (integer) //
float temperature = 0; // variable temperature en flottant //
float const_can = 0.0048828; // constante du convertisseur //
EthernetClient client;
String data;
String stringVal;

EthernetServer server(80);    //Initialise le serveur Ethernet, port 80 par défaut pour HTTP

//function to extract decimal part of float
long getDecimal(float val)
{
int intPart = int(val);
long decPart = 1000*(val-intPart); //I am multiplying by 1000 assuming that the foat values will have a maximum of 3 decimal places
                                   //Change to match the number of decimal places you need
if(decPart>0)return(decPart);           //return the decimal part of float number if it is available
else if(decPart<0)return((-1)*decPart); //if negative, multiply by -1
else if(decPart=0)return(00);           //return 0 if decimal part of float number is not available
}

void setup()
{
  Serial.begin(9600);    //Affichage écran du PC
  Ethernet.begin(mac, ip);   //Démarer la connexion Ethernet et le serveur
  analogRead(CAPTEUR_TEMP_PIN);
}

void loop()
{
  temp = analogRead(CAPTEUR_TEMP_PIN); // lecture du capteur de température //
  temperature = (((temp*const_can)*1000)-500)/10;  //calcul//
    
  if (client.connect("192.168.1.78",80)) { // remplacer par l'adresse IP de votre serveur-ordi

                client.print( "GET /test2_votre nom de famille/add.php?");
                client.print("temp1=");
                client.print(temperature);
                client.println( " HTTP/1.1");
                client.println( "Host: 192.168.1.78" );
                client.println( "Content-Type: application/x-www-form-urlencoded" );
                client.println( "Connection: close" );
                client.println();
                client.println();
                client.stop();
                Serial.print("donnee ecrite");
                Serial.println(temperature);
    }
        else
        {
          Serial.println("problème de connection");
        }
    if (client.connected()) {

        client.stop();    // DISCONNECT FROM THE SERVER
    }
    delay(30000); // attente en millisecondes
}


12. Essayez maintenant tous ça ! Attendre environ 1 minute après l'envoi du programme Arduino.. Pour vérifier vous pouvez aller voir les données écrites dans la base de données avec phpMyAdmin ou simplement lancer le fichier 'index.php' (le fichier est accessible dans Mozilla à l'adresse : http://localhost/test2_votre nom de famille/index.php.

 

Que faire si ça ne fonctionne pas?

Il faut tester chaque élément. Normalement vous avez testé la base de données et le fichier "add.php" (question 5). Il reste à tester le serveur et la carte arduino.

Pour tester le serveur:

  1. récupérez l'adresse IP de votre ordi/serveur (lancer "cmd" puis tapez "ipconfig")
  2. allez sur un autre ordinateur de la salle, tapez dans l'url d'un navigateur internet l'adresse IP de votre ordi/serveur. Vous allez savoir si votre ordi/serveur est visible et fonctionnel vu d'un autre ordinateur. Voici 2 messages possibles:
          réponse si tout fonctionne: réponse si votre ordinateur est bien configuré en serveur mais s'il n'est pas accessible:

Pour tester la carte Arduino et son shield Ethernet:

  • lancez "cmd" sous windows, puis faites un ping avec l'adresse IP de la carte Shield Ethernet. Vous allez savoir si votre shield est connecté au réseau.
  • ou faites un essai avec le programme Arduino vu dans la partie 1 de ce TP.

  


13. Expliquez au final (et en détail) ce qui se passe. Faire un résumé pour décrire comment tout ça fonctionne.

 
14. Exemple d'affichage plus évolué
Pour afficher de manière plus intéressantes les données (par exemple à l'aide de graphiques, courbes, ...) on peut écrire un programme PHP qui fait tout ça. Bon, ne nous cachons pas que c'est assez difficile à faire. Mais, des développeurs ont déjà réalisé ces programme et ils nous ont mis à disposition leurs codes. Il y en a une certain nombre de disponible sur internet. Nous avons choisi les applications pChart (infos sur http://wiki.pchart.net/).
Copier les répertoires « class » et « fonts » ainsi que le fichier index2b.php (à récupérer ici) dans votre répertoire /test2_votre nom de famille/
Dans mozilla taper l'adresse (URL): http://localhost/test2_votre nom de famille/index2b.php
Essayez.


 


15. Modification de « add.php »

Notre programme arduino, quand il appelle « add.php », rajoute des données dans la base de données. Tout ça indéfiniment ce qui fait qu'au bout d'un certain temps on risque de saturer notre base de données.
Nous vous proposons qu'à chaque appel de « add.php », ce programme efface aussi les données inutiles (par exemple on se dit que l'on garde les 200 dernières données).

A vous de jouer maintenant. Avant de faire des essais et d'effacer les données (au risque de se tromper), il faut d'abord trouver la bonne fonction SELECT en faisant des essais. Une fois la fonction SELECT  trouvée, on la transforme en fonction d'effacement.




16. Ce TP est fini. Il faut faire un peu de ménage, c'est à dire supprimer votre basse de données.
Dans PhpMyAdmin, sélectionnez la base de données (attention à bien vérifier que c'est bien la base de données à supprimer), dans les onglets supérieurs (structure, sql, rechercher, requête,...), sélectionnez l'onglet opération, puis le lien "Supprimer la base de données (DROP)" (attention!!! cette étape est irréversible. ). Une boite de dialogue apparaît. Cliquez sur OK.