Programme + libraires serveur capteur web + index en html
Dependencies: EthernetNetIf Serveur_web_capteur mbed
Fork of Serveur_web_pt2 by
Revision 4:bf74bc9d6add, committed 2018-07-03
- Comitter:
- sedid
- Date:
- Tue Jul 03 12:14:16 2018 +0000
- Parent:
- 3:e851c29d398d
- Commit message:
- Serveur capteur web V2 avec l'index;
Changed in this revision
index.htm | Show annotated file Show diff for this revision Revisions of this file |
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> +