X-Git-Url: http://dxcluster.net/gitweb/gitweb.cgi?a=blobdiff_plain;f=templates%2Findex.html.ep;h=443408d92e71fd8f0df349be51915cbb2afb27b1;hb=6dfcac9f39721c08bf81c82847d872d46f28f19c;hp=cd8155ac915383febf006cc071da7048e00738d5;hpb=66549cb3124dc06a95960142da8c364fae031487;p=dweather.git
diff --git a/templates/index.html.ep b/templates/index.html.ep
index cd8155a..443408d 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -26,9 +26,17 @@
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 * 24);
-// }
- 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,7 +196,7 @@
legend: {
layout: 'vertical',
align: 'left',
- x: 80,
+ x: 120,
verticalAlign: 'top',
y: 55,
floating: true,
@@ -188,6 +213,12 @@
name: 'Rainfall',
type: 'column',
yAxis: 1,
+ labels: {
+// enabled: true,
+// format: '{point.y:.1f}', // one decimal
+// rotation: -90,
+ overflow: 'justify'
+ },
data: [
<% $s = "";
for (@main::last5daysh) {
@@ -225,6 +256,8 @@
}, {
name: 'Temperature',
type: 'spline',
+ yAxis: 0,
+ color: '#ff0000',
data: [
<% $s = "";
for (@main::last5daysh) {
@@ -237,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: ' %'
+ }
}]
});
}
@@ -362,7 +416,7 @@
},
series: [ {
- type: 'column',
+ type: 'scatter',
name: 'Wind mph',
data: [
<% my ($d, $w);
@@ -505,7 +559,7 @@
pane: {
startAngle: 0,
- endAngle: 359,
+ endAngle: 360,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
@@ -539,7 +593,7 @@
// the value axis
yAxis: {
min: 0,
- max: 360,
+ max: 359,
minorTickInterval: 'auto',
minorTickWidth: 1,
@@ -582,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 + "
");
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);
}
@@ -646,38 +701,38 @@
-
+
- | Time: | |
- Sunrise: | |
- Sunset: | |
- Console Volts: | |
- TX Battery OK: | |
+ Time: | |
+ Sunrise: | |
+ Sunset: | |
+ Console Volts: | |
+ TX Battery OK: | |
- | Pressure: | |
+ Pressure: | mb |
Trend: | |
- | Temperature in: | |
- Humidity: | |
+ Temperature in: | °C |
+ Humidity: | % |
-
- | Min: | @ |
- Max: | @ |
- Humidity: | |
- Dew Point: | |
+
| Temperature out: | °C |
+ Min: | °C @ |
+ Max: | °C @ |
+ Humidity: | % |
+ Dew Point: | °C |
|---|
-
- | Wind Dir Minute Avg: | |
- Wind Speed Minute Avg: | |
+
| Wind: | ° @ mph |
+ Wind Minute Avg: | ° @ mph |
+ Day Max Speed: | mph @ |
|---|
- | Rain 30mins: | |
- Day: | |
- 24hrs: | |
- Month: | |
- Year: | |
+ Rain 30mins: | mm |
+ Day: | mm |
+ 24hrs: | mm |
+ Month: | mm |
+ Year: | mm |