ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-22 06:27:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Integrated historic and realtime telemetry in imagery timeline view, added sass constast for timeline hover color

Browse Source
This commit is contained in:
Preston Crowe 2017-06-23 13:04:22 -07:00 committed by Pete Richards
parent 9f4f771774
commit 95e68fce57
7 changed files with 134 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
platform/commonUI/general/res/sass/features/_imagery.scss
View File

@ -83,7 +83,7 @@
.l-image-thumbs-wrapper {
//@include test(green);
direction: rtl;
//direction: rtl;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: $interiorMargin;
@ -114,7 +114,7 @@
width: $imageThumbsD + $imageThumbPad*2;
white-space: normal;
&:hover {
background: rgba(#fff, 0.2);
background: $colorThumbHoverBg;
.l-date,
.l-time {
color: #fff;

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

@ -191,6 +191,9 @@ $colorItemTreeVCHover: pullForward($colorItemTreeVC, 20%);
$colorItemTreeSelectedVC: $colorItemTreeVC;
$shdwItemTreeIcon: 0.6;
// Images
$colorThumbHoverBg: $colorItemTreeHoverBg;
// Scrollbar
$scrollbarTrackSize: 10px;
$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;

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

@ -191,6 +191,9 @@ $colorItemTreeVCHover: $colorKey;
$colorItemTreeSelectedVC: $colorBodyBg;
$shdwItemTreeIcon: none;
// Images
$colorThumbHoverBg: $colorItemTreeHoverBg;
// Scrollbar
$scrollbarTrackSize: 10px;
$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;

14
platform/features/imagery-timeline/bundle.js
View File

@ -1,7 +1,10 @@
define([
'openmct'
'openmct',
'./src/controllers/ImageryTimelineController',
], function (
openmct
openmct,
ImageryTimelineController
) {
openmct.legacyRegistry.register("platform/features/imagery-timeline", {
"name" : "Imagery Timeline",
@ -21,6 +24,13 @@ define([
{
"stylesheetUrl": "css/timeline.css"
}
],
"controllers": [
{
"key": "ImageryTimelineController",
"implementation": ImageryTimelineController,
"depends": ["$scope", "openmct"]
}
]
}
})

40
platform/features/imagery-timeline/res/css/timeline.css
View File

@ -1,27 +1,39 @@
.imagery-timeline {
height: auto;
background-color: black;
overflow: auto;
white-space: nowrap;
padding:5px;
padding-bottom: 15px;
border-radius: 10px;
.timeline-container {
}
.imagery-timeline {
height: auto;
background-color: #333;
overflow-x: scroll;
white-space: nowrap;
padding-bottom:10px;
}
.timeline-img {
height: 100px;
display: inline-block;
height: 125px;
/* display: inline;*/
}
.timeline-entry {
white-space: nowrap;
display: inline;
display: inline-block;
background-color: #333;
}
.timeline-entry:hover {
background-color:#0099cc;
}
.timeline-entry p {
font-size: 12px;
padding: 0px;
padding-left: 5px;
margin: 0px;
color: white;
color: #fff;
cursor: default;
}
.timstamp {
display: inline;
}

14
platform/features/imagery-timeline/res/templates/timeline.html
View File

@ -1,5 +1,9 @@
<div class="imagery-timeline">
<img class="timeline-img"
src="https://www.jpl.nasa.gov/images/msl/20140203/pia17931-640.jpg"
ng-repeat="n in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]">
</div>
<div class="l-image-thumbs-wrapper"ng-controller="ImageryTimelineController">
<div class="l-image-thumb-item" ng-repeat="image in images">
<img class="l-thumb"
src={{image['url']}}>
<div class="l-date">{{image['utc']}}</div>
<!-- <div class="l-time">16:03:0{{$index}}</div> -->
</div>
</div>

79
platform/features/imagery-timeline/src/controllers/ImageryTimelineController.js Normal file
View File

@ -0,0 +1,79 @@
// To do:
// use moment to format timestamp
// seperate functions for loading history and realtime imagery
// wait to display images until after load
define(
['moment'],
function (moment) {
function ImageryTimelineController($scope, openmct) {
$scope.images = [];
this.$scope = $scope;
this.openmct = openmct;
this.date = "";
this.time = "";
this.zone = "";
this.imageUrl = "";
this.history = {};
this.subscribe = this.subscribe.bind(this);
this.updateValues = this.updateValues.bind(this);
// Subscribes to telemetry when domain objec is available
this.subscribe(this.$scope.domainObject);
this.$scope.$on("$destroy", this.stopListening);
}
ImageryTimelineController.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);
var timeKey = this.openmct.time.timeSystem().key;
this.timeFormat = this.openmct
.telemetry
.getValueFormatter(metadata.value(timeKey));
this.imageFormat = this.openmct
.telemetry
.getValueFormatter(metadata.valuesForHints(['image'])[0]);
this.unsubscribe = this.openmct.telemetry
.subscribe(this.domainObject, this.updateValues);
this.openmct.telemetry
.request(this.domainObject, {
strategy: 'all',
start: Date.now(),
end: Date.now() + 90000 // for testing purposes, gets full image
// set (17 images, 5000ms between each)
})
.then(function (values) {
values.forEach(function(datum) {
this.updateValues(datum);
}.bind(this));
}.bind(this));
}.bind(this));
};
ImageryTimelineController.prototype.updateValues = function (datum) {
if (this.isPaused) {
this.nextDatum = datum;
return;
}
this.$scope.images.push(datum);
this.time = this.timeFormat.format(datum);
this.imageUrl = this.imageFormat.format(datum);
};
ImageryTimelineController.prototype.stopListening = function () {
if (this.unsubscribe) {
this.unsubscribe();
delete this.unsubscribe;
}
};
return ImageryTimelineController;
});