Removed force page reloads - now when you exit/resume the page should not flash

8 files changed, 81 insertions, 55 deletions

diff --git a/www/css/style.css b/www/css/style.css
index 7716dfbe..b239d043 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -127,10 +127,10 @@ Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 
 .timelinebuttons {
   position: fixed; /* or absolute */
-  bottom:100px;
+  bottom:130px;
   left: 50%;
-    transform: translate(-50%, -50%);
-    z-index:9999;
+   transform: translate(-50%, -50%);
+    z-index:10;
 }
 
 .eventprogress
diff --git a/www/index.html b/www/index.html
index d5bbb1b3..f1ab5aa9 100644
--- a/www/index.html
+++ b/www/index.html
@@ -58,7 +58,10 @@
     <script src="js/LogCtrl.js"></script>
     <script src="js/EventDateTimeFilterCtrl.js"></script>
     <script src="js/TimelineCtrl.js"></script>
-    <script src="lib/vis/dist/vis.min.js"></script>
+    <!-- <script src="lib/vis/dist/vis.min.js"></script>-->
+
+    <script src="lib/vis/dist/vis-dev.js"></script>
+
 
 
 
@@ -106,7 +109,7 @@
             <ion-nav-view></ion-nav-view>
         </ion-side-menu-content>
 
-        <ion-side-menu side="left">
+        <ion-side-menu >
             <ion-header-bar class="bar bar-header bar-dark">
                 <h1 class="title">Options</h1>
             </ion-header-bar>
diff --git a/www/js/MonitorCtrl.js b/www/js/MonitorCtrl.js
index c4d338e5..a44e4a95 100644
--- a/www/js/MonitorCtrl.js
+++ b/www/js/MonitorCtrl.js
@@ -12,6 +12,8 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
     // Controller Main
     //-----------------------------------------------------------------------
 
+   // var isModalOpen = false;
+
     console.log("***EVENTS: Waiting for Monitors to load before I proceed");
     $scope.monitors = [];
     $scope.monitors = message;
@@ -34,6 +36,7 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
     //-----------------------------------------------------------------------
     $scope.reloadView = function () {
         console.log("*** Refreshing Modal view ***");
+        $rootScope.rand =Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
         $scope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
         $ionicLoading.show({
             template: "refreshed view",
@@ -191,6 +194,10 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
         console.log("**VIEW ** Monitor Ctrl Loaded");
     });
 
+
+
+
+
     //-------------------------------------------------------------------------
     // Lets make sure we set screen dim properly as we enter
     // The problem is we enter other states before we leave previous states
@@ -214,9 +221,12 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
     $scope.openModal = function (mid, controllable, controlid) {
         console.log("Open Monitor Modal with monitor Id=" + mid + " and Controllable:" + controllable + " with control ID:" + controlid);
 
+
         $scope.monitorId = mid;
         $scope.LoginData = ZMDataModel.getLogin();
         $scope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
+          $rootScope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
+
         $scope.ptzMoveCommand = "";
 
         // This is a modal to show the monitor footage
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 055dc0d7..99b6d5b5 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -14,6 +14,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
 
 
     document.addEventListener("pause", onPause, false);
+    document.addEventListener("resume", onResume, false);
 
     $ionicPopover.fromTemplateUrl('templates/help/montage-help.html', {
     scope: $scope,
@@ -164,18 +165,17 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
     // load. Will it bonk with many monitors? Who knows. I have tried with 5 and 1280x960@32bpp
 
 
-    this.loadNotifications = function () {
+    function loadNotifications() {
         // randomval is appended to img src, so after each interval the image reloads
         $scope.randomval = (new Date()).getTime();
+        $rootScope.rand = Math.floor((Math.random() * 100000) + 1);
+       // console.log ("*** Montage timer");
        // console.log ("New " + $scope.randomval);
-    };
+    }
+
+    var intervalHandle ;
 
-    var intervalHandle = $interval(function () {
-        this.loadNotifications();
-        //  console.log ("Refreshing Image...");
-    }.bind(this), 1000);
 
-    this.loadNotifications();
 
     //-------------------------------------------------------------
     // Called when user taps on the reorder button
@@ -398,6 +398,8 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
 
         // Note: no need to setAwake(true) as its already awake
         // in montage view
+
+        $interval.cancel(intervalHandle);
         $scope.monitorId = mid;
 
         $scope.LoginData = ZMDataModel.getLogin();
@@ -456,6 +458,14 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
         // Note: no need to setAwake(false) as needs to be awake
         // in montage view
         $scope.modal.remove();
+        $rootScope.rand = Math.floor((Math.random() * 100000) + 1);
+
+        console.log ("Restarting montage timer...");
+
+        intervalHandle= $interval(function () {
+         loadNotifications();
+        //  console.log ("Refreshing Image...");
+    }.bind(this), 1000);
 
     };
 
@@ -497,7 +507,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
             scaleMontage();
 
         }.bind(this), zm.montageScaleFrequency);
-        console.log("**************" + zm.montageScaleFrequency);
+        console.log("****Interval handle started **********" + zm.montageScaleFrequency);
     };
 
     //---------------------------------------------------------------------
