# send historical data
$c->send($ld->{lasthour_h}) if exists $ld->{lasthour_h};
$c->send($ld->{lastmin_h}) if exists $ld->{lastmin_h};
+
+ # send the last 24 hour's worth of data to the graph
+ my $lg = SMGLog->new('day');
+ my $tnow = time;
+ my $dayno = int($tnow/86400);
+ send_history($c, $lg, $tnow, $_) for ($dayno-1, $dayno);
# disable timeout
$c->inactivity_timeout(3615);
$c->on(finish => sub {
my ($c, $code, $reason) = @_;
app->log->debug("WebSocket closed with status $code.");
- dbg 'webwocket closed with status $code' if isdbg 'chan';
+ dbg "websocket closed with status $code" if isdbg 'chan';
delete $WS->{$tx};
});
};
my $h = shift;
my $j = $json->encode($h);
- my $tm = clocktime($ts, 1);
+ my $tm = clocktime($ts, $let eq 'r' ? 1 : 0);
return qq|{"tm":"$tm","t":$ts,"$let":$j}|;
}
copy $datafn, "$datafn.o";
}
-__DATA__
-
-@@ index.html.ep
-% my $url = url_for 'weather';
-<!DOCTYPE html>
-<html>
- <head>
- <title>DWeather</title>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
-
- <!-- Latest compiled and minified CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
-
- <!-- Optional theme -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
-
- </head>
- <body>
- <center><h1>High View Weather</h1></center>
-
- <script>
- var ws;
- var h = new Object();
-
- function update_h(key, value) {
- h[key] = value;
- }
-
- function fill_html(key,value) {
- var d = document.getElementById(key);
- if (d !== null) {
- d.innerHTML = value;
- }
- }
-
- function traverse(o, func) {
- console.log(o);
- for (var i in o) {
- if (o[i] !== null && typeof(o[i])=="object") {
- traverse(o[i], func);
- } else {
- func(i, o[i]);
+sub send_history
+{
+ my $c = shift;
+ my $lg = shift;
+ my $tnow = shift;
+ my $dayno = shift;
+ if ($lg->open($dayno, 'r+')) {
+ while (my $l = $lg->read) {
+ next unless $l =~ /,"h":/;
+ my ($t) = $l =~ /"t":(\d+)/;
+ if ($t && $t >= $tnow-86400) {
+ $c->send($l);
+# dbg "sending: $l";
}
}
+ $lg->close;
}
-
- function startws() {
- ws = new WebSocket('<%= $url->to_abs %>');
-
- if (typeof(ws) !== null) {
- ws.onmessage = function (event) {
- var js = JSON.parse(event.data);
- if (js !== null && typeof(js) === 'object') {
- traverse(js, fill_html);
- traverse(js, update_h);
- document.getElementById("hh").innerHTML = JSON.stringify(h);
- }
- };
- ws.onopen = function (event) {
- document.getElementById("wsconnect").innerHTML = 'ws connected to: <%= $url->to_abs %>';
- ws.send('WebSocket support works!');
- };
- ws.onclose = function(event) {
- document.getElementById("wsconnect").innerHTML = 'ws disconnected, refresh to restart';
- ws = null;
- }
- } else {
- document.body.innerHTML += 'Webserver only works with Websocket aware browsers';
- }
- }
-
- window.onload = function() {
- startws();
- window.setInterval(function() {
- if (ws === null)
- startws();
- }, 15000);
- }
- </script>
-
- <div id="container">
- <div id="start-template">
- <br><br>
- <table border=1 width=80% align="center">
- <tr>
- <th>Time:<td><span id="tm"> </span>
- <th>Sunrise:<td><span id="Sunrise"> </span>
- <th>Sunset:<td><span id="Sunset"> </span>
- <th>Console Volts:<td><span id="Batt_Console"> </span>
- <th>TX Battery OK:<td><span id="Batt_TX_OK"> </span>
-
- <tr>
- <th>Pressure:<td><span id="Pressure"> </span>
- <th>Trend:<td><span id="Pressure_Trend_txt"> </span>
-
- <tr>
- <th>Temperature in:<td> <span id="Temp_In"> </span>
- <th>Humidity:<td> <span id="Humidity_In"> </span>
-
- <tr>
- <th>Temperature out:<td> <span id="Temp_Out"> </span>
- <th>Min:<td> <span id="Temp_Out_Min"> </span> @ <span id="Temp_Out_Min_T"> </span>
- <th>Max:<td> <span id="Temp_Out_Max"> </span> @ <span id="Temp_Out_Max_T"> </span>
- <th>Humidity:<td> <span id="Humidity_Out"> </span>
- <th>Dew Point:<td> <span id="Dew_Point"> </span>
-
- <tr>
- <th>Wind Direction:<td> <span id="Dir"> </span>
- <th>Minute Avg:<td> <span id="Dir_1m"> </span>
- <th>Speed:<td> <span id="Wind"> </span>
- <th>Minute Avg:<td> <span id="Wind_1m"> </span>
-
- <tr>
- <th>Rain 30mins:<td> <span id="Rain_1h"> </span>
- <th>Day:<td> <span id="Rain_Day"> </span>
- <th>24hrs:<td> <span id="Rain_24h"> </span>
- <th>Month:<td> <span id="Rain_Month"> </span>
- <th>Year:<td> <span id="Rain_Year"> </span>
- </table>
- <br>
- <div id="wsconnect" align="center"> </div>
- <br>
- <div id="hh" align="center"> </div>
- </div>
- </div>
- <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
- <!-- Latest compiled and minified JavaScript -->
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
-</body>
-</html>
+}
--- /dev/null
+% my $url = url_for 'weather';
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>DWeather</title>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <!-- Latest compiled and minified CSS -->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+
+ <!-- Optional theme -->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
+
+ </head>
+ <body>
+ <center><h1>High View Weather</h1></center>
+
+ <script>
+ var ws;
+ var day_chart;
+
+ var h = new Object();
+
+ function do_debug(text) {
+ document.getElementById("do_debug").innerHTML = text;
+ }
+
+ function update_h(key, value) {
+ h[key] = value;
+ }
+
+ function fill_html(key,value) {
+ var d = document.getElementById(key);
+ if (d !== null) {
+ d.innerHTML = value;
+ }
+ }
+
+ function traverse(o, func) {
+ console.log(o);
+ for (var i in o) {
+ if (o[i] !== null && typeof(o[i])==="object") {
+ traverse(o[i], func);
+ } else {
+ func(i, o[i]);
+ }
+ }
+ }
+
+ function startws() {
+ ws = new WebSocket('<%= $url->to_abs %>');
+
+ if (typeof(ws) !== null) {
+ ws.onmessage = function (event) {
+ var js = JSON.parse(event.data);
+ if (js !== null && typeof(js) === 'object') {
+ traverse(js, fill_html);
+ traverse(js, update_h);
+ document.getElementById("hh").innerHTML = JSON.stringify(h);
+ if ("h" in js) {
+ fill_day_chart(js);
+ }
+ }
+ };
+ ws.onopen = function (event) {
+ document.getElementById("wsconnect").innerHTML = 'ws connected to: <%= $url->to_abs %>';
+ ws.send('WebSocket support works!');
+ };
+ ws.onclose = function(event) {
+ document.getElementById("wsconnect").innerHTML = 'ws disconnected, refresh to restart';
+ ws = null;
+ }
+ } else {
+ document.body.innerHTML += 'Webserver only works with Websocket aware browsers';
+ }
+ }
+
+ function start_day_chart() {
+ day_chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'day_chart',
+ zoomType: 'xy'
+ },
+ title: {
+ text: '24 Hour Chart'
+ },
+ xAxis: [{
+ type: 'datetime',
+// categories: [],
+ crosshair: true
+ }],
+ yAxis: [{ // Primary yAxis
+ labels: {
+ format: '{value}°C',
+ style: {
+ color: Highcharts.getOptions().colors[2]
+ }
+ },
+ title: {
+ text: 'Temperature',
+ style: {
+ color: Highcharts.getOptions().colors[2]
+ }
+ },
+ opposite: true
+
+ }, { // Secondary yAxis
+ gridLineWidth: 0,
+ title: {
+ text: 'Rainfall',
+ style: {
+ color: Highcharts.getOptions().colors[0]
+ }
+ },
+ labels: {
+ format: '{value} mm',
+ style: {
+ color: Highcharts.getOptions().colors[0]
+ }
+ }
+
+ }, { // Tertiary yAxis
+ gridLineWidth: 0,
+ title: {
+ text: 'Sea-Level Pressure',
+ style: {
+ color: Highcharts.getOptions().colors[1]
+ }
+ },
+ labels: {
+ format: '{value} mb',
+ style: {
+ color: Highcharts.getOptions().colors[1]
+ }
+ },
+ 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'
+ },
+ series: [{
+ name: 'Rainfall',
+ type: 'column',
+ yAxis: 1,
+ data: [],
+ tooltip: {
+ valueSuffix: ' mm'
+ }
+
+ }, {
+ name: 'Sea-Level Pressure',
+ type: 'spline',
+ yAxis: 2,
+ data: [],
+ marker: {
+ enabled: false
+ },
+ dashStyle: 'shortdot',
+ tooltip: {
+ valueSuffix: ' mb'
+ }
+
+ }, {
+ name: 'Temperature',
+ type: 'spline',
+ data: [],
+ tooltip: {
+ valueSuffix: ' °C'
+ }
+ }]
+ });
+ }
+
+ function fill_day_chart(js) {
+ var rainfall = day_chart.series[0].data.length > 48;
+ var pressure = day_chart.series[1].data.length > 48;
+ var temp = day_chart.series[2].data.length > 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];
+
+ do_debug(js.tm + " " + t + " " + te + "<br>");
+ day_chart.series[0].addPoint(ra, true, rainfall);
+ day_chart.series[1].addPoint(pr, true, pressure);
+ day_chart.series[2].addPoint(te, true, temp);
+ }
+
+ window.onload = function() {
+ startws();
+ start_day_chart();
+ window.setInterval(function() {
+ if (ws === null)
+ startws();
+ }, 15000);
+ }
+
+ </script>
+
+ <div id="container">
+ <div id="start-template">
+ <br><br>
+ <table border=1 width=80% align="center">
+ <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>
+ </tr>
+ <tr>
+ <th>Pressure:</th><td><span id="Pressure"> </span></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>
+ </tr>
+ <tr>
+ <th>Temperature out:</th><td> <span id="Temp_Out"> </span></td>
+ <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>
+ <tr>
+ <th>Wind Direction:</th><td> <span id="Dir"> </span></td>
+ <th>Minute Avg:</th><td> <span id="Dir_1m"> </span></td>
+ <th>Speed:</th><td> <span id="Wind"> </span></td>
+ <th>Minute Avg:</th><td> <span id="Wind_1m"> </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>
+ </tr>
+ </table>
+ <br>
+ <div id="wsconnect" align="center"> </div>
+ <br>
+ <div id="hh" align="center"> </div>
+ </div>
+ </div>
+
+ <div id="container">
+ <div id="day_chart" style="min-width: 400px; height: 400px; margin: 0 auto">
+ </div>
+ </div>
+
+ <div id="container">
+ <center><div id="do_debug"> </div></center>
+ </div>
+
+ <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+ <!-- Latest compiled and minified JavaScript -->
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
+ <!-- High Chart stuff -->
+ <script src="http://code.highcharts.com/highcharts.js"></script>
+ <script src="http://code.highcharts.com/modules/exporting.js"></script>
+
+ </body>
+</html>
projects / dweather.git / commitdiff