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;
}
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;
+ }
}
}
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;
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,
}, {
name: 'Temperature',
type: 'spline',
+ yAxis: 0,
+ color: '#ff0000',
data: [
<% $s = "";
for (@main::last5daysh) {
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: ' %'
+ }
}]
});
}
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;
<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>