Skip to content

Commit

Permalink
Prep for 0.5.0.
Browse files Browse the repository at this point in the history 
Implement zoom via scroll wheel for Inspectors.
  • Loading branch information
@cwilling
cwilling committed Dec 17, 2017
1 parent 2c9aca9 commit 9b90c0c
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 15 deletions.
2 changes: 1 addition & 1 deletion Makefile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ TEST_FILES = test-status.js rectangle.js \

DESTDIR ?=

PKGVERSION ?= 0.4.3
PKGVERSION ?= 0.5.0

# Where any app files are installed
RUNDIR = /usr/share/brewable
Expand Down
2 changes: 1 addition & 1 deletion makeself.make
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
NODEEXE=$(which node)
BREWTEMPDIR=`mktemp -d /tmp/brewtemp.XXXXXX` || exit 1
TARGET=$(pwd)/brewable
VERSION=0.4.3
VERSION=0.5.0

echo './node brewableserverbundle.js "$@"' > $BREWTEMPDIR/run.sh
chmod a+x $BREWTEMPDIR/run.sh
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"clean": "rm -r build/*"
},
"name": "brewable",
"version": "0.4.3",
"version": "0.5.0",
"description": "Nodejs version of brewable",
"main": "src/scripts/brewable.js",
"devDependencies": {
Expand Down
88 changes: 76 additions & 12 deletions src/scripts/status.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -507,7 +507,7 @@ class ChartInspector {
}

//console.log("Hello World from new ChartInspector: " + this[CHARTINSPECTORNAME] + ", prefix: " + data.who);
this.showInspectorOverlay();
this.showInspectorOverlay({});
}

get name () { return this[CHARTINSPECTORNAME]; }
Expand Down Expand Up @@ -536,20 +536,31 @@ class ChartInspector {
}
if (this.hScale < 1) this.hScale = 1;
//console.log("hScale now = " + this.hScale);
this.showInspectorOverlay();
this.showInspectorOverlay({});
} else if (e.key == "ArrowRight") {
if (e.shiftKey) {
this.hScale += 10;
} else {
this.hScale += 1;
}
//console.log("hScale now = " + this.hScale);
this.showInspectorOverlay();
this.showInspectorOverlay({});
} else if (e.deltaY < 0 ) {
//console.log("addInspectorKeyboardHandler() at: " + e.clientX + "," + e.clientY + " (" + e.deltaX + "," + e.deltaY + "," + e.deltaZ + ")");
this.hScale += 1;
this.showInspectorOverlay({"xpos":e.clientX});
} else if (e.deltaY > 0 ) {
//console.log("addInspectorKeyboardHandler() at: " + e.clientX + "," + e.clientY + " (" + e.deltaX + "," + e.deltaY + "," + e.deltaZ + ")");
this.hScale -= 1;
if (this.hScale < 1) this.hScale = 1;
this.showInspectorOverlay({"xpos":e.clientX});
} else {
console.log("addInspectorKeyboardHandler(): ???");
}
}
}

