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