Site web terminé, envoi final avec ajout de css

aknockae
1 parent a4d85595
Showing 3 changed files with 84 additions and 39 deletions Show diff stats
appWeb/index.html
appWeb/js/script.js
appWeb/style.css
@@ -2,39 +2,39 @@
 <html>
 <head>
 	<meta charset="UTF-8"> 
-	<title>Page Title</title>
+	<title>Station météo</title>
 	<script src="js/jquery-3.2.1.min.js"></script>
 	<script src="js/script.js"></script>
+	<link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
-	<h1>Station météo en ligne</h1>
-	<h2>Gracias-Havard-Qiang-Knockaert</h2>
-	<h3>Connection <span class="connecOn">On</span>/<span class="connecOff">Off</span></h3>
-	<h3>Météo</h3>
-	<div id="apercuGeneral">
-		<div class="soleil"></div>
-		<div class="nuageux"></div>
-		<div class="pluie"></div>
+	<div id="corps">
+		<h1>Station météo en ligne</h1>
+		<h2>Gracias-Havard-Knockaert-Qiang</h2>
+		<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>
+		<h3>Connection <span class="connecOn">On</span>/<span class="connecOff">Off</span></h3>
+		<h3>Météo dans la région Lilloise</h3>
+		<div id="relevesMeteo">
+			<button onclick="requeteEnvoi();">Récupérer les données</button>
+			<table>
+				<tr>
+					<th>Température</th>
+					<th>Humidité</th>
+					<th>Pression</th>
+					<th>Luminosité</th>
+					<th>Vitesse du vent</th>
+				</tr>
+				<tr>
+					<td class="temperature">0 °C</td>
+					<td class="humidite">0 %</td>
+					<td class="pression">0 hPa</td>
+					<td class="luminosite">0 Lux</td>
+					<td class="vent">0 km/h </td>
+				</tr>
+			</table>
+			<h4 style="display:none;">Temps actuel : Le ciel est <span class="nuage"></span> et il <span class="pluie"></span>.</h4>
+		</div>
 	</div>
-
-	<div id="relevesMeteo">
-		<button onclick="requeteEnvoi();">Récupérer donnée</button>
-		<table>
-			<tr>
-				<th>Température</th>
-				<th>Humidité</th>
-				<th>Pression</th>
-				<th>Luminosité</th>
-			</tr>
-			<tr>
-				<td class="temperature"></td>
-				<td class="humidite"></td>
-				<td class="pression"></td>
-				<td class="luminosite"></td>
-			</tr>
-		</table>
-	</div>
-
 </body>	
 </html> 
 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] = &#39;T&#39;.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')
 };
@@ -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