![](/media/cache/img/default_profile.jpg.50x50_q85.jpg)
Page Web
Dependencies: mbed Serveur_web_capteur EthernetNetIf
index.htm@5:976ba14cbadc, 2018-07-03 (annotated)
- Committer:
- sedid
- Date:
- Tue Jul 03 13:37:51 2018 +0000
- Revision:
- 5:976ba14cbadc
- Parent:
- 4:bf74bc9d6add
V3;
Who changed what in which revision?
User | Revision | Line number | New contents of line |
---|---|---|---|
sedid | 5:976ba14cbadc | 1 | Texte a recopier sur sublimetext il y'aura plus de problèmes de commentaires. |
sedid | 5:976ba14cbadc | 2 | |
sedid | 4:bf74bc9d6add | 3 | <!DOCTYPE html> |
sedid | 4:bf74bc9d6add | 4 | <html> |
sedid | 4:bf74bc9d6add | 5 | <head> |
sedid | 4:bf74bc9d6add | 6 | <title>VentiBed</title> |
sedid | 4:bf74bc9d6add | 7 | <meta charset="UTF-8"> |
sedid | 5:976ba14cbadc | 8 | <!--> style CSS définie pour la beauté du site est pour décider de l'emplacement du tableau et des boutons <--> |
sedid | 4:bf74bc9d6add | 9 | <style> |
sedid | 5:976ba14cbadc | 10 | body { |
sedid | 4:bf74bc9d6add | 11 | background-color: #0000FF; |
sedid | 4:bf74bc9d6add | 12 | } |
sedid | 4:bf74bc9d6add | 13 | table, th, td { |
sedid | 4:bf74bc9d6add | 14 | border: 1px solid white; |
sedid | 4:bf74bc9d6add | 15 | border-collapse: collapse; |
sedid | 4:bf74bc9d6add | 16 | border-color: white ; |
sedid | 4:bf74bc9d6add | 17 | margin: auto; |
sedid | 4:bf74bc9d6add | 18 | } |
sedid | 4:bf74bc9d6add | 19 | th, td { |
sedid | 4:bf74bc9d6add | 20 | padding: 5px; |
sedid | 4:bf74bc9d6add | 21 | text-align: left; |
sedid | 4:bf74bc9d6add | 22 | } |
sedid | 4:bf74bc9d6add | 23 | </style> |
sedid | 4:bf74bc9d6add | 24 | </head> |
sedid | 4:bf74bc9d6add | 25 | |
sedid | 4:bf74bc9d6add | 26 | </style> |
sedid | 5:976ba14cbadc | 27 | <!--> le body c'est le corps du programme comme un main dans un programme en C la on définie 2 checkbox ave un id auto et un manu et enfin 2 boutons un avec in venti et l'autre rafraichir |
sedid | 5:976ba14cbadc | 28 | puis nous déclarons un tableau avec 6 céllules <--> |
sedid | 4:bf74bc9d6add | 29 | <body text="#FDF5E6"> |
sedid | 4:bf74bc9d6add | 30 | <h1 style="text-align:center; color:white">VentiBed </h1> |
sedid | 4:bf74bc9d6add | 31 | <p><input type="checkbox" name="auto" id="auto" |
sedid | 4:bf74bc9d6add | 32 | onclick="auto_click()" />Auto</p> |
sedid | 4:bf74bc9d6add | 33 | <p><input type="checkbox" name="manu" id="manu" |
sedid | 4:bf74bc9d6add | 34 | onclick="manu_click()" />Manuel</p> |
sedid | 4:bf74bc9d6add | 35 | <p style="text-align:center;"><input type="button" id="venti" value="Activer Ventilateur"> |
sedid | 4:bf74bc9d6add | 36 | </p> |
sedid | 4:bf74bc9d6add | 37 | <p id="temp"></p> |
sedid | 4:bf74bc9d6add | 38 | <p style="text-align:center;"><input id="rafraichir" type="button" value="Rafraichir"> |
sedid | 4:bf74bc9d6add | 39 | <table id="tableau" style="width:75%"> |
sedid | 4:bf74bc9d6add | 40 | <tr> |
sedid | 4:bf74bc9d6add | 41 | <th rowspan="5">Temperature(°C)</th> |
sedid | 4:bf74bc9d6add | 42 | <td id="cell1"></td> |
sedid | 4:bf74bc9d6add | 43 | </tr> |
sedid | 4:bf74bc9d6add | 44 | <tr> |
sedid | 4:bf74bc9d6add | 45 | <td id="cell2"></td> |
sedid | 4:bf74bc9d6add | 46 | </tr> |
sedid | 4:bf74bc9d6add | 47 | <tr> |
sedid | 4:bf74bc9d6add | 48 | <td id="cell3"></td> |
sedid | 4:bf74bc9d6add | 49 | </tr> |
sedid | 4:bf74bc9d6add | 50 | <tr> |
sedid | 4:bf74bc9d6add | 51 | <td id="cell4"></td> |
sedid | 4:bf74bc9d6add | 52 | </tr> |
sedid | 4:bf74bc9d6add | 53 | <tr> |
sedid | 4:bf74bc9d6add | 54 | <td id="cell5"></td> |
sedid | 4:bf74bc9d6add | 55 | </tr> |
sedid | 4:bf74bc9d6add | 56 | <tr> |
sedid | 4:bf74bc9d6add | 57 | <th>Moyenne</th> |
sedid | 4:bf74bc9d6add | 58 | <td id="cell6"></td> |
sedid | 4:bf74bc9d6add | 59 | </tr> |
sedid | 4:bf74bc9d6add | 60 | </table> |
sedid | 4:bf74bc9d6add | 61 | </body> |
sedid | 4:bf74bc9d6add | 62 | </html> |
sedid | 5:976ba14cbadc | 63 | <!--> On rentre dans le script en javascript du site <--> |
sedid | 4:bf74bc9d6add | 64 | <script type="text/javascript"> |
sedid | 4:bf74bc9d6add | 65 | |
sedid | 4:bf74bc9d6add | 66 | var btn = document.querySelector('#venti'); |
sedid | 4:bf74bc9d6add | 67 | var btn2 = document.querySelector('#rafraichir'); |
sedid | 4:bf74bc9d6add | 68 | var checkauto = document.querySelector('#auto'); |
sedid | 4:bf74bc9d6add | 69 | var checkmanu = document.querySelector('#manu'); |
sedid | 4:bf74bc9d6add | 70 | var req=new XMLHttpRequest(); |
sedid | 4:bf74bc9d6add | 71 | var req2= new XMLHttpRequest(); |
sedid | 5:976ba14cbadc | 72 | var data_recu=0; // Déclarations de toutes les variables nécéssaires déclarations des variables en variables globales |
sedid | 5:976ba14cbadc | 73 | var temperature; |
sedid | 4:bf74bc9d6add | 74 | var temp; |
sedid | 4:bf74bc9d6add | 75 | var tension; |
sedid | 4:bf74bc9d6add | 76 | var etatauto; |
sedid | 4:bf74bc9d6add | 77 | var tabtemperature; |
sedid | 4:bf74bc9d6add | 78 | var min; |
sedid | 4:bf74bc9d6add | 79 | var max; |
sedid | 4:bf74bc9d6add | 80 | var tableau; |
sedid | 4:bf74bc9d6add | 81 | var tab = []; |
sedid | 4:bf74bc9d6add | 82 | var i=0; |
sedid | 4:bf74bc9d6add | 83 | var stop; |
sedid | 4:bf74bc9d6add | 84 | |
sedid | 5:976ba14cbadc | 85 | btn2.addEventListener('click', updateBtn2); //2 évenement pour les boutons qui permert d'appler la fonction updatebtn2 ou |
sedid | 5:976ba14cbadc | 86 | btn.addEventListener('click', updateBtn); //updatebtn si on click sur l'un des boutons |
sedid | 4:bf74bc9d6add | 87 | |
sedid | 4:bf74bc9d6add | 88 | function updateBtn2() { |
sedid | 5:976ba14cbadc | 89 | fcttableau(); // si on appuye sur le btn2 qui est le bouton rafraichir on appel la fonctions fcttableau. |
sedid | 4:bf74bc9d6add | 90 | tab=[]; |
sedid | 4:bf74bc9d6add | 91 | } |
sedid | 4:bf74bc9d6add | 92 | |
sedid | 4:bf74bc9d6add | 93 | function lecture (){ |
sedid | 5:976ba14cbadc | 94 | req.open('GET', '/rpc/capteur_temp/read', true); // Fonction lecture qui permet de lire la température avec la |
sedid | 5:976ba14cbadc | 95 | req.onreadystatechange = function() { // meme méthode que du test n°2 |
sedid | 4:bf74bc9d6add | 96 | if(req.readyState == 4 && req.status == 200) { |
sedid | 4:bf74bc9d6add | 97 | data_recu = req.responseText; |
sedid | 4:bf74bc9d6add | 98 | temp= document.getElementById("temp"); |
sedid | 5:976ba14cbadc | 99 | tension=data_recu*3.3; // je récupère une valeur analogique entre 0 et 1 donc |
sedid | 5:976ba14cbadc | 100 | temperature = Math.round((30.7*tension-24.06)+2.6); // je l'a met en forme pour que la valeur analogique soit égale a la |
sedid | 5:976ba14cbadc | 101 | temp.innerHTML ='La temperature est de : ' + temperature + ' °C.'; // Température |
sedid | 4:bf74bc9d6add | 102 | |
sedid | 4:bf74bc9d6add | 103 | } |
sedid | 4:bf74bc9d6add | 104 | } |
sedid | 4:bf74bc9d6add | 105 | req.send(null); |
sedid | 5:976ba14cbadc | 106 | if(document.getElementById('auto').checked){ // si le mode auto est check on regarde que la température ne |
sedid | 4:bf74bc9d6add | 107 | if(temperature>33){ |
sedid | 5:976ba14cbadc | 108 | val='0'; // dépasse pas les 33°C . si ça dépasse le ventilateur s'active |
sedid | 5:976ba14cbadc | 109 | req2.open('GET', '/rpc/venti/write '+val, true); // en mettant la commande a 0. |
sedid | 5:976ba14cbadc | 110 | req2.send(null); |
sedid | 4:bf74bc9d6add | 111 | }else{ |
sedid | 4:bf74bc9d6add | 112 | val='1'; |
sedid | 5:976ba14cbadc | 113 | req2.open('GET', '/rpc/venti/write '+val, true); // si la température est < 33°C le ventillateur ne s'active pas. |
sedid | 4:bf74bc9d6add | 114 | req2.send(null); |
sedid | 4:bf74bc9d6add | 115 | } |
sedid | 4:bf74bc9d6add | 116 | } |
sedid | 4:bf74bc9d6add | 117 | if(i>=5){ |
sedid | 4:bf74bc9d6add | 118 | stop=1; |
sedid | 5:976ba14cbadc | 119 | btn2.disabled=false; // ce if permet de gerer le remplissage du tableau est de rafraichir les |
sedid | 5:976ba14cbadc | 120 | i=0; //valeurs du tableau quand le bouton rafraichir est activé. |
sedid | 4:bf74bc9d6add | 121 | }else{ |
sedid | 4:bf74bc9d6add | 122 | tabtemperature=temperature; |
sedid | 4:bf74bc9d6add | 123 | tab.push(tabtemperature); |
sedid | 4:bf74bc9d6add | 124 | i++; |
sedid | 4:bf74bc9d6add | 125 | btn2.disabled=true; |
sedid | 4:bf74bc9d6add | 126 | stop=0; |
sedid | 4:bf74bc9d6add | 127 | } |
sedid | 4:bf74bc9d6add | 128 | |
sedid | 4:bf74bc9d6add | 129 | } |
sedid | 4:bf74bc9d6add | 130 | function fcttableau (){ |
sedid | 4:bf74bc9d6add | 131 | |
sedid | 5:976ba14cbadc | 132 | tableau= document.getElementById("cell1"); // utilisation de la méthode innerhtml qui permet de remplir les cases du |
sedid | 5:976ba14cbadc | 133 | tableau.innerHTML = tab[0] ; // tableau une par une avec les donnés récoltés |
sedid | 5:976ba14cbadc | 134 | tableau= document.getElementById("cell2"); // la méthode inner sert a écrire sur la page web ce qu'on a stocké. |
sedid | 4:bf74bc9d6add | 135 | tableau.innerHTML = tab[1] ; |
sedid | 4:bf74bc9d6add | 136 | tableau= document.getElementById("cell3"); |
sedid | 4:bf74bc9d6add | 137 | tableau.innerHTML = tab[2] ; |
sedid | 4:bf74bc9d6add | 138 | tableau= document.getElementById("cell4"); |
sedid | 4:bf74bc9d6add | 139 | tableau.innerHTML = tab[3] ; |
sedid | 4:bf74bc9d6add | 140 | tableau= document.getElementById("cell5"); |
sedid | 4:bf74bc9d6add | 141 | tableau.innerHTML = tab[4] ; |
sedid | 4:bf74bc9d6add | 142 | tableau= document.getElementById("cell6"); |
sedid | 4:bf74bc9d6add | 143 | tableau.innerHTML = (tab[0] + tab[1]+ tab[2]+ tab[3]+ tab[4])/5 ; |
sedid | 4:bf74bc9d6add | 144 | |
sedid | 4:bf74bc9d6add | 145 | |
sedid | 4:bf74bc9d6add | 146 | } |
sedid | 4:bf74bc9d6add | 147 | function updateBtn() { |
sedid | 5:976ba14cbadc | 148 | if (btn.value === 'Activer Ventilateur') { // la même structure que sur le test n°2 avec les boutons |
sedid | 5:976ba14cbadc | 149 | btn.value = 'Desactiver Ventilateur'; // mais la c'est l'utilisation du mode manuel. |
sedid | 4:bf74bc9d6add | 150 | val='0'; |
sedid | 4:bf74bc9d6add | 151 | req.open('GET', '/rpc/venti/write '+val, true); |
sedid | 4:bf74bc9d6add | 152 | req.send(null); |
sedid | 4:bf74bc9d6add | 153 | |
sedid | 4:bf74bc9d6add | 154 | } else { |
sedid | 4:bf74bc9d6add | 155 | btn.value = 'Activer Ventilateur'; |
sedid | 4:bf74bc9d6add | 156 | val='1'; |
sedid | 4:bf74bc9d6add | 157 | req.open('GET', '/rpc/venti/write '+val, true); |
sedid | 4:bf74bc9d6add | 158 | req.send(null); |
sedid | 4:bf74bc9d6add | 159 | } |
sedid | 4:bf74bc9d6add | 160 | } |
sedid | 4:bf74bc9d6add | 161 | function manu_click(){ |
sedid | 5:976ba14cbadc | 162 | if (document.getElementById('manu').checked){ // permet d'activer le bouton "activer le ventillateur" ou le désactiver |
sedid | 5:976ba14cbadc | 163 | btn.disabled = false; // en foncton de la checkbox manuel si elle est cocher ou non |
sedid | 4:bf74bc9d6add | 164 | checkauto.disabled = true; |
sedid | 4:bf74bc9d6add | 165 | } else{ |
sedid | 4:bf74bc9d6add | 166 | btn.disabled = true; |
sedid | 4:bf74bc9d6add | 167 | checkauto.disabled = false; |
sedid | 4:bf74bc9d6add | 168 | } |
sedid | 4:bf74bc9d6add | 169 | } |
sedid | 4:bf74bc9d6add | 170 | function auto_click(){ |
sedid | 5:976ba14cbadc | 171 | if (document.getElementById('auto').checked){ // permet de desactiver tout les boutons si c'est en mode automatique |
sedid | 5:976ba14cbadc | 172 | btn.disabled = true; // en focntion de la checkbox automatique si elle est cocher ou non |
sedid | 4:bf74bc9d6add | 173 | checkmanu.disabled = true; |
sedid | 4:bf74bc9d6add | 174 | etatauto=1; |
sedid | 4:bf74bc9d6add | 175 | } else{ |
sedid | 4:bf74bc9d6add | 176 | etatauto=0; |
sedid | 4:bf74bc9d6add | 177 | btn.disabled = true; |
sedid | 4:bf74bc9d6add | 178 | checkmanu.disabled = false; |
sedid | 4:bf74bc9d6add | 179 | } |
sedid | 4:bf74bc9d6add | 180 | } |
sedid | 5:976ba14cbadc | 181 | setInterval(lecture,1000); // appel de la fonction lecture toutes les 1sec. |
sedid | 4:bf74bc9d6add | 182 | </script> |
sedid | 4:bf74bc9d6add | 183 |