X-Git-Url: http://dxcluster.net/gitweb/gitweb.cgi?a=blobdiff_plain;f=templates%2Findex.html.ep;h=443408d92e71fd8f0df349be51915cbb2afb27b1;hb=6dfcac9f39721c08bf81c82847d872d46f28f19c;hp=d54833ddb60467769593123512d9736da5c81ea7;hpb=cbf57212d7962476d2f2e7bb966283ab4fc1e5ba;p=dweather.git

diff --git a/templates/index.html.ep b/templates/index.html.ep
index d54833d..443408d 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -21,14 +21,22 @@
 		<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();
 
+		var trans = {
+			"Wind" : function (speed) { return (speed * 2.236936).toFixed(1); },
+			"Wind_1m" : function (speed) { return (speed * 2.236936).toFixed(1); },
+			"Wind_Max": function (speed) { return (speed * 2.236936).toFixed(1); }
+		};
+			
+
 		function do_debug(text) {
 			document.getElementById("do_debug").innerHTML = text;
 		}
@@ -40,7 +48,12 @@
 		function fill_html(key,value) {
 			var d = document.getElementById(key);
 			if (d !== null) {
-				d.innerHTML = value;
+				var f = trans[key];
+				if (f && typeof(f) === "function") {
+					d.innerHTML = trans[key](value);
+				} else {
+					d.innerHTML = value;
+				}
 			}
 		}
 
@@ -72,23 +85,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;
 						}
 					}
 				};
@@ -123,13 +131,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
@@ -164,6 +172,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
@@ -171,21 +196,34 @@
 				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,
+					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;
+						      $s .=  "[" . $r->{t}*1000 . "," . $r->{h}->{Rain_1h} . "]," if $r && exists $r->{t} && exists $r->{h}->{Rain_1h};
 						   }
 						   chop $s if length $s; 
 						%><%= $s %>
@@ -202,7 +240,7 @@
 						<% $s = "";
 						   for (@main::last5daysh) { 
 						      my $r = $main::json->decode($_);
-						      $s .=  "[" . $r->{t}*1000 . "," . $r->{h}->{Pressure} . "]," if $r;
+						      $s .=  "[" . $r->{t}*1000 . "," . $r->{h}->{Pressure} . "]," if $r && exists $r->{t} && exists $r->{h}->{Pressure};
 						   }
 						   chop $s if length $s; 
 						%><%= $s %>
@@ -218,11 +256,13 @@
 				}, {
 					name: 'Temperature',
 					type: 'spline',
+					yAxis: 0,
+					color: '#ff0000',
 					data: [
 						<% $s = "";
 						   for (@main::last5daysh) { 
 						      my $r = $main::json->decode($_);
-						      $s .=  "[" . $r->{t}*1000 . "," . $r->{h}->{Temp_Out} . "]," if $r;
+						      $s .=  "[" . $r->{t}*1000 . "," . $r->{h}->{Temp_Out} . "]," if $r && exists $r->{t} && exists $r->{h}->{Temp_Out};
 						   }
 						   chop $s if length $s; 
 						%><%= $s %>
@@ -230,6 +270,27 @@
 					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: ' %'
+					}
 				}]
 			});
 		}
@@ -346,6 +407,13 @@
 						groupPadding: 0
 					}
 				},
+				exporting: {
+					buttons: {
+						contextButton: {
+							enabled: false
+						}
+					}
+				}, 
 
 				series: [ {
 					type: 'scatter',
@@ -359,7 +427,7 @@
 							  if ($r) {
 								  $r->{r}->{Dir} ||= $d;
 								  $r->{r}->{Wind} ||= $w;
-								  $s .=  "[" . $r->{r}->{Dir} . "," . main::nearest(0.1, $r->{r}->{Wind}*2.23694) . "]," if $r;
+								  $s .=  "[" . $r->{r}->{Dir} . "," . main::nearest(0.1, $r->{r}->{Wind}*2.23694) . "],";
 								  $d = $r->{r}->{Dir};
 								  $w = $r->{r}->{Wind};
 							  }
@@ -456,6 +524,13 @@
 						color: '#DF5353' // red
 					}]
 				},
