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

index.htm

Committer:
sedid
Date:
2018-07-03
Revision:
4:bf74bc9d6add
Child:
5:976ba14cbadc

File content as of revision 4:bf74bc9d6add:

<!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>