templates/index.html.ep

   1 % my $url = url_for 'weather';
   2 <!DOCTYPE html>
   3 <html>
   4         <head>
   5                 <title>DWeather</title>
   6                 <meta charset="utf-8">
   7                 <meta http-equiv="X-UA-Compatible" content="IE=edge">
   8                 <meta name="viewport" content="width=device-width, initial-scale=1">
   9
  10                 <!-- Latest compiled and minified CSS -->
  11                 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  12
  13                 <!-- Optional theme -->
  14                 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
  15
  16         </head>
  17         <body>
  18                 <center><h1>High View Weather</h1></center>
  19
  20                 <script>
  21                 var ws;
  22                 var day_chart;
  23
  24                 var h = new Object();
  25
  26                 function do_debug(text) {
  27                         document.getElementById("do_debug").innerHTML = text;
  28                 }
  29
  30                 function update_h(key, value) {
  31                         h[key] = value;
  32                 }
  33
  34                 function fill_html(key,value) {
  35                         var d = document.getElementById(key);
  36                         if (d !== null) {
  37                                 d.innerHTML = value;
  38                         }
  39                 }
  40
  41                 function traverse(o, func) {
  42                         console.log(o);
  43                         for (var i in o) {
  44                                 if (o[i] !== null && typeof(o[i])==="object") {
  45                                         traverse(o[i], func);
  46                                 } else {
  47                                         func(i, o[i]);
  48                                 }
  49                         }
  50                 }
  51
  52                 function startws() {
  53                         ws = new WebSocket('<%= $url->to_abs %>');
  54
  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);
  62                                                 if ("h" in js) {
  63                                                         fill_day_chart(js);
  64                                                 }
  65                                         }
  66                                 };
  67                                 ws.onopen = function (event) {
  68                                         document.getElementById("wsconnect").innerHTML = 'ws connected to: <%= $url->to_abs %>';
  69                                         ws.send('WebSocket support works!');
  70                                 };
  71                                 ws.onclose = function(event) {
  72                                         document.getElementById("wsconnect").innerHTML = 'ws disconnected, refresh to restart';
  73                                         ws = null;
  74                                 }
  75                         } else {
  76                                 document.body.innerHTML += 'Webserver only works with Websocket aware browsers';
  77                         }
  78                 }
  79
  80                 function start_day_chart() {
  81                         day_chart = new Highcharts.Chart({
  82                                 chart: {
  83                                         renderTo: 'day_chart',
  84                                         zoomType: 'xy'
  85                                 },
  86                                 title: {
  87                                         text: '24 Hour Chart'
  88                                 },
  89                                 xAxis: [{
  90                                         type: 'datetime',
  91 //                                      categories: [],
  92                                         crosshair: true
  93                                 }],
  94                                 yAxis: [{ // Primary yAxis
  95                                         labels: {
  96                                                 format: '{value}°C',
  97                                                 style: {
  98                                                         color: Highcharts.getOptions().colors[2]
  99                                                 }
 100                                         },
 101                                         title: {
 102                                                 text: 'Temperature',
 103                                                 style: {
 104                                                         color: Highcharts.getOptions().colors[2]
 105                                                 }
 106                                         },
 107                                         opposite: true
 108
 109                                 }, { // Secondary yAxis
 110                                         gridLineWidth: 0,
 111                                         title: {
 112                                                 text: 'Rainfall',
 113                                                 style: {
 114                                                         color: Highcharts.getOptions().colors[0]
 115                                                 }
 116                                         },
 117                                         labels: {
 118                                                 format: '{value} mm',
 119                                                 style: {
 120                                                         color: Highcharts.getOptions().colors[0]
 121                                                 }
 122                                         }
 123
 124                                 }, { // Tertiary yAxis
 125                                         gridLineWidth: 0,
 126                                         title: {
 127                                                 text: 'Sea-Level Pressure',
 128                                                 style: {
 129                                                         color: Highcharts.getOptions().colors[1]
 130                                                 }
 131                                         },
 132                                         labels: {
 133                                                 format: '{value} mb',
 134                                                 style: {
 135                                                         color: Highcharts.getOptions().colors[1]
 136                                                 }
 137                                         },
 138                                         opposite: true
 139                                 }],
 140                                 tooltip: {
 141                                         shared: true
 142                                 },
 143                                 legend: {
 144                                         layout: 'vertical',
 145                                         align: 'left',
 146                                         x: 80,
 147                                         verticalAlign: 'top',
 148                                         y: 55,
 149                                         floating: true,
 150                                         backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
 151                                 },
 152                                 series: [{
 153                                         name: 'Rainfall',
 154                                         type: 'column',
 155                                         yAxis: 1,
 156                                         data: [],
 157                                         tooltip: {
 158                                                 valueSuffix: ' mm'
 159                                         }
 160
 161                                 }, {
 162                                         name: 'Sea-Level Pressure',
 163                                         type: 'spline',
 164                                         yAxis: 2,
 165                                         data: [],
 166                                         marker: {
 167                                                 enabled: false
 168                                         },
 169                                         dashStyle: 'shortdot',
 170                                         tooltip: {
 171                                                 valueSuffix: ' mb'
 172                                         }
 173
 174                                 }, {
 175                                         name: 'Temperature',
 176                                         type: 'spline',
 177                                         data: [],
 178                                         tooltip: {
 179                                                 valueSuffix: ' °C'
 180                                         }
 181                                 }]
 182                         });
 183                 }
 184
 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;
 189
 190                         var hr = js.h;
 191                         var t = js.t * 1000;
 192                         var ra = [t, hr.Rain_1h];
 193                         var pr = [t, hr.Pressure];
 194                         var te = [t, hr.Temp_Out];
 195
 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);
 200                 }
 201
 202                 window.onload = function() {
 203                         startws();
 204                         start_day_chart();
 205                         window.setInterval(function() {
 206                                 if (ws === null)
 207                                         startws();
 208                         }, 15000);
 209                 }
 210
 211                 </script>
 212
 213                 <div id="container">
 214                         <div id="start-template">
 215                                 <br><br>
 216                                 <table border=1 width=80% align="center">
 217                                         <tr>
 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>
 223                                         </tr>
 224                                         <tr>
 225                                                 <th>Pressure:</th><td><span id="Pressure"> </span></td>
 226                                                 <th>Trend:</th><td><span id="Pressure_Trend_txt"> </span></td>
 227                                         </tr>
 228                                         <tr>
 229                                                 <th>Temperature in:</th><td> <span id="Temp_In"> </span></td>
 230                                                 <th>Humidity:</th><td> <span id="Humidity_In"> </span></td>
 231                                         </tr>
 232                                         <tr>
 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>
 238                                         </tr>
 239                                         <tr>
 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>
 244                                         </tr>
 245                                         <tr>
 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>
 251                                         </tr>
 252                                 </table>
 253                                 <br>
 254                                 <div id="wsconnect" align="center"> </div>
 255                                 <br>
 256                                 <div id="hh" align="center"> </div>
 257                         </div>
 258                 </div>
 259
 260                 <div id="container">
 261                         <div id="day_chart" style="min-width: 400px; height: 400px; margin: 0 auto">
 262                         </div>
 263                 </div>
 264
 265                 <div id="container">
 266                         <center><div id="do_debug"> </div></center>
 267                 </div>
 268
 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>
 276
 277         </body>
 278 </html>