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

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;

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;

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;

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"]
+				}
 			]
 		}
 	})

platform/features/imagery-timeline/res/css/timeline.css

@@ -1,27 +1,39 @@
-.imagery-timeline {
+.timeline-container {
-	height: auto;
-	background-color: black;
-	overflow: auto;	
-	white-space: nowrap;
-	padding:5px;
-	padding-bottom: 15px;
-
-	border-radius: 10px;
 }
 
+.imagery-timeline {
+	height: auto;
+	background-color: #333;
+	overflow-x: scroll;
+	white-space: nowrap;
+    padding-bottom:10px;
+}
+
+
 .timeline-img {
-	height: 100px;
+	height: 125px;
-	display: inline-block;
+/*	display: inline;*/
 }
 
 .timeline-entry {
-	white-space: nowrap;
+	display: inline-block;
-	display: inline;
+	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;
 }

platform/features/imagery-timeline/res/templates/timeline.html

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

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;
+});