diff --git a/platform/commonUI/general/res/sass/features/_imagery.scss b/platform/commonUI/general/res/sass/features/_imagery.scss index 49fcc9c98c..d404c07a44 100644 --- a/platform/commonUI/general/res/sass/features/_imagery.scss +++ b/platform/commonUI/general/res/sass/features/_imagery.scss @@ -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; diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 1a269a22c7..9d1886c13a 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -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; diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 99e09048a3..4501228e08 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -191,6 +191,9 @@ $colorItemTreeVCHover: $colorKey; $colorItemTreeSelectedVC: $colorBodyBg; $shdwItemTreeIcon: none; +// Images +$colorThumbHoverBg: $colorItemTreeHoverBg; + // Scrollbar $scrollbarTrackSize: 10px; $scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px; diff --git a/platform/features/imagery-timeline/bundle.js b/platform/features/imagery-timeline/bundle.js index c769748b0a..ba173fef20 100644 --- a/platform/features/imagery-timeline/bundle.js +++ b/platform/features/imagery-timeline/bundle.js @@ -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"] + } ] } }) diff --git a/platform/features/imagery-timeline/res/css/timeline.css b/platform/features/imagery-timeline/res/css/timeline.css index 432eba1f7e..c6f6807177 100644 --- a/platform/features/imagery-timeline/res/css/timeline.css +++ b/platform/features/imagery-timeline/res/css/timeline.css @@ -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; } \ No newline at end of file diff --git a/platform/features/imagery-timeline/res/templates/timeline.html b/platform/features/imagery-timeline/res/templates/timeline.html index 6a32fbbcaf..2e9d0b9e9c 100644 --- a/platform/features/imagery-timeline/res/templates/timeline.html +++ b/platform/features/imagery-timeline/res/templates/timeline.html @@ -1,5 +1,9 @@ -
- -
\ No newline at end of file + +
+
+ +
{{image['utc']}}
+ +
+
diff --git a/platform/features/imagery-timeline/src/controllers/ImageryTimelineController.js b/platform/features/imagery-timeline/src/controllers/ImageryTimelineController.js new file mode 100644 index 0000000000..ce38513872 --- /dev/null +++ b/platform/features/imagery-timeline/src/controllers/ImageryTimelineController.js @@ -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; +}); \ No newline at end of file