ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-20 03:36:44 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Example imagery vue (#2525)

Browse Source 
* WIP: imagery vue refactor

* cleaup

* show orange border when paused.

* resize image and thumbs wrappers.

* scrollToBottom fixed.

* fixed lint errors

* use multipane vue component for resize + cleanup + style adjustments.

* added min-height to image pane and thumbs-layout pane.

* remove old plugin and using es6 const.

* using ES6 imports.

* clean up + formatting changes.

* updated as per review comments.

* extracted styles from vue component.

* fixed lint errors.

* updated as per review comments + cleanup.
This commit is contained in:
Nikhil 2019-12-13 15:36:01 -08:00 committed by Pegah Sarram
parent 2248c2da08
commit 3b195e9c7d
17 changed files with 344 additions and 1080 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
platform/features/imagery/bundle.js
View File

@ -1,86 +0,0 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2018, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
define([
"./src/policies/ImageryViewPolicy",
"./src/controllers/ImageryController",
"./src/directives/MCTBackgroundImage",
"./res/templates/imagery.html"
], function (
ImageryViewPolicy,
ImageryController,
MCTBackgroundImage,
imageryTemplate
) {
return {
name:"platform/features/imagery",
definition: {
"name": "Plot view for telemetry",
"extensions": {
"views": [
{
"name": "Imagery",
"key": "imagery",
"cssClass": "icon-image",
"template": imageryTemplate,
"priority": "preferred",
"needs": [
"telemetry"
],
"editable": false
}
],
"policies": [
{
"category": "view",
"implementation": ImageryViewPolicy,
"depends": [
"openmct"
]
}
],
"controllers": [
{
"key": "ImageryController",
"implementation": ImageryController,
"depends": [
"$scope",
"$window",
"$element",
"openmct"
]
}
],
"directives": [
{
"key": "mctBackgroundImage",
"implementation": MCTBackgroundImage,
"depends": [
"$document"
]
}
]
}
}
};
});

58
platform/features/imagery/res/templates/imagery.html
View File

@ -1,58 +0,0 @@
<div class="t-imagery c-imagery" ng-controller="ImageryController as imagery">
<mct-split-pane class='abs' anchor="bottom" alias="imagery">
<div class="split-pane-component has-local-controls l-image-main-wrapper l-flex-col">
<div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover l-flex-row c-imagery__lc">
<span class="holder flex-elem grows c-imagery__lc__sliders">
<input class="icon-brightness" type="range"
min="0"
max="500"
ng-model="filters.brightness" />
<input class="icon-contrast" type="range"
min="0"
max="500"
ng-model="filters.contrast" />
</span>
<span class="holder flex-elem t-reset-btn-holder c-imagery__lc__reset-btn">
<a class="s-icon-button icon-reset t-btn-reset"
ng-click="filters = { brightness: 100, contrast: 100 }"></a>
</span>
</div>
<div class="l-image-main s-image-main flex-elem grows"
ng-class="{ paused: imagery.paused(), stale:false }">
<div class="image-main"
mct-background-image="imagery.getImageUrl()"
filters="filters">
</div>
</div>
<div class="l-image-main-controlbar flex-elem l-flex-row">
<div class="l-datetime-w flex-elem grows">
<a class="c-button show-thumbs sm hidden icon-thumbs-strip"
ng-click="showThumbsBubble = (showThumbsBubble) ? false:true"></a>
<span class="l-time">{{imagery.getTime()}}</span>
</div>
<div class="h-local-controls flex-elem">
<a class="c-button icon-pause pause-play"
ng-click="imagery.paused(!imagery.paused())"
ng-class="{ 'is-paused': imagery.paused() }"></a>
<a href=""
class="s-button l-mag s-mag vsm icon-reset"
ng-click="clipped = false"
ng-show="clipped === true"
title="Not all of image is visible; click to reset."></a>
</div>
</div>
</div>
<mct-splitter></mct-splitter>
<div class="split-pane-component l-image-thumbs-wrapper">
<div class="l-image-thumb-item" ng-class="{selected: image.selected}" ng-repeat="image in imageHistory track by $index"
ng-click="imagery.setSelectedImage(image)" ng-init="imagery.scrollToBottom()">
<img class="l-thumb"
ng-src={{imagery.getImageUrl(image)}}>
<div class="l-time">{{imagery.getTime(image)}}</div>
</div>
</div>
</mct-split-pane>
</div>

284
platform/features/imagery/src/controllers/ImageryController.js
View File

@ -1,284 +0,0 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2018, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/**
* This bundle implements views of image telemetry.
* @namespace platform/features/imagery
*/
define(
[
'zepto',
'lodash'
],
function ($, _) {
/**
* Controller for the "Imagery" view of a domain object which
* provides image telemetry.
* @constructor
* @memberof platform/features/imagery
*/
function ImageryController($scope, $window, element, openmct) {
this.$scope = $scope;
this.$window = $window;
this.openmct = openmct;
this.date = "";
this.time = "";
this.zone = "";
this.imageUrl = "";
this.requestCount = 0;
this.scrollable = $(".l-image-thumbs-wrapper");
this.autoScroll = openmct.time.clock() ? true : false;
this.$scope.imageHistory = [];
this.$scope.filters = {
brightness: 100,
contrast: 100
};
this.subscribe = this.subscribe.bind(this);
this.stopListening = this.stopListening.bind(this);
this.updateValues = this.updateValues.bind(this);
this.updateHistory = this.updateHistory.bind(this);
this.onBoundsChange = this.onBoundsChange.bind(this);
this.onScroll = this.onScroll.bind(this);
this.setSelectedImage = this.setSelectedImage.bind(this);
this.subscribe(this.$scope.domainObject);
this.$scope.$on('$destroy', this.stopListening);
this.openmct.time.on('bounds', this.onBoundsChange);
this.scrollable.on('scroll', this.onScroll);
}
ImageryController.prototype.subscribe = function (domainObject) {
this.date = "";
this.imageUrl = "";
this.openmct.objects.get(domainObject.getId())
.then(function (object) {
this.domainObject = object;
var metadata = this.openmct
.telemetry
.getMetadata(this.domainObject);
this.timeKey = this.openmct.time.timeSystem().key;
this.timeFormat = this.openmct
.telemetry
.getValueFormatter(metadata.value(this.timeKey));
this.imageFormat = this.openmct
.telemetry
.getValueFormatter(metadata.valuesForHints(['image'])[0]);
this.unsubscribe = this.openmct.telemetry
.subscribe(this.domainObject, function (datum) {
this.updateHistory(datum);
this.updateValues(datum);
}.bind(this));
this.requestHistory(this.openmct.time.bounds());
}.bind(this));
};
ImageryController.prototype.requestHistory = function (bounds) {
this.requestCount++;
this.$scope.imageHistory = [];
var requestId = this.requestCount;
this.openmct.telemetry
.request(this.domainObject, bounds)
.then(function (values) {
if (this.requestCount > requestId) {
return Promise.resolve('Stale request');
}
values.forEach(function (datum) {
this.updateHistory(datum);
}, this);
this.updateValues(values[values.length - 1]);
}.bind(this));
};
ImageryController.prototype.stopListening = function () {
this.openmct.time.off('bounds', this.onBoundsChange);
this.scrollable.off('scroll', this.onScroll);
if (this.unsubscribe) {
this.unsubscribe();
delete this.unsubscribe;
}
};
/**
* Responds to bound change event be requesting new
* historical data if the bound change was manual.
* @private
* @param {object} [newBounds] new bounds object
* @param {boolean} [tick] true when change is automatic
*/
ImageryController.prototype.onBoundsChange = function (newBounds, tick) {
if (this.domainObject && !tick) {
this.requestHistory(newBounds);
}
};
/**
* Updates displayable values to match those of the most
* recently received datum.
* @param {object} [datum] the datum
* @private
*/
ImageryController.prototype.updateValues = function (datum) {
if (this.isPaused) {
this.nextDatum = datum;
return;
}
this.time = this.timeFormat.format(datum);
this.imageUrl = this.imageFormat.format(datum);
};
/**
* Appends given imagery datum to running history.
* @private
* @param {object} [datum] target telemetry datum
* @returns {boolean} falsy when a duplicate datum is given
*/
ImageryController.prototype.updateHistory = function (datum) {
if (!this.datumMatchesMostRecent(datum)) {
var index = _.sortedIndex(this.$scope.imageHistory, datum, this.timeFormat.format.bind(this.timeFormat));
this.$scope.imageHistory.splice(index, 0, datum);
return true;
} else {
return false;
}
};
/**
* Checks to see if the given datum is the same as the most recent in history.
* @private
* @param {object} [datum] target telemetry datum
* @returns {boolean} true if datum is most recent in history, false otherwise
*/
ImageryController.prototype.datumMatchesMostRecent = function (datum) {
if (this.$scope.imageHistory.length !== 0) {
var datumTime = this.timeFormat.format(datum);
var datumURL = this.imageFormat.format(datum);
var lastHistoryTime = this.timeFormat.format(this.$scope.imageHistory.slice(-1)[0]);
var lastHistoryURL = this.imageFormat.format(this.$scope.imageHistory.slice(-1)[0]);
return datumTime === lastHistoryTime && datumURL === lastHistoryURL;
}
return false;
};
ImageryController.prototype.onScroll = function (event) {
this.$window.requestAnimationFrame(function () {
var thumbnailWrapperHeight = this.scrollable[0].offsetHeight;
var thumbnailWrapperWidth = this.scrollable[0].offsetWidth;
if (this.scrollable[0].scrollLeft <
(this.scrollable[0].scrollWidth - this.scrollable[0].clientWidth) - (thumbnailWrapperWidth) ||
this.scrollable[0].scrollTop <
(this.scrollable[0].scrollHeight - this.scrollable[0].clientHeight) - (thumbnailWrapperHeight)) {
this.autoScroll = false;
} else {
this.autoScroll = true;
}
}.bind(this));
};
/**
* Force history imagery div to scroll to bottom.
*/
ImageryController.prototype.scrollToBottom = function () {
if (this.autoScroll) {
this.scrollable[0].scrollTop = this.scrollable[0].scrollHeight;
}
};
/**
* Get the time portion (hours, minutes, seconds) of the
* timestamp associated with the incoming image telemetry
* if no parameter is given, or of a provided datum.
* @param {object} [datum] target telemetry datum
* @returns {string} the time
*/
ImageryController.prototype.getTime = function (datum) {
return datum ?
this.timeFormat.format(datum) :
this.time;
};
/**
* Get the URL of the most recent image telemetry if no
* parameter is given, or of a provided datum.
* @param {object} [datum] target telemetry datum
* @returns {string} URL for telemetry image
*/
ImageryController.prototype.getImageUrl = function (datum) {
return datum ?
this.imageFormat.format(datum) :
this.imageUrl;
};
/**
* Getter-setter for paused state of the view (true means
* paused, false means not.)
* @param {boolean} [state] the state to set
* @returns {boolean} the current state
*/
ImageryController.prototype.paused = function (state) {
if (arguments.length > 0 && state !== this.isPaused) {
this.unselectAllImages();
this.isPaused = state;
if (this.nextDatum) {
this.updateValues(this.nextDatum);
delete this.nextDatum;
} else {
this.updateValues(this.$scope.imageHistory[this.$scope.imageHistory.length - 1]);
}
this.autoScroll = true;
}
return this.isPaused;
};
/**
* Set the selected image on the state for the large imagery div to use.
* @param {object} [image] the image object to get url from.
*/
ImageryController.prototype.setSelectedImage = function (image) {
this.imageUrl = this.getImageUrl(image);
this.time = this.getTime(image);
this.paused(true);
this.unselectAllImages();
image.selected = true;
};
/**
* Loop through the history imagery data to set all images to unselected.
*/
ImageryController.prototype.unselectAllImages = function () {
for (var i = 0; i < this.$scope.imageHistory.length; i++) {
this.$scope.imageHistory[i].selected = false;
}
};
return ImageryController;
}
);

110
platform/features/imagery/src/directives/MCTBackgroundImage.js
View File

@ -1,110 +0,0 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2018, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
define(
function () {
/**
* Defines the `mct-background-image` directive.
*
* Used as an attribute, this will set the `background-image`
* property to the URL given in its value, but only after that
* image has loaded; this avoids "flashing" as images change.
*
* If the value of `mct-background-image`is falsy, no image
* will be displayed (immediately.)
*
* Optionally, a `filters` attribute may be specified as an
* object with `brightness` and/or `contrast` properties,
* whose values are percentages. A value of 100 will make
* no changes to the image's brightness or contrast.
*
* @constructor
* @memberof platform/features/imagery
*/
function MCTBackgroundImage($document) {
function link(scope, element) {
// General strategy here:
// - Keep count of how many images have been requested; this
// counter will be used as an internal identifier or sorts
// for each image that loads.
// - As the src attribute changes, begin loading those images.
// - When images do load, update the background-image property
// of the element, but only if a more recently
// requested image has not already been loaded.
// The order in which URLs are passed in and the order
// in which images are actually loaded may be different, so
// some strategy like this is necessary to ensure that images
// do not display out-of-order.
var requested = 0, loaded = 0;
function updateFilters(filters) {
var styleValue = filters ?
Object.keys(filters).map(function (k) {
return k + "(" + filters[k] + "%)";
}).join(' ') :
"";
element.css('filter', styleValue);
element.css('webkitFilter', styleValue);
}
function nextImage(url) {
var myCounter = requested,
image;
function useImage() {
if (loaded <= myCounter) {
loaded = myCounter;
element.css('background-image', "url('" + url + "')");
}
}
if (!url) {
loaded = myCounter;
element.css('background-image', 'none');
} else {
image = $document[0].createElement('img');
image.src = url;
image.onload = useImage;
}
requested += 1;
}
scope.$watch('mctBackgroundImage', nextImage);
scope.$watchCollection('filters', updateFilters);
}
return {
restrict: "A",
scope: {
mctBackgroundImage: "=",
filters: "="
},
link: link
};
}
return MCTBackgroundImage;
}
);

59
platform/features/imagery/src/policies/ImageryViewPolicy.js
View File

@ -1,59 +0,0 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2018, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
define([
'../../../../../src/api/objects/object-utils'
], function (
objectUtils
) {
/**
* Policy preventing the Imagery view from being made available for
* domain objects which do not have associated image telemetry.
* @implements {Policy.<View, DomainObject>}
* @constructor
*/
function ImageryViewPolicy(openmct) {
this.openmct = openmct;
}
ImageryViewPolicy.prototype.hasImageTelemetry = function (domainObject) {
var newDO = objectUtils.toNewFormat(
domainObject.getModel(),
domainObject.getId()
);
var metadata = this.openmct.telemetry.getMetadata(newDO);
var values = metadata.valuesForHints(['image']);
return values.length >= 1;
};
ImageryViewPolicy.prototype.allow = function (view, domainObject) {
if (view.key === 'imagery' || view.key === 'historical-imagery') {
return this.hasImageTelemetry(domainObject);
}
return true;
};
return ImageryViewPolicy;
});

271
platform/features/imagery/test/controllers/ImageryControllerSpec.js
View File

@ -1,271 +0,0 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2018, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
define(
[
"zepto",
"../../src/controllers/ImageryController"
],
function ($, ImageryController) {
var MOCK_ELEMENT_TEMPLATE =
'<div class="l-image-thumbs-wrapper"></div>';
xdescribe("The Imagery controller", function () {
var $scope,
openmct,
oldDomainObject,
newDomainObject,
unsubscribe,
metadata,
prefix,
controller,
requestPromise,
mockWindow,
mockElement;
beforeEach(function () {
$scope = jasmine.createSpyObj('$scope', ['$on', '$watch']);
oldDomainObject = jasmine.createSpyObj(
'domainObject',
['getId']
);
newDomainObject = { name: 'foo' };
oldDomainObject.getId.and.returnValue('testID');
openmct = {
objects: jasmine.createSpyObj('objectAPI', [
'get'
]),
time: jasmine.createSpyObj('timeAPI', [
'timeSystem',
'clock',
'on',
'off',
'bounds'
]),
telemetry: jasmine.createSpyObj('telemetryAPI', [
'subscribe',
'request',
'getValueFormatter',
'getMetadata'
])
};
metadata = jasmine.createSpyObj('metadata', [
'value',
'valuesForHints'
]);
metadata.value.and.returnValue("timestamp");
metadata.valuesForHints.and.returnValue(["value"]);
prefix = "formatted ";
unsubscribe = jasmine.createSpy('unsubscribe');
openmct.telemetry.subscribe.and.returnValue(unsubscribe);
openmct.time.timeSystem.and.returnValue({
key: 'testKey'
});
$scope.domainObject = oldDomainObject;
openmct.objects.get.and.returnValue(Promise.resolve(newDomainObject));
openmct.telemetry.getMetadata.and.returnValue(metadata);
openmct.telemetry.getValueFormatter.and.callFake(function (property) {
var formatter =
jasmine.createSpyObj("formatter-" + property, ['format']);
var isTime = (property === "timestamp");
formatter.format.and.callFake(function (datum) {
return (isTime ? prefix : "") + datum[property];
});
return formatter;
});
requestPromise = new Promise(function (resolve) {
setTimeout(function () {
resolve([{
timestamp: 1434600258123,
value: 'some/url'
}]);
}, 10);
});
openmct.telemetry.request.and.returnValue(requestPromise);
mockElement = $(MOCK_ELEMENT_TEMPLATE);
mockWindow = jasmine.createSpyObj('$window', ['requestAnimationFrame']);
mockWindow.requestAnimationFrame.and.callFake(function (f) {
return f();
});
controller = new ImageryController(
$scope,
mockWindow,
mockElement,
openmct
);
});
describe("when loaded", function () {
var callback,
boundsListener,
bounds;
beforeEach(function () {
return requestPromise.then(function () {
openmct.time.on.calls.all().forEach(function (call) {
if (call.args[0] === "bounds") {
boundsListener = call.args[1];
}
});
callback =
openmct.telemetry.subscribe.calls.mostRecent().args[1];
});
});
it("requests history", function () {
expect(openmct.telemetry.request).toHaveBeenCalledWith(
newDomainObject, bounds
);
expect(controller.getTime()).toEqual(prefix + 1434600258123);
expect(controller.getImageUrl()).toEqual('some/url');
});
it("exposes the latest telemetry values", function () {
callback({
timestamp: 1434600259456,
value: "some/other/url"
});
expect(controller.getTime()).toEqual(prefix + 1434600259456);
expect(controller.getImageUrl()).toEqual("some/other/url");
});
it("allows updates to be paused and unpaused", function () {
var newTimestamp = 1434600259456,
newUrl = "some/other/url",
initialTimestamp = controller.getTime(),
initialUrl = controller.getImageUrl();
expect(initialTimestamp).not.toBe(prefix + newTimestamp);
expect(initialUrl).not.toBe(newUrl);
expect(controller.paused()).toBeFalsy();
controller.paused(true);
expect(controller.paused()).toBeTruthy();
callback({ timestamp: newTimestamp, value: newUrl });
expect(controller.getTime()).toEqual(initialTimestamp);
expect(controller.getImageUrl()).toEqual(initialUrl);
controller.paused(false);
expect(controller.paused()).toBeFalsy();
expect(controller.getTime()).toEqual(prefix + newTimestamp);
expect(controller.getImageUrl()).toEqual(newUrl);
});
it("forwards large image view to latest image in history on un-pause", function () {
$scope.imageHistory = [
{ utc: 1434600258122, url: 'some/url1', selected: false},
{ utc: 1434600258123, url: 'some/url2', selected: false}
];
controller.paused(true);
controller.paused(false);
expect(controller.getImageUrl()).toEqual(controller.getImageUrl($scope.imageHistory[1]));
});
it("subscribes to telemetry", function () {
expect(openmct.telemetry.subscribe).toHaveBeenCalledWith(
newDomainObject,
jasmine.any(Function)
);
});
it("requests telemetry", function () {
expect(openmct.telemetry.request).toHaveBeenCalledWith(
newDomainObject,
bounds
);
});
it("unsubscribes and unlistens when scope is destroyed", function () {
expect(unsubscribe).not.toHaveBeenCalled();
$scope.$on.calls.all().forEach(function (call) {
if (call.args[0] === '$destroy') {
call.args[1]();
}
});
expect(unsubscribe).toHaveBeenCalled();
expect(openmct.time.off)
.toHaveBeenCalledWith('bounds', jasmine.any(Function));
});
it("listens for bounds event and responds to tick and manual change", function () {
var mockBounds = {start: 1434600000000, end: 1434600500000};
expect(openmct.time.on).toHaveBeenCalled();
openmct.telemetry.request.calls.reset();
boundsListener(mockBounds, true);
expect(openmct.telemetry.request).not.toHaveBeenCalled();
boundsListener(mockBounds, false);
expect(openmct.telemetry.request).toHaveBeenCalledWith(newDomainObject, mockBounds);
});
it ("doesnt append duplicate datum", function () {
var mockDatum = {value: 'image/url', timestamp: 1434700000000};
var mockDatum2 = {value: 'image/url', timestamp: 1434700000000};
var mockDatum3 = {value: 'image/url', url: 'someval', timestamp: 1434700000000};
expect(controller.updateHistory(mockDatum)).toBe(true);
expect(controller.updateHistory(mockDatum)).toBe(false);
expect(controller.updateHistory(mockDatum)).toBe(false);
expect(controller.updateHistory(mockDatum2)).toBe(false);
expect(controller.updateHistory(mockDatum3)).toBe(false);
});
describe("when user clicks on imagery thumbnail", function () {
var mockDatum = { utc: 1434600258123, url: 'some/url', selected: false};
it("pauses and adds selected class to imagery thumbnail", function () {
controller.setSelectedImage(mockDatum);
expect(controller.paused()).toBeTruthy();
expect(mockDatum.selected).toBeTruthy();
});
it("unselects previously selected image", function () {
$scope.imageHistory = [{ utc: 1434600258123, url: 'some/url', selected: true}];
controller.unselectAllImages();
expect($scope.imageHistory[0].selected).toBeFalsy();
});
it("updates larger image url and time", function () {
controller.setSelectedImage(mockDatum);
expect(controller.getImageUrl()).toEqual(controller.getImageUrl(mockDatum));
expect(controller.getTime()).toEqual(controller.timeFormat.format(mockDatum.utc));
});
});
});
it("initially shows an empty string for date/time", function () {
expect(controller.getTime()).toEqual("");
expect(controller.getImageUrl()).toEqual("");
});
});
}
);

126
platform/features/imagery/test/directives/MCTBackgroundImageSpec.js
View File

@ -1,126 +0,0 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2018, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
define(
["../../src/directives/MCTBackgroundImage"],
function (MCTBackgroundImage) {
describe("The mct-background-image directive", function () {
var mockDocument,
mockScope,
mockElement,
testImage,
directive;
beforeEach(function () {
mockDocument = [
jasmine.createSpyObj('document', ['createElement'])
];
mockScope = jasmine.createSpyObj('scope', [
'$watch',
'$watchCollection'
]);
mockElement = jasmine.createSpyObj('element', ['css']);
testImage = {};
mockDocument[0].createElement.and.returnValue(testImage);
directive = new MCTBackgroundImage(mockDocument);
});
it("is applicable as an attribute", function () {
expect(directive.restrict).toEqual("A");
});
it("two-way-binds its own value", function () {
expect(directive.scope.mctBackgroundImage).toEqual("=");
});
describe("once linked", function () {
beforeEach(function () {
directive.link(mockScope, mockElement, {});
});
it("watches for changes to the URL", function () {
expect(mockScope.$watch).toHaveBeenCalledWith(
'mctBackgroundImage',
jasmine.any(Function)
);
});
it("updates images in-order, even when they load out-of-order", function () {
var firstOnload;
mockScope.$watch.calls.mostRecent().args[1]("some/url/0");
firstOnload = testImage.onload;
mockScope.$watch.calls.mostRecent().args[1]("some/url/1");
// Resolve in a different order
testImage.onload();
firstOnload();
// Should still have taken the more recent value
expect(mockElement.css.calls.mostRecent().args).toEqual([
"background-image",
"url('some/url/1')"
]);
});
it("clears the background image when undefined is passed in", function () {
mockScope.$watch.calls.mostRecent().args[1]("some/url/0");
testImage.onload();
mockScope.$watch.calls.mostRecent().args[1](undefined);
expect(mockElement.css.calls.mostRecent().args).toEqual([
"background-image",
"none"
]);
});
it("updates filters on change", function () {
var filters = { brightness: 123, contrast: 21 };
mockScope.$watchCollection.calls.all().forEach(function (call) {
if (call.args[0] === 'filters') {
call.args[1](filters);
}
});
expect(mockElement.css).toHaveBeenCalledWith(
'filter',
'brightness(123%) contrast(21%)'
);
});
it("clears filters when none are present", function () {
mockScope.$watchCollection.calls.all().forEach(function (call) {
if (call.args[0] === 'filters') {
call.args[1](undefined);
}
});
expect(mockElement.css)
.toHaveBeenCalledWith('filter', '');
});
});
});
}
);

84
platform/features/imagery/test/policies/ImageryViewPolicySpec.js
View File

@ -1,84 +0,0 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2018, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
define(
["../../src/policies/ImageryViewPolicy"],
function (ImageryViewPolicy) {
describe("Imagery view policy", function () {
var testView,
openmct,
mockDomainObject,
mockTelemetry,
mockMetadata,
policy;
beforeEach(function () {
testView = { key: "imagery" };
mockMetadata = jasmine.createSpyObj('metadata', [
"valuesForHints"
]);
mockDomainObject = jasmine.createSpyObj(
'domainObject',
['getId', 'getModel', 'getCapability']
);
mockTelemetry = jasmine.createSpyObj(
'telemetry',
['getMetadata']
);
mockDomainObject.getCapability.and.callFake(function (c) {
return c === 'telemetry' ? mockTelemetry : undefined;
});
mockDomainObject.getId.and.returnValue("some-id");
mockDomainObject.getModel.and.returnValue({ name: "foo" });
mockTelemetry.getMetadata.and.returnValue(mockMetadata);
mockMetadata.valuesForHints.and.returnValue(["bar"]);
openmct = { telemetry: mockTelemetry };
policy = new ImageryViewPolicy(openmct);
});
it("checks for hints indicating image telemetry", function () {
policy.allow(testView, mockDomainObject);
expect(mockMetadata.valuesForHints)
.toHaveBeenCalledWith(["image"]);
});
it("allows the imagery view for domain objects with image telemetry", function () {
expect(policy.allow(testView, mockDomainObject)).toBeTruthy();
});
it("disallows the imagery view for domain objects without image telemetry", function () {
mockMetadata.valuesForHints.and.returnValue([]);
expect(policy.allow(testView, mockDomainObject)).toBeFalsy();
});
it("allows other views", function () {
testView.key = "somethingElse";
expect(policy.allow(testView, mockDomainObject)).toBeTruthy();
});
});
}
);

3
src/MCT.js
View File

@ -33,6 +33,7 @@ define([
'./adapter/indicators/legacy-indicators-plugin',
'./plugins/buildInfo/plugin',
'./ui/registries/ViewRegistry',
'./plugins/imagery/plugin',
'./ui/registries/InspectorViewRegistry',
'./ui/registries/ToolbarRegistry',
'./ui/router/ApplicationRouter',
@ -59,6 +60,7 @@ define([
LegacyIndicatorsPlugin,
buildInfoPlugin,
ViewRegistry,
ImageryPlugin,
InspectorViewRegistry,
ToolbarRegistry,
ApplicationRouter,
@ -257,6 +259,7 @@ define([
this.install(RemoveActionPlugin.default());
this.install(this.plugins.FolderView());
this.install(this.plugins.Tabs());
this.install(ImageryPlugin.default());
this.install(this.plugins.FlexibleLayout());
this.install(this.plugins.GoToOriginalAction());
this.install(this.plugins.ImportExport());

2
src/installDefaultBundles.js
View File

@ -38,7 +38,6 @@ const DEFAULTS = [
'platform/exporters',
'platform/telemetry',
'platform/features/clock',
'platform/features/imagery',
'platform/features/hyperlink',
'platform/features/timeline',
'platform/forms',
@ -82,7 +81,6 @@ define([
'../platform/execution/bundle',
'../platform/exporters/bundle',
'../platform/features/clock/bundle',
'../platform/features/imagery/bundle',
'../platform/features/my-items/bundle',
'../platform/features/hyperlink/bundle',
'../platform/features/static-markup/bundle',

47
src/plugins/imagery/ImageryViewProvider.js Normal file
View File

@ -0,0 +1,47 @@
import ImageryViewLayout from './components/ImageryViewLayout.vue';
import Vue from 'vue';
export default function ImageryViewProvider(openmct) {
const type = 'example.imagery';
const hasImageTelemetry = function (domainObject) {
const metadata = openmct.telemetry.getMetadata(domainObject);
if (!metadata) {
return false;
}
return metadata.valuesForHints(['image']).length > 0;
};
return {
key: type,
name: 'Imagery Layout',
cssClass: 'icon-image',
canView: function (domainObject) {
return hasImageTelemetry(domainObject);
},
view: function (domainObject) {
let component;
return {
show: function (element) {
component = new Vue({
components: {
ImageryViewLayout
},
provide: {
openmct,
domainObject
},
el: element,
template: '<imagery-view-layout ref="ImageryLayout"></imagery-view-layout>'
});
},
destroy: function () {
component.$destroy();
component = undefined;
}
};
}
}
}

249
src/plugins/imagery/components/ImageryViewLayout.vue Normal file
View File

@ -0,0 +1,249 @@
<template>
<multipane class="c-imagery-layout"
type="vertical"
>
<pane :style="{'min-height': `300px`}">
<div class="main-image-wrapper c-imagery has-local-controls">
<div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover l-flex-row c-imagery__lc">
<span class="holder flex-elem grows c-imagery__lc__sliders">
<input v-model="filters.brightness"
class="icon-brightness"
type="range"
min="0"
max="500"
>
<input v-model="filters.contrast"
class="icon-contrast"
type="range"
min="0"
max="500"
>
</span>
<span class="holder flex-elem t-reset-btn-holder c-imagery__lc__reset-btn">
<a class="s-icon-button icon-reset t-btn-reset"
@click="filters={brightness: 100, contrast: 100}"
></a>
</span>
</div>
<div class="main-image s-image-main"
:class="{'paused unnsynced': paused(),'stale':false }"
:style="{'background-image': `url(${getImageUrl()})`,
'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`}"
>
</div>
<div class="l-image-controller flex-elem l-flex-row">
<div class="l-datetime-w flex-elem grows">
<a class="c-button show-thumbs sm hidden icon-thumbs-strip"></a>
<span class="l-time">{{ getTime() }}</span>
</div>
<div class="h-local-controls flex-elem">
<a class="c-button icon-pause pause-play"
:class="{'is-paused': paused()}"
@click="paused(!paused())"
></a>
</div>
</div>
</div>
</pane>
<pane class="c-inspector__elements"
handle="before"
:style="{'min-height': `100px`}"
>
<div class="c-elements-pool">
<div ref="thumbsWrapper"
class="thumbs-layout"
@scroll="handleScroll"
>
<div v-for="(imageData, index) in imageHistory"
:key="index"
class="l-image-thumb-item"
:class="{selected: imageData.selected}"
@click="setSelectedImage(imageData)"
>
<img class="l-thumb"
:src="getImageUrl(imageData)"
>
<div class="l-time">{{ getTime(imageData) }}</div>
</div>
</div>
</div>
</pane>
</multipane>
</template>
<script>
import multipane from '@/ui/layout/multipane.vue';
import pane from '@/ui/layout/pane.vue';
import _ from 'lodash';
export default {
inject: ['openmct', 'domainObject'],
components: {
multipane,
pane
},
data() {
return {
autoScroll: true,
date: '',
filters : {
brightness: 100,
contrast: 100
},
image: {
selected: ''
},
imageFormat: '',
imageHistory: [],
imageUrl: '',
isPaused: false,
requestCount: 0,
timeFormat: ''
}
},
mounted() {
this.keystring = this.openmct.objects.makeKeyString(this.domainObject.identifier);
this.subscribe(this.domainObject);
},
updated() {
this.scrollToBottom();
},
beforeDestroy() {
this.stopListening();
},
methods: {
datumMatchesMostRecent(datum) {
if (this.imageHistory.length === 0) {
return false;
}
const datumTime = this.timeFormat.format(datum);
const datumURL = this.imageFormat.format(datum);
const lastHistoryTime = this.timeFormat.format(this.imageHistory.slice(-1)[0]);
const lastHistoryURL = this.imageFormat.format(this.imageHistory.slice(-1)[0]);
return (datumTime === lastHistoryTime) && (datumURL === lastHistoryURL);
},
getImageUrl(datum) {
return datum ?
this.imageFormat.format(datum) :
this.imageUrl;
},
getTime(datum) {
return datum ?
this.timeFormat.format(datum) :
this.time;
},
handleScroll() {
const thumbsWrapper = this.$refs.thumbsWrapper
if (!thumbsWrapper) {
return;
}
const { scrollLeft, scrollWidth, clientWidth, scrollTop, scrollHeight, clientHeight } = thumbsWrapper;
const disableScroll = (scrollWidth - scrollLeft) > 2 * clientWidth
|| (scrollHeight - scrollTop) > 2 * clientHeight;
this.autoScroll = !disableScroll;
},
paused(state) {
if (arguments.length > 0 && state !== this.isPaused) {
this.unselectAllImages();
this.isPaused = state;
if (this.nextDatum) {
this.updateValues(this.nextDatum);
delete this.nextDatum;
} else {
this.updateValues(this.imageHistory[this.imageHistory.length - 1]);
}
this.autoScroll = true;
}
return this.isPaused;
},
requestHistory(bounds) {
this.requestCount++;
this.imageHistory = [];
const requestId = this.requestCount;
this.openmct.telemetry
.request(this.domainObject, bounds)
.then((values = []) => {
if (this.requestCount > requestId) {
return Promise.resolve('Stale request');
}
values.forEach(this.updateHistory);
this.updateValues(values[values.length - 1]);
});
},
scrollToBottom() {
if (this.isPaused || !this.$refs.thumbsWrapper || !this.autoScroll) {
return;
}
const scrollHeight = this.$refs.thumbsWrapper.scrollHeight || 0;
if (!scrollHeight) {
return;
}
setTimeout(() => this.$refs.thumbsWrapper.scrollTop = scrollHeight, 0);
},
setSelectedImage(image) {
this.imageUrl = this.getImageUrl(image);
this.time = this.getTime(image);
this.paused(true);
this.unselectAllImages();
image.selected = true;
},
stopListening() {
if (this.unsubscribe) {
this.unsubscribe();
delete this.unsubscribe;
}
},
subscribe(domainObject) {
this.date = ''
this.imageUrl = '';
this.openmct.objects.get(this.keystring)
.then((object) => {
const metadata = this.openmct.telemetry.getMetadata(this.domainObject);
this.timeKey = this.openmct.time.timeSystem().key;
this.timeFormat = this.openmct.telemetry.getValueFormatter(metadata.value(this.timeKey));
this.imageFormat = this.openmct.telemetry.getValueFormatter(metadata.valuesForHints(['image'])[0]);
this.unsubscribe = this.openmct.telemetry
.subscribe(this.domainObject, (datum) => {
this.updateHistory(datum);
this.updateValues(datum);
});
this.requestHistory(this.openmct.time.bounds());
});
},
unselectAllImages() {
this.imageHistory.forEach(image => image.selected = false);
},
updateHistory(datum) {
if (this.datumMatchesMostRecent(datum)) {
return;
}
const index = _.sortedIndex(this.imageHistory, datum, this.timeFormat.format.bind(this.timeFormat));
this.imageHistory.splice(index, 0, datum);
},
updateValues(datum) {
if (this.isPaused) {
this.nextDatum = datum;
return;
}
this.time = this.timeFormat.format(datum);
this.imageUrl = this.imageFormat.format(datum);
}
}
}
</script>

32
src/plugins/imagery/components/imagery-view-layout.scss Normal file
View File

@ -0,0 +1,32 @@
.c-imagery-layout {
display: flex;
flex-direction: column;
overflow: auto;
.main-image-wrapper {
display: flex;
flex-direction: column;
height: 100%;
padding-bottom: 5px;
}
.main-image {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 100%;
&.unnsynced{
@include sUnsynced();
}
}
.l-image-controller {
padding: 5px 0 0 0;
}
.thumbs-layout {
margin-top: 5px;
overflow: auto;
}
}

8
src/plugins/imagery/plugin.js Normal file
View File

@ -0,0 +1,8 @@
import ImageryViewProvider from './ImageryViewProvider';
export default function () {
return function install(openmct) {
openmct.objectViews.addProvider(new ImageryViewProvider(openmct));
};
}

3
src/plugins/plugins.js
View File

@ -28,6 +28,7 @@ define([
'./autoflow/AutoflowTabularPlugin',
'./timeConductor/plugin',
'../../example/imagery/plugin',
'./imagery/plugin',
'../../platform/import-export/bundle',
'./summaryWidget/plugin',
'./URLIndicatorPlugin/URLIndicatorPlugin',
@ -57,6 +58,7 @@ define([
AutoflowPlugin,
TimeConductorPlugin,
ExampleImagery,
ImageryPlugin,
ImportExport,
SummaryWidget,
URLIndicatorPlugin,
@ -162,6 +164,7 @@ define([
};
plugins.ExampleImagery = ExampleImagery;
plugins.ImageryPlugin = ImageryPlugin;
plugins.Plot = PlotPlugin;
plugins.TelemetryTable = TelemetryTablePlugin;

1
src/styles/vue-styles.scss
View File

@ -14,6 +14,7 @@
@import "../plugins/folderView/components/grid-view.scss";
@import "../plugins/folderView/components/list-item.scss";
@import "../plugins/folderView/components/list-view.scss";
@import "../plugins/imagery/components/imagery-view-layout.scss";
@import "../plugins/telemetryTable/components/table-row.scss";
@import "../plugins/telemetryTable/components/telemetry-filter-indicator.scss";
@import "../plugins/tabs/components/tabs.scss";

1
webpack.config.js
View File

@ -31,6 +31,7 @@ const webpackConfig = {
},
resolve: {
alias: {
"@": path.join(__dirname, "src"),
"legacyRegistry": path.join(__dirname, "src/legacyRegistry"),
"saveAs": "file-saver",
"csv": "comma-separated-values",