X-Git-Url: http://gb7djk.dxcluster.net/gitweb/gitweb.cgi?a=blobdiff_plain;f=templates%2Findex.html.ep;h=e1bf922e542ffdb77d7e1efd80e7df2f530161f9;hb=31f61adab477ee134dbea476d26376075f1a5022;hp=2dd444fe94f7404d6aa13e8ce7febd4385a9188d;hpb=b5935e862dc6dd1a6b6154905bac6db8836132d6;p=dweather.git
diff --git a/templates/index.html.ep b/templates/index.html.ep
index 2dd444f..e1bf922 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -1,5 +1,6 @@
+% use Debug;
% my $url = url_for 'weather';
-% my $s;
+% my ($s, $lasttemp);
@@ -13,6 +14,10 @@
+
+
+
+
@@ -26,9 +31,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 +53,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;
+ }
}
}
@@ -58,6 +76,7 @@
var lastwind = 0;
var lastdir = 0;
var lastt = 0;
+ var lasttemp = -100;
function startws() {
ws = new WebSocket('<%= $url->to_abs %>');
@@ -79,7 +98,7 @@
rr.Dir = lastdir;
if (!("Wind" in rr))
rr.Wind = lastwind;
- fill_windrose(rr, windrose_mins * $updatespermin);
+ fill_windrose(rr, windrose_mins * updatespermin);
fill_windspeed(rr);
fill_winddir(rr);
lastwind = rr.Wind;
@@ -107,29 +126,29 @@
zoomType: 'xy'
},
title: {
- text: 'Five Day Chart'
+ text: 'Last Five Days'
},
xAxis: [{
type: 'datetime',
// categories: [],
crosshair: true
}],
- yAxis: [{ // Primary yAxis
+ yAxis: [{ // Temperature +(ve)
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
- }, { // Secondary yAxis
+ }, { // Rainfall
gridLineWidth: 0,
title: {
text: 'Rainfall',
@@ -144,34 +163,66 @@
}
}
- }, { // Tertiary yAxis
+ }, { // Pressure
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
- color: Highcharts.getOptions().colors[1]
+ color: '#008800'
}
},
labels: {
format: '{value} mb',
style: {
- color: Highcharts.getOptions().colors[1]
+ color: '#008800'
+ }
+ },
+ opposite: true
+ }, { // Humidity
+ gridLineWidth: 0,
+ floor: 0,
+ ceiling: 100,
+ title: {
+ text: 'Humidity',
+ style: {
+ color: '#000000'
+ }
+ },
+ labels: {
+ format: '{value} %',
+ style: {
+ color: '#000000'
+ }
+ },
+// opposite: true
+ }, { // Temperature -(ve)
+ labels: {
+ format: '{value}°C',
+ style: {
+ color: '#0000ff'
}
},
+// title: {
+// text: 'Temperature',
+// style: {
+// color: '#0000ff'
+// }
+// },
opposite: true
+
}],
tooltip: {
shared: true
},
- legend: {
- layout: 'vertical',
- align: 'left',
- x: 80,
- verticalAlign: 'top',
- y: 55,
- floating: true,
- backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
- },
+// legend: {
+// layout: 'vertical',
+// align: 'left',
+// x: 120,
+// verticalAlign: 'top',
+// y: 55,
+// floating: true,
+// backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
+// },
exporting: {
buttons: {
contextButton: {
@@ -183,6 +234,7 @@
name: 'Rainfall',
type: 'column',
yAxis: 1,
+ color: Highcharts.getOptions().colors[0],
labels: {
// enabled: true,
// format: '{point.y:.1f}', // one decimal
@@ -206,6 +258,7 @@
name: 'Sea-Level Pressure',
type: 'spline',
yAxis: 2,
+ color: '#008800',
data: [
<% $s = "";
for (@main::last5daysh) {
@@ -223,18 +276,82 @@
valueSuffix: ' mb'
}
+ }, {
+ name: 'Temperature +(ve)',
+ type: 'spline',
+ yAxis: 0,
+ color: '#ff0000',
+ data: [
+ <% $s = ""; undef $lasttemp;
+ for (@main::last5daysh) {
+ my $r = $main::json->decode($_);
+ if ($r && exists $r->{t} && exists $r->{h}->{Temp_Out}) {
+ my $temp = $r->{h}->{Temp_Out};
+ my $tm = $r->{t}*1000;
+ $lasttemp = $temp unless defined $lasttemp;
+ if ($temp > 0) {
+ $s .= sprintf "[%s,0],", $tm-1 if $lasttemp <= 0;
+ $s .= sprintf "[%s,%s],", $tm, $temp;
+ } else {
+ $s .= sprintf "[%s,%s],", $tm, $lasttemp > 0 ? 0 : "null";
+ }
+ $lasttemp = $temp;
+ }
+ }
+ chop $s if length $s;
+ say $s;
+ %><%= $s %>
+ ],
+ tooltip: {
+ valueSuffix: ' °C'
+ }
}, {
- name: 'Temperature',
+ name: 'Humidity',
type: 'spline',
+ color: '#000000',
+ yAxis: 3,
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};
+ $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: ' %'
+ }
+ }, {
+ name: 'Temperature -(ve)',
+ type: 'spline',
+ yAxis: 0,
+ color: '#0000ff',
+ data: [
+ <% $s = ""; undef $lasttemp;
+ for (@main::last5daysh) {
+ my $r = $main::json->decode($_);
+ if ($r && exists $r->{t} && exists $r->{h}->{Temp_Out}) {
+ my $temp = $r->{h}->{Temp_Out};
+ my $tm = $r->{t}*1000;
+ $lasttemp = $temp unless defined $lasttemp;
+ if ($temp <= 0) {
+ $s .= sprintf "[%s,0],", $tm-1 if $lasttemp > 0;
+ $s .= sprintf "[%s,%s],", $tm, $temp;
+ } else {
+ $s .= sprintf "[%s,%s],", $tm, $lasttemp <= 0 ? 0 : "null";
+ }
+ $lasttemp = $temp;
+ }
+ }
+ chop $s if length $s;
+ say $s;
+ %><%= $s %>
+ ],
tooltip: {
valueSuffix: ' °C'
}
@@ -582,18 +699,41 @@
function fill_daychart(js, days) {
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 temppos = daychart.series[2].data.length > (days * 48);
+ var tempneg = daychart.series[4].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);
+ if (lasttemp <= -100) {
+ lasttemp = hr.Temp_Out;
+ }
+ if (hr.Temp_Out > 0) {
+ if (lasttemp <= 0) {
+ daychart.series[2].addPoint([t, 0], true, temppos);
+ }
+ daychart.series[2].addPoint([t, hr.Temp_Out], true, temppos);
+ } else {
+ daychart.series[2].addPoint([t, (lasttemp > 0) ? 0 : null], true, temppos);
+ }
+ if (hr.Temp_Out <= 0) {
+ if (lasttemp > 0) {
+ daychart.series[4].addPoint([t, 0], true, tempneg);
+ }
+ daychart.series[4].addPoint([t, hr.Temp_Out], true, tempneg);
+ } else {
+ daychart.series[4].addPoint([t, (lasttemp <= 0) ? 0 : null], true, tempneg);
+ }
+ lasttemp = hr.Temp_Out;
+ daychart.series[3].addPoint(hu, true, humidity);
}
var conv = 2.23694;
@@ -628,6 +768,13 @@
+
+
+ Two Day Forecast
+ 
+
+
-
+
- | 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 |