Dupuis sedid / Mbed 2 deprecated Serveur_web_pt2_index_commenter

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

Diff: index.htm

Revision:
4:bf74bc9d6add
Child:
5:976ba14cbadc
diff -r e851c29d398d -r bf74bc9d6add index.htm
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/index.htm	Tue Jul 03 12:14:16 2018 +0000
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>VentiBed</title>
+    <meta charset="UTF-8"> 
+    <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>
+
+<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>
+
+<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;
+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);
+btn.addEventListener('click', updateBtn);
+
+function updateBtn2() {
+    fcttableau();
+    tab=[];
+}
+
+function lecture (){  
+    req.open('GET', '/rpc/capteur_temp/read', true);
+    req.onreadystatechange = function() {
+        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.';
+
+        }
+    }
+    req.send(null);
+        if(document.getElementById('auto').checked){
+            if(temperature>33){
+                        val='0';
+                        req2.open('GET', '/rpc/venti/write '+val, true);
+                        req2.send(null);
+                }else{
+                        val='1';
+                        req2.open('GET', '/rpc/venti/write '+val, true);
+                        req2.send(null);
+                }
+        }
+        if(i>=5){
+            stop=1;
+            btn2.disabled=false;
+            i=0;
+        }else{
+            tabtemperature=temperature;
+            tab.push(tabtemperature);
+            i++;
+            btn2.disabled=true;
+            stop=0;
+        }
+
+ }
+ function fcttableau (){
+
+            tableau= document.getElementById("cell1");
+            tableau.innerHTML = tab[0] ;
+            tableau= document.getElementById("cell2");
+            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') {
+    btn.value = 'Desactiver Ventilateur';
+    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){
+        btn.disabled = false;
+        checkauto.disabled = true;
+    } else{
+        btn.disabled = true;
+        checkauto.disabled = false;
+    }
+}
+function auto_click(){
+    if (document.getElementById('auto').checked){
+        btn.disabled = true;
+        checkmanu.disabled = true;
+        etatauto=1;
+        } else{
+        etatauto=0;
+        btn.disabled = true;
+        checkmanu.disabled = false;
+    }
+}
+ setInterval(lecture,1000);  
+</script>
+