ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-21 14:07:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add and Remove corresponding classes to capture higher contrast/print friendly png and jpg exports (#2088)

Browse Source 
* 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
This commit is contained in:
Deep Tailor 2018-07-20 15:17:10 -07:00 committed by Pete Richards
parent d2c5476cdd
commit 9288880e47
6 changed files with 256 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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-red { @include limitBg($colorLimitRedBg); }
&.s-limit-yellow {
@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;
}
}
}
}

3
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

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

3
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

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

23
src/plugins/plot/src/services/ExportImageService.js
View File

@ -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
// users don't see view flickering.
if (className) {
var clonedElement = document.getElementById(exportId);
if (clonedElement && color) {
clonedElement.style.backgroundColor = color;
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);
});
};

4
src/plugins/plot/src/telemetry/PlotController.js
View File

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

4
src/plugins/plot/src/telemetry/StackedPlotController.js
View File

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