@@ -526,6 +536,16 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
     }
 
 
+    function onResume()
+    {
+            console.log ("Restarting montage timer on resume");
+            $interval.cancel(intervalHandle);
+             intervalHandle= $interval(function () {
+             loadNotifications();
+            //  console.log ("Refreshing Image...");
+        }.bind(this), 1000);
+
+    }
 
     $scope.openMenu = function () {
         $timeout (function() {
@@ -549,6 +569,14 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
         console.log("**VIEW ** Montage Ctrl Entered");
         console.log("Setting Awake to " + ZMDataModel.getKeepAwake());
         ZMDataModel.setAwake(ZMDataModel.getKeepAwake());
+
+        $interval.cancel(intervalHandle);
+         intervalHandle= $interval(function () {
+         loadNotifications();
+        //  console.log ("Refreshing Image...");
+    }.bind(this), 1000);
+
+    loadNotifications();
     });
 
     $scope.$on('$ionicView.leave', function () {
diff --git a/www/js/app.js b/www/js/app.js
index 8f27141a..3cf72c73 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -28,7 +28,7 @@ angular.module('zmApp', [
     largeHttpTimeout:60000,
     logFile:'zmNinjaLog.txt',
     authoremail:'pliablepixels+zmNinja@gmail.com',
-    logFileMaxSize: 50000, // after this limit log gets reset
+    logFileMaxSize: 10000, // after this limit log gets reset
     loginInterval:300000, //5m*60s*1000 - ZM auto login after 5 mins
     loadingTimeout:15000,
     safeMontageLimit:10,
@@ -53,6 +53,10 @@ angular.module('zmApp', [
 
 })
 
+//------------------------------------------------------------------
+// I use this factory to share data between carousel and lazy load
+// carousel will not progress autoslide till imageLoading is 0 or -1
+//-------------------------------------------------------------------
 .factory('imageLoadingDataShare', function () {
     var imageLoading = 0; // 0 = not loading, 1 = loading, -1 = error;
     return {
@@ -107,9 +111,9 @@ angular.module('zmApp', [
                     var loader = $compile('<div class="image-loader-container"><ion-spinner style="position:fixed;top:5%;left:5%" class="image-loader" icon="' + $attributes.imageSpinnerLoader + '"></ion-spinner></div>')($scope);
                     $element.after(loader);
                 }
-                            imageLoadingDataShare.set(1);
-                            loadImage();
-                $attributes.$observe('imageSpinnerSrc', function(value){
+                    imageLoadingDataShare.set(1);
+                    loadImage();
+                    $attributes.$observe('imageSpinnerSrc', function(value){
                     //console.log ("SOURCE CHANGED");
                     imageLoadingDataShare.set(1);
                      loadImage();
@@ -321,8 +325,8 @@ angular.module('zmApp', [
 .run(function ($ionicPlatform, $ionicPopup, $rootScope, zm, $state, $stateParams, ZMDataModel, $cordovaSplashscreen, $http, $interval, zmAutoLogin, $fileLogger,$timeout, $ionicHistory, $window, $ionicSideMenuDelegate)
 {
 
- $rootScope.zmGlobalCookie="";
- $rootScope.isEventFilterOn = false;
+    $rootScope.zmGlobalCookie="";
+    $rootScope.isEventFilterOn = false;
     $rootScope.fromDate = "";
     $rootScope.fromTime= "";
     $rootScope.toDate = "";
@@ -333,8 +337,8 @@ angular.module('zmApp', [
     ZMDataModel.init();
     // for making sure we canuse $state.go with ng-click
     // needed for views that use popovers
-$rootScope.$state = $state;
-  $rootScope.$stateParams = $stateParams;
+    $rootScope.$state = $state;
+    $rootScope.$stateParams = $stateParams;
 
     var loginData = ZMDataModel.getLogin();
 
@@ -348,8 +352,6 @@ $rootScope.$state = $state;
 
     // This code takes care of trapping the Android back button
     // and takes it to the menu.
-
-
     $ionicPlatform.registerBackButtonAction(function(e) {
         e.preventDefault();
         if (!$ionicSideMenuDelegate.isOpenLeft()) {
@@ -361,9 +363,6 @@ $rootScope.$state = $state;
     }, 1000);
 
 
-
-
-
     // this works reliably on both Android and iOS. The "onorientation" seems to reverse w/h in Android. Go figure.
     // http://stackoverflow.com/questions/1649086/detect-rotation-of-android-phone-in-the-browser-with-javascript
 
@@ -372,6 +371,10 @@ $rootScope.$state = $state;
         $rootScope.devWidth = ((window.innerWidth > 0) ? window.innerWidth : screen.width);
         $rootScope.devHeight = ((window.innerHeight > 0) ? window.innerHeight : screen.height);
         console.log("********NEW Computed Dev Width & Height as" + $rootScope.devWidth + "*" + $rootScope.devHeight);
+
+
+
+
         //ZMDataModel.zmLog("Device orientation change: "+$rootScope.devWidth + "*" + $rootScope.devHeight);
     };
 
@@ -411,7 +414,7 @@ $rootScope.$state = $state;
         $fileLogger.checkFile().then(function(resp) {
             if (parseInt(resp.size) > zm.logFileMaxSize)
             {
-                console.log ("Deleting old log file as it exceeds 50K bytes");
+                console.log ("Deleting old log file as it exceeds " + zm.logFileMaxSize+" bytes");
                 $fileLogger.deleteLogfile().then(function()
                 {
                 console.log('Logfile deleted');
@@ -476,29 +479,10 @@ $rootScope.$state = $state;
             $rootScope.rand = Math.floor((Math.random() * 100000) + 1);
             //$scope.rand = Math.floor((Math.random() * 100000) + 1);
             console.log("** generated Random of " + $rootScope.rand);
-            //console.log ("*******************************CURRENT STATE: " + JSON.stringify($state.current));
-            if ($state.current.url == "/timeline")
-            {
-                ZMDataModel.zmLog("Skipping state refresh for Timeline");
-            }
-            else
-            {
-                ZMDataModel.zmLog ("Reloading screen for state " + $state.current.url);
-                $state.go($state.current, {}, {
-                    reload: true
-                });
-            }
-            //$window.location.reload(true);
-            //$route.reload();
-
-            // This sort of solves the problem of inactive windows
-            // if you switch the screen off and on
-            // not ideal as reload removes the Modal and shows the view
-            // but better than an inactive/unresponsive screen
-            // FIXME: see if we can get the modal back
-            $window.location.reload();
             zmAutoLogin.stop(); //safety
             zmAutoLogin.start();
+
+
         }, false);
 
 
@@ -564,13 +548,14 @@ $rootScope.$state = $state;
             templateUrl: "templates/help.html",
             controller: 'zmApp.HelpCtrl',
         })
-    /*
+
     .state('app', {
       url: '/',
       abstract: true,
       templateUrl: 'index.html',
+        cache:false,
       //controller: 'AppCtrl'
-    })*/
+    })
 
 
     .state('monitors', {
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index b66a0655..d98138d0 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -1,6 +1,6 @@
 <div ng-controller="ModalCtrl">
     <!-- style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;"-->
-    <ion-modal-view cache="false" >
+    <ion-modal-view cache-view="false" >
         <ion-content style="background-color:#444444"  ng-cloak>
 
             <ion-scroll has-bouncing=false min-zoom=1 zooming="true"
@@ -15,7 +15,7 @@
                     <li ng-repeat="slide in slides">
 
                          <img imageonload="finishedLoadingImage($index)"
-                                         image-spinner-src="{{loginData.url}}/index.php?view=image&path={{relativePath}}{{slide.img}}"
+                                         image-spinner-src="{{loginData.url}}/index.php?view=image&&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}"
                                              image-spinner-loader="lines"
                                              ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}"/>
 
diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html
index 4e85234d..18556b10 100644
--- a/www/templates/monitors-modal.html
+++ b/www/templates/monitors-modal.html
@@ -3,7 +3,7 @@
 
    <!--style="background-color:#444444;width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;"-->
 
-    <ion-modal-view cache="false" style="background-color:#444444"  >
+    <ion-modal-view cache-view="false" style="background-color:#444444"  >
         <ion-content >
 
                 <ion-scroll has-bouncing=false min-zoom=1 zooming="true"
@@ -13,7 +13,7 @@
                     <div style="height: 100vh;">
                         <img imageonload="finishedLoadingImage()"
                              image-spinner-loader="lines"
-                             image-spinner-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=jpeg&amp;monitor={{monitorId}}&maxfps={{LoginData.maxFPS}}&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}" ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" on-swipe-left="onSwipeLeft(monitorId,-1)" on-swipe-right="onSwipeRight(monitorId,1)" />
+                             image-spinner-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=jpeg&amp;monitor={{monitorId}}&maxfps={{LoginData.maxFPS}}&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{$root.rand}}" ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" on-swipe-left="onSwipeLeft(monitorId,-1)" on-swipe-right="onSwipeRight(monitorId,1)" />
                     </div>
                 </ion-scroll>
         </ion-content>
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 035debd4..259f6587 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -43,7 +43,7 @@
                 <article class="main">
                     <!-- back to ng-src. spinner was not updating when rand changes-->
                     <!-- FIXME: Scale is 50% hardcoded -->
-                    <img image-spinner-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=single&monitor={{monitor.Monitor.Id}}&maxfps={{LoginData.maxFPS}}&scale=50&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{randomval}}" width="{{((devWidth)/(7-monitorSize[$index]))}}px;"
+                    <img image-spinner-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=single&monitor={{monitor.Monitor.Id}}&maxfps={{LoginData.maxFPS}}&scale=50&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{$root.rand}}" width="{{((devWidth)/(7-monitorSize[$index]))}}px;"
                          ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId)"
                          on-hold="onHold($index)"
                          on-release="onRelease($index)"