+				exporting: {
+					buttons: {
+						contextButton: {
+							enabled: false
+						}
+					}
+				}, 
 
 				series: [{
 					name: 'Speed',
@@ -484,7 +559,7 @@
 
 				pane: {
 					startAngle: 0,
-					endAngle: 359,
+					endAngle: 360,
 					background: [{
 						backgroundColor: {
 							linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
@@ -518,7 +593,7 @@
 				// the value axis
 				yAxis: {
 					min: 0,
-					max: 360,
+					max: 359,
 
 					minorTickInterval: 'auto',
 					minorTickWidth: 1,
@@ -539,6 +614,13 @@
 						text:  '° deg'
 					},
 				},
+				exporting: {
+					buttons: {
+						contextButton: {
+							enabled: false
+						}
+					}
+				}, 
 
 				series: [{
 					name: 'Direction',
@@ -554,35 +636,36 @@
 			var rainfall = daychart.series[0].data.length > (days * 48);
 			var pressure = daychart.series[1].data.length > (days * 48);
 			var temp = daychart.series[2].data.length > (days * 48);
+			var humidity = daychart.series[3].data.length > (days * 48);
 
 			var hr = js.h;
 			var t = js.t * 1000;
 			var ra = [t, hr.Rain_1h];
 			var pr = [t, hr.Pressure];
 			var te = [t, hr.Temp_Out];
+			var hu = [t, hr.Humidity_Out];
 				
 //			do_debug(js.tm + " " + t + " " + te + "<br>"); 
 			daychart.series[0].addPoint(ra, true, rainfall);
 			daychart.series[1].addPoint(pr, true, pressure);
 			daychart.series[2].addPoint(te, true, temp);
+			daychart.series[3].addPoint(hu, true, humidity);
 		}
 
 		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);
 		}
@@ -618,38 +701,38 @@
 		<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>
-						<th>Sunset:</th><td><span id="Sunset"> </span></td>
-						<th>Console Volts:</th><td><span id="Batt_Console"> </span></td>
-						<th>TX Battery OK:</th><td><span id="Batt_TX_OK"> </span></td>
+						<th width="7%">Time:</th><td width="7%"><span id="tm"> </span></td>
+						<th width="7%">Sunrise:</th><td width="7%"><span id="Sunrise"> </span></td>
+						<th width="7%">Sunset:</th><td width="7%"><span id="Sunset"> </span></td>
+						<th width="7%">Console Volts:</th><td width="7%"><span id="Batt_Console"> </span></td>
+						<th width="7%">TX Battery OK:</th><td width="7%"><span id="Batt_TX_OK"> </span></td>
 					</tr>
 					<tr>
-						<th>Pressure:</th><td><span id="Pressure"> </span></td>
+						<th>Pressure:</th><td><span id="Pressure"> </span> mb</td>
 						<th>Trend:</th><td><span id="Pressure_Trend_txt"> </span></td>
 					</tr>
 					<tr>
-						<th>Temperature in:</th><td> <span id="Temp_In"> </span></td>
-						<th>Humidity:</th><td> <span id="Humidity_In"> </span></td>
+						<th>Temperature in:</th><td> <span id="Temp_In"> </span> °C</td>
+						<th>Humidity:</th><td> <span id="Humidity_In"> </span> %</td>
 					</tr>
-					<tr>
-						<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><th>Temperature out:</th><td> <span id="Temp_Out"> </span> °C</td>
+						<th>Min:</th><td> <span id="Temp_Out_Min"> </span> °C @ <span id="Temp_Out_Min_T"> </span></td>
+						<th>Max:</th><td> <span id="Temp_Out_Max"> </span> °C @ <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> °C</td>
 					</tr>
-					<tr>
-						<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><th>Wind:</th><td><span id="Dir"> </span> ° @ <span id="Wind"> </span> mph</td>
+						<th>Wind Minute Avg:</th><td> <span id="Dir_1m"> </span> ° @ <span id="Wind_1m"> </span> mph </td>
+						<th>Day Max Speed:</th><td> <span id="Wind_Max"> </span> mph @ <span id="Wind_Max_T"> </span></td>
 					</tr>
 					<tr>
-						<th>Rain 30mins:</th><td> <span id="Rain_1h"> </span></td>
-						<th>Day:</th><td> <span id="Rain_Day"> </span></td>
-						<th>24hrs:</th><td> <span id="Rain_24h"> </span></td>
-						<th>Month:</th><td> <span id="Rain_Month"> </span></td>
-						<th>Year:</th><td> <span id="Rain_Year"> </span></td>
+						<th>Rain 30mins:</th><td> <span id="Rain_1h"> </span> mm</td>
+						<th>Day:</th><td> <span id="Rain_Day"> </span> mm</td>
+						<th>24hrs:</th><td> <span id="Rain_24h"> </span> mm</td>
+						<th>Month:</th><td> <span id="Rain_Month"> </span> mm</td>
+						<th>Year:</th><td> <span id="Rain_Year"> </span> mm</td>
 					</tr>
 				</table>
 			</div>