![](/media/cache/img/default_profile.jpg.50x50_q85.jpg)
Page Web
Dependencies: mbed Serveur_web_capteur EthernetNetIf
index.htm
- Committer:
- sedid
- Date:
- 2018-07-03
- Revision:
- 5:976ba14cbadc
- Parent:
- 4:bf74bc9d6add
File content as of revision 5:976ba14cbadc:
Texte a recopier sur sublimetext il y'aura plus de problèmes de commentaires. <!DOCTYPE html> <html> <head> <title>VentiBed</title> <meta charset="UTF-8"> <!--> style CSS définie pour la beauté du site est pour décider de l'emplacement du tableau et des boutons <--> <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> <!--> 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 puis nous déclarons un tableau avec 6 céllules <--> <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> <!--> On rentre dans le script en javascript du site <--> <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; // Déclarations de toutes les variables nécéssaires déclarations des variables en variables globales 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); //2 évenement pour les boutons qui permert d'appler la fonction updatebtn2 ou btn.addEventListener('click', updateBtn); //updatebtn si on click sur l'un des boutons function updateBtn2() { fcttableau(); // si on appuye sur le btn2 qui est le bouton rafraichir on appel la fonctions fcttableau. tab=[]; } function lecture (){ req.open('GET', '/rpc/capteur_temp/read', true); // Fonction lecture qui permet de lire la température avec la req.onreadystatechange = function() { // meme méthode que du test n°2 if(req.readyState == 4 && req.status == 200) { data_recu = req.responseText; temp= document.getElementById("temp"); tension=data_recu*3.3; // je récupère une valeur analogique entre 0 et 1 donc 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 temp.innerHTML ='La temperature est de : ' + temperature + ' °C.'; // Température } } req.send(null); if(document.getElementById('auto').checked){ // si le mode auto est check on regarde que la température ne if(temperature>33){ val='0'; // dépasse pas les 33°C . si ça dépasse le ventilateur s'active req2.open('GET', '/rpc/venti/write '+val, true); // en mettant la commande a 0. req2.send(null); }else{ val='1'; req2.open('GET', '/rpc/venti/write '+val, true); // si la température est < 33°C le ventillateur ne s'active pas. req2.send(null); } } if(i>=5){ stop=1; btn2.disabled=false; // ce if permet de gerer le remplissage du tableau est de rafraichir les i=0; //valeurs du tableau quand le bouton rafraichir est activé. }else{ tabtemperature=temperature; tab.push(tabtemperature); i++; btn2.disabled=true; stop=0; } } function fcttableau (){ tableau= document.getElementById("cell1"); // utilisation de la méthode innerhtml qui permet de remplir les cases du tableau.innerHTML = tab[0] ; // tableau une par une avec les donnés récoltés tableau= document.getElementById("cell2"); // la méthode inner sert a écrire sur la page web ce qu'on a stocké. 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') { // la même structure que sur le test n°2 avec les boutons btn.value = 'Desactiver Ventilateur'; // mais la c'est l'utilisation du mode manuel. 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){ // permet d'activer le bouton "activer le ventillateur" ou le désactiver btn.disabled = false; // en foncton de la checkbox manuel si elle est cocher ou non checkauto.disabled = true; } else{ btn.disabled = true; checkauto.disabled = false; } } function auto_click(){ if (document.getElementById('auto').checked){ // permet de desactiver tout les boutons si c'est en mode automatique btn.disabled = true; // en focntion de la checkbox automatique si elle est cocher ou non checkmanu.disabled = true; etatauto=1; } else{ etatauto=0; btn.disabled = true; checkmanu.disabled = false; } } setInterval(lecture,1000); // appel de la fonction lecture toutes les 1sec. </script>