From 5a4a912f79b5648e4f1adf2fb6884dadda8c6e2c Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 17 Jun 2015 20:12:04 -0700
Subject: [PATCH] [Imagery] Only display images when loaded

Wait until image telemetry is completely loaded before
displaying it, WTD-1170.
---
 platform/features/imagery/bundle.json         |  7 ++
 .../imagery/res/templates/imagery.html        |  4 +-
 .../src/directives/MCTBackgroundImage.js      | 89 +++++++++++++++++++
 .../imagery/src/directives/MCTImage.js        | 53 -----------
 4 files changed, 99 insertions(+), 54 deletions(-)
 create mode 100644 platform/features/imagery/src/directives/MCTBackgroundImage.js
 delete mode 100644 platform/features/imagery/src/directives/MCTImage.js

diff --git a/platform/features/imagery/bundle.json b/platform/features/imagery/bundle.json
index 034e3f8313..68c5b27596 100644
--- a/platform/features/imagery/bundle.json
+++ b/platform/features/imagery/bundle.json
@@ -22,6 +22,13 @@
                 "implementation": "controllers/ImageryController.js",
                 "depends": [ "$scope", "telemetryHandler", "telemetryFormatter" ]
             }
+        ],
+        "directives": [
+            {
+                "key": "mctBackgroundImage",
+                "implementation": "directives/MCTBackgroundImage.js",
+                "depends": [ "$document" ]
+            }
         ]
     }
 }
diff --git a/platform/features/imagery/res/templates/imagery.html b/platform/features/imagery/res/templates/imagery.html
index 13864d5375..ae91f9c854 100644
--- a/platform/features/imagery/res/templates/imagery.html
+++ b/platform/features/imagery/res/templates/imagery.html
@@ -29,13 +29,15 @@
         <div
             class="l-image-main s-image-main"
             ng-class="{ paused: imagery.paused(), stale:false }"
-            style="background-image:url('{{imagery.getImageUrl()}}');"
+            mct-background-image="imagery.getImageUrl()"
             >
         </div>
+<!--
         <mct-image class="l-image-main s-image-main"
                    ng-class="{ paused: imagery.paused(), stale: false }"
                    src="imagery.getImageUrl()">
         </mct-image>
+-->
         <div class="l-image-main-controlbar bar">
             <div class="left">
                 <a
diff --git a/platform/features/imagery/src/directives/MCTBackgroundImage.js b/platform/features/imagery/src/directives/MCTBackgroundImage.js
new file mode 100644
index 0000000000..0e5c20e919
--- /dev/null
+++ b/platform/features/imagery/src/directives/MCTBackgroundImage.js
@@ -0,0 +1,89 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    function () {
+        "use strict";
+
+        /**
+         * Defines the `mct-background-image` directive.
+         *
+         * Used as an attribute, this will set the `background-image`
+         * property to the URL given in its value, but only after that
+         * image has loaded; this avoids "flashing" as images change.
+         *
+         * If `src` is falsy, no image will be displayed (immediately.)
+         *
+         */
+        function MCTBackgroundImage($document) {
+            function link(scope, element, attrs) {
+                // General strategy here:
+                // - Keep count of how many images have been requested; this
+                //   counter will be used as an internal identifier or sorts
+                //   for each image that loads.
+                // - As the src attribute changes, begin loading those images.
+                // - When images do load, update the background-image property
+                //   of the element, but only if a more recently
+                //   requested image has not already been loaded.
+                // The order in which URLs are passed in and the order
+                // in which images are actually loaded may be different, so
+                // some strategy like this is necessary to ensure that images
+                // do not display out-of-order.
+                var div, requested = 0, loaded = 0;
+
+                function nextImage(url) {
+                    var myCounter = requested,
+                        image;
+
+                    function useImage() {
+                        if (loaded <= myCounter) {
+                            loaded = myCounter;
+                            element.css('background-image', "url('" + url + "')");
+                        }
+                    }
+
+                    if (!url) {
+                        loaded = myCounter;
+                        element.css('background-image', undefined);
+                    } else {
+                        image = $document[0].createElement('img');
+                        image.src = url;
+                        image.onload = useImage;
+                    }
+
+                    requested += 1;
+                }
+
+                scope.$watch('mctBackgroundImage', nextImage);
+            }
+
+            return {
+                restrict: "A",
+                scope: { mctBackgroundImage: "=" },
+                link: link
+            };
+        }
+
+        return MCTBackgroundImage;
+    }
+);
diff --git a/platform/features/imagery/src/directives/MCTImage.js b/platform/features/imagery/src/directives/MCTImage.js
deleted file mode 100644
index fddafe495e..0000000000
--- a/platform/features/imagery/src/directives/MCTImage.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*global define*/
-
-define(
-    function () {
-        "use strict";
-
-        /**
-         * Defines the `mct-image` directive.
-         *
-         * This takes one attribute, `src`, whose value is an Angular
-         * expression that resolves to an image.
-         *
-         * If `src` is falsy, no image will be displayed (immediately.)
-         *
-         */
-        function MCTImage() {
-            function link(scope, element, attrs) {
-                var div;
-
-                // Add a div
-                element.html('<div></div>');
-                div = element.children().eq(0);
-            }
-
-            return {
-                scope: { src: "=" },
-                link: link
-            };
-        }
-
-    }
-);