![](/media/cache/img/default_profile.jpg.50x50_q85.jpg)
Page Web
Dependencies: mbed Serveur_web_capteur EthernetNetIf
Revision 6:df1059a12a34, committed 2020-02-13
- Comitter:
- bilben99
- Date:
- Thu Feb 13 20:08:11 2020 +0000
- Parent:
- 5:976ba14cbadc
- Commit message:
- Page web HTML CSS JS dans le word
Changed in this revision
--- a/HTTPServerExample.cpp Tue Jul 03 13:37:51 2018 +0000 +++ b/HTTPServerExample.cpp Thu Feb 13 20:08:11 2020 +0000 @@ -7,7 +7,7 @@ DigitalOut led3(LED3, "led3"); DigitalOut led4(LED4, "led4"); PwmOut venti(p21,"venti"); -AnalogIn pot(p18, "capteur_temp"); +AnalogIn pot(p19, "capteur_temp"); LocalFileSystem fs("webfs"); @@ -51,7 +51,10 @@ Net::poll(); if(tm.read()>.5) { - led1=!led1 + venti.write(0.1); + wait(0.5); + venti.write(0.5); + led1=!led1; tm.start(); if(x>10){ led2=1; }else{
--- a/index.htm Tue Jul 03 13:37:51 2018 +0000 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,183 +0,0 @@ -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> -
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/index.html Thu Feb 13 20:08:11 2020 +0000 @@ -0,0 +1,183 @@ +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> +