From 3e6e068f7f43fec1caef87535f9d561404d28e5c Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 10 Nov 2016 13:33:56 -0800
Subject: [PATCH] [Imagery] Sketch in brightness/contrast controls

Fixes #1324
---
 .../features/imagery/res/templates/imagery.html   | 13 ++++++++++++-
 .../imagery/src/controllers/ImageryController.js  |  5 +++++
 .../imagery/src/directives/MCTBackgroundImage.js  | 15 ++++++++++++++-
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/platform/features/imagery/res/templates/imagery.html b/platform/features/imagery/res/templates/imagery.html
index fbdf4535af..9c222c6715 100644
--- a/platform/features/imagery/res/templates/imagery.html
+++ b/platform/features/imagery/res/templates/imagery.html
@@ -20,7 +20,8 @@
 
         <div class="l-image-main s-image-main flex-elem grows"
             ng-class="{ paused: imagery.paused(), stale:false }"
-            mct-background-image="imagery.getImageUrl()">
+            mct-background-image="imagery.getImageUrl()"
+            filters="filters">
         </div>
 
         <div class="l-image-main-controlbar flex-elem l-flex-row">
@@ -32,6 +33,16 @@
                 <span class="l-date">{{imagery.getDate()}}</span>
             </div>
             <div class="right flex-elem">
+                <input type="range"
+                       min="0"
+                       max="200"
+                       ng-model="filters.contrast">
+                </input>
+                <input type="range"
+                       min="0"
+                       max="200"
+                       ng-model="filters.brightness">
+                </input>
                 <a class="s-button pause-play"
                     ng-click="imagery.paused(!imagery.paused())"
                     ng-class="{ paused: imagery.paused() }"></a>
diff --git a/platform/features/imagery/src/controllers/ImageryController.js b/platform/features/imagery/src/controllers/ImageryController.js
index 33a442c206..71e5268a10 100644
--- a/platform/features/imagery/src/controllers/ImageryController.js
+++ b/platform/features/imagery/src/controllers/ImageryController.js
@@ -66,6 +66,11 @@ define(
                 );
             }
 
+            $scope.filters = {
+                brightness: 100,
+                contrast: 100
+            };
+
             // Subscribe to telemetry when a domain object becomes available
             $scope.$watch('domainObject', subscribe);
 
diff --git a/platform/features/imagery/src/directives/MCTBackgroundImage.js b/platform/features/imagery/src/directives/MCTBackgroundImage.js
index d03c865e69..f7c1152963 100644
--- a/platform/features/imagery/src/directives/MCTBackgroundImage.js
+++ b/platform/features/imagery/src/directives/MCTBackgroundImage.js
@@ -51,6 +51,15 @@ define(
                 // do not display out-of-order.
                 var requested = 0, loaded = 0;
 
+                function updateFilters(filters) {
+                    var styleValue = filters ?
+                        Object.keys(filters).map(function (k) {
+                            return k + "(" + filters[k] + "%)";
+                        }).join(' ') :
+                        "";
+                    element.css('filter', styleValue);
+                }
+
                 function nextImage(url) {
                     var myCounter = requested,
                         image;
@@ -75,11 +84,15 @@ define(
                 }
 
                 scope.$watch('mctBackgroundImage', nextImage);
+                scope.$watchCollection('filters', updateFilters);
             }
 
             return {
                 restrict: "A",
-                scope: { mctBackgroundImage: "=" },
+                scope: {
+                    mctBackgroundImage: "=",
+                    filters: "="
+                },
                 link: link
             };
         }