aknockae / projet_SC_IMA3

Commit 926848d0e319a529ac10054a9d456412d2f46e8f

Authored by aknockae
1 parent a4d85595

Site web terminé, envoi final avec ajout de css

Showing 3 changed files with 84 additions and 39 deletions   Show diff stats
Inline Side-by-side
appWeb/index.html
  Show/Hide comments   View file @926848d
... ... @@ -2,39 +2,39 @@
2 2 <html>
3 3 <head>
4 4 <meta charset="UTF-8">
5   - <title>Page Title</title>
  5 + <title>Station météo</title>
6 6 <script src="js/jquery-3.2.1.min.js"></script>
7 7 <script src="js/script.js"></script>
  8 + <link rel="stylesheet" type="text/css" href="style.css">
8 9 </head>
9 10 <body>
10   - <h1>Station météo en ligne</h1>
11   - <h2>Gracias-Havard-Qiang-Knockaert</h2>
12   - <h3>Connection <span class="connecOn">On</span>/<span class="connecOff">Off</span></h3>
13   - <h3>Météo</h3>
14   - <div id="apercuGeneral">
15   - <div class="soleil"></div>
16   - <div class="nuageux"></div>
17   - <div class="pluie"></div>
  11 + <div id="corps">
  12 + <h1>Station météo en ligne</h1>
  13 + <h2>Gracias-Havard-Knockaert-Qiang</h2>
  14 + <p>Vous êtes sur l'application web du projet de Systèmes communicants du 2e groupe du TD2 IMA3 de Polytech Lille. Le projet est une application web affichant des relevés météo. Les données sont mesurées par des capteurs se trouvant sur une carte Arduino ou sur un contrôleur FPGA. Ces données sont envoyées en série sur une raspberry Pi 2, qui se charge de les envoyer sur l'application web, via websockets.</p>
  15 + <h3>Connection <span class="connecOn">On</span>/<span class="connecOff">Off</span></h3>
  16 + <h3>Météo dans la région Lilloise</h3>
  17 + <div id="relevesMeteo">
  18 + <button onclick="requeteEnvoi();">Récupérer les données</button>
  19 + <table>
  20 + <tr>
  21 + <th>Température</th>
  22 + <th>Humidité</th>
  23 + <th>Pression</th>
  24 + <th>Luminosité</th>
  25 + <th>Vitesse du vent</th>
  26 + </tr>
  27 + <tr>
  28 + <td class="temperature">0 °C</td>
  29 + <td class="humidite">0 %</td>
  30 + <td class="pression">0 hPa</td>
  31 + <td class="luminosite">0 Lux</td>
  32 + <td class="vent">0 km/h </td>
  33 + </tr>
  34 + </table>
  35 + <h4 style="display:none;">Temps actuel : Le ciel est <span class="nuage"></span> et il <span class="pluie"></span>.</h4>
  36 + </div>
18 37 </div>
19   -
20   - <div id="relevesMeteo">
21   - <button onclick="requeteEnvoi();">Récupérer donnée</button>
22   - <table>
23   - <tr>
24   - <th>Température</th>
25   - <th>Humidité</th>
26   - <th>Pression</th>
27   - <th>Luminosité</th>
28   - </tr>
29   - <tr>
30   - <td class="temperature"></td>
31   - <td class="humidite"></td>
32   - <td class="pression"></td>
33   - <td class="luminosite"></td>
34   - </tr>
35   - </table>
36   - </div>
37   -
38 38 </body>
39 39 </html>
40 40  
... ...
appWeb/js/script.js
  Show/Hide comments   View file @926848d
1 1 window.WebSocket=(window.WebSocket||window.MozWebSocket);
2 2 var websocket=new WebSocket('ws://192.168.1.111:9000','myprotocol');
3   - websocket.binaryType = 'arraybuffer'; //On utilise un objet arraybuffer pour envoyer les donnée.
  3 + websocket.binaryType = 'arraybuffer'; //On utilise un objet arraybuffer pour envoyer et recevoir les données
  4 + //Cette objet permet de transformer automatiquement un buffer de plusieurs octets en un tableau de données d'un certain type, dans notre cas des entiers non signés.
4 5  
5 6  
6 7 websocket.onopen=function(){ $('h3 .connecOn').css('color','green'); };
7 8  
8 9 websocket.onerror=function(){ $('h3 .connecOff').css('color','red'); };
9 10  
10   -//on créé le tableau des octets à envoyer:
11   -
12   -
13   -
14   -
  11 +//on créé le tableau des octets à envoyer pour la requete :
15 12 var requete = new Uint8ClampedArray(3);
16 13 requete[0] = 'G'.charCodeAt(0);
17 14 requete[1] = 'E'.charCodeAt(0);
... ... @@ -23,13 +20,30 @@ requete[2] = &#39;T&#39;.charCodeAt(0);
23 20  
24 21  
25 22 websocket.onmessage=function(message){ //Evenement surveillant la reception de message
  23 + $('h4').show();
26 24 var reponse = new Uint8Array(message.data);
27   - console.dir(message.data);
  25 + //on extrait les données du buffer
  26 + var temp = reponse[1];
  27 + var hum = reponse[2];
  28 + var press = reponse[0]+845;
  29 + var lum = (reponse[3]*10000/255).toFixed(2);
28 30  
29   - $('#relevesMeteo .temperature').text(reponse[0]);
30   - $('#relevesMeteo .humidite').text(reponse[1]);
31   - $('#relevesMeteo .pression').text(reponse[2]);
32   - //$('#relevesMeteo .luminosite').text(message.data);*/
  31 + $('#relevesMeteo .temperature').text(temp+' °C');
  32 + $('#relevesMeteo .humidite').text(hum+' %');
  33 + $('#relevesMeteo .pression').text(press+' hPa');
  34 + $('#relevesMeteo .luminosite').text(lum+' Lux');
  35 +
  36 + //On estime l'état du ciel grâce aux données envoyées par les capteurs.
  37 + //http://leguidemeteo.com/prevoir-le-temps-a-partir-de-son-barometre/
  38 + if(lum >= 100 && lum <= 1000)
  39 + $('.nuage').text("nuageux");
  40 + else
  41 + $('.nuage').text("clair");
  42 +
  43 + if(press <= 1006)
  44 + $('.pluie').text("pleut");
  45 + else
  46 + $('.pluie').text('ne pleut pas')
33 47  
34 48 };
35 49  
... ...
appWeb/style.css 0 → 100644
  Show/Hide comments   View file @926848d
... ... @@ -0,0 +1,31 @@
  1 +body {
  2 + background-color:#ABC8E2;
  3 + font-family : Calibri,Arial,Ubuntu;
  4 +}
  5 +
  6 +#corps {
  7 + background-color:white;
  8 + margin-left:10%;
  9 + margin-right:10%;
  10 + padding:10px 10px;
  11 + border-radius:10px;
  12 +}
  13 +
  14 +table {
  15 + border:1px solid black;
  16 + border-collapse: collapse;
  17 + /*margin-left:10%;
  18 + margin-right:10%;*/
  19 + width:100%;
  20 +
  21 +}
  22 +
  23 +table tr td{
  24 + border: 1px solid black;
  25 + padding: 5px;
  26 +}
  27 +
  28 +h1{
  29 + width:500px;
  30 + margin:auto;
  31 +}
0 32 \ No newline at end of file
... ...