Ben Rokia Bilel / Mbed 2 deprecated Serveur_web_pt2_index_commenter

Page Web

Dependencies:   mbed Serveur_web_capteur EthernetNetIf

index.html@6:df1059a12a34, 2020-02-13 (annotated)

Committer:
bilben99
Date:
Thu Feb 13 20:08:11 2020 +0000
Revision:
6:df1059a12a34
Parent:
index.htm@5:976ba14cbadc 
Page web HTML CSS JS dans le word

Who changed what in which revision?

UserRevisionLine numberNew 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