[Imagery] Sketch in brightness/contrast controls

Fixes #1324

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>

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

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