X-Git-Url: http://dxcluster.net/gitweb/gitweb.cgi?a=blobdiff_plain;f=templates%2Findex.html.ep;h=e5a7c09276fb48fadd8f9a014a30096afc3b0b12;hb=6e03f8c08e990182830f8a8d9b240445af94a55a;hp=ec8487d4dd757560821ed0d5f24494355a5e633d;hpb=ccdf496819d857203d6a8aace11f1ba7daa7e1ef;p=dweather.git

diff --git a/templates/index.html.ep b/templates/index.html.ep
index ec8487d..e5a7c09 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -1,4 +1,5 @@
 % my $url = url_for 'weather';
+% my $s;
 <!DOCTYPE html>
 <html>
 	<head>
@@ -20,11 +21,12 @@
 		<script>
 		var ws;
 		var daychart;
-		var daychart_days = 5;
+		var daychart_days = <%= $main::histdays %>;
 		var windrose;
-		var windrose_mins = 10;
+		var windrose_mins = <%= $main::windmins %>;
 		var windspeed;
 		var winddir;
+		var updatespermin = <%= $main::updatepermin %>;
 
 		var h = new Object();
 
@@ -71,23 +73,18 @@
 						if ("h" in js) {
 							fill_daychart(js, daychart_days);
 						}
-						if ("r" in js) {
-//							if (js.t > lastt + 15) {
-								if ("Wind" in js.r) {
-									lastwind = js.r.Wind;
-								} else {
-									js.r.Wind = lastwind;
-								}
-								if ("Dir" in js.r) {
-									lastdir = js.r.dir;
-								} else {
-									js.r.Dir = lastdir;
-								}
-								lastt = js.t;
-								fill_windrose(js, windrose_mins * (60 / 2.5));
-//							}
-							fill_windspeed(js);
-							fill_winddir(js);
+						if ("r" in js || "m" in js) {
+							var rr;
+							rr = js.r || js.m;
+							if (!("Dir" in rr)) 
+								rr.Dir = lastdir;
+							if (!("Wind" in rr))
+								rr.Wind = lastwind;
+							fill_windrose(rr, windrose_mins * updatespermin);
+							fill_windspeed(rr);
+							fill_winddir(rr);
+							lastwind = rr.Wind;
+							lastdir = rr.Dir;
 						}
 					}
 				};
@@ -122,13 +119,13 @@
 					labels: {
 						format: '{value}Â°C',
 						style: {
-							color: Highcharts.getOptions().colors[2]
+							color: '#ff0000'
 						}
 					},
 					title: {
 						text: 'Temperature',
 						style: {
-							color: Highcharts.getOptions().colors[2]
+							color: '#ff0000'
 						}
 					},
 					opposite: true
@@ -163,6 +160,23 @@
 						}
 					},
 					opposite: true
+				}, { // Tertiary yAxis
+					gridLineWidth: 0,
+					floor: 0,
+					ceiling: 100,
+					title: {
+						text: 'Humidity',
+						style: {
+							color: '#008800'
+						}
+					},
+					labels: {
+						format: '{value} %',
+						style: {
+							color: '#008800'
+						}
+					},
+//					opposite: true
 				}],
 				tooltip: {
 					shared: true
@@ -170,17 +184,38 @@
 				legend: {
 					layout: 'vertical',
 					align: 'left',
-					x: 80,
+					x: 120,
 					verticalAlign: 'top',
 					y: 55,
 					floating: true,
 					backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
 				},
+				exporting: {
+					buttons: {
+						contextButton: {
+							enabled: false
+						}
+					}
+				}, 
 				series: [{
 					name: 'Rainfall',
 					type: 'column',
 					yAxis: 1,
-					data: [],
+					labels: {
+//						enabled: true,
+//						format: '{point.y:.1f}', // one decimal
+//						rotation: -90,
+						overflow: 'justify'
+					},
+					data: [ 
+					    <% $s = "";
+						   for (@main::last5daysh) { 
+						      my $r = $main::json->decode($_);
+						      $s .=  "[" . $r->{t}*1000 . "," . $r->{h}->{Rain_1h} . "]," if $r && exists $r->{t} && exists $r->{h}->{Rain_1h};
+						   }
+						   chop $s if length $s; 
+						%><%= $s %>
+					],
 					tooltip: {
 						valueSuffix: ' mm'
 					}
@@ -189,7 +224,15 @@
 					name: 'Sea-Level Pressure',
 					type: 'spline',
 					yAxis: 2,
-					data: [],
+					data: [
+						<% $s = "";
+						   for (@main::last5daysh) { 
+						      my $r = $main::json->decode($_);
+						      $s .=  "[" . $r->{t}*1000 . "," . $r->{h}->{Pressure} . "]," if $r && exists $r->{t} && exists $r->{h}->{Pressure};
+						   }
+						   chop $s if length $s; 
+						%><%= $s %>
+					],
 					marker: {
 						enabled: false
 					},
@@ -201,10 +244,41 @@
 				}, {
 					name: 'Temperature',
 					type: 'spline',
-					data: [],
+					yAxis: 0,
+					color: '#ff0000',
+					data: [
+						<% $s = "";
+						   for (@main::last5daysh) { 
+						      my $r = $main::json->decode($_);
+						      $s .=  "[" . $r->{t}*1000 . "," . $r->{h}->{Temp_Out} . "]," if $r && exists $r->{t} && exists $r->{h}->{Temp_Out};
+						   }
+						   chop $s if length $s; 
+						%><%= $s %>
+					],
 					tooltip: {
 						valueSuffix: ' Â°C'
 					}
+				}, {
+					name: 'Humidity',
+					type: 'spline',
+					color: '#008800',
+					yAxis: 3,
+					data: [
+						<% $s = "";
+						   for (@main::last5daysh) { 
+						      my $r = $main::json->decode($_);
+						      $s .=  "[" . $r->{t}*1000 . "," . $r->{h}->{Humidity_Out} . "]," if $r && exists $r->{t} && exists $r->{h}->{Humidity_Out};
+						   }
+						   chop $s if length $s; 
+						%><%= $s %>
+					],
+					marker: {
+						enabled: false
+					},
+					dashStyle: 'shortdot',
+					tooltip: {
+						valueSuffix: ' %'
+					}
 				}]
 			});
 		}
