templates/index.html.ep

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