From 05290593e9a0c2fe2761024d31ae9b2bf8ac9907 Mon Sep 17 00:00:00 2001
From: Preston Crowe <prestonjcrowe@gmail.com>
Date: Wed, 21 Jun 2017 12:15:36 -0700
Subject: [PATCH 1/3] Added imagery timeline view for telemetry sources and
 placeholder template for displaying historical imagery

---
 index.html                                    |  8 ++++--
 platform/features/imagery-timeline/bundle.js  | 28 +++++++++++++++++++
 .../res/templates/timeline.html               |  5 ++++
 3 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 platform/features/imagery-timeline/bundle.js
 create mode 100644 platform/features/imagery-timeline/res/templates/timeline.html

diff --git a/index.html b/index.html
index c51a4ba103..b6498bd88d 100644
--- a/index.html
+++ b/index.html
@@ -30,10 +30,14 @@
     <script>
         var THIRTY_MINUTES = 30 * 60 * 1000;
 
-        require(['openmct'], function (openmct) {
+        require([
+            'openmct',
+            'platform/features/imagery-timeline/bundle'
+        ], function (openmct) {
             [
                 'example/eventGenerator',
-                'example/styleguide'
+                'example/styleguide',
+                'platform/features/imagery-timeline'
             ].forEach(
                 openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
             );
diff --git a/platform/features/imagery-timeline/bundle.js b/platform/features/imagery-timeline/bundle.js
new file mode 100644
index 0000000000..c769748b0a
--- /dev/null
+++ b/platform/features/imagery-timeline/bundle.js
@@ -0,0 +1,28 @@
+define([
+	'openmct'
+], function (
+	openmct
+) {
+	openmct.legacyRegistry.register("platform/features/imagery-timeline", {
+		"name" : "Imagery Timeline",
+		"description": "Provides a timeline view of imagery telemetry.",
+		"extensions": {
+			"views": [
+				{
+					"name": "Imagery Timeline",
+					"key": "imagery.timeline",
+					"cssClass": "icon-image",
+					"templateUrl": "templates/timeline.html",
+					"needs": [ "telemetry" ],
+					"delegation": true
+				}
+			],
+			"stylesheets": [
+				{
+					"stylesheetUrl": "css/timeline.css"
+				}
+			]
+		}
+	})
+
+});
\ 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
new file mode 100644
index 0000000000..6a32fbbcaf
--- /dev/null
+++ b/platform/features/imagery-timeline/res/templates/timeline.html
@@ -0,0 +1,5 @@
+<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>
\ No newline at end of file

From 9f4f7717740188c8ede73a91289793bda8ad61c6 Mon Sep 17 00:00:00 2001
From: Preston Crowe <prestonjcrowe@gmail.com>
Date: Wed, 21 Jun 2017 14:45:33 -0700
Subject: [PATCH 2/3] Updated stylesheet

---
 .../imagery-timeline/res/css/timeline.css     | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 platform/features/imagery-timeline/res/css/timeline.css

diff --git a/platform/features/imagery-timeline/res/css/timeline.css b/platform/features/imagery-timeline/res/css/timeline.css
new file mode 100644
index 0000000000..432eba1f7e
--- /dev/null
+++ b/platform/features/imagery-timeline/res/css/timeline.css
@@ -0,0 +1,27 @@
+.imagery-timeline {
+	height: auto;
+	background-color: black;
+	overflow: auto;	
+	white-space: nowrap;
+	padding:5px;
+	padding-bottom: 15px;
+
+	border-radius: 10px;
+}
+
+.timeline-img {
+	height: 100px;
+	display: inline-block;
+}
+
+.timeline-entry {
+	white-space: nowrap;
+	display: inline;
+}
+
+.timeline-entry p {
+	font-size: 12px;
+	padding: 0px;
+	margin: 0px;
+	color: white;
+}
\ No newline at end of file

From 95e68fce5712f64f979f108966598ae44f91dc6a Mon Sep 17 00:00:00 2001
From: Preston Crowe <prestonjcrowe@gmail.com>
Date: Fri, 23 Jun 2017 13:04:22 -0700
Subject: [PATCH 3/3] Integrated historic and realtime telemetry in imagery
 timeline view, added sass constast for timeline hover color

---
 .../general/res/sass/features/_imagery.scss   |  4 +-
 .../themes/espresso/res/sass/_constants.scss  |  3 +
 .../themes/snow/res/sass/_constants.scss      |  3 +
 platform/features/imagery-timeline/bundle.js  | 14 +++-
 .../imagery-timeline/res/css/timeline.css     | 40 ++++++----
 .../res/templates/timeline.html               | 14 ++--
 .../controllers/ImageryTimelineController.js  | 79 +++++++++++++++++++
 7 files changed, 134 insertions(+), 23 deletions(-)
 create mode 100644 platform/features/imagery-timeline/src/controllers/ImageryTimelineController.js

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 @@
-<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>
\ No newline at end of file
+
+<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>
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