]> gb7djk.dxcluster.net Git - dweather.git/blobdiff - templates/index.html.ep
display speeds in mph rather than m/s
[dweather.git] / templates / index.html.ep
index 2dd444fe94f7404d6aa13e8ce7febd4385a9188d..443408d92e71fd8f0df349be51915cbb2afb27b1 100644 (file)
                var windrose_mins = <%= $main::windmins %>;
                var windspeed;
                var winddir;
+               var updatespermin = <%= $main::updatepermin %>;
 
                var h = new Object();
 
+               var trans = {
+                       "Wind" : function (speed) { return (speed * 2.236936).toFixed(1); },
+                       "Wind_1m" : function (speed) { return (speed * 2.236936).toFixed(1); },
+                       "Wind_Max": function (speed) { return (speed * 2.236936).toFixed(1); }
+               };
+                       
+
                function do_debug(text) {
                        document.getElementById("do_debug").innerHTML = text;
                }
                function fill_html(key,value) {
                        var d = document.getElementById(key);
                        if (d !== null) {
-                               d.innerHTML = value;
+                               var f = trans[key];
+                               if (f && typeof(f) === "function") {
+                                       d.innerHTML = trans[key](value);
+                               } else {
+                                       d.innerHTML = value;
+                               }
                        }
                }
 
@@ -79,7 +92,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;
                                        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
                                                }
                                        },
                                        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
                                legend: {
                                        layout: 'vertical',
                                        align: 'left',
-                                       x: 80,
+                                       x: 120,
                                        verticalAlign: 'top',
                                        y: 55,
                                        floating: true,
                                }, {
                                        name: 'Temperature',
                                        type: 'spline',
+                                       yAxis: 0,
+                                       color: '#ff0000',
                                        data: [
                                                <% $s = "";
                                                   for (@main::last5daysh) { 
                                        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: ' %'
+                                       }
                                }]
                        });
                }
                        var rainfall = daychart.series[0].data.length > (days * 48);
                        var pressure = daychart.series[1].data.length > (days * 48);
                        var temp = daychart.series[2].data.length > (days * 48);
+                       var humidity = daychart.series[3].data.length > (days * 48);
 
                        var hr = js.h;
                        var t = js.t * 1000;
                        var ra = [t, hr.Rain_1h];
                        var pr = [t, hr.Pressure];
                        var te = [t, hr.Temp_Out];
+                       var hu = [t, hr.Humidity_Out];
                                
 //                     do_debug(js.tm + " " + t + " " + te + "<br>"); 
                        daychart.series[0].addPoint(ra, true, rainfall);
                        daychart.series[1].addPoint(pr, true, pressure);
                        daychart.series[2].addPoint(te, true, temp);
+                       daychart.series[3].addPoint(hu, true, humidity);
                }
 
                var conv = 2.23694;
                <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>
-                                               <th>Sunset:</th><td><span id="Sunset"> </span></td>
-                                               <th>Console Volts:</th><td><span id="Batt_Console"> </span></td>
-                                               <th>TX Battery OK:</th><td><span id="Batt_TX_OK"> </span></td>
+                                               <th width="7%">Time:</th><td width="7%"><span id="tm"> </span></td>
+                                               <th width="7%">Sunrise:</th><td width="7%"><span id="Sunrise"> </span></td>
+                                               <th width="7%">Sunset:</th><td width="7%"><span id="Sunset"> </span></td>
+                                               <th width="7%">Console Volts:</th><td width="7%"><span id="Batt_Console"> </span></td>
+                                               <th width="7%">TX Battery OK:</th><td width="7%"><span id="Batt_TX_OK"> </span></td>
                                        </tr>
                                        <tr>
-                                               <th>Pressure:</th><td><span id="Pressure"> </span></td>
+                                               <th>Pressure:</th><td><span id="Pressure"> </span> mb</td>
                                                <th>Trend:</th><td><span id="Pressure_Trend_txt"> </span></td>
                                        </tr>
                                        <tr>
-                                               <th>Temperature in:</th><td> <span id="Temp_In"> </span></td>
-                                               <th>Humidity:</th><td> <span id="Humidity_In"> </span></td>
+                                               <th>Temperature in:</th><td> <span id="Temp_In"> </span> °C</td>
+                                               <th>Humidity:</th><td> <span id="Humidity_In"> </span> %</td>
                                        </tr>
-                                       <tr>
-                                               <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><th>Temperature out:</th><td> <span id="Temp_Out"> </span> °C</td>
+                                               <th>Min:</th><td> <span id="Temp_Out_Min"> </span> °C @ <span id="Temp_Out_Min_T"> </span></td>
+                                               <th>Max:</th><td> <span id="Temp_Out_Max"> </span> °C @ <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> °C</td>
                                        </tr>
-                                       <tr>
-                                               <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><th>Wind:</th><td><span id="Dir"> </span> ° @ <span id="Wind"> </span> mph</td>
+                                               <th>Wind Minute Avg:</th><td> <span id="Dir_1m"> </span> ° @ <span id="Wind_1m"> </span> mph </td>
+                                               <th>Day Max Speed:</th><td> <span id="Wind_Max"> </span> mph @ <span id="Wind_Max_T"> </span></td>
                                        </tr>
                                        <tr>
-                                               <th>Rain 30mins:</th><td> <span id="Rain_1h"> </span></td>
-                                               <th>Day:</th><td> <span id="Rain_Day"> </span></td>
-                                               <th>24hrs:</th><td> <span id="Rain_24h"> </span></td>
-                                               <th>Month:</th><td> <span id="Rain_Month"> </span></td>
-                                               <th>Year:</th><td> <span id="Rain_Year"> </span></td>
+                                               <th>Rain 30mins:</th><td> <span id="Rain_1h"> </span> mm</td>
+                                               <th>Day:</th><td> <span id="Rain_Day"> </span> mm</td>
+                                               <th>24hrs:</th><td> <span id="Rain_24h"> </span> mm</td>
+                                               <th>Month:</th><td> <span id="Rain_Month"> </span> mm</td>
+                                               <th>Year:</th><td> <span id="Rain_Year"> </span> mm</td>
                                        </tr>
                                </table>
                        </div>