add humidity scale

[dweather.git] / templates / index.html.ep

diff --git a/templates/index.html.ep b/templates/index.html.ep
index 2dd444fe94f7404d6aa13e8ce7febd4385a9188d..e5a7c09276fb48fadd8f9a014a30096afc3b0b12 100644 (file)
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -26,6 +26,7 @@
                var windrose_mins = <%= $main::windmins %>;
                var windspeed;
                var winddir;
+               var updatespermin = <%= $main::updatepermin %>;
 
                var h = new Object();
 
@@ -79,7 +80,7 @@
                                                                rr.Dir = lastdir;
                                                        if (!("Wind" in rr))
                                                                rr.Wind = lastwind;
-                                                       fill_windrose(rr, windrose_mins * $updatespermin);
+                                                       fill_windrose(rr, windrose_mins * updatespermin);
                                                        fill_windspeed(rr);
                                                        fill_winddir(rr);
                                                        lastwind = rr.Wind;
@@ -118,13 +119,13 @@
                                        labels: {
                                                format: '{value}°C',
                                                style: {
-                                                       color: Highcharts.getOptions().colors[2]
+                                                       color: '#ff0000'
                                                }
                                        },
                                        title: {
                                                text: 'Temperature',
                                                style: {
-                                                       color: Highcharts.getOptions().colors[2]
+                                                       color: '#ff0000'
                                                }
                                        },
                                        opposite: true
@@ -159,6 +160,23 @@
                                                }
                                        },
                                        opposite: true
+                               }, { // Tertiary yAxis
+                                       gridLineWidth: 0,
+                                       floor: 0,
+                                       ceiling: 100,
+                                       title: {
+                                               text: 'Humidity',
+                                               style: {
+                                                       color: '#008800'
+                                               }
+                                       },
+                                       labels: {
+                                               format: '{value} %',
+                                               style: {
+                                                       color: '#008800'
+                                               }
+                                       },
+//                                     opposite: true
                                }],
                                tooltip: {
                                        shared: true
@@ -166,7 +184,7 @@
                                legend: {
                                        layout: 'vertical',
                                        align: 'left',
-                                       x: 80,
+                                       x: 120,
                                        verticalAlign: 'top',
                                        y: 55,
                                        floating: true,
@@ -226,6 +244,8 @@
                                }, {
                                        name: 'Temperature',
                                        type: 'spline',
+                                       yAxis: 0,
+                                       color: '#ff0000',
                                        data: [
                                                <% $s = "";
                                                   for (@main::last5daysh) { 
@@ -238,6 +258,27 @@
                                        tooltip: {
                                                valueSuffix: ' °C'
                                        }
+                               }, {
+                                       name: 'Humidity',
+                                       type: 'spline',
+                                       color: '#008800',
+                                       yAxis: 3,
+                                       data: [
+                                               <% $s = "";
+                                                  for (@main::last5daysh) { 
+                                                     my $r = $main::json->decode($_);
+                                                     $s .=  "[" . $r->{t}*1000 . "," . $r->{h}->{Humidity_Out} . "]," if $r && exists $r->{t} && exists $r->{h}->{Humidity_Out};
+                                                  }
+                                                  chop $s if length $s; 
+                                               %><%= $s %>
+                                       ],
+                                       marker: {
+                                               enabled: false
+                                       },
+                                       dashStyle: 'shortdot',
+                                       tooltip: {
+                                               valueSuffix: ' %'
+                                       }
                                }]
                        });
                }
@@ -645,7 +686,7 @@
                <div id="container">
                        <div id="start-template">
                                <br><br>
-                               <table border=1 width=80% align="center">
+                               <table class="table">
                                        <tr>
                                                <th>Time:</th><td><span id="tm"> </span></td>
                                                <th>Sunrise:</th><td><span id="Sunrise"> </span></td>
@@ -661,13 +702,13 @@
                                                <th>Temperature in:</th><td> <span id="Temp_In"> </span></td>
                                                <th>Humidity:</th><td> <span id="Humidity_In"> </span></td>
                                        </tr>
-                                       <tr>
+                                       <tr><th>Temperature out:</th><td> <span id="Temp_Out"> </span></td>
                                                <th>Min:</th><td> <span id="Temp_Out_Min"> </span> @ <span id="Temp_Out_Min_T"> </span></td>
                                                <th>Max:</th><td> <span id="Temp_Out_Max"> </span> @ <span id="Temp_Out_Max_T"> </span></td>
                                                <th>Humidity:</th><td> <span id="Humidity_Out"> </span></td>
                                                <th>Dew Point:</th><td> <span id="Dew_Point"> </span></td>
                                        </tr>
-                                       <tr>
+                                       <tr><th>Wind:</th><td><span id="Wind"> </span> m/s @ <span id="Dir"> </span> deg</td>
                                                <th>Wind Dir Minute Avg:</th><td> <span id="Dir_1m">  </span></td>
                                                <th>Wind Speed Minute Avg:</th><td> <span id="Wind_1m">  </span></td>
                                        </tr>