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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
13 <!-- Optional theme -->
14 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
18 <center><h1>High View Weather</h1></center>
26 function do_debug(text) {
27 document.getElementById("do_debug").innerHTML = text;
30 function update_h(key, value) {
34 function fill_html(key,value) {
35 var d = document.getElementById(key);
41 function traverse(o, func) {
44 if (o[i] !== null && typeof(o[i])==="object") {
53 ws = new WebSocket('<%= $url->to_abs %>');
55 if (typeof(ws) !== null) {
56 ws.onmessage = function (event) {
57 var js = JSON.parse(event.data);
58 if (js !== null && typeof(js) === 'object') {
59 traverse(js, fill_html);
60 traverse(js, update_h);
61 document.getElementById("hh").innerHTML = JSON.stringify(h);
67 ws.onopen = function (event) {
68 document.getElementById("wsconnect").innerHTML = 'ws connected to: <%= $url->to_abs %>';
69 ws.send('WebSocket support works!');
71 ws.onclose = function(event) {
72 document.getElementById("wsconnect").innerHTML = 'ws disconnected, refresh to restart';
76 document.body.innerHTML += 'Webserver only works with Websocket aware browsers';
80 function start_day_chart() {
81 day_chart = new Highcharts.Chart({
83 renderTo: 'day_chart',
94 yAxis: [{ // Primary yAxis
98 color: Highcharts.getOptions().colors[2]
104 color: Highcharts.getOptions().colors[2]
109 }, { // Secondary yAxis
114 color: Highcharts.getOptions().colors[0]
118 format: '{value} mm',
120 color: Highcharts.getOptions().colors[0]
124 }, { // Tertiary yAxis
127 text: 'Sea-Level Pressure',
129 color: Highcharts.getOptions().colors[1]
133 format: '{value} mb',
135 color: Highcharts.getOptions().colors[1]
147 verticalAlign: 'top',
150 backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
162 name: 'Sea-Level Pressure',
169 dashStyle: 'shortdot',
185 function fill_day_chart(js) {
186 var rainfall = day_chart.series[0].data.length > 48;
187 var pressure = day_chart.series[1].data.length > 48;
188 var temp = day_chart.series[2].data.length > 48;
192 var ra = [t, hr.Rain_1h];
193 var pr = [t, hr.Pressure];
194 var te = [t, hr.Temp_Out];
196 do_debug(js.tm + " " + t + " " + te + "<br>");
197 day_chart.series[0].addPoint(ra, true, rainfall);
198 day_chart.series[1].addPoint(pr, true, pressure);
199 day_chart.series[2].addPoint(te, true, temp);
202 window.onload = function() {
205 window.setInterval(function() {
214 <div id="start-template">
216 <table border=1 width=80% align="center">
218 <th>Time:</th><td><span id="tm"> </span></td>
219 <th>Sunrise:</th><td><span id="Sunrise"> </span></td>
220 <th>Sunset:</th><td><span id="Sunset"> </span></td>
221 <th>Console Volts:</th><td><span id="Batt_Console"> </span></td>
222 <th>TX Battery OK:</th><td><span id="Batt_TX_OK"> </span></td>
225 <th>Pressure:</th><td><span id="Pressure"> </span></td>
226 <th>Trend:</th><td><span id="Pressure_Trend_txt"> </span></td>
229 <th>Temperature in:</th><td> <span id="Temp_In"> </span></td>
230 <th>Humidity:</th><td> <span id="Humidity_In"> </span></td>
233 <th>Temperature out:</th><td> <span id="Temp_Out"> </span></td>
234 <th>Min:</th><td> <span id="Temp_Out_Min"> </span> @ <span id="Temp_Out_Min_T"> </span></td>
235 <th>Max:</th><td> <span id="Temp_Out_Max"> </span> @ <span id="Temp_Out_Max_T"> </span></td>
236 <th>Humidity:</th><td> <span id="Humidity_Out"> </span></td>
237 <th>Dew Point:</th><td> <span id="Dew_Point"> </span></td>
240 <th>Wind Direction:</th><td> <span id="Dir"> </span></td>
241 <th>Minute Avg:</th><td> <span id="Dir_1m"> </span></td>
242 <th>Speed:</th><td> <span id="Wind"> </span></td>
243 <th>Minute Avg:</th><td> <span id="Wind_1m"> </span></td>
246 <th>Rain 30mins:</th><td> <span id="Rain_1h"> </span></td>
247 <th>Day:</th><td> <span id="Rain_Day"> </span></td>
248 <th>24hrs:</th><td> <span id="Rain_24h"> </span></td>
249 <th>Month:</th><td> <span id="Rain_Month"> </span></td>
250 <th>Year:</th><td> <span id="Rain_Year"> </span></td>
254 <div id="wsconnect" align="center"> </div>
256 <div id="hh" align="center"> </div>
261 <div id="day_chart" style="min-width: 400px; height: 400px; margin: 0 auto">
266 <center><div id="do_debug"> </div></center>
269 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
270 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
271 <!-- Latest compiled and minified JavaScript -->
272 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
273 <!-- High Chart stuff -->
274 <script src="http://code.highcharts.com/highcharts.js"></script>
275 <script src="http://code.highcharts.com/modules/exporting.js"></script>