From: Dirk Koopman Date: Sun, 17 Jan 2016 19:52:04 +0000 (+0000) Subject: add 2 day forecast, blue -(ve) temperature X-Git-Url: http://dxcluster.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=04af13055d99ef1db7da3bd7ae6600b3ca709ea8;p=dweather.git add 2 day forecast, blue -(ve) temperature Add the yr.no 2 day forecast to the top of the page. Make any temperature zero or below dark blue. This actually involves have two series running in parallel - with some tricky corners to make them join up. --- diff --git a/loop.pl b/loop.pl index 02a463a..f19b480 100755 --- a/loop.pl +++ b/loop.pl @@ -355,7 +355,7 @@ sub process $temp = nearest(0.1, f2c(unpack("s", substr $blk,12,2) / 10)); $h{Temp_Out} = $temp; - if ($temp > 75 || $temp < -75) { + if ($temp > 60 || $temp < -60) { dbg "LOOP Temperature out of range ($temp), record ignored"; return; } diff --git a/templates/index.html.ep b/templates/index.html.ep index 443408d..7526d24 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 @@ + + + + @@ -71,6 +76,7 @@ var lastwind = 0; var lastdir = 0; var lastt = 0; + var lasttemp = -100; function startws() { ws = new WebSocket('<%= $url->to_abs %>'); @@ -120,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: { @@ -142,7 +148,7 @@ }, opposite: true - }, { // Secondary yAxis + }, { // Rainfall gridLineWidth: 0, title: { text: 'Rainfall', @@ -157,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: { @@ -213,6 +234,7 @@ name: 'Rainfall', type: 'column', yAxis: 1, + color: Highcharts.getOptions().colors[0], labels: { // enabled: true, // format: '{point.y:.1f}', // one decimal @@ -236,6 +258,7 @@ name: 'Sea-Level Pressure', type: 'spline', yAxis: 2, + color: '#008800', data: [ <% $s = ""; for (@main::last5daysh) { @@ -253,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: { @@ -273,7 +308,7 @@ }, { name: 'Humidity', type: 'spline', - color: '#008800', + color: '#000000', yAxis: 3, data: [ <% $s = ""; @@ -291,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' + } }] }); } @@ -635,7 +699,8 @@ 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; @@ -648,7 +713,26 @@ // 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, temppos); + } + 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); } @@ -684,6 +768,13 @@ +
+
+

Two Day Forecast

+ meteogram +
+
+