projects / dweather.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 6dfcac9)
add 2 day forecast, blue -(ve) temperature
authorDirk Koopman <djk@tobit.co.uk>
Sun, 17 Jan 2016 19:52:04 +0000 (19:52 +0000)
committerDirk Koopman <djk@tobit.co.uk>
Sun, 17 Jan 2016 19:52:04 +0000 (19:52 +0000)
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.

loop.pl patch | blob | history
templates/index.html.ep patch | blob | history

diff --git a/loop.pl b/loop.pl
index 02a463a7d3f1569eda6f6065b4a6cf4e1007e2ad..f19b48041a62a784bfdee996e2a47b347c4be082 100755 (executable)
--- 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 443408d92e71fd8f0df349be51915cbb2afb27b1..7526d24d41cc07d9e6fd4568badedd20456258da 100644 (file)
--- 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);
 <!DOCTYPE html>
 <html>
        <head>
@@ -13,6 +14,10 @@
 
                <!-- Optional theme -->
                <link rel="stylesheet" href="css/bootstrap-theme.min.css">
+               
+               <!-- auto refresh (really only for the yr.no forecast) -->
+               <meta content="3600" http-equiv="Refresh">
+
 
        </head>
        <body>
@@ -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 + "<br>"); 
                        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 @@
 
                </script>
 
+               <div id="container">
+                       <center>
+                               <h4>Two Day Forecast</h2>
+                               <a href="http://www.yr.no/place/United_Kingdom/England/Graffham~2648243/hour_by_hour.html"><img src="http://www.yr.no/place/United_Kingdom/England/Graffham~2648243/avansert_meteogram.png" alt="meteogram" title="" height="295" width="810"></a>
+                       </center>
+               </div>
+
                <div id="container">
                        <div id="daychart" style="min-width: 400px; height: 400px; margin: 0 auto"> </div>
                </div>
A Mojo based Davis Vantage VP2 datalogger