From 319606aed93d95209c341b468a3b04e9e116692f Mon Sep 17 00:00:00 2001
From: Pat Thoyts <Patrick.Thoyts@renishaw.com>
Date: Wed, 28 Sep 2016 13:55:58 +0100
Subject: [PATCH] Display the pressure and humidity graphs

---
 INSTALL                |  5 +++
 static/sensor-hub.html | 78 +++++++++++++++++++++++++++++++++++-------
 2 files changed, 71 insertions(+), 12 deletions(-)

diff --git a/INSTALL b/INSTALL
index 9f85e6a..b72f22c 100644
--- a/INSTALL
+++ b/INSTALL
@@ -1,3 +1,8 @@
+Requires python3, cherrypy, pyserial and twisted.
+
+Copy the sensor-hub.config.sample to sensor-hub.config and update for the
+local installation.
+
 Install the sensor-hub.conf file into /etc/init to create the service.
 Then service sensor-hub start.
 
diff --git a/static/sensor-hub.html b/static/sensor-hub.html
index 4574e37..401f1cc 100644
--- a/static/sensor-hub.html
+++ b/static/sensor-hub.html
@@ -18,6 +18,8 @@ body {margin:0 auto;max-width:980px;padding:1em;color:#000;background-color:#fff
 #result th {text-align:left;background-color:#eee;}
 #result tbody td {vertical-align:top;font-family:fixed;font-size:11pt;background-color:#fff;padding:6px 4px 6px 4px;}
 #tooltip {position:absolute;display:none;border:1px solid #fdd;padding:2px;background-color:#fee;opacity:0.80;}
+span.func {cursor: pointer; color: blue; text-decoration:underline;}
+span.func:hover {text-decoration:none; text-shadow: 1px 1px 1px #555; }
 div.loading { background: rgba(255,255,255,.8) url('loading.gif') 50% 50% no-repeat; }
 </style>
 </head>
@@ -26,10 +28,15 @@ div.loading { background: rgba(255,255,255,.8) url('loading.gif') 50% 50% no-rep
 <div id="content">
 <div id="overview" style="height:80px;"></div>
 <div id="graph" style="height:400px;"></div>
-<p>Download view data as <a href="#" onclick="on_download('text')">ASCII</a> or <a href="#" onclick="on_download('json')">JSON</a></p>
-<p><a href="#" onclick="fetch_more_days(7)">Fetch another week</a>: update with an additional weeks historical data.</p>
-<p><a href="#" onclick="fetch_more_days(30)">Fetch another 30 days</a>: update with an additional month historical data.</p>
-<p id="result"/>
+<div id="pressure" style="height:120px;"></div>
+<div id="humidity" style="height:120px;"></div>
+<p>Download view data as <span class="func" onclick="on_download('text')">ASCII</span>
+or <span class="func" onclick="on_download('json')">JSON</span></p>
+<p><span class="func" onclick="fetch_more_days(7)">Fetch another week</span>:
+   update with an additional weeks historical data.</p>
+<p><span class="func" onclick="fetch_more_days(30)">Fetch another 30 days</span>:
+   update with an additional month historical data.</p>
+<p id="result"></p>
 <div id="tooltip"></div>
 </div><!-- /content -->
 <div id="footer">
@@ -37,11 +44,12 @@ div.loading { background: rgba(255,255,255,.8) url('loading.gif') 50% 50% no-rep
   <span id="timestamp"></span>
 </div>
 <!-- <script type="text/javascript" src="/static/jquery.min.js"></script> -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.selection.min.js"></script>
 <script type="text/javascript">
+'use strict';
 function displayTime(ts) {
     var d = new Date(ts);
     return d.toLocaleTimeString() + " " + d.toLocaleDateString();
@@ -98,6 +106,8 @@ function on_received_recent(recent) {
 function graph_init() {
     document.custom.graph_main = {plot: {}, options: {}};
     document.custom.graph_overview = {plot: {}, options: {}};
+    document.custom.graph_pressure = {plot: {}, options: {}};
+    document.custom.graph_humidity = {plot: {}, options: {}};
     document.custom.graph_main.options = {
         series: {
             shadowSize: 0,
@@ -118,6 +128,14 @@ function graph_init() {
         yaxis: { ticks: [], autoscaleMargin: 0.1 },
         selection: { mode: "x" }
     };
+    document.custom.graph_pressure.options = {
+        series: { lines: { show: true, lineWidth: 1 }, shadowSize: 0 },
+        legend: { show: true },
+        grid: { markings: weekend_markings },
+        xaxis: { mode: "time", timezone: "browser", timeformat: "%d-%b" },
+        yaxis: { autoscaleMargin: 0.1 }
+        //selection: { mode: "x" }
+    };
     $("#graph").bind("plotselected", function (event, ranges) {
         var plot = document.custom.graph_main.plot;
         $.each(plot.getXAxes(), function (_, axis) {
@@ -130,23 +148,45 @@ function graph_init() {
         plot.clearSelection();
         document.custom.graph_overview.plot.setSelection(ranges, true); // avoid event loop
     });
+    $("#pressure").bind("plotselected", function (event, ranges) {
+        var plot = document.custom.graph_pressure.plot;
+        $.each(plot.getXAxes(), function (_, axis) {
+            var opts = axis.options;
+            opts.min = ranges.xaxis.from;
+            opts.max = ranges.xaxis.to;
+        });
+        plot.setupGrid();
+        plot.draw();
+        plot.clearSelection();
+        document.custom.graph_overview.plot.setSelection(ranges, true); // avoid event loop
+    });
     $("#overview").bind("plotselected", function (event, ranges) {
         var plot = document.custom.graph_overview.plot;
+        var dataLength = plot.getData()[0].data.length;
         var mainPlot = document.custom.graph_main.plot;
-        if (mainPlot.getData()[0].data.length != plot.getData()[0].data.length) {
+        if (mainPlot.getData()[0].data.length != dataLength) {
             mainPlot.setData(document.custom.plotdata);
         }
+        //var pressurePlot = document.custom.graph_pressure.plot;
+        //if (pressurePlot.getData()[0].data.length != document.custom.pressure.data.length) {
+        //    pressurePlot.setData([document.custom.pressure]);
+        //}
         $.each(plot.getXAxes(), function (_, axis) {
             var opts = axis.options;
             opts.min = ranges.xaxis.from;
             opts.max = ranges.xaxis.to;
         });
         mainPlot.setSelection(ranges);
+        //pressurePlot.setSelection(ranges);
     });
 }
 function replot(both) {
     var ovplot = $.plot("#overview", document.custom.plotdata, document.custom.graph_overview.options);
     document.custom.graph_overview.plot = ovplot;
+    var pressurePlot = $.plot("#pressure", [document.custom.pressure], document.custom.graph_pressure.options);
+    document.custom.graph_pressure.plot = pressurePlot;
+    var humidityPlot = $.plot("#humidity", [document.custom.humidity], document.custom.graph_pressure.options);
+    document.custom.graph_humidity.plot = humidityPlot;
     if (both) {
         var plot = $.plot($('#graph'), document.custom.plotdata, document.custom.graph_main.options);
         document.custom.graph_main.plot = plot;
@@ -173,18 +213,30 @@ function on_received_sensors(data) {
     $.each(data.response, function(n, sensorName) {
         document.custom.plotdata.push({data: [], label: sensorName, color: document.custom.colors[n]});
     });
-    fetch_initial_data();   
+    document.custom.pressure = {data:[], label: "Pressure (hPa)", color: "#990000"}
+    document.custom.humidity = {data:[], label: "Humidity (% RH)", color: "#000099"}
+    fetch_initial_data();
 }
 function add_data(data) {
     var plotdata = []; // one element per sensor
     $.each(document.custom.plotdata, function(n,plot) {
-       plotdata.push([]); 
+       plotdata.push([]);
     });
     var oldest = document.custom.oldest;
     var newest = document.custom.newest;
+    var pressure = []
+    var humidity = []
     // update each sensor in plotdata adding new values
     $.each(data.result, function(i,item) {
         var t = item.timestamp*1000;
+        if (!(typeof(item.pressure) == "undefined")) {
+            if (item.pressure > 1)
+                pressure.push([t,item.pressure]);
+        }
+        if (!(typeof(item.humidity) == "undefined")) {
+            if (item.humidity > 1)
+                humidity.push([t,item.humidity]);
+        }
         if (newest < t) newest = t;
         if (oldest > t) oldest = t;
         $.each(item.sensors, function(n, sensor) {
@@ -195,8 +247,10 @@ function add_data(data) {
         });
     });
     $.each(document.custom.plotdata, function(n,plot) {
-       document.custom.plotdata[n].data = plotdata[n].concat(plot.data); 
+       document.custom.plotdata[n].data = plotdata[n].concat(plot.data);
     });
+    document.custom.pressure.data = pressure.concat(document.custom.pressure.data)
+    document.custom.humidity.data = humidity.concat(document.custom.humidity.data)
     window.setTimeout(function() {replot(false);}, 20);
     if (oldest < document.custom.oldest) {
         if (((newest - oldest) / 1000 / (60*60*24)) < document.custom.days) {
@@ -214,8 +268,8 @@ function fetch_more_days(count) {
     window.setTimeout(function() {fetch_more((oldest - one_day)/1000, oldest/1000);}, 50);
 }
 function fetch_more(from_unixtime, until_unixtime) {
-    when_from = (new Date(from_unixtime * 1000)).toISOString();
-    when_until = (new Date(until_unixtime * 1000)).toISOString();
+    var when_from = (new Date(from_unixtime * 1000)).toISOString();
+    var when_until = (new Date(until_unixtime * 1000)).toISOString();
     $.ajax({
         url: 'since',
         dataType: 'json',
@@ -244,7 +298,7 @@ function fetch_initial_data() {
     });
 }
 function main() {
-    document.custom = {plotdata: [], data: [], recent: {}, oldest: Infinity, newest: 0, days: 7};
+    document.custom = {plotdata: [], data: [], recent: {}, oldest: Infinity, newest: 0, days: 7, pressure: []};
     document.custom.colors = ["#a040b0","#00a040","#0040a0"];
     $.ajax({
         url: 'recent',
-- 
2.23.0