From 926848d0e319a529ac10054a9d456412d2f46e8f Mon Sep 17 00:00:00 2001 From: Amaury Date: Fri, 16 Jun 2017 00:42:12 +0200 Subject: [PATCH] Site web terminé, envoi final avec ajout de css --- appWeb/index.html | 56 ++++++++++++++++++++++++++++---------------------------- appWeb/js/script.js | 36 +++++++++++++++++++++++++----------- appWeb/style.css | 31 +++++++++++++++++++++++++++++++ 3 files changed, 84 insertions(+), 39 deletions(-) create mode 100644 appWeb/style.css diff --git a/appWeb/index.html b/appWeb/index.html index bdf7c0f..96a793d 100644 --- a/appWeb/index.html +++ b/appWeb/index.html @@ -2,39 +2,39 @@ - Page Title + Station météo + -

Station météo en ligne

-

Gracias-Havard-Qiang-Knockaert

-

Connection On/Off

-

Météo

-
-
-
-
+
+

Station météo en ligne

+

Gracias-Havard-Knockaert-Qiang

+

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.

+

Connection On/Off

+

Météo dans la région Lilloise

+
+ + + + + + + + + + + + + + + + +
TempératureHumiditéPressionLuminositéVitesse du vent
0 °C0 %0 hPa0 Lux0 km/h
+

Temps actuel : Le ciel est et il .

+
- -
- - - - - - - - - - - - - - -
TempératureHumiditéPressionLuminosité
-
- diff --git a/appWeb/js/script.js b/appWeb/js/script.js index c7c3888..66b5f15 100644 --- a/appWeb/js/script.js +++ b/appWeb/js/script.js @@ -1,17 +1,14 @@ window.WebSocket=(window.WebSocket||window.MozWebSocket); var websocket=new WebSocket('ws://192.168.1.111:9000','myprotocol'); - websocket.binaryType = 'arraybuffer'; //On utilise un objet arraybuffer pour envoyer les donnée. + websocket.binaryType = 'arraybuffer'; //On utilise un objet arraybuffer pour envoyer et recevoir les données + //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. websocket.onopen=function(){ $('h3 .connecOn').css('color','green'); }; websocket.onerror=function(){ $('h3 .connecOff').css('color','red'); }; -//on créé le tableau des octets à envoyer: - - - - +//on créé le tableau des octets à envoyer pour la requete : var requete = new Uint8ClampedArray(3); requete[0] = 'G'.charCodeAt(0); requete[1] = 'E'.charCodeAt(0); @@ -23,13 +20,30 @@ requete[2] = 'T'.charCodeAt(0); websocket.onmessage=function(message){ //Evenement surveillant la reception de message + $('h4').show(); var reponse = new Uint8Array(message.data); - console.dir(message.data); + //on extrait les données du buffer + var temp = reponse[1]; + var hum = reponse[2]; + var press = reponse[0]+845; + var lum = (reponse[3]*10000/255).toFixed(2); - $('#relevesMeteo .temperature').text(reponse[0]); - $('#relevesMeteo .humidite').text(reponse[1]); - $('#relevesMeteo .pression').text(reponse[2]); - //$('#relevesMeteo .luminosite').text(message.data);*/ + $('#relevesMeteo .temperature').text(temp+' °C'); + $('#relevesMeteo .humidite').text(hum+' %'); + $('#relevesMeteo .pression').text(press+' hPa'); + $('#relevesMeteo .luminosite').text(lum+' Lux'); + + //On estime l'état du ciel grâce aux données envoyées par les capteurs. + //http://leguidemeteo.com/prevoir-le-temps-a-partir-de-son-barometre/ + if(lum >= 100 && lum <= 1000) + $('.nuage').text("nuageux"); + else + $('.nuage').text("clair"); + + if(press <= 1006) + $('.pluie').text("pleut"); + else + $('.pluie').text('ne pleut pas') }; diff --git a/appWeb/style.css b/appWeb/style.css new file mode 100644 index 0000000..8cf9cee --- /dev/null +++ b/appWeb/style.css @@ -0,0 +1,31 @@ +body { + background-color:#ABC8E2; + font-family : Calibri,Arial,Ubuntu; +} + +#corps { + background-color:white; + margin-left:10%; + margin-right:10%; + padding:10px 10px; + border-radius:10px; +} + +table { + border:1px solid black; + border-collapse: collapse; + /*margin-left:10%; + margin-right:10%;*/ + width:100%; + +} + +table tr td{ + border: 1px solid black; + padding: 5px; +} + +h1{ + width:500px; + margin:auto; +} \ No newline at end of file -- libgit2 0.21.2