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 @@
+ mct-background-image="imagery.getImageUrl()"
+ filters="filters">
@@ -32,6 +33,16 @@
{{imagery.getDate()}}
+
+
+
+
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
};
}