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                                 }, { // Tertiary yAxis
 164                                         gridLineWidth: 0,
 165                                         floor: 0,
 166                                         ceiling: 100,
 167                                         title: {
 168                                                 text: 'Humidity',
 169                                                 style: {
 170                                                         color: '#008800'
 171                                                 }
 172                                         },
 173                                         labels: {
 174                                                 format: '{value} %',
 175                                                 style: {
 176                                                         color: '#008800'
 177                                                 }
 178                                         },
 179 //                                      opposite: true
 180                                 }],
 181                                 tooltip: {
 182                                         shared: true
 183                                 },
 184                                 legend: {
 185                                         layout: 'vertical',
 186                                         align: 'left',
 187                                         x: 120,
 188                                         verticalAlign: 'top',
 189                                         y: 55,
 190                                         floating: true,
 191                                         backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
 192                                 },
 193                                 exporting: {
 194                                         buttons: {
 195                                                 contextButton: {
 196                                                         enabled: false
 197                                                 }
 198                                         }
 199                                 },
 200                                 series: [{
 201                                         name: 'Rainfall',
 202                                         type: 'column',
 203                                         yAxis: 1,
 204                                         labels: {
 205 //                                              enabled: true,
 206 //                                              format: '{point.y:.1f}', // one decimal
 207 //                                              rotation: -90,
 208                                                 overflow: 'justify'
 209                                         },
 210                                         data: [
 211                                             <% $s = "";
 212                                                    for (@main::last5daysh) {
 213                                                       my $r = $main::json->decode($_);
 214                                                       $s .=  "[" . $r->{t}*1000 . "," . $r->{h}->{Rain_1h} . "]," if $r && exists $r->{t} && exists $r->{h}->{Rain_1h};
 215                                                    }
 216                                                    chop $s if length $s;
 217                                                 %><%= $s %>
 218                                         ],
 219                                         tooltip: {
 220                                                 valueSuffix: ' mm'
 221                                         }
 222
 223                                 }, {
 224                                         name: 'Sea-Level Pressure',
 225                                         type: 'spline',
 226                                         yAxis: 2,
 227                                         data: [
 228                                                 <% $s = "";
 229                                                    for (@main::last5daysh) {
 230                                                       my $r = $main::json->decode($_);
 231                                                       $s .=  "[" . $r->{t}*1000 . "," . $r->{h}->{Pressure} . "]," if $r && exists $r->{t} && exists $r->{h}->{Pressure};
 232                                                    }
 233                                                    chop $s if length $s;
 234                                                 %><%= $s %>
 235                                         ],
 236                                         marker: {
 237                                                 enabled: false
 238                                         },
 239                                         dashStyle: 'shortdot',
 240                                         tooltip: {
 241                                                 valueSuffix: ' mb'
 242                                         }
 243
 244                                 }, {
 245                                         name: 'Temperature',
 246                                         type: 'spline',
 247                                         yAxis: 0,
 248                                         color: '#ff0000',
 249                                         data: [
 250                                                 <% $s = "";
 251                                                    for (@main::last5daysh) {
 252                                                       my $r = $main::json->decode($_);
 253                                                       $s .=  "[" . $r->{t}*1000 . "," . $r->{h}->{Temp_Out} . "]," if $r && exists $r->{t} && exists $r->{h}->{Temp_Out};
 254                                                    }
 255                                                    chop $s if length $s;
 256                                                 %><%= $s %>
 257                                         ],
 258                                         tooltip: {
 259                                                 valueSuffix: ' °C'
 260                                         }
 261                                 }, {
 262                                         name: 'Humidity',
 263                                         type: 'spline',
 264                                         color: '#008800',
 265                                         yAxis: 3,
 266                                         data: [
 267                                                 <% $s = "";
 268                                                    for (@main::last5daysh) {
 269                                                       my $r = $main::json->decode($_);
 270                                                       $s .=  "[" . $r->{t}*1000 . "," . $r->{h}->{Humidity_Out} . "]," if $r && exists $r->{t} && exists $r->{h}->{Humidity_Out};
 271                                                    }
 272                                                    chop $s if length $s;
 273                                                 %><%= $s %>
 274                                         ],
 275                                         marker: {
 276                                                 enabled: false
 277                                         },
 278                                         dashStyle: 'shortdot',
 279                                         tooltip: {
 280                                                 valueSuffix: ' %'
 281                                         }
 282                                 }]
 283                         });
 284                 }
 285
 286                 function start_windrose() {
 287
 288                         // Load the fonts
 289                         Highcharts.createElement('link', {
 290                                 href: '//fonts.googleapis.com/css?family=Dosis:400,600',
 291                                 rel: 'stylesheet',
 292                                 type: 'text/css'
 293                         }, null, document.getElementsByTagName('head')[0]);
 294
 295                         Highcharts.theme = {
 296                                 colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
 297                                         "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
 298                                 chart: {
 299                                         backgroundColor: null,
 300                                         style: {
 301                                                 fontFamily: "Dosis, sans-serif"
 302                                         }
 303                                 },
 304                                 title: {
 305                                         style: {
 306                                                 fontSize: '16px',
 307                                                 fontWeight: 'bold',
 308                                                 textTransform: 'uppercase'
 309                                         }
 310                                 },
 311                                 tooltip: {
 312                                         borderWidth: 0,
 313                                         backgroundColor: 'rgba(219,219,216,0.8)',
 314                                         shadow: false
 315                                 },
 316                                 legend: {
 317                                         itemStyle: {
 318                                                 fontWeight: 'bold',
 319                                                 fontSize: '13px'
 320                                         }
 321                                 },
 322                                 xAxis: {
 323                                         gridLineWidth: 1,
 324                                         labels: {
 325                                                 style: {
 326                                                         fontSize: '12px'
 327                                                 }
 328                                         }
 329                                 },
 330                                 yAxis: {
 331                                         minorTickInterval: 'auto',
 332                                         title: {
 333                                                 style: {
 334                                                         textTransform: 'uppercase'
 335                                                 }
 336                                         },
 337                                         labels: {
 338                                                 style: {
 339                                                         fontSize: '12px'
 340                                                 }
 341                                         }
 342                                 },
 343                                 plotOptions: {
 344                                         candlestick: {
 345                                                 lineColor: '#404048'
 346                                         }
 347                                 },
 348
 349
 350                                 // General
 351                                 background2: '#F0F0EA'
 352
 353                         };
 354
 355                         // Apply the theme
 356                         Highcharts.setOptions(Highcharts.theme);
 357
 358                         windrose = new Highcharts.Chart({
 359                                 chart: {
 360                                         polar: true,
 361                                         renderTo: 'windrose'
 362                                 },
 363
 364                                 title: {
 365                                         text: 'Wind Rose'
 366                                 },
 367
 368                                 pane: {
 369                                         startAngle: 0,
 370                                         endAngle: 360
 371                                 },
 372
 373                                 xAxis: {
 374                                         tickInterval: 15,
 375                                         min: 0,
 376                                         max: 360,
 377                                         labels: {
 378                                                 formatter: function () {
 379                                                         return this.value + '°';
 380                                                 }
 381                                         }
 382                                 },
 383
 384                                 yAxis: {
 385                                         min: 0
 386                                 },
 387
 388                                 plotOptions: {
 389                                         series: {
 390                                                 pointStart: 0,
 391                                                 pointInterval: 15
 392                                         },
 393                                         column: {
 394                                                 pointPadding: 0,
 395                                                 groupPadding: 0
 396                                         }
 397                                 },
 398                                 exporting: {
 399                                         buttons: {
 400                                                 contextButton: {
 401                                                         enabled: false
 402                                                 }
 403                                         }
 404                                 },
 405
 406                                 series: [ {
 407                                         type: 'scatter',
 408                                         name: 'Wind mph',
 409                                         data: [
 410                                                 <% my ($d, $w);
 411                                                    $s = "";
 412                                                    $d = 0; $w = 0;
 413                                                for (@main::last10minsr) {
 414                                                       my $r = $main::json->decode($_);
 415                                                           if ($r) {
 416                                                                   $r->{r}->{Dir} ||= $d;
 417                                                                   $r->{r}->{Wind} ||= $w;
 418                                                                   $s .=  "[" . $r->{r}->{Dir} . "," . main::nearest(0.1, $r->{r}->{Wind}*2.23694) . "],";
 419                                                                   $d = $r->{r}->{Dir};
 420                                                                   $w = $r->{r}->{Wind};
 421                                                           }
 422                                                    }
 423                                                    chop $s if length $s;
 424                                                 %><%= $s %>
 425                                         ]
 426                                 }]
 427                         });
 428                 }
 429
 430                 function start_windspeed() {
 431                         windspeed = new Highcharts.Chart({
 432                                 chart: {
 433                                         type: 'gauge',
 434                                         renderTo: 'windspeed',
 435                                         plotBackgroundColor: null,
 436                                         plotBackgroundImage: null,
 437                                         plotBorderWidth: 0,
 438                                         plotShadow: false
 439                                 },
 440
 441                                 title: {
 442                                         text: 'Wind Speed'
 443                                 },
 444
 445                                 pane: {
 446                                         startAngle: -150,
 447                                         endAngle: 150,
 448                                         background: [{
 449                                                 backgroundColor: {
 450                                                         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 451                                                         stops: [
 452                                                                 [0, '#FFF'],
 453                                                                 [1, '#333']
 454                                                         ]
 455                                                 },
 456                                                 borderWidth: 0,
 457                                                 outerRadius: '109%'
 458                                         }, {
 459                                                 backgroundColor: {
 460                                                         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 461                                                         stops: [
 462                                                                 [0, '#333'],
 463                                                                 [1, '#FFF']
 464                                                         ]
 465                                                 },
 466                                                 borderWidth: 1,
 467                                                 outerRadius: '107%'
 468                                         }, {
 469                                                 // default background
 470                                         }, {
 471                                                 backgroundColor: '#DDD',
 472                                                 borderWidth: 0,
 473                                                 outerRadius: '105%',
 474                                                 innerRadius: '103%'
 475                                         }]
 476                                 },
 477
 478                                 // the value axis
 479                                 yAxis: {
 480                                         min: 0,
 481                                         max: 50,
 482
 483                                         minorTickInterval: 'auto',
 484                                         minorTickWidth: 1,
 485                                         minorTickLength: 10,
 486                                         minorTickPosition: 'inside',
 487                                         minorTickColor: '#666',
 488
 489                                         tickPixelInterval: 30,
 490                                         tickWidth: 2,
 491                                         tickPosition: 'inside',
 492                                         tickLength: 10,
 493                                         tickColor: '#666',
 494                                         labels: {
 495                                                 step: 2,
 496                                                 rotation: 'auto'
 497                                         },
 498                                         title: {
 499                                                 text: 'mph'
 500                                         },
 501                                         plotBands: [{
 502                                                 from: 0,
 503                                                 to: 15,
 504                                                 color: '#55BF3B' // green
 505                                         }, {
 506                                                 from: 16,
 507                                                 to: 29,
 508                                                 color: '#DDDF0D' // yellow
 509                                         }, {
 510                                                 from: 30,
 511                                                 to: 50,
 512                                                 color: '#DF5353' // red
 513                                         }]
 514                                 },
 515                                 exporting: {
 516                                         buttons: {
 517                                                 contextButton: {
 518                                                         enabled: false
 519                                                 }
 520                                         }
 521                                 },
 522
 523                                 series: [{
 524                                         name: 'Speed',
 525                                         data: [0],
 526                                         tooltip: {
 527                                                 valueSuffix: ' mph'
 528                                         }
 529                                 }]
 530                         });
 531                 }
 532
 533                 function start_winddir() {
 534                         winddir = new Highcharts.Chart({
 535                                 chart: {
 536                                         type: 'gauge',
 537                                         renderTo: 'winddir',
 538                                         plotBackgroundColor: null,
 539                                         plotBackgroundImage: null,
 540                                         plotBorderWidth: 0,
 541                                         plotShadow: false
 542                                 },
 543
 544                                 title: {
 545                                         text: 'Wind Direction'
 546                                 },
 547
 548                                 pane: {
 549                                         startAngle: 0,
 550                                         endAngle: 360,
 551                                         background: [{
 552                                                 backgroundColor: {
 553                                                         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 554                                                         stops: [
 555                                                                 [0, '#FFF'],
 556                                                                 [1, '#333']
 557                                                         ]
 558                                                 },
 559                                                 borderWidth: 0,
 560                                                 outerRadius: '109%'
 561                                         }, {
 562                                                 backgroundColor: {
 563                                                         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 564                                                         stops: [
 565                                                                 [0, '#333'],
 566                                                                 [1, '#FFF']
 567                                                         ]
 568                                                 },
 569                                                 borderWidth: 1,
 570                                                 outerRadius: '107%'
 571                                         }, {
 572                                                 // default background
 573                                         }, {
 574                                                 backgroundColor: '#DDD',
 575                                                 borderWidth: 0,
 576                                                 outerRadius: '105%',
 577                                                 innerRadius: '103%'
 578                                         }]
 579                                 },
 580
 581                                 // the value axis
 582                                 yAxis: {
 583                                         min: 0,
 584                                         max: 359,
 585
 586                                         minorTickInterval: 'auto',
 587                                         minorTickWidth: 1,
 588                                         minorTickLength: 10,
 589                                         minorTickPosition: 'inside',
 590                                         minorTickColor: '#666',
 591
 592                                         tickPixelInterval: 15,
 593                                         tickWidth: 2,
 594                                         tickPosition: 'inside',
 595                                         tickLength: 10,
 596                                         tickColor: '#666',
 597                                         labels: {
 598                                                 step: 2,
 599                                                 rotation: 'auto'
 600                                         },
 601                                         title: {
 602                                                 text:  '° deg'
 603                                         },
 604                                 },
 605                                 exporting: {
 606                                         buttons: {
 607                                                 contextButton: {
 608                                                         enabled: false
 609                                                 }
 610                                         }
 611                                 },
 612
 613                                 series: [{
 614                                         name: 'Direction',
 615                                         data: [0],
 616                                         tooltip: {
 617                                                 valueSuffix: ' ° deg'
 618                                         }
 619                                 }]
 620                         });
 621                 }
 622
 623                 function fill_daychart(js, days) {
 624                         var rainfall = daychart.series[0].data.length > (days * 48);
 625                         var pressure = daychart.series[1].data.length > (days * 48);
 626                         var temp = daychart.series[2].data.length > (days * 48);
 627                         var humidity = daychart.series[3].data.length > (days * 48);
 628
 629                         var hr = js.h;
 630                         var t = js.t * 1000;
 631                         var ra = [t, hr.Rain_1h];
 632                         var pr = [t, hr.Pressure];
 633                         var te = [t, hr.Temp_Out];
 634                         var hu = [t, hr.Humidity_Out];
 635
 636 //                      do_debug(js.tm + " " + t + " " + te + "<br>");
 637                         daychart.series[0].addPoint(ra, true, rainfall);
 638                         daychart.series[1].addPoint(pr, true, pressure);
 639                         daychart.series[2].addPoint(te, true, temp);
 640                         daychart.series[3].addPoint(hu, true, humidity);
 641                 }
 642
 643                 var conv = 2.23694;
 644
 645                 function fill_windrose(rr, points) {
 646                         var p = windrose.series[0].data.length > points;
 647                         var v = [rr.Dir, (rr.Wind*conv)];
 648                         windrose.series[0].addPoint(v, true, p);
 649                 }
 650
 651                 function fill_windspeed(rr) {
 652                         var point = windspeed.series[0].points[0];
 653                         point.update(Math.round(rr.Wind*conv));
 654                 }
 655
 656                 function fill_winddir(rr) {
 657                         var point = winddir.series[0].points[0];
 658                         point.update(rr.Dir);
 659                 }
 660
 661                 window.onload = function() {
 662                         startws();
 663                         start_daychart();
 664                         start_windrose();
 665                         start_windspeed();
 666                         start_winddir();
 667                         window.setInterval(function() {
 668                                 if (ws === null)
 669                                         startws();
 670                         }, 15000);
 671                 }
 672
 673                 </script>
 674
 675                 <div id="container">
 676                         <div id="daychart" style="min-width: 400px; height: 400px; margin: 0 auto"> </div>
 677                 </div>
 678
 679                 <div id="container">
 680                         <table border="0" align="center">
 681                                 <tr>
 682                                         <td id="windrose" style="min-width: 350px; max-width: 400px; height: 330px; margin: 0 auto"> </td>
 683                                         <td id="windspeed" style="min-width: 280px; max-width: 400px; height: 270px; margin: 0 auto"> </td>
 684                                         <td id="winddir" style="min-width: 280px; max-width: 400px; height: 270px; margin: 0 auto"> </td>
 685                                 </tr>
 686                         </table>
 687                 </div>
 688
 689                 <div id="container">
 690                         <div id="start-template">
 691                                 <br><br>
 692                                 <table class="table">
 693                                         <tr>
 694                                                 <th width="7%">Time:</th><td width="7%"><span id="tm"> </span></td>
 695                                                 <th width="7%">Sunrise:</th><td width="7%"><span id="Sunrise"> </span></td>
 696                                                 <th width="7%">Sunset:</th><td width="7%"><span id="Sunset"> </span></td>
 697                                                 <th width="7%">Console Volts:</th><td width="7%"><span id="Batt_Console"> </span></td>
 698                                                 <th width="7%">TX Battery OK:</th><td width="7%"><span id="Batt_TX_OK"> </span></td>
 699                                         </tr>
 700                                         <tr>
 701                                                 <th>Pressure:</th><td><span id="Pressure"> </span> mb</td>
 702                                                 <th>Trend:</th><td><span id="Pressure_Trend_txt"> </span></td>
 703                                         </tr>
 704                                         <tr>
 705                                                 <th>Temperature in:</th><td> <span id="Temp_In"> </span> °C</td>
 706                                                 <th>Humidity:</th><td> <span id="Humidity_In"> </span> %</td>
 707                                         </tr>
 708                                         <tr><th>Temperature out:</th><td> <span id="Temp_Out"> </span> °C</td>
 709                                                 <th>Min:</th><td> <span id="Temp_Out_Min"> </span> °C @ <span id="Temp_Out_Min_T"> </span></td>
 710                                                 <th>Max:</th><td> <span id="Temp_Out_Max"> </span> °C @ <span id="Temp_Out_Max_T"> </span></td>
 711                                                 <th>Humidity:</th><td> <span id="Humidity_Out"> </span> %</td>
 712                                                 <th>Dew Point:</th><td> <span id="Dew_Point"> </span> °C</td>
 713                                         </tr>
 714                                         <tr><th>Wind:</th><td><span id="Dir"> </span> ° @ <span id="Wind"> </span> m/s</td>
 715                                                 <th>Wind Minute Avg:</th><td> <span id="Dir_1m"> </span> ° @ <span id="Wind_1m"> </span> m/s </td>
 716                                                 <th>Day Max Speed:</th><td> <span id="Wind_Max"> </span> m/s @ <span id="Wind_Max_T"> </span></td>
 717                                         </tr>
 718                                         <tr>
 719                                                 <th>Rain 30mins:</th><td> <span id="Rain_1h"> </span> mm</td>
 720                                                 <th>Day:</th><td> <span id="Rain_Day"> </span> mm</td>
 721                                                 <th>24hrs:</th><td> <span id="Rain_24h"> </span> mm</td>
 722                                                 <th>Month:</th><td> <span id="Rain_Month"> </span> mm</td>
 723                                                 <th>Year:</th><td> <span id="Rain_Year"> </span> mm</td>
 724                                         </tr>
 725                                 </table>
 726                         </div>
 727                 </div>
 728
 729
 730                 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 731                 <script src="js/jquery.min.js"></script>
 732                 <!-- Latest compiled and minified JavaScript -->
 733                 <script src="js/bootstrap.min.js"></script>
 734                 <!-- High Chart stuff -->
 735                 <script src="js/highcharts.js"></script>
 736                 <script src="js/highcharts-more.js"></script>
 737                 <script src="js/modules/exporting.js"></script>
 738
 739         </body>
 740 </html>