Ben Rokia Bilel
Page Web
Dependencies: mbed Serveur_web_capteur EthernetNetIf
Diff: index.htm
- Revision:
- 5:976ba14cbadc
- Parent:
- 4:bf74bc9d6add
diff -r bf74bc9d6add -r 976ba14cbadc index.htm
--- a/index.htm Tue Jul 03 12:14:16 2018 +0000
+++ b/index.htm Tue Jul 03 13:37:51 2018 +0000
@@ -1,10 +1,13 @@
+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 {
+body {
background-color: #0000FF;
}
table, th, td {
@@ -21,7 +24,8 @@
</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"
@@ -56,7 +60,7 @@
</table>
</body>
</html>
-
+<!--> On rentre dans le script en javascript du site <-->
<script type="text/javascript">
var btn = document.querySelector('#venti');
@@ -65,8 +69,8 @@
var checkmanu = document.querySelector('#manu');
var req=new XMLHttpRequest();
var req2= new XMLHttpRequest();
-var data_recu=0;
-var temperature;
+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;
@@ -78,42 +82,42 @@
var i=0;
var stop;
-btn2.addEventListener('click', updateBtn2);
-btn.addEventListener('click', updateBtn);
+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();
+ 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);
- req.onreadystatechange = function() {
+ 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;
- temperature = Math.round((30.7*tension-24.06)+2.6);
- temp.innerHTML ='La temperature est de : ' + temperature + ' °C.';
+ 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){
+ if(document.getElementById('auto').checked){ // si le mode auto est check on regarde que la température ne
if(temperature>33){
- val='0';
- req2.open('GET', '/rpc/venti/write '+val, true);
- req2.send(null);
+ 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);
+ 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;
- i=0;
+ 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);
@@ -125,9 +129,9 @@
}
function fcttableau (){
- tableau= document.getElementById("cell1");
- tableau.innerHTML = tab[0] ;
- tableau= document.getElementById("cell2");
+ 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] ;
@@ -141,8 +145,8 @@
}
function updateBtn() {
- if (btn.value === 'Activer Ventilateur') {
- btn.value = 'Desactiver Ventilateur';
+ 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);
@@ -155,8 +159,8 @@
}
}
function manu_click(){
- if (document.getElementById('manu').checked){
- btn.disabled = false;
+ 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;
@@ -164,8 +168,8 @@
}
}
function auto_click(){
- if (document.getElementById('auto').checked){
- btn.disabled = true;
+ 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{
@@ -174,6 +178,6 @@
checkmanu.disabled = false;
}
}
- setInterval(lecture,1000);
+ setInterval(lecture,1000); // appel de la fonction lecture toutes les 1sec.
</script>