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@4:bf74bc9d6add, 2018-07-03 (annotated)

Committer:
sedid
Date:
Tue Jul 03 12:14:16 2018 +0000
Revision:
4:bf74bc9d6add
Child:
5:976ba14cbadc
Serveur capteur web V2 avec l'index;

Who changed what in which revision?

UserRevisionLine numberNew contents of line
sedid 4:bf74bc9d6add 1 <!DOCTYPE html>
sedid 4:bf74bc9d6add 2 <html>
sedid 4:bf74bc9d6add 3 <head>
sedid 4:bf74bc9d6add 4 <title>VentiBed</title>
sedid 4:bf74bc9d6add 5 <meta charset="UTF-8">
sedid 4:bf74bc9d6add 6 <style>
sedid 4:bf74bc9d6add 7 body {
sedid 4:bf74bc9d6add 8 background-color: #0000FF;
sedid 4:bf74bc9d6add 9 }
sedid 4:bf74bc9d6add 10 table, th, td {
sedid 4:bf74bc9d6add 11 border: 1px solid white;
sedid 4:bf74bc9d6add 12 border-collapse: collapse;
sedid 4:bf74bc9d6add 13 border-color: white ;
sedid 4:bf74bc9d6add 14 margin: auto;
sedid 4:bf74bc9d6add 15 }
sedid 4:bf74bc9d6add 16 th, td {
sedid 4:bf74bc9d6add 17 padding: 5px;
sedid 4:bf74bc9d6add 18 text-align: left;
sedid 4:bf74bc9d6add 19 }
sedid 4:bf74bc9d6add 20 </style>
sedid 4:bf74bc9d6add 21 </head>
sedid 4:bf74bc9d6add 22
sedid 4:bf74bc9d6add 23 </style>
sedid 4:bf74bc9d6add 24
sedid 4:bf74bc9d6add 25 <body text="#FDF5E6">
sedid 4:bf74bc9d6add 26 <h1 style="text-align:center; color:white">VentiBed </h1>
sedid 4:bf74bc9d6add 27 <p><input type="checkbox" name="auto" id="auto"
sedid 4:bf74bc9d6add 28 onclick="auto_click()" />Auto</p>
sedid 4:bf74bc9d6add 29 <p><input type="checkbox" name="manu" id="manu"
sedid 4:bf74bc9d6add 30 onclick="manu_click()" />Manuel</p>
sedid 4:bf74bc9d6add 31 <p style="text-align:center;"><input type="button" id="venti" value="Activer Ventilateur">
sedid 4:bf74bc9d6add 32 </p>
sedid 4:bf74bc9d6add 33 <p id="temp"></p>
sedid 4:bf74bc9d6add 34 <p style="text-align:center;"><input id="rafraichir" type="button" value="Rafraichir">
sedid 4:bf74bc9d6add 35 <table id="tableau" style="width:75%">
sedid 4:bf74bc9d6add 36 <tr>
sedid 4:bf74bc9d6add 37 <th rowspan="5">Temperature(°C)</th>
sedid 4:bf74bc9d6add 38 <td id="cell1"></td>
sedid 4:bf74bc9d6add 39 </tr>
sedid 4:bf74bc9d6add 40 <tr>
sedid 4:bf74bc9d6add 41 <td id="cell2"></td>
sedid 4:bf74bc9d6add 42 </tr>
sedid 4:bf74bc9d6add 43 <tr>
sedid 4:bf74bc9d6add 44 <td id="cell3"></td>
sedid 4:bf74bc9d6add 45 </tr>
sedid 4:bf74bc9d6add 46 <tr>
sedid 4:bf74bc9d6add 47 <td id="cell4"></td>
sedid 4:bf74bc9d6add 48 </tr>
sedid 4:bf74bc9d6add 49 <tr>
sedid 4:bf74bc9d6add 50 <td id="cell5"></td>
sedid 4:bf74bc9d6add 51 </tr>
sedid 4:bf74bc9d6add 52 <tr>
sedid 4:bf74bc9d6add 53 <th>Moyenne</th>
sedid 4:bf74bc9d6add 54 <td id="cell6"></td>
sedid 4:bf74bc9d6add 55 </tr>
sedid 4:bf74bc9d6add 56 </table>
sedid 4:bf74bc9d6add 57 </body>
sedid 4:bf74bc9d6add 58 </html>
sedid 4:bf74bc9d6add 59
sedid 4:bf74bc9d6add 60 <script type="text/javascript">
sedid 4:bf74bc9d6add 61
sedid 4:bf74bc9d6add 62 var btn = document.querySelector('#venti');
sedid 4:bf74bc9d6add 63 var btn2 = document.querySelector('#rafraichir');
sedid 4:bf74bc9d6add 64 var checkauto = document.querySelector('#auto');
sedid 4:bf74bc9d6add 65 var checkmanu = document.querySelector('#manu');
sedid 4:bf74bc9d6add 66 var req=new XMLHttpRequest();
sedid 4:bf74bc9d6add 67 var req2= new XMLHttpRequest();
sedid 4:bf74bc9d6add 68 var data_recu=0;
sedid 4:bf74bc9d6add 69 var temperature;
sedid 4:bf74bc9d6add 70 var temp;
sedid 4:bf74bc9d6add 71 var tension;
sedid 4:bf74bc9d6add 72 var etatauto;
sedid 4:bf74bc9d6add 73 var tabtemperature;
sedid 4:bf74bc9d6add 74 var min;
sedid 4:bf74bc9d6add 75 var max;
sedid 4:bf74bc9d6add 76 var tableau;
sedid 4:bf74bc9d6add 77 var tab = [];
sedid 4:bf74bc9d6add 78 var i=0;
sedid 4:bf74bc9d6add 79 var stop;
sedid 4:bf74bc9d6add 80
sedid 4:bf74bc9d6add 81 btn2.addEventListener('click', updateBtn2);
sedid 4:bf74bc9d6add 82 btn.addEventListener('click', updateBtn);
sedid 4:bf74bc9d6add 83
sedid 4:bf74bc9d6add 84 function updateBtn2() {
sedid 4:bf74bc9d6add 85 fcttableau();
sedid 4:bf74bc9d6add 86 tab=[];
sedid 4:bf74bc9d6add 87 }
sedid 4:bf74bc9d6add 88
sedid 4:bf74bc9d6add 89 function lecture (){
sedid 4:bf74bc9d6add 90 req.open('GET', '/rpc/capteur_temp/read', true);
sedid 4:bf74bc9d6add 91 req.onreadystatechange = function() {
sedid 4:bf74bc9d6add 92 if(req.readyState == 4 && req.status == 200) {
sedid 4:bf74bc9d6add 93 data_recu = req.responseText;
sedid 4:bf74bc9d6add 94 temp= document.getElementById("temp");
sedid 4:bf74bc9d6add 95 tension=data_recu*3.3;
sedid 4:bf74bc9d6add 96 temperature = Math.round((30.7*tension-24.06)+2.6);
sedid 4:bf74bc9d6add 97 temp.innerHTML ='La temperature est de : ' + temperature + ' °C.';
sedid 4:bf74bc9d6add 98
sedid 4:bf74bc9d6add 99 }
sedid 4:bf74bc9d6add 100 }
sedid 4:bf74bc9d6add 101 req.send(null);
sedid 4:bf74bc9d6add 102 if(document.getElementById('auto').checked){
sedid 4:bf74bc9d6add 103 if(temperature>33){
sedid 4:bf74bc9d6add 104 val='0';
sedid 4:bf74bc9d6add 105 req2.open('GET', '/rpc/venti/write '+val, true);
sedid 4:bf74bc9d6add 106 req2.send(null);
sedid 4:bf74bc9d6add 107 }else{
sedid 4:bf74bc9d6add 108 val='1';
sedid 4:bf74bc9d6add 109 req2.open('GET', '/rpc/venti/write '+val, true);
sedid 4:bf74bc9d6add 110 req2.send(null);
sedid 4:bf74bc9d6add 111 }
sedid 4:bf74bc9d6add 112 }
sedid 4:bf74bc9d6add 113 if(i>=5){
sedid 4:bf74bc9d6add 114 stop=1;
sedid 4:bf74bc9d6add 115 btn2.disabled=false;
sedid 4:bf74bc9d6add 116 i=0;
sedid 4:bf74bc9d6add 117 }else{
sedid 4:bf74bc9d6add 118 tabtemperature=temperature;
sedid 4:bf74bc9d6add 119 tab.push(tabtemperature);
sedid 4:bf74bc9d6add 120 i++;
sedid 4:bf74bc9d6add 121 btn2.disabled=true;
sedid 4:bf74bc9d6add 122 stop=0;
sedid 4:bf74bc9d6add 123 }
sedid 4:bf74bc9d6add 124
sedid 4:bf74bc9d6add 125 }
sedid 4:bf74bc9d6add 126 function fcttableau (){
sedid 4:bf74bc9d6add 127
sedid 4:bf74bc9d6add 128 tableau= document.getElementById("cell1");
sedid 4:bf74bc9d6add 129 tableau.innerHTML = tab[0] ;
sedid 4:bf74bc9d6add 130 tableau= document.getElementById("cell2");
sedid 4:bf74bc9d6add 131 tableau.innerHTML = tab[1] ;
sedid 4:bf74bc9d6add 132 tableau= document.getElementById("cell3");
sedid 4:bf74bc9d6add 133 tableau.innerHTML = tab[2] ;
sedid 4:bf74bc9d6add 134 tableau= document.getElementById("cell4");
sedid 4:bf74bc9d6add 135 tableau.innerHTML = tab[3] ;
sedid 4:bf74bc9d6add 136 tableau= document.getElementById("cell5");
sedid 4:bf74bc9d6add 137 tableau.innerHTML = tab[4] ;
sedid 4:bf74bc9d6add 138 tableau= document.getElementById("cell6");
sedid 4:bf74bc9d6add 139 tableau.innerHTML = (tab[0] + tab[1]+ tab[2]+ tab[3]+ tab[4])/5 ;
sedid 4:bf74bc9d6add 140
sedid 4:bf74bc9d6add 141
sedid 4:bf74bc9d6add 142 }
sedid 4:bf74bc9d6add 143 function updateBtn() {
sedid 4:bf74bc9d6add 144 if (btn.value === 'Activer Ventilateur') {
sedid 4:bf74bc9d6add 145 btn.value = 'Desactiver Ventilateur';
sedid 4:bf74bc9d6add 146 val='0';
sedid 4:bf74bc9d6add 147 req.open('GET', '/rpc/venti/write '+val, true);
sedid 4:bf74bc9d6add 148 req.send(null);
sedid 4:bf74bc9d6add 149
sedid 4:bf74bc9d6add 150 } else {
sedid 4:bf74bc9d6add 151 btn.value = 'Activer Ventilateur';
sedid 4:bf74bc9d6add 152 val='1';
sedid 4:bf74bc9d6add 153 req.open('GET', '/rpc/venti/write '+val, true);
sedid 4:bf74bc9d6add 154 req.send(null);
sedid 4:bf74bc9d6add 155 }
sedid 4:bf74bc9d6add 156 }
sedid 4:bf74bc9d6add 157 function manu_click(){
sedid 4:bf74bc9d6add 158 if (document.getElementById('manu').checked){
sedid 4:bf74bc9d6add 159 btn.disabled = false;
sedid 4:bf74bc9d6add 160 checkauto.disabled = true;
sedid 4:bf74bc9d6add 161 } else{
sedid 4:bf74bc9d6add 162 btn.disabled = true;
sedid 4:bf74bc9d6add 163 checkauto.disabled = false;
sedid 4:bf74bc9d6add 164 }
sedid 4:bf74bc9d6add 165 }
sedid 4:bf74bc9d6add 166 function auto_click(){
sedid 4:bf74bc9d6add 167 if (document.getElementById('auto').checked){
sedid 4:bf74bc9d6add 168 btn.disabled = true;
sedid 4:bf74bc9d6add 169 checkmanu.disabled = true;
sedid 4:bf74bc9d6add 170 etatauto=1;
sedid 4:bf74bc9d6add 171 } else{
sedid 4:bf74bc9d6add 172 etatauto=0;
sedid 4:bf74bc9d6add 173 btn.disabled = true;
sedid 4:bf74bc9d6add 174 checkmanu.disabled = false;
sedid 4:bf74bc9d6add 175 }
sedid 4:bf74bc9d6add 176 }
sedid 4:bf74bc9d6add 177 setInterval(lecture,1000);
sedid 4:bf74bc9d6add 178 </script>
sedid 4:bf74bc9d6add 179