Merge branch 'develop'

When pointer moves over graph, show data values at that point.

Author: cwilling

README.md

@@ -8,6 +8,7 @@ Basic feature list:
 * supports multiple [iSpindel](https://github.com/universam1/iSpindel) temperature/hydrometer devices
 * supports multiple DS18B20 temperature sensors
 * supports multiple [SainSmart](http://www.sainsmart.com/sainsmart-relay-module-for-arduino-raspberry-pi.html) 5V relay modules for total of up to 20x relays
+* supports multiple simultaneous jobs, limited only by numbers of attached input sensors and relay outputs
 
 This is a complete javascript rewrite of the original (pre 0.3) python version.
 

src/scripts/status.js

@@ -1621,21 +1621,51 @@ window.onload = function () {
           .attr("d", historyTemperatureLineFunction(scaledTemperatureLineData))
           .attr("stroke", temperatureColours[sensor_instance])
           .attr("stroke-width", temperatureStrokeWidth)
-          .attr("fill", "none");
-      }
+          .attr("fill", "none")
+          .on("mouseover", function() {
+            //console.log("in container: " + longName + " at: " + mouse(this)[0] + "," + mouse(this)[1]);
+            //console.log("X: " + tickText(historyLinearScaleX.invert(mouse(this)[0])));
+            //console.log("Y: " + historyLinearScaleY.invert(mouse(this)[1]));
+
+
+            /* Set the tooltip text, then move it into position and display it.
+            */
+            select("#detailTooltipText_" + longName.replace('%', '\\%'))
+              .append("tspan").attr("x",0).attr("y",0).attr('dx', '0.9em').attr('dy', '1.1em').text("At: " + tickText(historyLinearScaleX.invert(mouse(this)[0])))
+              .append("tspan").attr("x",0).attr("y",18).attr('dx','0.9em').attr('dy', '1.1em').text("T = " + (historyLinearScaleY.invert(mouse(this)[1])).toFixed(2));
+
+            select("#detailTooltipGroup_" + longName.replace('%', '\\%'))
+              .attr("transform",
+                "translate(" + (historyJobsGraphMargin.left + mouse(this)[0]) + "," + (historyJobsGraphMargin.top + mouse(this)[1]) + ")")
+              .style("opacity", 0.9);
+
+          })
+          .on("mouseout", function() {
+            //console.log("out");
+
+            select("#detailTooltipGroup_" + longName.replace('%', '\\%'))
+              .transition()
+              .duration(200)
+              .style("opacity", 0.0);
+
+            // Remove previous entry
+            select("#detailTooltipGroup_" + longName.replace('%', '\\%'))
+              .selectAll("tspan").remove();
 
+          });
+      }
       // Scale gravity data
       if (gravityLineDataHolder[sensor_instance].length > 0) {
         var scaledGravityLineData = [];
         gravityLineData = gravityLineDataHolder[sensor_instance];
-        for ( sp=0;sp<gravityLineData.length;sp++) {
+        for (sp=0;sp<gravityLineData.length;sp++) {
           //console.log("scaled sp = " + gravityLineData[sp].x + " : " + gravityLineData[sp].y);
           scaledGravityLineData.push({
             "x":historyLinearScaleX(gravityLineData[sp].x),
             "y":historyLinearScaleY(gravityLineData[sp].y)
           });
         }
-        // Draw temperature graph
+        // Draw gravity graph
         var historyGravityLineFunction = line()
           .x(function(d) { return d.x; })
           .y(function(d) { return d.y; });
@@ -1646,10 +1676,60 @@ window.onload = function () {
           .attr("d", historyGravityLineFunction(scaledGravityLineData))
           .attr("stroke", gravityColours[sensor_instance])
           .attr("stroke-width", gravityStrokeWidth)
-          .attr("fill", "none");
+          .attr("fill", "none")
+          .on("mouseover", function() {
+            //console.log("gravity in");
+
+            /* Set the tooltip text, then move it into position and display it.
+            */
+            select("#detailTooltipText_" + longName.replace('%', '\\%'))
+              .append("tspan").attr("x",0).attr("y",0).attr('dx', '0.9em').attr('dy', '1.1em').text(" At: " + tickText(historyLinearScaleX.invert(mouse(this)[0])))
+              .append("tspan").attr("x",0).attr("y",18).attr('dx','0.9em').attr('dy', '1.1em').text("SG = " + (historyLinearScaleY.invert(mouse(this)[1])).toFixed(2));
+
+            select("#detailTooltipGroup_" + longName.replace('%', '\\%'))
+              .attr("transform",
+                "translate(" + (historyJobsGraphMargin.left + mouse(this)[0]) + "," + (historyJobsGraphMargin.top + mouse(this)[1]) + ")")
+              .style("opacity", 0.9);
+
+          })
+          .on("mouseout", function() {
+            //console.log("gravity out");
+
+            select("#detailTooltipGroup_" + longName.replace('%', '\\%')).transition()
+              .duration(200)
+              .style("opacity", 0.0);
+
+            // Remove previous entry
+            select("#detailTooltipGroup_" + longName.replace('%', '\\%'))
+              .selectAll("tspan").remove();
+
+          });
       }
     }
 
+    /* Show time & value as a tooltip
+      at any particular point of the graph
+    */
+    historyJobsGraphHolder.append("g")
+      .attr("id", "detailTooltipGroup_" + longName.replace('%', '\\%'))
+      .attr("class", "detailtooltipgroup")
+      .attr("transform",
+        "translate(" + historyJobsGraphMargin.left + "," + historyJobsGraphMargin.top + ")")
+      .style("opacity", 0.0);
+
+    select("#detailTooltipGroup_" + longName.replace('%', '\\%'))
+      .append("rect")
+      .attr('id', 'detailTooltipBox_' + longName.replace('%', '\\%'))
+      .attr('class', 'detailtooltipbox')
+      .attr('width', 96) .attr('height', 40)
+      .attr('rx', 6).attr('ry', 4);
+
+    select("#detailTooltipGroup_" + longName.replace('%', '\\%'))
+      .append("text")
+      .attr('id', 'detailTooltipText_' + longName.replace('%', '\\%'))
+      .attr('class', 'detailtooltip');
+
+
     // Group for Resume/Waiting button & text
     var lastUpdate = updates[updates.length - 1];
     //console.log("lastUpdate = " + JSON.stringify(lastUpdate));
@@ -1669,7 +1749,6 @@ window.onload = function () {
       .attr('class', 'runningResumeButton')
       .attr('x', 0) .attr('y', 0)
       .attr('width', 96).attr('height', 40)
-      .attr('rx', 6).attr('ry', 6)
       .on("click", function() {
         //console.log("RESUME running " + longName.replace('%', '\\%'));
         //console.log("RESUME running jobStatus: " + jobStatus[longName.replace('%', '\\%')].running);
@@ -2539,7 +2618,6 @@ window.onload = function () {
       .attr('class', 'profileSaveCancelButton')
       .attr('x', 0) .attr('y', 0)
       .attr('width', 96).attr('height', 40)
-      .attr('rx', 6).attr('ry', 6)
       .on("click", function() {
         //console.log("SAVE & RETURN to " + profileOwner);
         select("#profilesGraphHolder").selectAll("*").remove();
@@ -2569,7 +2647,6 @@ window.onload = function () {
       .attr('class', 'profileSaveCancelButton')
       .attr('x', 0) .attr('y', '3.6em')
       .attr('width', 96).attr('height', 40)
-      .attr('rx', 6).attr('ry', 6)
       .on("click", function() {
         //console.log("CANCEL to " + profileOwner);
         select("#profilesGraphHolder").selectAll("*").remove();

styles/brewable.css

@@ -184,7 +184,7 @@ td {
 div.tooltip {
     position:   absolute;
     text-align: center;
-    width:      71;
+    width:      71px;
     height:     14px;
     padding:    2px;
     font:       12px sans-serif;
@@ -198,6 +198,16 @@ div.tooltip {
     text-align: center;
     font:       12px sans-serif;
 }
+.detailtooltipbox {
+    text-align: center;
+    padding:    2px;
+    font:       12px sans-serif;
+    fill: lightsteelblue;
+    stroke:     white;
+    stroke-width: 1;
+    border-radius: 8px;
+    pointer-events: none;
+}
 
 
 div#live_updateHolderContainer {