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="css/bootstrap.min.css">
  12
  13                 <!-- Optional theme -->
  14                 <link rel="stylesheet" href="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 daychart;
  23                 var daychart_days = 5;
  24                 var windrose;
  25                 var windrose_mins = 10;
  26                 var windspeed;
  27                 var winddir;
  28
  29                 var h = new Object();
  30
  31                 function do_debug(text) {
  32                         document.getElementById("do_debug").innerHTML = text;
  33                 }
  34
  35                 function update_h(key, value) {
  36                         h[key] = value;
  37                 }
  38
  39                 function fill_html(key,value) {
  40                         var d = document.getElementById(key);
  41                         if (d !== null) {
  42                                 d.innerHTML = value;
  43                         }
  44                 }
  45
  46                 function traverse(o, func) {
  47                         console.log(o);
  48                         for (var i in o) {
  49                                 if (o[i] !== null && typeof(o[i])==="object") {
  50                                         traverse(o[i], func);
  51                                 } else {
  52                                         func(i, o[i]);
  53                                 }
  54                         }
  55                 }
  56
  57                 var lastwind = 0;
  58                 var lastdir = 0;
  59                 var lastt = 0;
  60
  61                 function startws() {
  62                         ws = new WebSocket('<%= $url->to_abs %>');
  63
  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);
  71                                                 if ("h" in js) {
  72                                                         fill_daychart(js, daychart_days);
  73                                                 }
  74                                                 if ("r" in js) {
  75 //                                                      if (js.t > lastt + 15) {
  76                                                                 if ("Wind" in js.r) {
  77                                                                         lastwind = js.r.Wind;
  78                                                                 } else {
  79                                                                         js.r.Wind = lastwind;
  80                                                                 }
  81                                                                 if ("Dir" in js.r) {
  82                                                                         lastdir = js.r.dir;
  83                                                                 } else {
  84                                                                         js.r.Dir = lastdir;
  85                                                                 }
  86                                                                 lastt = js.t;
  87                                                                 fill_windrose(js, windrose_mins * (60 / 2.5));
  88 //                                                      }
  89                                                         fill_windspeed(js);
  90                                                         fill_winddir(js);
  91                                                 }
  92                                         }
  93                                 };
  94                                 ws.onopen = function (event) {
  95                                         document.getElementById("wsconnect").innerHTML = 'ws connected to: <%= $url->to_abs %>';
  96                                         ws.send('WebSocket support works!');
  97                                 };
  98                                 ws.onclose = function(event) {
  99                                         document.getElementById("wsconnect").innerHTML = 'ws disconnected, refresh to restart';
 100                                         ws = null;
 101                                 }
 102                         } else {
 103                                 document.body.innerHTML += 'Webserver only works with Websocket aware browsers';
 104                         }
 105                 }
 106
 107                 function start_daychart() {
 108                         daychart = new Highcharts.Chart({
 109                                 chart: {
 110                                         renderTo: 'daychart',
 111                                         zoomType: 'xy'
 112                                 },
 113                                 title: {
 114                                         text: 'Five Day Chart'
 115                                 },
 116                                 xAxis: [{
 117                                         type: 'datetime',
 118 //                                      categories: [],
 119                                         crosshair: true
 120                                 }],
 121                                 yAxis: [{ // Primary yAxis
 122                                         labels: {
 123                                                 format: '{value}°C',
 124                                                 style: {
 125                                                         color: Highcharts.getOptions().colors[2]
 126                                                 }
 127                                         },
 128                                         title: {
 129                                                 text: 'Temperature',
 130                                                 style: {
 131                                                         color: Highcharts.getOptions().colors[2]
 132                                                 }
 133                                         },
 134                                         opposite: true
 135
 136                                 }, { // Secondary yAxis
 137                                         gridLineWidth: 0,
 138                                         title: {
 139                                                 text: 'Rainfall',
 140                                                 style: {
 141                                                         color: Highcharts.getOptions().colors[0]
 142                                                 }
 143                                         },
 144                                         labels: {
 145                                                 format: '{value} mm',
 146                                                 style: {
 147                                                         color: Highcharts.getOptions().colors[0]
 148                                                 }
 149                                         }
 150
 151                                 }, { // Tertiary yAxis
 152                                         gridLineWidth: 0,
 153                                         title: {
 154                                                 text: 'Sea-Level Pressure',
 155                                                 style: {
 156                                                         color: Highcharts.getOptions().colors[1]
 157                                                 }
 158                                         },
 159                                         labels: {
 160                                                 format: '{value} mb',
 161                                                 style: {
 162                                                         color: Highcharts.getOptions().colors[1]
 163                                                 }
 164                                         },
 165                                         opposite: true
 166                                 }],
 167                                 tooltip: {
 168                                         shared: true
 169                                 },
 170                                 legend: {
 171                                         layout: 'vertical',
 172                                         align: 'left',
 173                                         x: 80,
 174                                         verticalAlign: 'top',
 175                                         y: 55,
 176                                         floating: true,
 177                                         backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
 178                                 },
 179                                 series: [{
 180                                         name: 'Rainfall',
 181                                         type: 'column',
 182                                         yAxis: 1,
 183                                         data: [],
 184                                         tooltip: {
 185                                                 valueSuffix: ' mm'
 186                                         }
 187
 188                                 }, {
 189                                         name: 'Sea-Level Pressure',
 190                                         type: 'spline',
 191                                         yAxis: 2,
 192                                         data: [],
 193                                         marker: {
 194                                                 enabled: false
 195                                         },
 196                                         dashStyle: 'shortdot',
 197                                         tooltip: {
 198                                                 valueSuffix: ' mb'
 199                                         }
 200
 201                                 }, {
 202                                         name: 'Temperature',
 203                                         type: 'spline',
 204                                         data: [],
 205                                         tooltip: {
 206                                                 valueSuffix: ' °C'
 207                                         }
 208                                 }]
 209                         });
 210                 }
 211
 212                 function start_windrose() {
 213
 214                         // Load the fonts
 215                         Highcharts.createElement('link', {
 216                                 href: '//fonts.googleapis.com/css?family=Dosis:400,600',
 217                                 rel: 'stylesheet',
 218                                 type: 'text/css'
 219                         }, null, document.getElementsByTagName('head')[0]);
 220
 221                         Highcharts.theme = {
 222                                 colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
 223                                         "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
 224                                 chart: {
 225                                         backgroundColor: null,
 226                                         style: {
 227                                                 fontFamily: "Dosis, sans-serif"
 228                                         }
 229                                 },
 230                                 title: {
 231                                         style: {
 232                                                 fontSize: '16px',
 233                                                 fontWeight: 'bold',
 234                                                 textTransform: 'uppercase'
 235                                         }
 236                                 },
 237                                 tooltip: {
 238                                         borderWidth: 0,
 239                                         backgroundColor: 'rgba(219,219,216,0.8)',
 240                                         shadow: false
 241                                 },
 242                                 legend: {
 243                                         itemStyle: {
 244                                                 fontWeight: 'bold',
 245                                                 fontSize: '13px'
 246                                         }
 247                                 },
 248                                 xAxis: {
 249                                         gridLineWidth: 1,
 250                                         labels: {
 251                                                 style: {
 252                                                         fontSize: '12px'
 253                                                 }
 254                                         }
 255                                 },
 256                                 yAxis: {
 257                                         minorTickInterval: 'auto',
 258                                         title: {
 259                                                 style: {
 260                                                         textTransform: 'uppercase'
 261                                                 }
 262                                         },
 263                                         labels: {
 264                                                 style: {
 265                                                         fontSize: '12px'
 266                                                 }
 267                                         }
 268                                 },
 269                                 plotOptions: {
 270                                         candlestick: {
 271                                                 lineColor: '#404048'
 272                                         }
 273                                 },
 274
 275
 276                                 // General
 277                                 background2: '#F0F0EA'
 278
 279                         };
 280
 281                         // Apply the theme
 282                         Highcharts.setOptions(Highcharts.theme);
 283
 284                         windrose = new Highcharts.Chart({
 285                                 chart: {
 286                                         polar: true,
 287                                         renderTo: 'windrose'
 288                                 },
 289
 290                                 title: {
 291                                         text: 'Wind Rose'
 292                                 },
 293
 294                                 pane: {
 295                                         startAngle: 0,
 296                                         endAngle: 360
 297                                 },
 298
 299                                 xAxis: {
 300                                         tickInterval: 15,
 301                                         min: 0,
 302                                         max: 360,
 303                                         labels: {
 304                                                 formatter: function () {
 305                                                         return this.value + '°';
 306                                                 }
 307                                         }
 308                                 },
 309
 310                                 yAxis: {
 311                                         min: 0
 312                                 },
 313
 314                                 plotOptions: {
 315                                         series: {
 316                                                 pointStart: 0,
 317                                                 pointInterval: 15
 318                                         },
 319                                         column: {
 320                                                 pointPadding: 0,
 321                                                 groupPadding: 0
 322                                         }
 323                                 },
 324
 325                                 series: [ {
 326                                         type: 'scatter',
 327                                         name: 'Wind mph',
 328                                         data: []
 329                                 }]
 330                         });
 331                 }
 332
 333                 function start_windspeed() {
 334                         windspeed = new Highcharts.Chart({
 335                                 chart: {
 336                                         type: 'gauge',
 337                                         renderTo: 'windspeed',
 338                                         plotBackgroundColor: null,
 339                                         plotBackgroundImage: null,
 340                                         plotBorderWidth: 0,
 341                                         plotShadow: false
 342                                 },
 343
 344                                 title: {
 345                                         text: 'Wind Speed'
 346                                 },
 347
 348                                 pane: {
 349                                         startAngle: -150,
 350                                         endAngle: 150,
 351                                         background: [{
 352                                                 backgroundColor: {
 353                                                         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 354                                                         stops: [
 355                                                                 [0, '#FFF'],
 356                                                                 [1, '#333']
 357                                                         ]
 358                                                 },
 359                                                 borderWidth: 0,
 360                                                 outerRadius: '109%'
 361                                         }, {
 362                                                 backgroundColor: {
 363                                                         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 364                                                         stops: [
 365                                                                 [0, '#333'],
 366                                                                 [1, '#FFF']
 367                                                         ]
 368                                                 },
 369                                                 borderWidth: 1,
 370                                                 outerRadius: '107%'
 371                                         }, {
 372                                                 // default background
 373                                         }, {
 374                                                 backgroundColor: '#DDD',
 375                                                 borderWidth: 0,
 376                                                 outerRadius: '105%',
 377                                                 innerRadius: '103%'
 378                                         }]
 379                                 },
 380
 381                                 // the value axis
 382                                 yAxis: {
 383                                         min: 0,
 384                                         max: 50,
 385
 386                                         minorTickInterval: 'auto',
 387                                         minorTickWidth: 1,
 388                                         minorTickLength: 10,
 389                                         minorTickPosition: 'inside',
 390                                         minorTickColor: '#666',
 391
 392                                         tickPixelInterval: 30,
 393                                         tickWidth: 2,
 394                                         tickPosition: 'inside',
 395                                         tickLength: 10,
 396                                         tickColor: '#666',
 397                                         labels: {
 398                                                 step: 2,
 399                                                 rotation: 'auto'
 400                                         },
 401                                         title: {
 402                                                 text: 'mph'
 403                                         },
 404                                         plotBands: [{
 405                                                 from: 0,
 406                                                 to: 15,
 407                                                 color: '#55BF3B' // green
 408                                         }, {
 409                                                 from: 16,
 410                                                 to: 29,
 411                                                 color: '#DDDF0D' // yellow
 412                                         }, {
 413                                                 from: 30,
 414                                                 to: 50,
 415                                                 color: '#DF5353' // red
 416                                         }]
 417                                 },
 418
 419                                 series: [{
 420                                         name: 'Speed',
 421                                         data: [0],
 422                                         tooltip: {
 423                                                 valueSuffix: ' mph'
 424                                         }
 425                                 }]
 426                         });
 427                 }
 428
 429                 function start_winddir() {
 430                         winddir = new Highcharts.Chart({
 431                                 chart: {
 432                                         type: 'gauge',
 433                                         renderTo: 'winddir',
 434                                         plotBackgroundColor: null,
 435                                         plotBackgroundImage: null,
 436                                         plotBorderWidth: 0,
 437                                         plotShadow: false
 438                                 },
 439
 440                                 title: {
 441                                         text: 'Wind Direction'
 442                                 },
 443
 444                                 pane: {
 445                                         startAngle: 0,
 446                                         endAngle: 359,
 447                                         background: [{
 448                                                 backgroundColor: {
 449                                                         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 450                                                         stops: [
 451                                                                 [0, '#FFF'],
 452                                                                 [1, '#333']
 453                                                         ]
 454                                                 },
 455                                                 borderWidth: 0,
 456                                                 outerRadius: '109%'
 457                                         }, {
 458                                                 backgroundColor: {
 459                                                         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 460                                                         stops: [
 461                                                                 [0, '#333'],
 462                                                                 [1, '#FFF']
 463                                                         ]
 464                                                 },
 465                                                 borderWidth: 1,
 466                                                 outerRadius: '107%'
 467                                         }, {
 468                                                 // default background
 469                                         }, {
 470                                                 backgroundColor: '#DDD',
 471                                                 borderWidth: 0,
 472                                                 outerRadius: '105%',
 473                                                 innerRadius: '103%'
 474                                         }]
 475                                 },
 476
 477                                 // the value axis
 478                                 yAxis: {
 479                                         min: 0,
 480                                         max: 360,
 481
 482                                         minorTickInterval: 'auto',
 483                                         minorTickWidth: 1,
 484                                         minorTickLength: 10,
 485                                         minorTickPosition: 'inside',
 486                                         minorTickColor: '#666',
 487
 488                                         tickPixelInterval: 15,
 489                                         tickWidth: 2,
 490                                         tickPosition: 'inside',
 491                                         tickLength: 10,
 492                                         tickColor: '#666',
 493                                         labels: {
 494                                                 step: 2,
 495                                                 rotation: 'auto'
 496                                         },
 497                                         title: {
 498                                                 text:  '° deg'
 499                                         },
 500                                 },
 501
 502                                 series: [{
 503                                         name: 'Direction',
 504                                         data: [0],
 505                                         tooltip: {
 506                                                 valueSuffix: ' ° deg'
 507                                         }
 508                                 }]
 509                         });
 510                 }
 511
 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);
 516
 517                         var hr = js.h;
 518                         var t = js.t * 1000;
 519                         var ra = [t, hr.Rain_1h];
 520                         var pr = [t, hr.Pressure];
 521                         var te = [t, hr.Temp_Out];
 522
 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);
 527                 }
 528
 529                 var conv = 2.23694;
 530
 531                 function fill_windrose(js, points) {
 532                         var p = windrose.series[0].data.length > points;
 533                         var rr = js.r;
 534                         windrose.series[0].addPoint([rr.Dir, Math.round(rr.Wind*conv)], true, p);
 535                 }
 536
 537                 function fill_windspeed(js) {
 538                         var rr = js.r;
 539                         var point = windspeed.series[0].points[0];
 540                         point.update(Math.round(rr.Wind*conv));
 541                 }
 542
 543                 function fill_winddir(js) {
 544                         var rr = js.r;
 545                         var point = winddir.series[0].points[0];
 546                         point.update(rr.Dir);
 547                 }
 548
 549                 window.onload = function() {
 550                         startws();
 551                         start_daychart();
 552                         start_windrose();
 553                         start_windspeed();
 554                         start_winddir();
 555                         window.setInterval(function() {
 556                                 if (ws === null)
 557                                         startws();
 558                         }, 15000);
 559                 }
 560
 561                 </script>
 562
 563                 <div id="container">
 564                         <div id="daychart" style="min-width: 400px; height: 400px; margin: 0 auto"> </div>
 565                 </div>
 566
 567                 <div id="container">
 568                         <table border="0" align="center">
 569                                 <tr>
 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>
 573                                 </tr>
 574                         </table>
 575                 </div>
 576
 577                 <div id="container">
 578                         <div id="start-template">
 579                                 <br><br>
 580                                 <table border=1 width=80% align="center">
 581                                         <tr>
 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>
 587                                         </tr>
 588                                         <tr>
 589                                                 <th>Pressure:</th><td><span id="Pressure"> </span></td>
 590                                                 <th>Trend:</th><td><span id="Pressure_Trend_txt"> </span></td>
 591                                         </tr>
 592                                         <tr>
 593                                                 <th>Temperature in:</th><td> <span id="Temp_In"> </span></td>
 594                                                 <th>Humidity:</th><td> <span id="Humidity_In"> </span></td>
 595                                         </tr>
 596                                         <tr>
 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>
 601                                         </tr>
 602                                         <tr>
 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>
 605                                         </tr>
 606                                         <tr>
 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>
 612                                         </tr>
 613                                 </table>
 614                         </div>
 615                 </div>
 616
 617
 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>
 626
 627         </body>
 628 </html>