mirror of
https://github.com/nasa/openmct.git
synced 2024-12-22 06:27:48 +00:00
Integrated historic and realtime telemetry in imagery timeline view, added sass constast for timeline hover color
This commit is contained in:
Preston Crowe
Pete Richards
parent
9f4f771774
commit
95e68fce57
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -191,6 +191,9 @@ $colorItemTreeVCHover: $colorKey;
|
||||
$colorItemTreeSelectedVC: $colorBodyBg;
|
||||
$shdwItemTreeIcon: none;
|
||||
|
||||
// Images
|
||||
$colorThumbHoverBg: $colorItemTreeHoverBg;
|
||||
|
||||
// Scrollbar
|
||||
$scrollbarTrackSize: 10px;
|
||||
$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
|
||||
|
||||
@ -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"]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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 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>
|
||||
@ -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;
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user