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                                                 %><%= $s %>
 303                                         ],
 304                                         tooltip: {
 305                                                 valueSuffix: ' °C'
 306                                         }
 307                                 }, {
 308                                         name: 'Humidity',
 309                                         type: 'spline',
 310                                         color: '#000000',
 311                                         yAxis: 3,
 312                                         data: [
 313                                                 <% $s = "";
 314                                                    for (@main::last5daysh) {
 315                                                       my $r = $main::json->decode($_);
 316                                                       $s .=  "[" . $r->{t}*1000 . "," . $r->{h}->{Humidity_Out} . "]," if $r && exists $r->{t} && exists $r->{h}->{Humidity_Out};
 317                                                    }
 318                                                    chop $s if length $s;
 319                                                 %><%= $s %>
 320                                         ],
 321                                         marker: {
 322                                                 enabled: false
 323                                         },
 324                                         dashStyle: 'shortdot',
 325                                         tooltip: {
 326                                                 valueSuffix: ' %'
 327                                         }
 328                                 }, {
 329                                         name: 'Temperature -(ve)',
 330                                         type: 'spline',
 331                                         yAxis: 0,
 332                                         color: '#0000ff',
 333                                         data: [
 334                                                 <% $s = ""; undef $lasttemp;
 335                                                    for (@main::last5daysh) {
 336                                                        my $r = $main::json->decode($_);
 337                                                            if ($r && exists $r->{t} && exists $r->{h}->{Temp_Out}) {
 338                                                                    my $temp = $r->{h}->{Temp_Out};
 339                                                                    my $tm = $r->{t}*1000;
 340                                                                    $lasttemp = $temp unless defined $lasttemp;
 341                                                                    if ($temp <= 0) {
 342                                                                            $s .= sprintf "[%s,0],", $tm-1 if $lasttemp > 0;
 343                                                                            $s .= sprintf "[%s,%s],", $tm, $temp;
 344                                                                    } else {
 345                                                                            $s .= sprintf "[%s,%s],", $tm, $lasttemp <= 0 ? 0 : "null";
 346                                                                    }
 347                                                                    $lasttemp = $temp;
 348                                                            }
 349                                                    }
 350                                                    chop $s if length $s;
 351                                                 %><%= $s %>
 352                                         ],
 353                                         tooltip: {
 354                                                 valueSuffix: ' °C'
 355                                         }
 356                                 }]
 357                         });
 358                 }
 359
 360                 function start_windrose() {
 361
 362                         // Load the fonts
 363                         Highcharts.createElement('link', {
 364                                 href: '//fonts.googleapis.com/css?family=Dosis:400,600',
 365                                 rel: 'stylesheet',
 366                                 type: 'text/css'
 367                         }, null, document.getElementsByTagName('head')[0]);
 368
 369                         Highcharts.theme = {
 370                                 colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
 371                                         "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
 372                                 chart: {
 373                                         backgroundColor: null,
 374                                         style: {
 375                                                 fontFamily: "Dosis, sans-serif"
 376                                         }
 377                                 },
 378                                 title: {
 379                                         style: {
 380                                                 fontSize: '16px',
 381                                                 fontWeight: 'bold',
 382                                                 textTransform: 'uppercase'
 383                                         }
 384                                 },
 385                                 tooltip: {
 386                                         borderWidth: 0,
 387                                         backgroundColor: 'rgba(219,219,216,0.8)',
 388                                         shadow: false
 389                                 },
 390                                 legend: {
 391                                         itemStyle: {
 392                                                 fontWeight: 'bold',
 393                                                 fontSize: '13px'
 394                                         }
 395                                 },
 396                                 xAxis: {
 397                                         gridLineWidth: 1,
 398                                         labels: {
 399                                                 style: {
 400                                                         fontSize: '12px'
 401                                                 }
 402                                         }
 403                                 },
 404                                 yAxis: {
 405                                         minorTickInterval: 'auto',
 406                                         title: {
 407                                                 style: {
 408                                                         textTransform: 'uppercase'
 409                                                 }
 410                                         },
 411                                         labels: {
 412                                                 style: {
 413                                                         fontSize: '12px'
 414                                                 }
 415                                         }
 416                                 },
 417                                 plotOptions: {
 418                                         candlestick: {
 419                                                 lineColor: '#404048'
 420                                         }
 421                                 },
 422
 423
 424                                 // General
 425                                 background2: '#F0F0EA'
 426
 427                         };
 428
 429                         // Apply the theme
 430                         Highcharts.setOptions(Highcharts.theme);
 431
 432                         windrose = new Highcharts.Chart({
 433                                 chart: {
 434                                         polar: true,
 435                                         renderTo: 'windrose'
 436                                 },
 437
 438                                 title: {
 439                                         text: 'Wind Rose'
 440                                 },
 441
 442                                 pane: {
 443                                         startAngle: 0,
 444                                         endAngle: 360
 445                                 },
 446
 447                                 xAxis: {
 448                                         tickInterval: 15,
 449                                         min: 0,
 450                                         max: 360,
 451                                         labels: {
 452                                                 formatter: function () {
 453                                                         return this.value + '°';
 454                                                 }
 455                                         }
 456                                 },
 457
 458                                 yAxis: {
 459                                         min: 0
 460                                 },
 461
 462                                 plotOptions: {
 463                                         series: {
 464                                                 pointStart: 0,
 465                                                 pointInterval: 15
 466                                         },
 467                                         column: {
 468                                                 pointPadding: 0,
 469                                                 groupPadding: 0
 470                                         }
 471                                 },
 472                                 exporting: {
 473                                         buttons: {
 474                                                 contextButton: {
 475                                                         enabled: false
 476                                                 }
 477                                         }
 478                                 },
 479
 480                                 series: [ {
 481                                         type: 'scatter',
 482                                         name: 'Wind mph',
 483                                         data: [
 484                                                 <% my ($d, $w);
 485                                                    $s = "";
 486                                                    $d = 0; $w = 0;
 487                                                for (@main::last10minsr) {
 488                                                       my $r = $main::json->decode($_);
 489                                                           if ($r) {
 490                                                                   $r->{r}->{Dir} ||= $d;
 491                                                                   $r->{r}->{Wind} ||= $w;
 492                                                                   $s .=  "[" . $r->{r}->{Dir} . "," . main::nearest(0.1, $r->{r}->{Wind}*2.23694) . "],";
 493                                                                   $d = $r->{r}->{Dir};
 494                                                                   $w = $r->{r}->{Wind};
 495                                                           }
 496                                                    }
 497                                                    chop $s if length $s;
 498                                                 %><%= $s %>
 499                                         ]
 500                                 }]
 501                         });
 502                 }
 503
 504                 function start_windspeed() {
 505                         windspeed = new Highcharts.Chart({
 506                                 chart: {
 507                                         type: 'gauge',
 508                                         renderTo: 'windspeed',
 509                                         plotBackgroundColor: null,
 510                                         plotBackgroundImage: null,
 511                                         plotBorderWidth: 0,
 512                                         plotShadow: false
 513                                 },
 514
 515                                 title: {
 516                                         text: 'Wind Speed'
 517                                 },
 518
 519                                 pane: {
 520                                         startAngle: -150,
 521                                         endAngle: 150,
 522                                         background: [{
 523                                                 backgroundColor: {
 524                                                         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 525                                                         stops: [
 526                                                                 [0, '#FFF'],
 527                                                                 [1, '#333']
 528                                                         ]
 529                                                 },
 530                                                 borderWidth: 0,
 531                                                 outerRadius: '109%'
 532                                         }, {
 533                                                 backgroundColor: {
 534                                                         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 535                                                         stops: [
 536                                                                 [0, '#333'],
 537                                                                 [1, '#FFF']
 538                                                         ]
 539                                                 },
 540                                                 borderWidth: 1,
 541                                                 outerRadius: '107%'
 542                                         }, {
 543                                                 // default background
 544                                         }, {
 545                                                 backgroundColor: '#DDD',
 546                                                 borderWidth: 0,
 547                                                 outerRadius: '105%',
 548                                                 innerRadius: '103%'
 549                                         }]
 550                                 },
 551
 552                                 // the value axis
 553                                 yAxis: {
 554                                         min: 0,
 555                                         max: 50,
 556
 557                                         minorTickInterval: 'auto',
 558                                         minorTickWidth: 1,
 559                                         minorTickLength: 10,
 560                                         minorTickPosition: 'inside',
 561                                         minorTickColor: '#666',
 562
 563                                         tickPixelInterval: 30,
 564                                         tickWidth: 2,
 565                                         tickPosition: 'inside',
 566                                         tickLength: 10,
 567                                         tickColor: '#666',
 568                                         labels: {
 569                                                 step: 2,
 570                                                 rotation: 'auto'
 571                                         },
 572                                         title: {
 573                                                 text: 'mph'
 574                                         },
 575                                         plotBands: [{
 576                                                 from: 0,
 577                                                 to: 15,
 578                                                 color: '#55BF3B' // green
 579                                         }, {
 580                                                 from: 16,
 581                                                 to: 29,
 582                                                 color: '#DDDF0D' // yellow
 583                                         }, {
 584                                                 from: 30,
 585                                                 to: 50,
 586                                                 color: '#DF5353' // red
 587                                         }]
 588                                 },
 589                                 exporting: {
 590                                         buttons: {
 591                                                 contextButton: {
 592                                                         enabled: false
 593                                                 }
 594                                         }
 595                                 },
 596
 597                                 series: [{
 598                                         name: 'Speed',
 599                                         data: [0],
 600                                         tooltip: {
 601                                                 valueSuffix: ' mph'
 602                                         }
 603                                 }]
 604                         });
 605                 }
 606
 607                 function start_winddir() {
 608                         winddir = new Highcharts.Chart({
 609                                 chart: {
 610                                         type: 'gauge',
 611                                         renderTo: 'winddir',
 612                                         plotBackgroundColor: null,
 613                                         plotBackgroundImage: null,
 614                                         plotBorderWidth: 0,
 615                                         plotShadow: false
 616                                 },
 617
 618                                 title: {
 619                                         text: 'Wind Direction'
 620                                 },
 621
 622                                 pane: {
 623                                         startAngle: 0,
 624                                         endAngle: 360,
 625                                         background: [{
 626                                                 backgroundColor: {
 627                                                         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 628                                                         stops: [
 629                                                                 [0, '#FFF'],
 630                                                                 [1, '#333']
 631                                                         ]
 632                                                 },
 633                                                 borderWidth: 0,
 634                                                 outerRadius: '109%'
 635                                         }, {
 636                                                 backgroundColor: {
 637                                                         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 638                                                         stops: [
 639                                                                 [0, '#333'],
 640                                                                 [1, '#FFF']
 641                                                         ]
 642                                                 },
 643                                                 borderWidth: 1,
 644                                                 outerRadius: '107%'
 645                                         }, {
 646                                                 // default background
 647                                         }, {
 648                                                 backgroundColor: '#DDD',
 649                                                 borderWidth: 0,
 650                                                 outerRadius: '105%',
 651                                                 innerRadius: '103%'
 652                                         }]
 653                                 },
 654
 655                                 // the value axis
 656                                 yAxis: {
 657                                         min: 0,
 658                                         max: 359,
 659
 660                                         minorTickInterval: 'auto',
 661                                         minorTickWidth: 1,
 662                                         minorTickLength: 10,
 663                                         minorTickPosition: 'inside',
 664                                         minorTickColor: '#666',
 665
 666                                         tickPixelInterval: 15,
 667                                         tickWidth: 2,
 668                                         tickPosition: 'inside',
 669                                         tickLength: 10,
 670                                         tickColor: '#666',
 671                                         labels: {
 672                                                 step: 2,
 673                                                 rotation: 'auto'
 674                                         },
 675                                         title: {
 676                                                 text:  '° deg'
 677                                         },
 678                                 },
 679                                 exporting: {
 680                                         buttons: {
 681                                                 contextButton: {
 682                                                         enabled: false
 683                                                 }
 684                                         }
 685                                 },
 686
 687                                 series: [{
 688                                         name: 'Direction',
 689                                         data: [0],
 690                                         tooltip: {
 691                                                 valueSuffix: ' ° deg'
 692                                         }
 693                                 }]
 694                         });
 695                 }
 696
 697                 function fill_daychart(js, days) {
 698                         var rainfall = daychart.series[0].data.length > (days * 48);
 699                         var pressure = daychart.series[1].data.length > (days * 48);
 700                         var temppos = daychart.series[2].data.length > (days * 48);
 701                         var tempneg = daychart.series[4].data.length > (days * 48);
 702                         var humidity = daychart.series[3].data.length > (days * 48);
 703
 704                         var hr = js.h;
 705                         var t = js.t * 1000;
 706                         var ra = [t, hr.Rain_1h];
 707                         var pr = [t, hr.Pressure];
 708                         var te = [t, hr.Temp_Out];
 709                         var hu = [t, hr.Humidity_Out];
 710
 711 //                      do_debug(js.tm + " " + t + " " + te + "<br>");
 712                         daychart.series[0].addPoint(ra, true, rainfall);
 713                         daychart.series[1].addPoint(pr, true, pressure);
 714                         if (lasttemp <= -100) {
 715                                 lasttemp = hr.Temp_Out;
 716                         }
 717                         if (hr.Temp_Out > 0) {
 718                                 if (lasttemp <= 0) {
 719                                         daychart.series[2].addPoint([t, 0], true, temppos);
 720                                 }
 721                                 daychart.series[2].addPoint([t, hr.Temp_Out], true, temppos);
 722                         } else {
 723                                 daychart.series[2].addPoint([t, (lasttemp > 0) ? 0 : null], true, temppos);
 724                         }
 725                         if (hr.Temp_Out <= 0) {
 726                                 if (lasttemp > 0) {
 727                                         daychart.series[4].addPoint([t, 0], true, tempneg);
 728                                 }
 729                                 daychart.series[4].addPoint([t, hr.Temp_Out], true, tempneg);
 730                         } else {
 731                                 daychart.series[4].addPoint([t, (lasttemp <= 0) ? 0 : null], true, tempneg);
 732                         }
 733                         lasttemp = hr.Temp_Out;
 734                         daychart.series[3].addPoint(hu, true, humidity);
 735                 }
 736
 737                 var conv = 2.23694;
 738
 739                 function fill_windrose(rr, points) {
 740                         var p = windrose.series[0].data.length > points;
 741                         var v = [rr.Dir, (rr.Wind*conv)];
 742                         windrose.series[0].addPoint(v, true, p);
 743                 }
 744
 745                 function fill_windspeed(rr) {
 746                         var point = windspeed.series[0].points[0];
 747                         point.update(Math.round(rr.Wind*conv));
 748                 }
 749
 750                 function fill_winddir(rr) {
 751                         var point = winddir.series[0].points[0];
 752                         point.update(rr.Dir);
 753                 }
 754
 755                 window.onload = function() {
 756                         startws();
 757                         start_daychart();
 758                         start_windrose();
 759                         start_windspeed();
 760                         start_winddir();
 761                         window.setInterval(function() {
 762                                 if (ws === null)
 763                                         startws();
 764                         }, 15000);
 765                 }
 766
 767                 </script>
 768
 769                 <div id="container">
 770                         <center>
 771                                 <h4>Two Day Forecast</h2>
 772                                 <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>
 773                         </center>
 774                 </div>
 775
 776                 <div id="container">
 777                         <div id="daychart" style="min-width: 400px; height: 400px; margin: 0 auto"> </div>
 778                 </div>
 779
 780                 <div id="container">
 781                         <table border="0" align="center">
 782                                 <tr>
 783                                         <td id="windrose" style="min-width: 350px; max-width: 400px; height: 330px; margin: 0 auto"> </td>
 784                                         <td id="windspeed" style="min-width: 280px; max-width: 400px; height: 270px; margin: 0 auto"> </td>
 785                                         <td id="winddir" style="min-width: 280px; max-width: 400px; height: 270px; margin: 0 auto"> </td>
 786                                 </tr>
 787                         </table>
 788                 </div>
 789
 790                 <div id="container">
 791                         <div id="start-template">
 792                                 <br><br>
 793                                 <table class="table">
 794                                         <tr>
 795                                                 <th width="7%">Time:</th><td width="7%"><span id="tm"> </span></td>
 796                                                 <th width="7%">Sunrise:</th><td width="7%"><span id="Sunrise"> </span></td>
 797                                                 <th width="7%">Sunset:</th><td width="7%"><span id="Sunset"> </span></td>
 798                                                 <th width="7%">Console Volts:</th><td width="7%"><span id="Batt_Console"> </span></td>
 799                                                 <th width="7%">TX Battery OK:</th><td width="7%"><span id="Batt_TX_OK"> </span></td>
 800                                         </tr>
 801                                         <tr>
 802                                                 <th>Pressure:</th><td><span id="Pressure"> </span> mb</td>
 803                                                 <th>Trend:</th><td><span id="Pressure_Trend_txt"> </span></td>
 804                                         </tr>
 805                                         <tr>
 806                                                 <th>Temperature in:</th><td> <span id="Temp_In"> </span> °C</td>
 807                                                 <th>Humidity:</th><td> <span id="Humidity_In"> </span> %</td>
 808                                         </tr>
 809                                         <tr><th>Temperature out:</th><td> <span id="Temp_Out"> </span> °C</td>
 810                                                 <th>Min:</th><td> <span id="Temp_Out_Min"> </span> °C @ <span id="Temp_Out_Min_T"> </span></td>
 811                                                 <th>Max:</th><td> <span id="Temp_Out_Max"> </span> °C @ <span id="Temp_Out_Max_T"> </span></td>
 812                                                 <th>Humidity:</th><td> <span id="Humidity_Out"> </span> %</td>
 813                                                 <th>Dew Point:</th><td> <span id="Dew_Point"> </span> °C</td>
 814                                         </tr>
 815                                         <tr><th>Wind:</th><td><span id="Dir"> </span> ° @ <span id="Wind"> </span> mph</td>
 816                                                 <th>Wind Minute Avg:</th><td> <span id="Dir_1m"> </span> ° @ <span id="Wind_1m"> </span> mph </td>
 817                                                 <th>Day Max Speed:</th><td> <span id="Wind_Max"> </span> mph @ <span id="Wind_Max_T"> </span></td>
 818                                                 <th>Wind Chill:</th><td> <span id="WindChill"> °C</span></td>
 819                                         </tr>
 820                                         <tr>
 821                                                 <th>Rain 30mins:</th><td> <span id="Rain_1h"> </span> mm</td>
 822                                                 <th>Day:</th><td> <span id="Rain_Day"> </span> mm</td>
 823                                                 <th>24hrs:</th><td> <span id="Rain_24h"> </span> mm</td>
 824                                                 <th>Month:</th><td> <span id="Rain_Month"> </span> mm</td>
 825                                                 <th>Year:</th><td> <span id="Rain_Year"> </span> mm</td>
 826                                         </tr>
 827                                 </table>
 828                         </div>
 829                 </div>
 830
 831                 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 832                 <script src="js/jquery.min.js"></script>
 833                 <!-- Latest compiled and minified JavaScript -->
 834                 <script src="js/bootstrap.min.js"></script>
 835                 <!-- High Chart stuff -->
 836                 <script src="js/highcharts.js"></script>
 837                 <script src="js/highcharts-more.js"></script>
 838                 <script src="js/modules/exporting.js"></script>
 839
 840         </body>
 841 </html>