showInspectorOverlay () {
showInspectorOverlay (options) {
//console.log("showInspectorOverlay() for " + this.elementName);
var inspectorExists = document.getElementById(this.elementName);
var svgWidth, svgHeight;
Expand All @@ -558,6 +569,7 @@ class ChartInspector {
if (! this.hasBindListener ) {
this.bindListener = this.addInspectorKeyboardHandler.bind(this);
document.body.addEventListener("keydown", this.bindListener);
document.body.addEventListener("wheel", this.bindListener);
this.hasBindListener = true;
}

Expand Down Expand Up @@ -634,6 +646,7 @@ class ChartInspector {
renderArgs.data = runningData[this[CHARTINSPECTORNAME]];
}
renderArgs.who = this[CHARTINSPECTORIDBASE];
if (options.xpos) renderArgs.xpos = options.xpos;

renderChart(renderArgs);
}
Expand All @@ -647,7 +660,7 @@ class ChartInspector {
if (inspector) {
//console.log("inspector display = " + inspector.style.display);
if (inspector.style.display != "none" ) {
this.showInspectorOverlay();
this.showInspectorOverlay({});
}
}
}
Expand Down Expand Up @@ -691,6 +704,10 @@ function renderChart(options) {
var data = options.data;
var graphWidthScale = options.hScale;
var who = options.who;
var scrollTarget = options.xpos || undefined;

var holder;
var currentScrollPos;

// elapsedJobTime only used for running jobs
var elapsedJobTime;
Expand Down Expand Up @@ -727,12 +744,22 @@ function renderChart(options) {
//console.log("renderChart(): elapsedJobTime = " + elapsedJobTime);
}

var viewport = select("#" + nameBase + "chartHolder_" + longName).node().getBoundingClientRect();
//console.log("viewport size = " + viewport.width + "," + viewport.height);

// Store current scroll position
if (scrollTarget) {
holder = document.getElementById(svgParentName);
holder.onscroll = function () {
console.log("scroll pos = " + holder.scrollLeft);
};
currentScrollPos = holder.scrollLeft;
console.log("current scroll = " + currentScrollPos + " (" + (currentScrollPos%viewport.width) + ")");
}

// Now (re)draw graph

//select("#" + this[CHARTINSPECTORIDBASE] + "svg_" + this[CHARTINSPECTORNAME]).remove();
select("#" + nameBase + "svg_" + longName).remove();
//var jobElementGraphInspector = document.getElementById(this.elementName);
//var jobElementGraphInspector = document.getElementById(this[CHARTINSPECTORIDBASE] + "chartHolder_" + this[CHARTINSPECTORNAME]);
var jobElementGraphInspector = document.getElementById(svgParentName);

var svg = select(jobElementGraphInspector).append("svg");
Expand Down Expand Up @@ -907,7 +934,8 @@ function renderChart(options) {
var sensorId = select(this).attr("id");
//console.log("sensor name: " + sensorId);
/* We don't know what the values to be shown in the popup are.
Therefore make a dummy version first that's close enough to measure a bounding box.
Therefore make a dummy version first that's close enough to measure a bounding box,
otherwise we can't centre the first line like we want to.
Finally delete the dummy, then fill & position the real popup.
*/
var viewport = select("#" + nameBase + "chartHolder_" + longName).node().getBoundingClientRect();
Expand Down Expand Up @@ -1042,6 +1070,42 @@ function renderChart(options) {
}
}

/*
svg.on("mousemove", function() {
inspectorCoords = mouse(this);
});
svg.on("click", function() {
var holder = document.getElementById(svgParentName);
console.log("click at " + inspectorCoords[0] + "," + inspectorCoords[1] + " scroll = " + holder.scrollLeft);
console.log("and remainder = " + inspectorCoords[1]%svgWidth);
});
var holder = document.getElementById(svgParentName);
//holder.scrollLeft = (svgWidth * (graphWidthScale - 1)) - (svgWidth - (svgWidth%inspectorCoords[1]));
console.log("Remainder = " + inspectorCoords[1]%svgWidth);
holder.scrollLeft = graphWidthScale*(graphWidthScale - 1) - graphWidthScale*(inspectorCoords[1]%svgWidth);
svg.call(zoom().on("zoom", function () {
inspectorCoords = mouse(this);
var holder = document.getElementById(svgParentName);
console.log("click at " + inspectorCoords[0] + "," + inspectorCoords[1] + " scroll = " + holder.scrollLeft);
//console.log("Zoom = " + (-event.deltaY * (event.deltaMode ? 120 : 1) / 500));
console.log("Zoom = " + event.deltaY);
}));
*/

// Attempt to reposition graph to keep scrollTarget in view
if (scrollTarget) {
console.log("scrollTarget = " + scrollTarget);
//currentScrollPos

holder = document.getElementById(svgParentName);
holder.scrollLeft = (scrollTarget - graphMargin.left)*(graphWidthScale - 1);
//console.log("scrollTarget = " + scrollTarget + " (" + holder.scrollLeft%viewport.width + ")");
//console.log("Propose: " + (holder.scrollLeft/viewport.width + scrollTarget) + " (" + (holder.scrollLeft/viewport.width + scrollTarget)%viewport.width + ")");
//holder.scrollLeft = Math.floor(holder.scrollLeft/viewport.width + scrollTarget);
console.log("scroll result = " + holder.scrollLeft);
}



/*
Show time & value as a tooltip at any particular point of the graph.
Expand Down Expand Up @@ -2931,7 +2995,7 @@ window.onload = function () {

if (jobHistoryInspectors[jobLongName]) {
console.log("Already have an Inspector for " + jobLongName);
jobHistoryInspectors[jobLongName].showInspectorOverlay();
jobHistoryInspectors[jobLongName].showInspectorOverlay({});
} else if (historyData[jobLongName]) {
console.log("Don't have an Inspector for " + jobLongName + " yet but already have the data");
var hdata = historyData[jobLongName];
Expand Down Expand Up @@ -3006,7 +3070,7 @@ window.onload = function () {

if (jobHistoryInspectors[jobLongName]) {
console.log("Already have an Inspector for " + jobLongName);
jobHistoryInspectors[jobLongName].showInspectorOverlay();
jobHistoryInspectors[jobLongName].showInspectorOverlay({});
} else if (runningData[jobLongName]) {
console.log("Don't have an Inspector for " + jobLongName + " yet but already have the data");
var hdata = runningData[jobLongName];
Expand Down Expand Up @@ -3709,7 +3773,7 @@ window.onload = function () {
if (jobHistoryInspectors[item].overlay.style.display == "none") {
console.log("Not redrawing: " + jobHistoryInspectors[item].name);
} else {
jobHistoryInspectors[item].showInspectorOverlay();
jobHistoryInspectors[item].showInspectorOverlay({});
}
});

Expand Down

0 comments on commit 9b90c0c

Please sign in to comment.