2014-12-01 09:41:39 -08:00
|
|
|
/*global define,moment,Promise*/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Module defining PlotController. Created by vwoeltje on 11/12/14.
|
|
|
|
*/
|
|
|
|
define(
|
2014-12-01 13:48:38 -08:00
|
|
|
[
|
|
|
|
"./PlotPreparer",
|
|
|
|
"./PlotPalette",
|
|
|
|
"./PlotPanZoomStack",
|
2014-12-01 14:14:31 -08:00
|
|
|
"./PlotPosition",
|
2014-12-01 14:55:55 -08:00
|
|
|
"./PlotTickGenerator",
|
2014-12-01 16:35:38 -08:00
|
|
|
"./PlotFormatter",
|
|
|
|
"./PlotAxis"
|
2014-12-01 13:48:38 -08:00
|
|
|
],
|
2014-12-01 16:35:38 -08:00
|
|
|
function (PlotPreparer, PlotPalette, PlotPanZoomStack, PlotPosition, PlotTickGenerator, PlotFormatter, PlotAxis) {
|
2014-12-01 09:41:39 -08:00
|
|
|
"use strict";
|
|
|
|
|
|
|
|
var AXIS_DEFAULTS = [
|
|
|
|
{ "name": "Time" },
|
|
|
|
{ "name": "Value" }
|
|
|
|
],
|
|
|
|
DOMAIN_TICKS = 5,
|
|
|
|
RANGE_TICKS = 7;
|
|
|
|
|
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
*/
|
|
|
|
function PlotController($scope) {
|
|
|
|
var mousePosition,
|
|
|
|
marqueeStart,
|
2014-12-01 13:48:38 -08:00
|
|
|
panZoomStack = new PlotPanZoomStack([], []),
|
2014-12-01 14:55:55 -08:00
|
|
|
formatter = new PlotFormatter(),
|
2014-12-01 09:41:39 -08:00
|
|
|
domainOffset;
|
|
|
|
|
|
|
|
// Utility, for map/forEach loops. Index 0 is domain,
|
|
|
|
// index 1 is range.
|
|
|
|
function formatValue(v, i) {
|
2014-12-01 14:55:55 -08:00
|
|
|
return (i ?
|
|
|
|
formatter.formatRangeValue :
|
|
|
|
formatter.formatDomainValue)(v);
|
2014-12-01 09:41:39 -08:00
|
|
|
}
|
|
|
|
|
2014-12-01 16:35:38 -08:00
|
|
|
function mousePositionToDomainRange(mousePosition) {
|
2014-12-01 14:14:31 -08:00
|
|
|
return new PlotPosition(
|
2014-12-01 09:41:39 -08:00
|
|
|
mousePosition.x,
|
|
|
|
mousePosition.y,
|
|
|
|
mousePosition.width,
|
|
|
|
mousePosition.height,
|
2014-12-01 16:35:38 -08:00
|
|
|
panZoomStack
|
2014-12-01 14:14:31 -08:00
|
|
|
).getPosition();
|
2014-12-01 09:41:39 -08:00
|
|
|
}
|
|
|
|
|
2014-12-01 16:35:38 -08:00
|
|
|
function toDisplayable(position) {
|
|
|
|
return [ position[0] - domainOffset, position[1] ];
|
|
|
|
}
|
|
|
|
|
2014-12-01 09:41:39 -08:00
|
|
|
function updateMarqueeBox() {
|
|
|
|
$scope.draw.boxes = marqueeStart ?
|
|
|
|
[{
|
2014-12-01 16:35:38 -08:00
|
|
|
start: toDisplayable(mousePositionToDomainRange(marqueeStart)),
|
|
|
|
end: toDisplayable(mousePositionToDomainRange(mousePosition)),
|
2014-12-01 09:41:39 -08:00
|
|
|
color: [1, 1, 1, 0.5 ]
|
|
|
|
}] : undefined;
|
|
|
|
}
|
|
|
|
|
|
|
|
function updateDrawingBounds() {
|
2014-12-01 13:48:38 -08:00
|
|
|
var panZoom = panZoomStack.getPanZoom();
|
2014-12-01 09:41:39 -08:00
|
|
|
|
|
|
|
$scope.draw.dimensions = panZoom.dimensions;
|
2014-12-01 16:35:38 -08:00
|
|
|
$scope.draw.origin = [
|
|
|
|
panZoom.origin[0] - domainOffset,
|
|
|
|
panZoom.origin[1]
|
|
|
|
];
|
|
|
|
}
|
|
|
|
|
|
|
|
function updateTicks() {
|
|
|
|
var tickGenerator = new PlotTickGenerator(panZoomStack, formatter);
|
|
|
|
|
|
|
|
$scope.domainTicks =
|
|
|
|
tickGenerator.generateDomainTicks(DOMAIN_TICKS);
|
|
|
|
$scope.rangeTicks =
|
|
|
|
tickGenerator.generateRangeTicks(RANGE_TICKS);
|
2014-12-01 09:41:39 -08:00
|
|
|
}
|
|
|
|
|
2014-12-01 18:13:03 -08:00
|
|
|
function setupAxes(metadatas) {
|
|
|
|
$scope.axes = [
|
|
|
|
new PlotAxis("domain", metadatas, AXIS_DEFAULTS[0]),
|
|
|
|
new PlotAxis("range", metadatas, AXIS_DEFAULTS[1])
|
|
|
|
];
|
|
|
|
}
|
|
|
|
|
|
|
|
function plotTelemetry() {
|
|
|
|
var prepared, data, telemetry;
|
|
|
|
|
|
|
|
telemetry = $scope.telemetry;
|
2014-12-01 09:41:39 -08:00
|
|
|
|
|
|
|
if (!telemetry) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2014-12-01 18:13:03 -08:00
|
|
|
if (!$scope.axes) {
|
|
|
|
setupAxes(telemetry.getMetadata());
|
|
|
|
}
|
|
|
|
|
2014-12-01 09:41:39 -08:00
|
|
|
data = telemetry.getResponse();
|
|
|
|
|
2014-12-01 13:27:30 -08:00
|
|
|
prepared = new PlotPreparer(
|
2014-12-01 09:41:39 -08:00
|
|
|
data,
|
|
|
|
($scope.axes[0].active || {}).key,
|
|
|
|
($scope.axes[1].active || {}).key
|
|
|
|
);
|
|
|
|
|
2014-12-01 13:48:38 -08:00
|
|
|
panZoomStack.setBasePanZoom(
|
|
|
|
prepared.getOrigin(),
|
|
|
|
prepared.getDimensions()
|
|
|
|
);
|
2014-12-01 09:41:39 -08:00
|
|
|
|
|
|
|
domainOffset = prepared.getDomainOffset();
|
|
|
|
|
|
|
|
$scope.draw.lines = prepared.getBuffers().map(function (buf, i) {
|
|
|
|
return {
|
|
|
|
buffer: buf,
|
|
|
|
color: PlotPalette.getFloatColor(i),
|
|
|
|
points: buf.length / 2
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
updateDrawingBounds();
|
|
|
|
updateMarqueeBox();
|
2014-12-01 16:35:38 -08:00
|
|
|
updateTicks();
|
2014-12-01 09:41:39 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
function toMousePosition($event) {
|
|
|
|
var target = $event.target,
|
|
|
|
bounds = target.getBoundingClientRect();
|
|
|
|
|
|
|
|
return {
|
|
|
|
x: $event.clientX - bounds.left,
|
|
|
|
y: $event.clientY - bounds.top,
|
|
|
|
width: bounds.width,
|
|
|
|
height: bounds.height
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
function marqueeZoom(start, end) {
|
|
|
|
var a = mousePositionToDomainRange(start),
|
|
|
|
b = mousePositionToDomainRange(end),
|
|
|
|
origin = [
|
|
|
|
Math.min(a[0], b[0]),
|
|
|
|
Math.min(a[1], b[1])
|
|
|
|
],
|
|
|
|
dimensions = [
|
|
|
|
Math.max(a[0], b[0]) - origin[0],
|
|
|
|
Math.max(a[1], b[1]) - origin[1]
|
|
|
|
];
|
|
|
|
|
2014-12-01 13:48:38 -08:00
|
|
|
panZoomStack.pushPanZoom(origin, dimensions);
|
2014-12-01 16:35:38 -08:00
|
|
|
updateTicks();
|
2014-12-01 09:41:39 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
$scope.$watch("telemetry.getMetadata()", setupAxes);
|
|
|
|
$scope.$on("telemetryUpdate", plotTelemetry);
|
|
|
|
$scope.draw = {};
|
|
|
|
|
|
|
|
return {
|
|
|
|
getColor: function (index) {
|
|
|
|
return PlotPalette.getStringColor(index);
|
|
|
|
},
|
|
|
|
getHoverCoordinates: function () {
|
|
|
|
return mousePosition ?
|
|
|
|
mousePositionToDomainRange(
|
2014-12-01 16:35:38 -08:00
|
|
|
mousePosition
|
2014-12-01 09:41:39 -08:00
|
|
|
).map(formatValue) : [];
|
|
|
|
},
|
|
|
|
hover: function ($event) {
|
|
|
|
mousePosition = toMousePosition($event);
|
|
|
|
if (marqueeStart) {
|
|
|
|
updateMarqueeBox();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
startMarquee: function ($event) {
|
|
|
|
mousePosition = marqueeStart = toMousePosition($event);
|
|
|
|
updateMarqueeBox();
|
|
|
|
},
|
|
|
|
endMarquee: function ($event) {
|
|
|
|
mousePosition = toMousePosition($event);
|
|
|
|
if (marqueeStart) {
|
|
|
|
marqueeZoom(marqueeStart, mousePosition);
|
|
|
|
marqueeStart = undefined;
|
|
|
|
updateMarqueeBox();
|
|
|
|
updateDrawingBounds();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
isZoomed: function () {
|
2014-12-01 13:48:38 -08:00
|
|
|
return panZoomStack.getDepth() > 1;
|
2014-12-01 09:41:39 -08:00
|
|
|
},
|
|
|
|
stepBackPanZoom: function () {
|
2014-12-01 13:48:38 -08:00
|
|
|
panZoomStack.popPanZoom();
|
|
|
|
updateDrawingBounds();
|
2014-12-01 09:41:39 -08:00
|
|
|
},
|
|
|
|
unzoom: function () {
|
2014-12-01 13:48:38 -08:00
|
|
|
panZoomStack.clearPanZoom();
|
2014-12-01 09:41:39 -08:00
|
|
|
updateDrawingBounds();
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
return PlotController;
|
|
|
|
}
|
|
|
|
);
|