Ben Rokia Bilel
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
diff -r 976ba14cbadc -r df1059a12a34 HTTPServerExample.cpp
--- 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{
diff -r 976ba14cbadc -r df1059a12a34 index.htm
--- 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>
-
diff -r 976ba14cbadc -r df1059a12a34 index.html
--- /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>
+