+
+sub write_ld
+{
+ unless ($dataf) {
+ $dataf = IO::File->new("+>> $datafn") or die "cannot open $datafn $!";
+ $dataf->autoflush(1);
+ }
+
+ seek $dataf, 0, 0;
+ truncate $dataf, 0;
+ $ld->{ts} = time;
+ my $s = $json->encode($ld);
+ dbg "write loop data: $s" if isdbg 'json';
+ print $dataf "$s\n";
+}
+
+sub cycle_loop_data_files
+{
+ $dataf->close if $dataf;
+ undef $dataf;
+
+ rename "$datafn.oooo", "$datafn.ooooo";
+ rename "$datafn.ooo", "$datafn.oooo";
+ rename "$datafn.oo", "$datafn.ooo";
+ rename "$datafn.o", "$datafn.oo";
+ 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]);
+ }
+ }
+ }
+
+ 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>