@@ -321,11 +395,34 @@
 						groupPadding: 0
 					}
 				},
+				exporting: {
+					buttons: {
+						contextButton: {
+							enabled: false
+						}
+					}
+				}, 
 
 				series: [ {
 					type: 'scatter',
 					name: 'Wind mph',
-					data: []
+					data: [
+						<% my ($d, $w);
+						   $s = "";
+						   $d = 0; $w = 0;
+					       for (@main::last10minsr) {
+						      my $r = $main::json->decode($_);
+							  if ($r) {
+								  $r->{r}->{Dir} ||= $d;
+								  $r->{r}->{Wind} ||= $w;
+								  $s .=  "[" . $r->{r}->{Dir} . "," . main::nearest(0.1, $r->{r}->{Wind}*2.23694) . "],";
+								  $d = $r->{r}->{Dir};
+								  $w = $r->{r}->{Wind};
+							  }
+						   } 
+						   chop $s if length $s; 
+						%><%= $s %>
+					]
 				}]
 			});
 		}
@@ -415,6 +512,13 @@
 						color: '#DF5353' // red
 					}]
 				},
+				exporting: {
+					buttons: {
+						contextButton: {
+							enabled: false
+						}
+					}
+				}, 
 
 				series: [{
 					name: 'Speed',
@@ -443,7 +547,7 @@
 
 				pane: {
 					startAngle: 0,
-					endAngle: 359,
+					endAngle: 360,
 					background: [{
 						backgroundColor: {
 							linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
@@ -477,7 +581,7 @@
 				// the value axis
 				yAxis: {
 					min: 0,
-					max: 360,
+					max: 359,
 
 					minorTickInterval: 'auto',
 					minorTickWidth: 1,
@@ -498,6 +602,13 @@
 						text:  'Â° deg'
 					},
 				},
+				exporting: {
+					buttons: {
+						contextButton: {
+							enabled: false
+						}
+					}
+				}, 
 
 				series: [{
 					name: 'Direction',
@@ -528,20 +639,18 @@
 
 		var conv = 2.23694;
 
-		function fill_windrose(js, points) {
+		function fill_windrose(rr, points) {
 			var p = windrose.series[0].data.length > points;
-			var rr = js.r;
-			windrose.series[0].addPoint([rr.Dir, Math.round(rr.Wind*conv)], true, p);
+			var v = [rr.Dir, (rr.Wind*conv)];
+			windrose.series[0].addPoint(v, true, p);
 		}
 
-		function fill_windspeed(js) {
-			var rr = js.r;
+		function fill_windspeed(rr) {
 			var point = windspeed.series[0].points[0];
 			point.update(Math.round(rr.Wind*conv));
 		}
 
-		function fill_winddir(js) {
-			var rr = js.r;
+		function fill_winddir(rr) {
 			var point = winddir.series[0].points[0];
 			point.update(rr.Dir);
 		}
@@ -577,7 +686,7 @@
 		<div id="container">
 			<div id="start-template">
 				<br><br>
-				<table border=1 width=80% align="center">
+				<table class="table">
 					<tr>
 						<th>Time:</th><td><span id="tm"> </span></td>
 						<th>Sunrise:</th><td><span id="Sunrise"> </span></td>
@@ -593,13 +702,13 @@
 						<th>Temperature in:</th><td> <span id="Temp_In"> </span></td>
 						<th>Humidity:</th><td> <span id="Humidity_In"> </span></td>
 					</tr>
-					<tr>
+					<tr><th>Temperature out:</th><td> <span id="Temp_Out"> </span></td>
 						<th>Min:</th><td> <span id="Temp_Out_Min"> </span> @ <span id="Temp_Out_Min_T"> </span></td>
 						<th>Max:</th><td> <span id="Temp_Out_Max"> </span> @ <span id="Temp_Out_Max_T"> </span></td>
 						<th>Humidity:</th><td> <span id="Humidity_Out"> </span></td>
 						<th>Dew Point:</th><td> <span id="Dew_Point"> </span></td>
 					</tr>
-					<tr>
+					<tr><th>Wind:</th><td><span id="Wind"> </span> m/s @ <span id="Dir"> </span> deg</td>
 						<th>Wind Dir Minute Avg:</th><td> <span id="Dir_1m">  </span></td>
 						<th>Wind Speed Minute Avg:</th><td> <span id="Wind_1m">  </span></td>
 					</tr>
