--- /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 / blobdiff