![](/media/cache/img/default_profile.jpg.50x50_q85.jpg)
Page Web
Dependencies: mbed Serveur_web_capteur EthernetNetIf
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?
User | Revision | Line number | New 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 |