1 % my $url = url_for 'weather';
5 <title>DWeather</title>
7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
8 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <!-- Latest compiled and minified CSS -->
11 <link rel="stylesheet" href="css/bootstrap.min.css">
13 <!-- Optional theme -->
14 <link rel="stylesheet" href="css/bootstrap-theme.min.css">
18 <center><h1>High View Weather</h1></center>
23 var daychart_days = 5;
25 var windrose_mins = 10;
31 function do_debug(text) {
32 document.getElementById("do_debug").innerHTML = text;
35 function update_h(key, value) {
39 function fill_html(key,value) {
40 var d = document.getElementById(key);
46 function traverse(o, func) {
49 if (o[i] !== null && typeof(o[i])==="object") {
62 ws = new WebSocket('<%= $url->to_abs %>');
64 if (typeof(ws) !== null) {
65 ws.onmessage = function (event) {
66 var js = JSON.parse(event.data);
67 if (js !== null && typeof(js) === 'object') {
68 traverse(js, fill_html);
69 // traverse(js, update_h);
70 // document.getElementById("hh").innerHTML = JSON.stringify(h);
72 fill_daychart(js, daychart_days);
75 // if (js.t > lastt + 15) {
87 fill_windrose(js, windrose_mins * (60 / 2.5));
94 ws.onopen = function (event) {
95 document.getElementById("wsconnect").innerHTML = 'ws connected to: <%= $url->to_abs %>';
96 ws.send('WebSocket support works!');
98 ws.onclose = function(event) {
99 document.getElementById("wsconnect").innerHTML = 'ws disconnected, refresh to restart';
103 document.body.innerHTML += 'Webserver only works with Websocket aware browsers';
107 function start_daychart() {
108 daychart = new Highcharts.Chart({
110 renderTo: 'daychart',
114 text: 'Five Day Chart'
121 yAxis: [{ // Primary yAxis
125 color: Highcharts.getOptions().colors[2]
131 color: Highcharts.getOptions().colors[2]
136 }, { // Secondary yAxis
141 color: Highcharts.getOptions().colors[0]
145 format: '{value} mm',
147 color: Highcharts.getOptions().colors[0]
151 }, { // Tertiary yAxis
154 text: 'Sea-Level Pressure',
156 color: Highcharts.getOptions().colors[1]
160 format: '{value} mb',
162 color: Highcharts.getOptions().colors[1]
174 verticalAlign: 'top',
177 backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
189 name: 'Sea-Level Pressure',
196 dashStyle: 'shortdot',
212 function start_windrose() {
215 Highcharts.createElement('link', {
216 href: '//fonts.googleapis.com/css?family=Dosis:400,600',
219 }, null, document.getElementsByTagName('head')[0]);
222 colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
223 "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
225 backgroundColor: null,
227 fontFamily: "Dosis, sans-serif"
234 textTransform: 'uppercase'
239 backgroundColor: 'rgba(219,219,216,0.8)',
257 minorTickInterval: 'auto',
260 textTransform: 'uppercase'
277 background2: '#F0F0EA'
282 Highcharts.setOptions(Highcharts.theme);
284 windrose = new Highcharts.Chart({
304 formatter: function () {
305 return this.value + '°';
333 function start_windspeed() {
334 windspeed = new Highcharts.Chart({
337 renderTo: 'windspeed',
338 plotBackgroundColor: null,
339 plotBackgroundImage: null,
353 linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
363 linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
372 // default background
374 backgroundColor: '#DDD',
386 minorTickInterval: 'auto',
389 minorTickPosition: 'inside',
390 minorTickColor: '#666',
392 tickPixelInterval: 30,
394 tickPosition: 'inside',
407 color: '#55BF3B' // green
411 color: '#DDDF0D' // yellow
415 color: '#DF5353' // red
429 function start_winddir() {
430 winddir = new Highcharts.Chart({
434 plotBackgroundColor: null,
435 plotBackgroundImage: null,
441 text: 'Wind Direction'
449 linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
459 linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
468 // default background
470 backgroundColor: '#DDD',
482 minorTickInterval: 'auto',
485 minorTickPosition: 'inside',
486 minorTickColor: '#666',
488 tickPixelInterval: 15,
490 tickPosition: 'inside',
506 valueSuffix: ' ° deg'
512 function fill_daychart(js, days) {
513 var rainfall = daychart.series[0].data.length > (days * 48);
514 var pressure = daychart.series[1].data.length > (days * 48);
515 var temp = daychart.series[2].data.length > (days * 48);
519 var ra = [t, hr.Rain_1h];
520 var pr = [t, hr.Pressure];
521 var te = [t, hr.Temp_Out];
523 // do_debug(js.tm + " " + t + " " + te + "<br>");
524 daychart.series[0].addPoint(ra, true, rainfall);
525 daychart.series[1].addPoint(pr, true, pressure);
526 daychart.series[2].addPoint(te, true, temp);
531 function fill_windrose(js, points) {
532 var p = windrose.series[0].data.length > points;
534 windrose.series[0].addPoint([rr.Dir, Math.round(rr.Wind*conv)], true, p);
537 function fill_windspeed(js) {
539 var point = windspeed.series[0].points[0];
540 point.update(Math.round(rr.Wind*conv));
543 function fill_winddir(js) {
545 var point = winddir.series[0].points[0];
546 point.update(rr.Dir);
549 window.onload = function() {
555 window.setInterval(function() {
564 <div id="daychart" style="min-width: 400px; height: 400px; margin: 0 auto"> </div>
568 <table border="0" align="center">
570 <td id="windrose" style="min-width: 350px; max-width: 400px; height: 330px; margin: 0 auto"> </td>
571 <td id="windspeed" style="min-width: 280px; max-width: 400px; height: 270px; margin: 0 auto"> </td>
572 <td id="winddir" style="min-width: 280px; max-width: 400px; height: 270px; margin: 0 auto"> </td>
578 <div id="start-template">
580 <table border=1 width=80% align="center">
582 <th>Time:</th><td><span id="tm"> </span></td>
583 <th>Sunrise:</th><td><span id="Sunrise"> </span></td>
584 <th>Sunset:</th><td><span id="Sunset"> </span></td>
585 <th>Console Volts:</th><td><span id="Batt_Console"> </span></td>
586 <th>TX Battery OK:</th><td><span id="Batt_TX_OK"> </span></td>
589 <th>Pressure:</th><td><span id="Pressure"> </span></td>
590 <th>Trend:</th><td><span id="Pressure_Trend_txt"> </span></td>
593 <th>Temperature in:</th><td> <span id="Temp_In"> </span></td>
594 <th>Humidity:</th><td> <span id="Humidity_In"> </span></td>
597 <th>Min:</th><td> <span id="Temp_Out_Min"> </span> @ <span id="Temp_Out_Min_T"> </span></td>
598 <th>Max:</th><td> <span id="Temp_Out_Max"> </span> @ <span id="Temp_Out_Max_T"> </span></td>
599 <th>Humidity:</th><td> <span id="Humidity_Out"> </span></td>
600 <th>Dew Point:</th><td> <span id="Dew_Point"> </span></td>
603 <th>Wind Dir Minute Avg:</th><td> <span id="Dir_1m"> </span></td>
604 <th>Wind Speed Minute Avg:</th><td> <span id="Wind_1m"> </span></td>
607 <th>Rain 30mins:</th><td> <span id="Rain_1h"> </span></td>
608 <th>Day:</th><td> <span id="Rain_Day"> </span></td>
609 <th>24hrs:</th><td> <span id="Rain_24h"> </span></td>
610 <th>Month:</th><td> <span id="Rain_Month"> </span></td>
611 <th>Year:</th><td> <span id="Rain_Year"> </span></td>
618 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
619 <script src="js/jquery.min.js"></script>
620 <!-- Latest compiled and minified JavaScript -->
621 <script src="js/bootstrap.min.js"></script>
622 <!-- High Chart stuff -->
623 <script src="js/highcharts.js"></script>
624 <script src="js/highcharts-more.js"></script>
625 <script src="js/modules/exporting.js"></script>