Programme + libraires serveur capteur web + index en html + commentaires

Dependencies:   EthernetNetIf Serveur_web_capteur mbed

Fork of Serveur_web_pt2_V2_avec_index_html by Dupuis sedid

Revision:
5:976ba14cbadc
Parent:
4:bf74bc9d6add
--- a/index.htm	Tue Jul 03 12:14:16 2018 +0000
+++ b/index.htm	Tue Jul 03 13:37:51 2018 +0000
@@ -1,10 +1,13 @@
+Texte a recopier sur sublimetext il y'aura plus de problèmes de commentaires.
+
 <!DOCTYPE html>
 <html>
 <head>
     <title>VentiBed</title>
     <meta charset="UTF-8"> 
+    <!--> style CSS définie pour la beauté du site est pour décider de l'emplacement du tableau et des boutons  <-->
     <style>
-body {
+body {                                                                          
     background-color: #0000FF;
 }
 table, th, td {
@@ -21,7 +24,8 @@
 </head>
 
 </style>
-
+<!--> le body c'est le corps du programme comme un main dans un programme en C la on définie 2 checkbox ave un id auto et un manu et enfin 2 boutons un avec in venti et l'autre rafraichir 
+puis nous déclarons un tableau avec 6 céllules <-->
 <body text="#FDF5E6">
     <h1 style="text-align:center; color:white">VentiBed </h1>
     <p><input type="checkbox" name="auto" id="auto"
@@ -56,7 +60,7 @@
 </table>
 </body>
 </html>
-
+<!--> On rentre dans le script en javascript du site <-->
 <script type="text/javascript">
 
 var btn = document.querySelector('#venti');
@@ -65,8 +69,8 @@
 var checkmanu = document.querySelector('#manu');
 var req=new XMLHttpRequest();
 var req2= new XMLHttpRequest();
-var data_recu=0;
-var temperature;
+var data_recu=0;                            // Déclarations de toutes les variables nécéssaires déclarations des variables en variables globales 
+var temperature;    
 var temp;
 var tension;
 var etatauto;
@@ -78,42 +82,42 @@
 var i=0;
 var stop;
 
-btn2.addEventListener('click', updateBtn2);
-btn.addEventListener('click', updateBtn);
+btn2.addEventListener('click', updateBtn2);      //2 évenement pour les boutons qui permert d'appler la fonction updatebtn2 ou 
+btn.addEventListener('click', updateBtn);       //updatebtn si on click sur l'un des boutons
 
 function updateBtn2() {
-    fcttableau();
+    fcttableau();                       // si on appuye sur le btn2 qui est le bouton rafraichir on appel la fonctions fcttableau.
     tab=[];
 }
 
 function lecture (){  
-    req.open('GET', '/rpc/capteur_temp/read', true);
-    req.onreadystatechange = function() {
+    req.open('GET', '/rpc/capteur_temp/read', true);                                        // Fonction lecture qui permet de lire la température avec la  
+    req.onreadystatechange = function() {                                                  // meme méthode que du test n°2
         if(req.readyState == 4 && req.status == 200) {
             data_recu = req.responseText;
             temp= document.getElementById("temp");
-            tension=data_recu*3.3;
-            temperature = Math.round((30.7*tension-24.06)+2.6);
-            temp.innerHTML ='La temperature est de : ' + temperature + ' °C.';
+            tension=data_recu*3.3;                                                          // je récupère une valeur analogique entre 0 et 1 donc
+            temperature = Math.round((30.7*tension-24.06)+2.6);                             // je l'a met en forme pour que la valeur analogique soit égale a la
+            temp.innerHTML ='La temperature est de : ' + temperature + ' °C.';              // Température
 
         }
     }
     req.send(null);
-        if(document.getElementById('auto').checked){
+        if(document.getElementById('auto').checked){                                        // si le mode auto est check on regarde que la température ne
             if(temperature>33){
-                        val='0';
-                        req2.open('GET', '/rpc/venti/write '+val, true);
-                        req2.send(null);
+                        val='0';                                                            // dépasse pas les 33°C . si ça dépasse le ventilateur s'active
+                        req2.open('GET', '/rpc/venti/write '+val, true);                    // en mettant la commande a 0.
+                        req2.send(null);    
                 }else{
                         val='1';
-                        req2.open('GET', '/rpc/venti/write '+val, true);
+                        req2.open('GET', '/rpc/venti/write '+val, true);                    // si la température est < 33°C le ventillateur ne s'active pas.
                         req2.send(null);
                 }
         }
         if(i>=5){
             stop=1;
-            btn2.disabled=false;
-            i=0;
+            btn2.disabled=false;                                                        // ce if permet de gerer le remplissage du tableau est de rafraichir les
+            i=0;                                                                        //valeurs du tableau quand le bouton rafraichir est activé.
         }else{
             tabtemperature=temperature;
             tab.push(tabtemperature);
@@ -125,9 +129,9 @@
  }
  function fcttableau (){
 
-            tableau= document.getElementById("cell1");
-            tableau.innerHTML = tab[0] ;
-            tableau= document.getElementById("cell2");
+            tableau= document.getElementById("cell1");                              // utilisation de la méthode innerhtml qui permet de remplir les cases du 
+            tableau.innerHTML = tab[0] ;                                            // tableau une par une avec les donnés récoltés
+            tableau= document.getElementById("cell2");                              // la méthode inner sert a écrire sur la page web ce qu'on a stocké.
             tableau.innerHTML = tab[1] ;
             tableau= document.getElementById("cell3");
             tableau.innerHTML = tab[2] ;
@@ -141,8 +145,8 @@
 
 }
 function updateBtn() {
-  if (btn.value === 'Activer Ventilateur') {
-    btn.value = 'Desactiver Ventilateur';
+  if (btn.value === 'Activer Ventilateur') {                        // la même structure que sur le test n°2 avec les boutons
+    btn.value = 'Desactiver Ventilateur';                           // mais la c'est l'utilisation du mode manuel.
     val='0';
     req.open('GET', '/rpc/venti/write '+val, true);
     req.send(null);
@@ -155,8 +159,8 @@
   }
 }
 function manu_click(){
-    if (document.getElementById('manu').checked){
-        btn.disabled = false;
+    if (document.getElementById('manu').checked){                // permet d'activer le bouton "activer le ventillateur" ou le désactiver
+        btn.disabled = false;                                   // en foncton de la checkbox manuel si elle est cocher ou non
         checkauto.disabled = true;
     } else{
         btn.disabled = true;
@@ -164,8 +168,8 @@
     }
 }
 function auto_click(){
-    if (document.getElementById('auto').checked){
-        btn.disabled = true;
+    if (document.getElementById('auto').checked){           //  permet de desactiver tout les boutons si c'est en mode automatique
+        btn.disabled = true;                                //  en focntion de la checkbox automatique si elle est cocher ou non
         checkmanu.disabled = true;
         etatauto=1;
         } else{
@@ -174,6 +178,6 @@
         checkmanu.disabled = false;
     }
 }
- setInterval(lecture,1000);  
+ setInterval(lecture,1000);                                 // appel de la fonction lecture toutes les 1sec.
 </script>