[Enhancement] Add export functionality to PlotController

Extends PlotController by adding three new scoped methods:
exportPDF, exportPNG, exportJPG.

All three methods use basically the same steps. The HTML node
of the plot is passed through html2canvas which generates a canvas.
From the canvas we export a blob, PNG, or JPG then save the file.
This commit is contained in:
David Hudson
2016-09-02 02:41:43 +09:00
parent 219301a85b
commit ea8f429902
2 changed files with 131 additions and 2 deletions

View File

@ -32,7 +32,8 @@ define(
"./elements/PlotLimitTracker",
"./elements/PlotTelemetryFormatter",
"./modes/PlotModeOptions",
"./SubPlotFactory"
"./SubPlotFactory",
"./services/ExportImageService"
],
function (
PlotUpdater,
@ -41,7 +42,8 @@ define(
PlotLimitTracker,
PlotTelemetryFormatter,
PlotModeOptions,
SubPlotFactory
SubPlotFactory,
ExportImageService
) {
var AXIS_DEFAULTS = [
@ -63,6 +65,7 @@ define(
*/
function PlotController(
$scope,
$element,
telemetryFormatter,
telemetryHandler,
throttle,
@ -246,6 +249,7 @@ define(
});
self.pending = true;
self.$element = $element;
// Initialize axes; will get repopulated when telemetry
// metadata becomes available.
@ -254,6 +258,18 @@ define(
new PlotAxis("ranges", [], AXIS_DEFAULTS[1])
];
$scope.exportPDF = function() {
PlotController.prototype.exportPDF(self.$element, 'plot.pdf');
};
$scope.exportPNG = function() {
PlotController.prototype.exportPNG(self.$element, 'plot.png');
};
$scope.exportJPG = function() {
PlotController.prototype.exportJPG(self.$element, 'plot.jpg');
};
// Watch for changes to the selected axis
$scope.$watch("axes[0].active.key", domainRequery);
$scope.$watch("axes[1].active.key", rangeRequery);
@ -364,6 +380,27 @@ define(
return this.pending;
};
/**
* Export the plot to PDF
*/
PlotController.prototype.exportPDF = function (element, filename) {
ExportImageService.exportPDF(element[0], filename);
};
/**
* Export the plot to PNG
*/
PlotController.prototype.exportPNG = function (element, filename) {
ExportImageService.exportPNG(element, filename);
};
/**
* Export the plot to JPG
*/
PlotController.prototype.exportJPG = function (element, filename) {
ExportImageService.exportJPG(element, filename);
};
return PlotController;
}
);