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

platform/commonUI/general/res/sass/plots/_plots-main.scss

@@ -51,11 +51,8 @@
             display: block;
         }
     }
-
 }
 
-
-
 .gl-plot {
     color: $colorPlotFg;
     display: flex;
@@ -74,7 +71,8 @@
             position: absolute;
             display: block;
             font-size: 1.5em;
-            top: $interiorMarginSm; left: $interiorMarginSm;
+            top: $interiorMarginSm;
+            left: $interiorMarginSm;
         }
     }
 
@@ -192,13 +190,13 @@
 
     .gl-plot-hash {
         position: absolute;
-		border: 0 $colorPlotHash $stylePlotHash;
+        opacity: $opacityPlotHash;
         &.hash-v {
-			border-right-width: 1px;
+            border-right: 1px $colorPlotHash $stylePlotHash;
             height: 100%;
         }
         &.hash-h {
-			border-bottom-width: 1px;
+            border-bottom: 1px $colorPlotHash $stylePlotHash;
             width: 100%;
         }
     }
@@ -221,8 +219,12 @@
 
         height: auto;
         z-index: 0;
-		&.s-limit-yellow { @include limitBg($colorLimitYellowBg); }
+        &.s-limit-yellow {
-		&.s-limit-red { @include limitBg($colorLimitRedBg); }
+            @include limitBg($colorLimitYellowBg);
+        }
+        &.s-limit-red {
+            @include limitBg($colorLimitRedBg);
+        }
     }
 
     .l-oob-data {
@@ -246,10 +248,11 @@
     }
 }
 
-
 .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;
 }
@@ -303,6 +306,74 @@
         top: 0;
     }
     &.tick-label-y {
-		right: 0; left: 0;
+        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;
+            }
+        }
     }
 }

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%);

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%);

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";
             }
 
+            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
+                    if (className) {
-                    // users don't see view flickering.
                         var clonedElement = document.getElementById(exportId);
-                    if (clonedElement && color) {
+                        clonedElement.classList.add(className);
-                        clonedElement.style.backgroundColor = color;
                     }
                     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) {
+        ExportImageService.prototype.exportJPG = function (element, filename, className) {
-            return this.renderElement(element, "jpg", color).then(function (img) {
+            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) {
+        ExportImageService.prototype.exportPNG = function (element, filename, className) {
-            return this.renderElement(element, "png", color).then(function (img) {
+            return this.renderElement(element, "png", className).then(function (img) {
                 saveAs(img, filename);
             });
         };

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));

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));