% my $url = url_for 'weather';
+% my $s;
<!DOCTYPE html>
<html>
<head>
<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();
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;
}
}
};
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
}
},
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
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'
}
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
},
}, {
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: ' %'
+ }
}]
});
}
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 %>
+ ]
}]
});
}
color: '#DF5353' // red
}]
},
+ exporting: {
+ buttons: {
+ contextButton: {
+ enabled: false
+ }
+ }
+ },
series: [{
name: 'Speed',
pane: {
startAngle: 0,
- endAngle: 359,
+ endAngle: 360,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
// the value axis
yAxis: {
min: 0,
- max: 360,
+ max: 359,
minorTickInterval: 'auto',
minorTickWidth: 1,
text: '° deg'
},
},
+ exporting: {
+ buttons: {
+ contextButton: {
+ enabled: false
+ }
+ }
+ },
series: [{
name: 'Direction',
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);
}
<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>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>