From 9288880e4775ea8065b1193950042227fa193ff2 Mon Sep 17 00:00:00 2001 From: Deep Tailor Date: Fri, 20 Jul 2018 15:17:10 -0700 Subject: [PATCH] Add and Remove corresponding classes to capture higher contrast/print friendly png and jpg exports (#2088) * add and remove corrensponding class to capture better images (wip) * pass class through exportAsPng and exportAsJpg directly * pass classname from stacked plots into exportImageService * Adding additional export styles Fixes #2088 - WIP * WIP export styles Fixes #2080 - Styling WIP; - Moved styles into plots-main.scss; - Change to how plot hashes are rendered; * add class before clone, because adding it on clone was not rendering new css styles * Export styles Fixes #2080 - Code indenting cleaned up; - Additional styles for export; - Added hide effects for .h-local-controls and unsynced state; * Apply class to cloned element only --- .../general/res/sass/plots/_plots-main.scss | 389 +++++++++++------- .../themes/espresso/res/sass/_constants.scss | 3 +- .../themes/snow/res/sass/_constants.scss | 3 +- .../plot/src/services/ExportImageService.js | 33 +- .../plot/src/telemetry/PlotController.js | 4 +- .../src/telemetry/StackedPlotController.js | 4 +- 6 files changed, 256 insertions(+), 180 deletions(-) diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss index e78e83e525..fe034cf9e1 100644 --- a/platform/commonUI/general/res/sass/plots/_plots-main.scss +++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss @@ -33,8 +33,8 @@ display: flex; flex-flow: column nowrap; .gl-plot.child-frame { - mct-plot { - display: flex; + mct-plot { + display: flex; flex: 1 1 auto; height: 100%; position: relative; @@ -51,18 +51,15 @@ display: block; } } - } - - .gl-plot { - color: $colorPlotFg; + color: $colorPlotFg; display: flex; - font-size: 0.7rem; - position: relative; - width: 100%; - height: 100%; + font-size: 0.7rem; + position: relative; + width: 100%; + height: 100%; min-height: $plotMinH; /********************************************* AXIS AND DISPLAY AREA */ @@ -74,7 +71,8 @@ position: absolute; display: block; font-size: 1.5em; - top: $interiorMarginSm; left: $interiorMarginSm; + top: $interiorMarginSm; + left: $interiorMarginSm; } } @@ -105,71 +103,71 @@ } } - .gl-plot-axis-area { - position: absolute; - &.gl-plot-y { - top: nth($plotDisplayArea, 1); - right: auto; - bottom: nth($plotDisplayArea, 3); - left: 0; - width: $plotYBarW; - } - } + .gl-plot-axis-area { + position: absolute; + &.gl-plot-y { + top: nth($plotDisplayArea, 1); + right: auto; + bottom: nth($plotDisplayArea, 3); + left: 0; + width: $plotYBarW; + } + } - .gl-plot-coords { - box-sizing: border-box; - border-radius: $controlCr; - background: black; - color: lighten($colorBodyFg, 30%); - padding: 2px 5px; - position: absolute; - top: nth($plotDisplayArea,1) + $interiorMarginLg; - right: auto; - bottom: auto; - left: nth($plotDisplayArea,4) + $interiorMarginLg; - z-index: 10; - &:empty { - display: none; - } - } + .gl-plot-coords { + box-sizing: border-box; + border-radius: $controlCr; + background: black; + color: lighten($colorBodyFg, 30%); + padding: 2px 5px; + position: absolute; + top: nth($plotDisplayArea,1) + $interiorMarginLg; + right: auto; + bottom: auto; + left: nth($plotDisplayArea,4) + $interiorMarginLg; + z-index: 10; + &:empty { + display: none; + } + } - .gl-plot-label, - .l-plot-label { - color: $colorPlotLabelFg; - position: absolute; - text-align: center; + .gl-plot-label, + .l-plot-label { + color: $colorPlotLabelFg; + position: absolute; + text-align: center; - &.gl-plot-x-label, - &.l-plot-x-label { - top: auto; - right: 0; - bottom: 0; - left: 0; - height: auto; - } + &.gl-plot-x-label, + &.l-plot-x-label { + top: auto; + right: 0; + bottom: 0; + left: 0; + height: auto; + } - &.gl-plot-y-label, - &.l-plot-y-label { - $x: -50%; - $r: -90deg; - transform-origin: 50% 0; - transform: translateX($x) rotate($r); - display: inline-block; - margin-left: $interiorMargin; // Kick off the left edge - left: 0; - top: 50%; - white-space: nowrap; - } - } + &.gl-plot-y-label, + &.l-plot-y-label { + $x: -50%; + $r: -90deg; + transform-origin: 50% 0; + transform: translateX($x) rotate($r); + display: inline-block; + margin-left: $interiorMargin; // Kick off the left edge + left: 0; + top: 50%; + white-space: nowrap; + } + } - .gl-plot-x-options, + .gl-plot-x-options, .gl-plot-y-options { - $h: 24px; - position: absolute; - height: $h; - min-height: $h; + $h: 24px; + position: absolute; + height: $h; + min-height: $h; z-index: 2; - } + } .gl-plot-x-options { transform: translateX(-50%); @@ -190,119 +188,192 @@ right: $interiorMargin; } - .gl-plot-hash { - position: absolute; - border: 0 $colorPlotHash $stylePlotHash; - &.hash-v { - border-right-width: 1px; - height: 100%; - } - &.hash-h { - border-bottom-width: 1px; - width: 100%; - } - } + .gl-plot-hash { + position: absolute; + opacity: $opacityPlotHash; + &.hash-v { + border-right: 1px $colorPlotHash $stylePlotHash; + height: 100%; + } + &.hash-h { + border-bottom: 1px $colorPlotHash $stylePlotHash; + width: 100%; + } + } - /****************************** Limits and Out-of-Bounds data */ + /****************************** Limits and Out-of-Bounds data */ - .l-limit-bar, - .l-oob-data { - position: absolute; - left: 0; - right: 0; - width: auto; - } + .l-limit-bar, + .l-oob-data { + position: absolute; + left: 0; + right: 0; + width: auto; + } - .l-limit-bar { - // Limits in plot display area - @mixin limitBg($c) { - background: rgba($c, 0.2); - } + .l-limit-bar { + // Limits in plot display area + @mixin limitBg($c) { + background: rgba($c, 0.2); + } - height: auto; - z-index: 0; - &.s-limit-yellow { @include limitBg($colorLimitYellowBg); } - &.s-limit-red { @include limitBg($colorLimitRedBg); } - } + height: auto; + z-index: 0; + &.s-limit-yellow { + @include limitBg($colorLimitYellowBg); + } + &.s-limit-red { + @include limitBg($colorLimitRedBg); + } + } - .l-oob-data { - $c: #7748d6; - $a: 0.5; - $h: 10px; - @include absPosDefault(); - pointer-events: none; - height: $h; - z-index: 1; - &.l-oob-data-up { - top: 0; - bottom: auto; - @include linearGlow(0deg, $c, $a); - } - &.l-oob-data-dwn { - bottom: 0; - top: auto; - @include linearGlow(180deg, $c, $a); - } - } + .l-oob-data { + $c: #7748d6; + $a: 0.5; + $h: 10px; + @include absPosDefault(); + pointer-events: none; + height: $h; + z-index: 1; + &.l-oob-data-up { + top: 0; + bottom: auto; + @include linearGlow(0deg, $c, $a); + } + &.l-oob-data-dwn { + bottom: 0; + top: auto; + @include linearGlow(180deg, $c, $a); + } + } } - .gl-plot-display-area, .plot-display-area { - @if $colorPlotBg != none { background-color: $colorPlotBg; } + @if $colorPlotBg != none { + background-color: $colorPlotBg; + } cursor: crosshair; border: 1px solid $colorPlotAreaBorder; } .tick { - position: absolute; - border: 0 $colorPlotHash solid; - &.tick-x { - border-right-width: 1px; - height: 100%; // Assumption is that the tick will be in a holder that will set it's height; - } + position: absolute; + border: 0 $colorPlotHash solid; + &.tick-x { + border-right-width: 1px; + height: 100%; // Assumption is that the tick will be in a holder that will set it's height; + } } .gl-plot-tick, .tick-label { @include reverseEllipsis(); - font-size: 0.7rem; - position: absolute; - &.gl-plot-x-tick-label, - &.tick-label-x { - right: auto; - bottom: auto; - left: auto; - height: auto; - width: 20%; - margin-left: -10%; - text-align: center; - } - &.gl-plot-y-tick-label, - &.tick-label-y { - top: auto; - height: 1em; - width: auto; - margin-bottom: -0.5em; - text-align: right; - } + font-size: 0.7rem; + position: absolute; + &.gl-plot-x-tick-label, + &.tick-label-x { + right: auto; + bottom: auto; + left: auto; + height: auto; + width: 20%; + margin-left: -10%; + text-align: center; + } + &.gl-plot-y-tick-label, + &.tick-label-y { + top: auto; + height: 1em; + width: auto; + margin-bottom: -0.5em; + text-align: right; + } } .gl-plot-tick { - &.gl-plot-x-tick-label { - top: $interiorMargin; - } - &.gl-plot-y-tick-label { - right: $interiorMargin; - left: $interiorMargin; - } + &.gl-plot-x-tick-label { + top: $interiorMargin; + } + &.gl-plot-y-tick-label { + right: $interiorMargin; + left: $interiorMargin; + } } .tick-label { - &.tick-label-x { - top: 0; - } - &.tick-label-y { - right: 0; left: 0; - } + &.tick-label-x { + top: 0; + } + &.tick-label-y { + right: 0; + left: 0; + } +} + +.export-plot { + $bg: white; + $fg: black; + $gry: #999; + + background: $bg !important; + z-index: -10; + + .l-view-section { + $m: $interiorMargin; + top: $m !important; + right: $m; + bottom: $m; + left: $m; + + .s-status-timeconductor-unsynced .holder-plot { + .t-object-alert.t-alert-unsynced { + display: none; + } + } + } + + .gl-plot-display-area { + background: none !important; + border-color: $gry !important; + + .gl-plot-local-controls, + .h-local-controls { + opacity: 0; + } + } + + .gl-plot { + color: $fg; + + .gl-plot-hash { + opacity: 0.1; + border-color: $fg; + } + } + + table { + thead { + border-bottom: none; + + th { + background: #eee; + border-left-color: $bg; + color: #666; + } + + tr { + border: none; + } + } + tbody { + tr { + border-top: 1px solid #ccc; + } + + td { + color: $fg; + } + } + } } diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 18ce0e4925..68f1af2101 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -183,7 +183,8 @@ $colorTabHeaderBorder: $colorBodyBg; // Plot $colorPlotBg: rgba(black, 0.1); $colorPlotFg: $colorBodyFg; -$colorPlotHash: $colorTick; +$colorPlotHash: white; +$opacityPlotHash: 0.2; $stylePlotHash: dashed; $colorPlotAreaBorder: $colorInteriorBorder; $colorPlotLabelFg: pushBack($colorPlotFg, 20%); diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 7f4e7b708b..2511902f68 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -183,7 +183,8 @@ $colorTabHeaderBorder: $colorBodyBg; // Plot $colorPlotBg: rgba(black, 0.05); $colorPlotFg: $colorBodyFg; -$colorPlotHash: $colorTick; +$colorPlotHash: black; +$opacityPlotHash: 0.2; $stylePlotHash: dashed; $colorPlotAreaBorder: $colorInteriorBorder; $colorPlotLabelFg: pushBack($colorPlotFg, 20%); diff --git a/src/plugins/plot/src/services/ExportImageService.js b/src/plugins/plot/src/services/ExportImageService.js index 0738c40f07..c3566cda7b 100644 --- a/src/plugins/plot/src/services/ExportImageService.js +++ b/src/plugins/plot/src/services/ExportImageService.js @@ -40,8 +40,8 @@ define( * @constructor */ function ExportImageService(dialogService) { - this.exportCount = 0; this.dialogService = dialogService; + this.exportCount = 0; } /** @@ -51,7 +51,8 @@ define( * @param {string} type of image to convert the element to. * @returns {promise} */ - ExportImageService.prototype.renderElement = function (element, imageType, color) { + ExportImageService.prototype.renderElement = function (element, imageType, className) { + var dialogService = this.dialogService, dialog = dialogService.showBlockingMessage({ title: "Capturing...", @@ -66,18 +67,18 @@ define( mimeType = "image/jpeg"; } - var exportId = 'export-element-' + this.exportCount; - this.exportCount++; - var oldId = element.id; - element.id = exportId; + if (className) { + var exportId = 'export-element-' + this.exportCount; + this.exportCount++; + var oldId = element.id; + element.id = exportId; + } return html2canvas(element, { onclone: function (document) { - // Make export style changes to cloned document so that - // users don't see view flickering. - var clonedElement = document.getElementById(exportId); - if (clonedElement && color) { - clonedElement.style.backgroundColor = color; + if (className) { + var clonedElement = document.getElementById(exportId); + clonedElement.classList.add(className); } element.id = oldId; } @@ -107,10 +108,11 @@ define( * Takes a screenshot of a DOM node and exports to JPG. * @param {node} element to be exported * @param {string} filename the exported image + * @param {string} className to be added to element before capturing (optional) * @returns {promise} */ - ExportImageService.prototype.exportJPG = function (element, filename, color) { - return this.renderElement(element, "jpg", color).then(function (img) { + ExportImageService.prototype.exportJPG = function (element, filename, className) { + return this.renderElement(element, "jpg", className).then(function (img) { saveAs(img, filename); }); }; @@ -119,10 +121,11 @@ define( * Takes a screenshot of a DOM node and exports to PNG. * @param {node} element to be exported * @param {string} filename the exported image + * @param {string} className to be added to element before capturing (optional) * @returns {promise} */ - ExportImageService.prototype.exportPNG = function (element, filename, color) { - return this.renderElement(element, "png", color).then(function (img) { + ExportImageService.prototype.exportPNG = function (element, filename, className) { + return this.renderElement(element, "png", className).then(function (img) { saveAs(img, filename); }); }; diff --git a/src/plugins/plot/src/telemetry/PlotController.js b/src/plugins/plot/src/telemetry/PlotController.js index fc2c67a791..b18864d21b 100644 --- a/src/plugins/plot/src/telemetry/PlotController.js +++ b/src/plugins/plot/src/telemetry/PlotController.js @@ -245,7 +245,7 @@ define([ */ PlotController.prototype.exportJPG = function () { this.hideExportButtons = true; - this.exportImageService.exportJPG(this.$element[0], 'plot.jpg', 'white') + this.exportImageService.exportJPG(this.$element[0], 'plot.jpg', 'export-plot') .finally(function () { this.hideExportButtons = false; }.bind(this)); @@ -256,7 +256,7 @@ define([ */ PlotController.prototype.exportPNG = function () { this.hideExportButtons = true; - this.exportImageService.exportPNG(this.$element[0], 'plot.png', 'white') + this.exportImageService.exportPNG(this.$element[0], 'plot.png', 'export-plot') .finally(function () { this.hideExportButtons = false; }.bind(this)); diff --git a/src/plugins/plot/src/telemetry/StackedPlotController.js b/src/plugins/plot/src/telemetry/StackedPlotController.js index 8cc432b1d6..dceaee46cb 100644 --- a/src/plugins/plot/src/telemetry/StackedPlotController.js +++ b/src/plugins/plot/src/telemetry/StackedPlotController.js @@ -142,7 +142,7 @@ define([ StackedPlotController.prototype.exportJPG = function () { this.hideExportButtons = true; - this.exportImageService.exportJPG(this.$element[0], 'stacked-plot.jpg') + this.exportImageService.exportJPG(this.$element[0], 'stacked-plot.jpg', 'export-plot') .finally(function () { this.hideExportButtons = false; }.bind(this)); @@ -150,7 +150,7 @@ define([ StackedPlotController.prototype.exportPNG = function () { this.hideExportButtons = true; - this.exportImageService.exportPNG(this.$element[0], 'stacked-plot.png') + this.exportImageService.exportPNG(this.$element[0], 'stacked-plot.png', 'export-plot') .finally(function () { this.hideExportButtons = false; }.bind(this));