templates/index.html.ep

   1 % my $url = url_for 'weather';
   2 % my $s;
   3 <!DOCTYPE html>
   4 <html>
   5         <head>
   6                 <title>DWeather</title>
   7                 <meta charset="utf-8">
   8                 <meta http-equiv="X-UA-Compatible" content="IE=edge">
   9                 <meta name="viewport" content="width=device-width, initial-scale=1">
  10
  11                 <!-- Latest compiled and minified CSS -->
  12                 <link rel="stylesheet" href="css/bootstrap.min.css">
  13
  14                 <!-- Optional theme -->
  15                 <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  16
  17         </head>
  18         <body>
  19                 <center><h1>High View Weather</h1></center>
  20
  21                 <script>
  22                 var ws;
  23                 var daychart;
  24                 var daychart_days = <%= $main::histdays %>;
  25                 var windrose;
  26                 var windrose_mins = <%= $main::windmins %>;
  27                 var windspeed;
  28                 var winddir;
  29                 var updatespermin = <%= $main::updatepermin %>;
  30
  31                 var h = new Object();
  32
  33                 function do_debug(text) {
  34                         document.getElementById("do_debug").innerHTML = text;
  35                 }
  36
  37                 function update_h(key, value) {
  38                         h[key] = value;
  39                 }
  40
  41                 function fill_html(key,value) {
  42                         var d = document.getElementById(key);
  43                         if (d !== null) {
  44                                 d.innerHTML = value;
  45                         }
  46                 }
  47
  48                 function traverse(o, func) {
  49                         console.log(o);
  50                         for (var i in o) {
  51                                 if (o[i] !== null && typeof(o[i])==="object") {
  52                                         traverse(o[i], func);
  53                                 } else {
  54                                         func(i, o[i]);
  55                                 }
  56                         }
  57                 }
  58
  59                 var lastwind = 0;
  60                 var lastdir = 0;
  61                 var lastt = 0;
  62
  63                 function startws() {
  64                         ws = new WebSocket('<%= $url->to_abs %>');
  65
  66                         if (typeof(ws) !== null) {
  67                                 ws.onmessage = function (event) {
  68                                         var js = JSON.parse(event.data);
  69                                         if (js !== null && typeof(js) === 'object') {
  70                                                 traverse(js, fill_html);
  71 //                                              traverse(js, update_h);
  72 //                                              document.getElementById("hh").innerHTML = JSON.stringify(h);
  73                                                 if ("h" in js) {
  74                                                         fill_daychart(js, daychart_days);
  75                                                 }
  76                                                 if ("r" in js || "m" in js) {
  77                                                         var rr;
  78                                                         rr = js.r || js.m;
  79                                                         if (!("Dir" in rr))
  80                                                                 rr.Dir = lastdir;
  81                                                         if (!("Wind" in rr))
  82                                                                 rr.Wind = lastwind;
  83                                                         fill_windrose(rr, windrose_mins * updatespermin);
  84                                                         fill_windspeed(rr);
  85                                                         fill_winddir(rr);
  86                                                         lastwind = rr.Wind;
  87                                                         lastdir = rr.Dir;
  88                                                 }
  89                                         }
  90                                 };
  91                                 ws.onopen = function (event) {
  92                                         document.getElementById("wsconnect").innerHTML = 'ws connected to: <%= $url->to_abs %>';
  93                                         ws.send('WebSocket support works!');
  94                                 };
  95                                 ws.onclose = function(event) {
  96                                         document.getElementById("wsconnect").innerHTML = 'ws disconnected, refresh to restart';
  97                                         ws = null;
  98                                 }
  99                         } else {
 100                                 document.body.innerHTML += 'Webserver only works with Websocket aware browsers';
 101                         }
 102                 }
 103
 104                 function start_daychart() {
 105                         daychart = new Highcharts.Chart({
 106                                 chart: {
 107                                         renderTo: 'daychart',
 108                                         zoomType: 'xy'
 109                                 },
 110                                 title: {
 111                                         text: 'Five Day Chart'
 112                                 },
 113                                 xAxis: [{
 114                                         type: 'datetime',
 115 //                                      categories: [],
 116                                         crosshair: true
 117                                 }],
 118                                 yAxis: [{ // Primary yAxis
 119                                         labels: {
 120                                                 format: '{value}°C',
 121                                                 style: {
 122                                                         color: '#ff0000'
 123                                                 }
 124                                         },
 125                                         title: {
 126                                                 text: 'Temperature',
 127                                                 style: {
 128                                                         color: '#ff0000'
 129                                                 }
 130                                         },
 131                                         opposite: true
 132
 133                                 }, { // Secondary yAxis
 134                                         gridLineWidth: 0,
 135                                         title: {
 136                                                 text: 'Rainfall',
 137                                                 style: {
 138                                                         color: Highcharts.getOptions().colors[0]
 139                                                 }
 140                                         },
 141                                         labels: {
 142                                                 format: '{value} mm',
 143                                                 style: {
 144                                                         color: Highcharts.getOptions().colors[0]
 145                                                 }
 146                                         }
 147
 148                                 }, { // Tertiary yAxis
 149                                         gridLineWidth: 0,
 150                                         title: {
 151                                                 text: 'Sea-Level Pressure',
 152                                                 style: {
 153                                                         color: Highcharts.getOptions().colors[1]
 154                                                 }
 155                                         },
 156                                         labels: {
 157                                                 format: '{value} mb',
 158                                                 style: {
 159                                                         color: Highcharts.getOptions().colors[1]
 160                                                 }
 161                                         },
 162                                         opposite: true
 163                                 }],
 164                                 tooltip: {
 165                                         shared: true
 166                                 },
 167                                 legend: {
 168                                         layout: 'vertical',
 169                                         align: 'left',
 170                                         x: 80,
 171                                         verticalAlign: 'top',
 172                                         y: 55,
 173                                         floating: true,
 174                                         backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
 175                                 },
 176                                 exporting: {
 177                                         buttons: {
 178                                                 contextButton: {
 179                                                         enabled: false
 180                                                 }
 181                                         }
 182                                 },
 183                                 series: [{
 184                                         name: 'Rainfall',
 185                                         type: 'column',
 186                                         yAxis: 1,
 187                                         labels: {
 188 //                                              enabled: true,
 189 //                                              format: '{point.y:.1f}', // one decimal
 190 //                                              rotation: -90,
 191                                                 overflow: 'justify'
 192                                         },
 193                                         data: [
 194                                             <% $s = "";
 195                                                    for (@main::last5daysh) {
 196                                                       my $r = $main::json->decode($_);
 197                                                       $s .=  "[" . $r->{t}*1000 . "," . $r->{h}->{Rain_1h} . "]," if $r && exists $r->{t} && exists $r->{h}->{Rain_1h};
 198                                                    }
 199                                                    chop $s if length $s;
 200                                                 %><%= $s %>
 201                                         ],
 202                                         tooltip: {
 203                                                 valueSuffix: ' mm'
 204                                         }
 205
 206                                 }, {
 207                                         name: 'Sea-Level Pressure',
 208                                         type: 'spline',
 209                                         yAxis: 2,
 210                                         data: [
 211                                                 <% $s = "";
 212                                                    for (@main::last5daysh) {
 213                                                       my $r = $main::json->decode($_);
 214                                                       $s .=  "[" . $r->{t}*1000 . "," . $r->{h}->{Pressure} . "]," if $r && exists $r->{t} && exists $r->{h}->{Pressure};
 215                                                    }
 216                                                    chop $s if length $s;
 217                                                 %><%= $s %>
 218                                         ],
 219                                         marker: {
 220                                                 enabled: false
 221                                         },
 222                                         dashStyle: 'shortdot',
 223                                         tooltip: {
 224                                                 valueSuffix: ' mb'
 225                                         }
 226
 227                                 }, {
 228                                         name: 'Temperature',
 229                                         type: 'spline',
 230                                         color: '#ff0000',
 231                                         data: [
 232                                                 <% $s = "";
 233                                                    for (@main::last5daysh) {
 234                                                       my $r = $main::json->decode($_);
 235                                                       $s .=  "[" . $r->{t}*1000 . "," . $r->{h}->{Temp_Out} . "]," if $r && exists $r->{t} && exists $r->{h}->{Temp_Out};
 236                                                    }
 237                                                    chop $s if length $s;
 238                                                 %><%= $s %>
 239                                         ],
 240                                         tooltip: {
 241                                                 valueSuffix: ' °C'
 242                                         }
 243                                 }]
 244                         });
 245                 }
 246
 247                 function start_windrose() {
 248
 249                         // Load the fonts
 250                         Highcharts.createElement('link', {
 251                                 href: '//fonts.googleapis.com/css?family=Dosis:400,600',
 252                                 rel: 'stylesheet',
 253                                 type: 'text/css'
 254                         }, null, document.getElementsByTagName('head')[0]);
 255
 256                         Highcharts.theme = {
 257                                 colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
 258                                         "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
 259                                 chart: {
 260                                         backgroundColor: null,
 261                                         style: {
 262                                                 fontFamily: "Dosis, sans-serif"
 263                                         }
 264                                 },
 265                                 title: {
 266                                         style: {
 267                                                 fontSize: '16px',
 268                                                 fontWeight: 'bold',
 269                                                 textTransform: 'uppercase'
 270                                         }
 271                                 },
 272                                 tooltip: {
 273                                         borderWidth: 0,
 274                                         backgroundColor: 'rgba(219,219,216,0.8)',
 275                                         shadow: false
 276                                 },
 277                                 legend: {
 278                                         itemStyle: {
 279                                                 fontWeight: 'bold',
 280                                                 fontSize: '13px'
 281                                         }
 282                                 },
 283                                 xAxis: {
 284                                         gridLineWidth: 1,
 285                                         labels: {
 286                                                 style: {
 287                                                         fontSize: '12px'
 288                                                 }
 289                                         }
 290                                 },
 291                                 yAxis: {
 292                                         minorTickInterval: 'auto',
 293                                         title: {
 294                                                 style: {
 295                                                         textTransform: 'uppercase'
 296                                                 }
 297                                         },
 298                                         labels: {
 299                                                 style: {
 300                                                         fontSize: '12px'
 301                                                 }
 302                                         }
 303                                 },
 304                                 plotOptions: {
 305                                         candlestick: {
 306                                                 lineColor: '#404048'
 307                                         }
 308                                 },
 309
 310
 311                                 // General
 312                                 background2: '#F0F0EA'
 313
 314                         };
 315
 316                         // Apply the theme
 317                         Highcharts.setOptions(Highcharts.theme);
 318
 319                         windrose = new Highcharts.Chart({
 320                                 chart: {
 321                                         polar: true,
 322                                         renderTo: 'windrose'
 323                                 },
 324
 325                                 title: {
 326                                         text: 'Wind Rose'
 327                                 },
 328
 329                                 pane: {
 330                                         startAngle: 0,
 331                                         endAngle: 360
 332                                 },
 333
 334                                 xAxis: {
 335                                         tickInterval: 15,
 336                                         min: 0,
 337                                         max: 360,
 338                                         labels: {
 339                                                 formatter: function () {
 340                                                         return this.value + '°';
 341                                                 }
 342                                         }
 343                                 },
 344
 345                                 yAxis: {
 346                                         min: 0
 347                                 },
 348
 349                                 plotOptions: {
 350                                         series: {
 351                                                 pointStart: 0,
 352                                                 pointInterval: 15
 353                                         },
 354                                         column: {
 355                                                 pointPadding: 0,
 356                                                 groupPadding: 0
 357                                         }
 358                                 },
 359                                 exporting: {
 360                                         buttons: {
 361                                                 contextButton: {
 362                                                         enabled: false
 363                                                 }
 364                                         }
 365                                 },
 366
 367                                 series: [ {
 368                                         type: 'scatter',
 369                                         name: 'Wind mph',
 370                                         data: [
 371                                                 <% my ($d, $w);
 372                                                    $s = "";
 373                                                    $d = 0; $w = 0;
 374                                                for (@main::last10minsr) {
 375                                                       my $r = $main::json->decode($_);
 376                                                           if ($r) {
 377                                                                   $r->{r}->{Dir} ||= $d;
 378                                                                   $r->{r}->{Wind} ||= $w;
 379                                                                   $s .=  "[" . $r->{r}->{Dir} . "," . main::nearest(0.1, $r->{r}->{Wind}*2.23694) . "],";
 380                                                                   $d = $r->{r}->{Dir};
 381                                                                   $w = $r->{r}->{Wind};
 382                                                           }
 383                                                    }
 384                                                    chop $s if length $s;
 385                                                 %><%= $s %>
 386                                         ]
 387                                 }]
 388                         });
 389                 }
 390
 391                 function start_windspeed() {
 392                         windspeed = new Highcharts.Chart({
 393                                 chart: {
 394                                         type: 'gauge',
 395                                         renderTo: 'windspeed',
 396                                         plotBackgroundColor: null,
 397                                         plotBackgroundImage: null,
 398                                         plotBorderWidth: 0,
 399                                         plotShadow: false
 400                                 },
 401
 402                                 title: {
 403                                         text: 'Wind Speed'
 404                                 },
 405
 406                                 pane: {
 407                                         startAngle: -150,
 408                                         endAngle: 150,
 409                                         background: [{
 410                                                 backgroundColor: {
 411                                                         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 412                                                         stops: [
 413                                                                 [0, '#FFF'],
 414                                                                 [1, '#333']
 415                                                         ]
 416                                                 },
 417                                                 borderWidth: 0,
 418                                                 outerRadius: '109%'
 419                                         }, {
 420                                                 backgroundColor: {
 421                                                         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 422                                                         stops: [
 423                                                                 [0, '#333'],
 424                                                                 [1, '#FFF']
 425                                                         ]
 426                                                 },
 427                                                 borderWidth: 1,
 428                                                 outerRadius: '107%'
 429                                         }, {
 430                                                 // default background
 431                                         }, {
 432                                                 backgroundColor: '#DDD',
 433                                                 borderWidth: 0,
 434                                                 outerRadius: '105%',
 435                                                 innerRadius: '103%'
 436                                         }]
 437                                 },
 438
 439                                 // the value axis
 440                                 yAxis: {
 441                                         min: 0,
 442                                         max: 50,
 443
 444                                         minorTickInterval: 'auto',
 445                                         minorTickWidth: 1,
 446                                         minorTickLength: 10,
 447                                         minorTickPosition: 'inside',
 448                                         minorTickColor: '#666',
 449
 450                                         tickPixelInterval: 30,
 451                                         tickWidth: 2,
 452                                         tickPosition: 'inside',
 453                                         tickLength: 10,
 454                                         tickColor: '#666',
 455                                         labels: {
 456                                                 step: 2,
 457                                                 rotation: 'auto'
 458                                         },
 459                                         title: {
 460                                                 text: 'mph'
 461                                         },
 462                                         plotBands: [{
 463                                                 from: 0,
 464                                                 to: 15,
 465                                                 color: '#55BF3B' // green
 466                                         }, {
 467                                                 from: 16,
 468                                                 to: 29,
 469                                                 color: '#DDDF0D' // yellow
 470                                         }, {
 471                                                 from: 30,
 472                                                 to: 50,
 473                                                 color: '#DF5353' // red
 474                                         }]
 475                                 },
 476                                 exporting: {
 477                                         buttons: {
 478                                                 contextButton: {
 479                                                         enabled: false
 480                                                 }
 481                                         }
 482                                 },
 483
 484                                 series: [{
 485                                         name: 'Speed',
 486                                         data: [0],
 487                                         tooltip: {
 488                                                 valueSuffix: ' mph'
 489                                         }
 490                                 }]
 491                         });
 492                 }
 493
 494                 function start_winddir() {
 495                         winddir = new Highcharts.Chart({
 496                                 chart: {
 497                                         type: 'gauge',
 498                                         renderTo: 'winddir',
 499                                         plotBackgroundColor: null,
 500                                         plotBackgroundImage: null,
 501                                         plotBorderWidth: 0,
 502                                         plotShadow: false
 503                                 },
 504
 505                                 title: {
 506                                         text: 'Wind Direction'
 507                                 },
 508
 509                                 pane: {
 510                                         startAngle: 0,
 511                                         endAngle: 360,
 512                                         background: [{
 513                                                 backgroundColor: {
 514                                                         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 515                                                         stops: [
 516                                                                 [0, '#FFF'],
 517                                                                 [1, '#333']
 518                                                         ]
 519                                                 },
 520                                                 borderWidth: 0,
 521                                                 outerRadius: '109%'
 522                                         }, {
 523                                                 backgroundColor: {
 524                                                         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 525                                                         stops: [
 526                                                                 [0, '#333'],
 527                                                                 [1, '#FFF']
 528                                                         ]
 529                                                 },
 530                                                 borderWidth: 1,
 531                                                 outerRadius: '107%'
 532                                         }, {
 533                                                 // default background
 534                                         }, {
 535                                                 backgroundColor: '#DDD',
 536                                                 borderWidth: 0,
 537                                                 outerRadius: '105%',
 538                                                 innerRadius: '103%'
 539                                         }]
 540                                 },
 541
 542                                 // the value axis
 543                                 yAxis: {
 544                                         min: 0,
 545                                         max: 359,
 546
 547                                         minorTickInterval: 'auto',
 548                                         minorTickWidth: 1,
 549                                         minorTickLength: 10,
 550                                         minorTickPosition: 'inside',
 551                                         minorTickColor: '#666',
 552
 553                                         tickPixelInterval: 15,
 554                                         tickWidth: 2,
 555                                         tickPosition: 'inside',
 556                                         tickLength: 10,
 557                                         tickColor: '#666',
 558                                         labels: {
 559                                                 step: 2,
 560                                                 rotation: 'auto'
 561                                         },
 562                                         title: {
 563                                                 text:  '° deg'
 564                                         },
 565                                 },
 566                                 exporting: {
 567                                         buttons: {
 568                                                 contextButton: {
 569                                                         enabled: false
 570                                                 }
 571                                         }
 572                                 },
 573
 574                                 series: [{
 575                                         name: 'Direction',
 576                                         data: [0],
 577                                         tooltip: {
 578                                                 valueSuffix: ' ° deg'
 579                                         }
 580                                 }]
 581                         });
 582                 }
 583
 584                 function fill_daychart(js, days) {
 585                         var rainfall = daychart.series[0].data.length > (days * 48);
 586                         var pressure = daychart.series[1].data.length > (days * 48);
 587                         var temp = daychart.series[2].data.length > (days * 48);
 588
 589                         var hr = js.h;
 590                         var t = js.t * 1000;
 591                         var ra = [t, hr.Rain_1h];
 592                         var pr = [t, hr.Pressure];
 593                         var te = [t, hr.Temp_Out];
 594
 595 //                      do_debug(js.tm + " " + t + " " + te + "<br>");
 596                         daychart.series[0].addPoint(ra, true, rainfall);
 597                         daychart.series[1].addPoint(pr, true, pressure);
 598                         daychart.series[2].addPoint(te, true, temp);
 599                 }
 600
 601                 var conv = 2.23694;
 602
 603                 function fill_windrose(rr, points) {
 604                         var p = windrose.series[0].data.length > points;
 605                         var v = [rr.Dir, (rr.Wind*conv)];
 606                         windrose.series[0].addPoint(v, true, p);
 607                 }
 608
 609                 function fill_windspeed(rr) {
 610                         var point = windspeed.series[0].points[0];
 611                         point.update(Math.round(rr.Wind*conv));
 612                 }
 613
 614                 function fill_winddir(rr) {
 615                         var point = winddir.series[0].points[0];
 616                         point.update(rr.Dir);
 617                 }
 618
 619                 window.onload = function() {
 620                         startws();
 621                         start_daychart();
 622                         start_windrose();
 623                         start_windspeed();
 624                         start_winddir();
 625                         window.setInterval(function() {
 626                                 if (ws === null)
 627                                         startws();
 628                         }, 15000);
 629                 }
 630
 631                 </script>
 632
 633                 <div id="container">
 634                         <div id="daychart" style="min-width: 400px; height: 400px; margin: 0 auto"> </div>
 635                 </div>
 636
 637                 <div id="container">
 638                         <table border="0" align="center">
 639                                 <tr>
 640                                         <td id="windrose" style="min-width: 350px; max-width: 400px; height: 330px; margin: 0 auto"> </td>
 641                                         <td id="windspeed" style="min-width: 280px; max-width: 400px; height: 270px; margin: 0 auto"> </td>
 642                                         <td id="winddir" style="min-width: 280px; max-width: 400px; height: 270px; margin: 0 auto"> </td>
 643                                 </tr>
 644                         </table>
 645                 </div>
 646
 647                 <div id="container">
 648                         <div id="start-template">
 649                                 <br><br>
 650                                 <table class="table">
 651                                         <tr>
 652                                                 <th>Time:</th><td><span id="tm"> </span></td>
 653                                                 <th>Sunrise:</th><td><span id="Sunrise"> </span></td>
 654                                                 <th>Sunset:</th><td><span id="Sunset"> </span></td>
 655                                                 <th>Console Volts:</th><td><span id="Batt_Console"> </span></td>
 656                                                 <th>TX Battery OK:</th><td><span id="Batt_TX_OK"> </span></td>
 657                                         </tr>
 658                                         <tr>
 659                                                 <th>Pressure:</th><td><span id="Pressure"> </span></td>
 660                                                 <th>Trend:</th><td><span id="Pressure_Trend_txt"> </span></td>
 661                                         </tr>
 662                                         <tr>
 663                                                 <th>Temperature in:</th><td> <span id="Temp_In"> </span></td>
 664                                                 <th>Humidity:</th><td> <span id="Humidity_In"> </span></td>
 665                                         </tr>
 666                                         <tr><th>Temperature out:</th><td> <span id="Temp_Out"> </span></td>
 667                                                 <th>Min:</th><td> <span id="Temp_Out_Min"> </span> @ <span id="Temp_Out_Min_T"> </span></td>
 668                                                 <th>Max:</th><td> <span id="Temp_Out_Max"> </span> @ <span id="Temp_Out_Max_T"> </span></td>
 669                                                 <th>Humidity:</th><td> <span id="Humidity_Out"> </span></td>
 670                                                 <th>Dew Point:</th><td> <span id="Dew_Point"> </span></td>
 671                                         </tr>
 672                                         <tr><th>Wind:</th><td><span id="Wind"> </span> mph @ <span id="Dir"> </span> deg</td>
 673                                                 <th>Wind Dir Minute Avg:</th><td> <span id="Dir_1m">  </span></td>
 674                                                 <th>Wind Speed Minute Avg:</th><td> <span id="Wind_1m">  </span></td>
 675                                         </tr>
 676                                         <tr>
 677                                                 <th>Rain 30mins:</th><td> <span id="Rain_1h"> </span></td>
 678                                                 <th>Day:</th><td> <span id="Rain_Day"> </span></td>
 679                                                 <th>24hrs:</th><td> <span id="Rain_24h"> </span></td>
 680                                                 <th>Month:</th><td> <span id="Rain_Month"> </span></td>
 681                                                 <th>Year:</th><td> <span id="Rain_Year"> </span></td>
 682                                         </tr>
 683                                 </table>
 684                         </div>
 685                 </div>
 686
 687
 688                 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 689                 <script src="js/jquery.min.js"></script>
 690                 <!-- Latest compiled and minified JavaScript -->
 691                 <script src="js/bootstrap.min.js"></script>
 692                 <!-- High Chart stuff -->
 693                 <script src="js/highcharts.js"></script>
 694                 <script src="js/highcharts-more.js"></script>
 695                 <script src="js/modules/exporting.js"></script>
 696
 697         </body>
 698 </html>