X-Git-Url: http://gb7djk.dxcluster.net/gitweb/gitweb.cgi?a=blobdiff_plain;f=templates%2Findex.html.ep;h=d7ec7130122470d6106b0a0c27b91002aec9602c;hb=cbd2b59b72806c032e15c2d1e2295c50331bebe0;hp=cd8155ac915383febf006cc071da7048e00738d5;hpb=66549cb3124dc06a95960142da8c364fae031487;p=dweather.git diff --git a/templates/index.html.ep b/templates/index.html.ep index cd8155a..d7ec713 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 @@ + + + + @@ -26,9 +31,17 @@ 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; } @@ -40,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; + } } } @@ -58,6 +76,7 @@ var lastwind = 0; var lastdir = 0; var lastt = 0; + var lasttemp = -100; function startws() { ws = new WebSocket('<%= $url->to_abs %>'); @@ -72,23 +91,18 @@ 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 * 24); -// } - 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; } } }; @@ -112,29 +126,29 @@ 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: { - color: Highcharts.getOptions().colors[2] + color: '#ff0000' } }, title: { text: 'Temperature', style: { - color: Highcharts.getOptions().colors[2] + color: '#ff0000' } }, opposite: true - }, { // Secondary yAxis + }, { // Rainfall gridLineWidth: 0, title: { text: 'Rainfall', @@ -149,34 +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 + }, { // Humidity + gridLineWidth: 0, + floor: 0, + ceiling: 100, + title: { + text: 'Humidity', + style: { + color: '#000000' + } + }, + labels: { + format: '{value} %', + style: { + 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: 80, - 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: { @@ -188,6 +234,13 @@ name: 'Rainfall', type: 'column', yAxis: 1, + color: Highcharts.getOptions().colors[0], + labels: { +// enabled: true, +// format: '{point.y:.1f}', // one decimal +// rotation: -90, + overflow: 'justify' + }, data: [ <% $s = ""; for (@main::last5daysh) { @@ -205,6 +258,7 @@ name: 'Sea-Level Pressure', type: 'spline', yAxis: 2, + color: '#008800', data: [ <% $s = ""; for (@main::last5daysh) { @@ -222,14 +276,76 @@ valueSuffix: ' mb' } + }, { + name: 'Temperature +(ve)', + type: 'spline', + yAxis: 0, + color: '#ff0000', + 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; + %><%= $s %> + ], + tooltip: { + valueSuffix: ' °C' + } }, { - name: 'Temperature', + name: 'Humidity', type: 'spline', + color: '#000000', + yAxis: 3, 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}; + $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: ' %' + } + }, { + 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; %><%= $s %> @@ -362,7 +478,7 @@ }, series: [ { - type: 'column', + type: 'scatter', name: 'Wind mph', data: [ <% my ($d, $w); @@ -505,7 +621,7 @@ pane: { startAngle: 0, - endAngle: 359, + endAngle: 360, background: [{ backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, @@ -539,7 +655,7 @@ // the value axis yAxis: { min: 0, - max: 360, + max: 359, minorTickInterval: 'auto', minorTickWidth: 1, @@ -581,36 +697,57 @@ 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: | % | ||||||||||||
Min: | @ | -Max: | @ | -Humidity: | - | Dew Point: | + | ||||||||||||
Temperature out: | °C | +Min: | °C @ | +Max: | °C @ | +Humidity: | % | +Dew Point: | °C | ||||||||||
Wind Dir Minute Avg: | - | Wind Speed Minute Avg: | + | ||||||||||||||||
Wind: | ° @ mph | +Wind Minute Avg: | ° @ mph | +Day Max Speed: | mph @ | +Wind Chill: | °C | ||||||||||||
Rain 30mins: | - | Day: | - | 24hrs: | - | Month: | - | Year: | + | Rain 30mins: | mm | +Day: | mm | +24hrs: | mm | +Month: | mm | +Year: | mm |