X-Git-Url: http://gb7djk.dxcluster.net/gitweb/gitweb.cgi?a=blobdiff_plain;f=templates%2Findex.html.ep;h=e1bf922e542ffdb77d7e1efd80e7df2f530161f9;hb=31f61adab477ee134dbea476d26376075f1a5022;hp=e5a7c09276fb48fadd8f9a014a30096afc3b0b12;hpb=6e03f8c08e990182830f8a8d9b240445af94a55a;p=dweather.git diff --git a/templates/index.html.ep b/templates/index.html.ep index e5a7c09..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 @@ + + + + @@ -30,6 +35,13 @@ 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; } @@ -41,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; + } } } @@ -59,6 +76,7 @@ var lastwind = 0; var lastdir = 0; var lastt = 0; + var lasttemp = -100; function startws() { ws = new WebSocket('<%= $url->to_abs %>'); @@ -108,14 +126,14 @@ 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: { @@ -130,7 +148,7 @@ }, opposite: true - }, { // Secondary yAxis + }, { // Rainfall gridLineWidth: 0, title: { text: 'Rainfall', @@ -145,51 +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 - }, { // Tertiary yAxis + }, { // Humidity gridLineWidth: 0, floor: 0, ceiling: 100, title: { text: 'Humidity', style: { - color: '#008800' + color: '#000000' } }, labels: { format: '{value} %', style: { - color: '#008800' + 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: 120, - 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: { @@ -201,6 +234,7 @@ name: 'Rainfall', type: 'column', yAxis: 1, + color: Highcharts.getOptions().colors[0], labels: { // enabled: true, // format: '{point.y:.1f}', // one decimal @@ -224,6 +258,7 @@ name: 'Sea-Level Pressure', type: 'spline', yAxis: 2, + color: '#008800', data: [ <% $s = ""; for (@main::last5daysh) { @@ -241,18 +276,30 @@ valueSuffix: ' mb' } - }, { - name: 'Temperature', + }, { + name: 'Temperature +(ve)', type: 'spline', yAxis: 0, color: '#ff0000', data: [ - <% $s = ""; + <% $s = ""; undef $lasttemp; 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}; + 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: { @@ -261,7 +308,7 @@ }, { name: 'Humidity', type: 'spline', - color: '#008800', + color: '#000000', yAxis: 3, data: [ <% $s = ""; @@ -279,6 +326,35 @@ 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' + } }] }); } @@ -623,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 + "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: | % | ||||||||||||
Temperature out: | - | Min: | @ | -Max: | @ | -Humidity: | - | Dew Point: | + | ||||||||||
Temperature out: | °C | +Min: | °C @ | +Max: | °C @ | +Humidity: | % | +Dew Point: | °C | ||||||||||
Wind: | m/s @ deg | -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 |