1 % my $url = url_for 'weather';
6 <title>DWeather</title>
8 <meta http-equiv="X-UA-Compatible" content="IE=edge">
9 <meta name="viewport" content="width=device-width, initial-scale=1">
11 <!-- Latest compiled and minified CSS -->
12 <link rel="stylesheet" href="css/bootstrap.min.css">
14 <!-- Optional theme -->
15 <link rel="stylesheet" href="css/bootstrap-theme.min.css">
19 <center><h1>High View Weather</h1></center>
24 var daychart_days = <%= $main::histdays %>;
26 var windrose_mins = <%= $main::windmins %>;
32 function do_debug(text) {
33 document.getElementById("do_debug").innerHTML = text;
36 function update_h(key, value) {
40 function fill_html(key,value) {
41 var d = document.getElementById(key);
47 function traverse(o, func) {
50 if (o[i] !== null && typeof(o[i])==="object") {
63 ws = new WebSocket('<%= $url->to_abs %>');
65 if (typeof(ws) !== null) {
66 ws.onmessage = function (event) {
67 var js = JSON.parse(event.data);
68 if (js !== null && typeof(js) === 'object') {
69 traverse(js, fill_html);
70 // traverse(js, update_h);
71 // document.getElementById("hh").innerHTML = JSON.stringify(h);
73 fill_daychart(js, daychart_days);
76 // if (js.t > lastt + 15) {
88 fill_windrose(js, windrose_mins * 24);
95 ws.onopen = function (event) {
96 document.getElementById("wsconnect").innerHTML = 'ws connected to: <%= $url->to_abs %>';
97 ws.send('WebSocket support works!');
99 ws.onclose = function(event) {
100 document.getElementById("wsconnect").innerHTML = 'ws disconnected, refresh to restart';
104 document.body.innerHTML += 'Webserver only works with Websocket aware browsers';
108 function start_daychart() {
109 daychart = new Highcharts.Chart({
111 renderTo: 'daychart',
115 text: 'Five Day Chart'
122 yAxis: [{ // Primary yAxis
126 color: Highcharts.getOptions().colors[2]
132 color: Highcharts.getOptions().colors[2]
137 }, { // Secondary yAxis
142 color: Highcharts.getOptions().colors[0]
146 format: '{value} mm',
148 color: Highcharts.getOptions().colors[0]
152 }, { // Tertiary yAxis
155 text: 'Sea-Level Pressure',
157 color: Highcharts.getOptions().colors[1]
161 format: '{value} mb',
163 color: Highcharts.getOptions().colors[1]
175 verticalAlign: 'top',
178 backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
193 for (@main::last5daysh) {
194 my $r = $main::json->decode($_);
195 $s .= "[" . $r->{t}*1000 . "," . $r->{h}->{Rain_1h} . "]," if $r && exists $r->{t} && exists $r->{h}->{Rain_1h};
197 chop $s if length $s;
205 name: 'Sea-Level Pressure',
210 for (@main::last5daysh) {
211 my $r = $main::json->decode($_);
212 $s .= "[" . $r->{t}*1000 . "," . $r->{h}->{Pressure} . "]," if $r && exists $r->{t} && exists $r->{h}->{Pressure};
214 chop $s if length $s;
220 dashStyle: 'shortdot',
230 for (@main::last5daysh) {
231 my $r = $main::json->decode($_);
232 $s .= "[" . $r->{t}*1000 . "," . $r->{h}->{Temp_Out} . "]," if $r && exists $r->{t} && exists $r->{h}->{Temp_Out};
234 chop $s if length $s;
244 function start_windrose() {
247 Highcharts.createElement('link', {
248 href: '//fonts.googleapis.com/css?family=Dosis:400,600',
251 }, null, document.getElementsByTagName('head')[0]);
254 colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
255 "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
257 backgroundColor: null,
259 fontFamily: "Dosis, sans-serif"
266 textTransform: 'uppercase'
271 backgroundColor: 'rgba(219,219,216,0.8)',
289 minorTickInterval: 'auto',
292 textTransform: 'uppercase'
309 background2: '#F0F0EA'
314 Highcharts.setOptions(Highcharts.theme);
316 windrose = new Highcharts.Chart({
336 formatter: function () {
337 return this.value + '°';
371 for (@main::last10minsr) {
372 my $r = $main::json->decode($_);
374 $r->{r}->{Dir} ||= $d;
375 $r->{r}->{Wind} ||= $w;
376 $s .= "[" . $r->{r}->{Dir} . "," . main::nearest(0.1, $r->{r}->{Wind}*2.23694) . "],";
378 $w = $r->{r}->{Wind};
381 chop $s if length $s;
388 function start_windspeed() {
389 windspeed = new Highcharts.Chart({
392 renderTo: 'windspeed',
393 plotBackgroundColor: null,
394 plotBackgroundImage: null,
408 linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
418 linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
427 // default background
429 backgroundColor: '#DDD',
441 minorTickInterval: 'auto',
444 minorTickPosition: 'inside',
445 minorTickColor: '#666',
447 tickPixelInterval: 30,
449 tickPosition: 'inside',
462 color: '#55BF3B' // green
466 color: '#DDDF0D' // yellow
470 color: '#DF5353' // red
491 function start_winddir() {
492 winddir = new Highcharts.Chart({
496 plotBackgroundColor: null,
497 plotBackgroundImage: null,
503 text: 'Wind Direction'
511 linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
521 linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
530 // default background
532 backgroundColor: '#DDD',
544 minorTickInterval: 'auto',
547 minorTickPosition: 'inside',
548 minorTickColor: '#666',
550 tickPixelInterval: 15,
552 tickPosition: 'inside',
575 valueSuffix: ' ° deg'
581 function fill_daychart(js, days) {
582 var rainfall = daychart.series[0].data.length > (days * 48);
583 var pressure = daychart.series[1].data.length > (days * 48);
584 var temp = daychart.series[2].data.length > (days * 48);
588 var ra = [t, hr.Rain_1h];
589 var pr = [t, hr.Pressure];
590 var te = [t, hr.Temp_Out];
592 // do_debug(js.tm + " " + t + " " + te + "<br>");
593 daychart.series[0].addPoint(ra, true, rainfall);
594 daychart.series[1].addPoint(pr, true, pressure);
595 daychart.series[2].addPoint(te, true, temp);
600 function fill_windrose(js, points) {
601 var p = windrose.series[0].data.length > points;
603 windrose.series[0].addPoint([rr.Dir, Math.round(rr.Wind*conv)], true, p);
606 function fill_windspeed(js) {
608 var point = windspeed.series[0].points[0];
609 point.update(Math.round(rr.Wind*conv));
612 function fill_winddir(js) {
614 var point = winddir.series[0].points[0];
615 point.update(rr.Dir);
618 window.onload = function() {
624 window.setInterval(function() {
633 <div id="daychart" style="min-width: 400px; height: 400px; margin: 0 auto"> </div>
637 <table border="0" align="center">
639 <td id="windrose" style="min-width: 350px; max-width: 400px; height: 330px; margin: 0 auto"> </td>
640 <td id="windspeed" style="min-width: 280px; max-width: 400px; height: 270px; margin: 0 auto"> </td>
641 <td id="winddir" style="min-width: 280px; max-width: 400px; height: 270px; margin: 0 auto"> </td>
647 <div id="start-template">
649 <table border=1 width=80% align="center">
651 <th>Time:</th><td><span id="tm"> </span></td>
652 <th>Sunrise:</th><td><span id="Sunrise"> </span></td>
653 <th>Sunset:</th><td><span id="Sunset"> </span></td>
654 <th>Console Volts:</th><td><span id="Batt_Console"> </span></td>
655 <th>TX Battery OK:</th><td><span id="Batt_TX_OK"> </span></td>
658 <th>Pressure:</th><td><span id="Pressure"> </span></td>
659 <th>Trend:</th><td><span id="Pressure_Trend_txt"> </span></td>
662 <th>Temperature in:</th><td> <span id="Temp_In"> </span></td>
663 <th>Humidity:</th><td> <span id="Humidity_In"> </span></td>
666 <th>Min:</th><td> <span id="Temp_Out_Min"> </span> @ <span id="Temp_Out_Min_T"> </span></td>
667 <th>Max:</th><td> <span id="Temp_Out_Max"> </span> @ <span id="Temp_Out_Max_T"> </span></td>
668 <th>Humidity:</th><td> <span id="Humidity_Out"> </span></td>
669 <th>Dew Point:</th><td> <span id="Dew_Point"> </span></td>
672 <th>Wind Dir Minute Avg:</th><td> <span id="Dir_1m"> </span></td>
673 <th>Wind Speed Minute Avg:</th><td> <span id="Wind_1m"> </span></td>
676 <th>Rain 30mins:</th><td> <span id="Rain_1h"> </span></td>
677 <th>Day:</th><td> <span id="Rain_Day"> </span></td>
678 <th>24hrs:</th><td> <span id="Rain_24h"> </span></td>
679 <th>Month:</th><td> <span id="Rain_Month"> </span></td>
680 <th>Year:</th><td> <span id="Rain_Year"> </span></td>
687 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
688 <script src="js/jquery.min.js"></script>
689 <!-- Latest compiled and minified JavaScript -->
690 <script src="js/bootstrap.min.js"></script>
691 <!-- High Chart stuff -->
692 <script src="js/highcharts.js"></script>
693 <script src="js/highcharts-more.js"></script>
694 <script src="js/modules/exporting.js"></script>