I think I've solved the blank screen issue. I've created an app directive that is triggered on imageonload - that hides an ionic loading. When I first show the modal, I display a "please wait". Timeout of 15 second it goes away. Need to test more, but I think this mostly works

5 files changed, 67 insertions, 6 deletions

diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index 283ffa39..fadc9f65 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -56,6 +56,21 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion
         play: "2"
     }
 
+    $scope.initLoadingImage = function()
+    {
+        console.log ("***Loading***");
+       /* $ionicLoading.show({
+            template: "loading, please wait...",
+            noBackdrop: true,
+        });*/
+    }
+
+
+    $scope.finishedLoadingImage = function()
+    {
+         $ionicLoading.hide();
+       // alert ("IMAGE LOADED");
+    }
 
     $scope.eventCommands = eventCommands;
 
@@ -168,10 +183,18 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion
         })
         .then(function (modal) {
             $scope.modal = modal;
+
+            $ionicLoading.show({
+                template: "please wait...",
+                noBackdrop: true,
+                duration:10000
+        })
              $scope.modal.show();
-        });
 
-    };
+        })
+    }
+
+
     $scope.closeModal = function () {
         console.log("Close & Destroy Modal");
         $scope.modal.remove();
diff --git a/www/js/MonitorCtrl.js b/www/js/MonitorCtrl.js
index 69d190d0..def65266 100644
--- a/www/js/MonitorCtrl.js
+++ b/www/js/MonitorCtrl.js
@@ -20,6 +20,22 @@ $scope.reloadView = function ()
             });
 }
 
+$scope.initLoadingImage = function()
+    {
+        console.log ("***Loading***");
+       /* $ionicLoading.show({
+            template: "loading, please wait...",
+            noBackdrop: true,
+        });*/
+    }
+
+
+    $scope.finishedLoadingImage = function()
+    {
+         $ionicLoading.hide();
+       // alert ("IMAGE LOADED");
+    }
+
  $scope.$on('$ionicView.loaded', function(){
     console.log("**VIEW ** Monitor Ctrl Loaded");
   });
@@ -50,6 +66,12 @@ $scope.reloadView = function ()
         })
         .then(function (modal) {
             $scope.modal = modal;
+
+         $ionicLoading.show({
+                template: "please wait...",
+                noBackdrop: true,
+                duration:10000
+        })
             $scope.modal.show();
         });
 
diff --git a/www/js/app.js b/www/js/app.js
index 908f09bf..d4059074 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -5,12 +5,27 @@ angular.module('zmApp', [
 
                         ])
 
+
+.directive('imageonload', function() {
+        return {
+            restrict: 'A',
+            link: function(scope, element, attrs) {
+                element.bind('load', function() {
+                    //call the function that was passed
+                    scope.$apply(attrs.imageonload);
+                });
+            }
+        };
+    })
+
 .directive('img', function () {
+   // element[0].src = 'img/demo.gif';
+
     return {
-        restrict: 'AE',
+        restrict: 'E',
         link: function (scope, element, attrs) {
             console.log ("********** IMG DIRECTIVE ");
-
+ //console.log ("Attr ng-src="+attr.ngSrc);
            // if (!attr.ngSrc)
                // element[0].src = 'img/demo.gif';
             // show an image-missing image
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index 4ff8bc8c..8f43b114 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -14,8 +14,9 @@
 
         <!-- replay can also be gapless -->
         <div ng-if="!isSimulated()">
+
             <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%; ">
-                <img ng-src="{{loginData.url}}/cgi-bin/zms?source=event&mode=jpeg&event={{eventId}}&frame=1&maxfps=5&replay=single&user={{loginData.username}}&pass={{loginData.password}}&connkey={{connKey}}&rand={{rand}}" width="100%" />
+                <img imageonload="finishedLoadingImage()" ng-src="{{loginData.url}}/cgi-bin/zms?source=event&mode=jpeg&event={{eventId}}&frame=1&maxfps=5&replay=single&user={{loginData.username}}&pass={{loginData.password}}&connkey={{connKey}}&rand={{rand}}" width="100%" />
             </ion-scroll>
 
 
diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html
index 5d559605..1d5e5488 100644
--- a/www/templates/monitors-modal.html
+++ b/www/templates/monitors-modal.html
@@ -16,7 +16,7 @@
 
         <div ng-if="!isSimulated()">
             <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%; ">
-                <img ng-src="{{LoginData.url}}/cgi-bin/zms?mode=jpeg&amp;monitor={{monitorId}}&maxfps=3&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}" width="100%" style="background-image:url('http://www.pbase.com/arjunrc/image/159892445/medium.jpg');" />
+                <img imageonload="finishedLoadingImage()" ng-src="{{LoginData.url}}/cgi-bin/zms?mode=jpeg&amp;monitor={{monitorId}}&maxfps=3&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}" width="100%" style="background-image:url('http://www.pbase.com/arjunrc/image/159892445/medium.jpg');" />
             </ion-scroll>
         </div>