Page Web

Dependencies:   mbed Serveur_web_capteur EthernetNetIf

Files at this revision

API Documentation at this revision

Comitter:
bilben99
Date:
Thu Feb 13 20:08:11 2020 +0000
Parent:
5:976ba14cbadc
Commit message:
Page web HTML CSS JS dans le word

Changed in this revision

HTTPServerExample.cpp Show annotated file Show diff for this revision Revisions of this file
index.htm Show diff for this revision Revisions of this file
index.html Show annotated file Show diff for this revision Revisions of this file
--- a/HTTPServerExample.cpp	Tue Jul 03 13:37:51 2018 +0000
+++ b/HTTPServerExample.cpp	Thu Feb 13 20:08:11 2020 +0000
@@ -7,7 +7,7 @@
 DigitalOut led3(LED3, "led3");
 DigitalOut led4(LED4, "led4");
 PwmOut venti(p21,"venti");
-AnalogIn pot(p18, "capteur_temp");
+AnalogIn pot(p19, "capteur_temp");
 
 
 LocalFileSystem fs("webfs");
@@ -51,7 +51,10 @@
     Net::poll();
     if(tm.read()>.5)
     {
-      led1=!led1
+      venti.write(0.1);
+      wait(0.5);
+      venti.write(0.5);
+      led1=!led1;
       tm.start();
       if(x>10){ led2=1;
       }else{
--- a/index.htm	Tue Jul 03 13:37:51 2018 +0000
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,183 +0,0 @@
-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 {                                                                          
-    background-color: #0000FF;
-}
-table, th, td {
-    border: 1px solid white;
-    border-collapse: collapse;
-    border-color: white ;
-    margin: auto;
-}
-th, td {
-    padding: 5px;
-    text-align: left;    
-}
-</style>
-</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"
-                                  onclick="auto_click()" />Auto</p>
-    <p><input type="checkbox" name="manu" id="manu"
-                                  onclick="manu_click()" />Manuel</p>
-    <p style="text-align:center;"><input type="button" id="venti" value="Activer Ventilateur">
-    </p>
-    <p id="temp"></p>
-    <p style="text-align:center;"><input id="rafraichir" type="button" value="Rafraichir">
-<table id="tableau" style="width:75%">
-  <tr>
-    <th rowspan="5">Temperature(°C)</th>
-    <td id="cell1"></td>
-  </tr>
-  <tr>
-    <td id="cell2"></td>
-  </tr>
-  <tr>
-    <td id="cell3"></td>
-  </tr>
-  <tr>
-    <td id="cell4"></td>
-  </tr>
-  <tr>
-    <td id="cell5"></td>
-  </tr>
- <tr>
-    <th>Moyenne</th>
-    <td id="cell6"></td>
-  </tr>
-</table>
-</body>
-</html>
-<!--> On rentre dans le script en javascript du site <-->
-<script type="text/javascript">
-
-var btn = document.querySelector('#venti');
-var btn2 = document.querySelector('#rafraichir');
-var checkauto = document.querySelector('#auto');
-var checkmanu = document.querySelector('#manu');
-var req=new XMLHttpRequest();
-var req2= new XMLHttpRequest();
-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;
-var tabtemperature;
-var min;
-var max;
-var tableau;
-var tab = [];
-var i=0;
-var stop;
-
-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();                       // 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);                                        // 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;                                                          // 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){                                        // si le mode auto est check on regarde que la température ne
-            if(temperature>33){
-                        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);                    // si la température est < 33°C le ventillateur ne s'active pas.
-                        req2.send(null);
-                }
-        }
-        if(i>=5){
-            stop=1;
-            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);
-            i++;
-            btn2.disabled=true;
-            stop=0;
-        }
-
- }
- function fcttableau (){
-
-            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] ;
-            tableau= document.getElementById("cell4");
-            tableau.innerHTML = tab[3] ;
-            tableau= document.getElementById("cell5");
-            tableau.innerHTML = tab[4] ;
-            tableau= document.getElementById("cell6");
-            tableau.innerHTML = (tab[0] + tab[1]+ tab[2]+ tab[3]+ tab[4])/5 ;
-            
-
-}
-function updateBtn() {
-  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);
-    
-  } else {
-    btn.value = 'Activer Ventilateur';
-    val='1';
-    req.open('GET', '/rpc/venti/write '+val, true);
-    req.send(null);
-  }
-}
-function manu_click(){
-    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;
-        checkauto.disabled = false;
-    }
-}
-function auto_click(){
-    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{
-        etatauto=0;
-        btn.disabled = true;
-        checkmanu.disabled = false;
-    }
-}
- setInterval(lecture,1000);                                 // appel de la fonction lecture toutes les 1sec.
-</script>
-
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/index.html	Thu Feb 13 20:08:11 2020 +0000
@@ -0,0 +1,183 @@
+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 {                                                                          
+    background-color: #0000FF;
+}
+table, th, td {
+    border: 1px solid white;
+    border-collapse: collapse;
+    border-color: white ;
+    margin: auto;
+}
+th, td {
+    padding: 5px;
+    text-align: left;    
+}
+</style>
+</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"
+                                  onclick="auto_click()" />Auto</p>
+    <p><input type="checkbox" name="manu" id="manu"
+                                  onclick="manu_click()" />Manuel</p>
+    <p style="text-align:center;"><input type="button" id="venti" value="Activer Ventilateur">
+    </p>
+    <p id="temp"></p>
+    <p style="text-align:center;"><input id="rafraichir" type="button" value="Rafraichir">
+<table id="tableau" style="width:75%">
+  <tr>
+    <th rowspan="5">Temperature(°C)</th>
+    <td id="cell1"></td>
+  </tr>
+  <tr>
+    <td id="cell2"></td>
+  </tr>
+  <tr>
+    <td id="cell3"></td>
+  </tr>
+  <tr>
+    <td id="cell4"></td>
+  </tr>
+  <tr>
+    <td id="cell5"></td>
+  </tr>
+ <tr>
+    <th>Moyenne</th>
+    <td id="cell6"></td>
+  </tr>
+</table>
+</body>
+</html>
+<!--> On rentre dans le script en javascript du site <-->
+<script type="text/javascript">
+
+var btn = document.querySelector('#venti');
+var btn2 = document.querySelector('#rafraichir');
+var checkauto = document.querySelector('#auto');
+var checkmanu = document.querySelector('#manu');
+var req=new XMLHttpRequest();
+var req2= new XMLHttpRequest();
+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;
+var tabtemperature;
+var min;
+var max;
+var tableau;
+var tab = [];
+var i=0;
+var stop;
+
+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();                       // 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);                                        // 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;                                                          // 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){                                        // si le mode auto est check on regarde que la température ne
+            if(temperature>33){
+                        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);                    // si la température est < 33°C le ventillateur ne s'active pas.
+                        req2.send(null);
+                }
+        }
+        if(i>=5){
+            stop=1;
+            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);
+            i++;
+            btn2.disabled=true;
+            stop=0;
+        }
+
+ }
+ function fcttableau (){
+
+            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] ;
+            tableau= document.getElementById("cell4");
+            tableau.innerHTML = tab[3] ;
+            tableau= document.getElementById("cell5");
+            tableau.innerHTML = tab[4] ;
+            tableau= document.getElementById("cell6");
+            tableau.innerHTML = (tab[0] + tab[1]+ tab[2]+ tab[3]+ tab[4])/5 ;
+            
+
+}
+function updateBtn() {
+  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);
+    
+  } else {
+    btn.value = 'Activer Ventilateur';
+    val='1';
+    req.open('GET', '/rpc/venti/write '+val, true);
+    req.send(null);
+  }
+}
+function manu_click(){
+    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;
+        checkauto.disabled = false;
+    }
+}
+function auto_click(){
+    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{
+        etatauto=0;
+        btn.disabled = true;
+        checkmanu.disabled = false;
+    }
+}
+ setInterval(lecture,1000);                                 // appel de la fonction lecture toutes les 1sec.
+</script>
+