Android Users Rejoice! Major updates: Android port works like a charm now. Integrated Crosswalk for good performance for Android phones, reworked Montage view to step around Chrome's problem of getting stuck in pending state for HTTP requests that don't close soon and more.

author: ARC <arjunrc@gmail.com> 2015-05-02 16:36:34 -0400
committer: ARC <arjunrc@gmail.com> 2015-05-02 16:36:34 -0400
commit: 3eb690e300d797433455c1fcbd9a769c15aa9d7c (patch)
tree: f366512aedac1bba31bf22e440edf49e7003bcf3
parent: 9faf95be527b8b7c23e4ed4226c35bb771129f41 (diff)
13 files changed, 285 insertions, 243 deletions
diff --git a/ionic.project b/ionic.project
index f6c258f8..c7932599 100644
--- a/ionic.project
+++ b/ionic.project
@@ -5,7 +5,7 @@
     {
       "platform": "android",
       "browser": "crosswalk",
-      "version": "12.41.296.5"
+      "version": "13.41.318.0"
     }
   ]
 }
 \ No newline at end of file
diff --git a/www/css/style.css b/www/css/style.css
index 3c0e8339..1aadaba5 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -1,7 +1,16 @@
-/* Empty. Add your own CSS if you like */
-
-
+/* Using this for full screen modals for event and monitor mode */
 
+.modal{
+  top: 0 ;
+  bottom: 0 ;
+  left: 0 ;
+  right: 0 ;
+  width: 100% ;
+}
+/* I am using flexboxes to dynamicall adapt content
+in montage view.
+Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+*/
 .wrapper {
     display: -webkit-box;
     display: -moz-box;
@@ -58,6 +67,7 @@
     .footer  { order: 4; }
 }
 
+/* Not using this -eventually. Think notification badges on buttons */
 .notification-badge{
   position: absolute;
   top: 3px;
@@ -65,10 +75,4 @@
   font-size: 8px;
 }
 
-.modal{
-  top: 0 ;
-  bottom: 0 ;
-  left: 0 ;
-  right: 0 ;
-  width: 100% ;
-}
+
diff --git a/www/index.html b/www/index.html
index 607ec11a..3b2e2e12 100644
--- a/www/index.html
+++ b/www/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
-     
+     <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' https://www.google.com 'unsafe-inline' 'unsafe-eval'">
     <title></title>
 
     <link href="lib/ionic/css/ionic.css" rel="stylesheet">
diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index b0ae8ca3..e44fedb6 100644
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -47,7 +47,6 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
                 });
 
             }
-            // console.log ("Simulated: "+JSON.stringify(simmonitors));
             return simmonitors;
         },
 
@@ -187,7 +186,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
                     template: 'Loading Monitors...',
                     animation: 'fade-in',
                     showBackdrop: true,
-                    duration:10000,
+                    duration:15000,
                     maxWidth: 200,
                     showDelay: 0
                 });
@@ -197,7 +196,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
                 console.log("ZMDataModel: Invoking HTTP get to load monitors");
                 var apiurl = loginData.apiurl;
                 var myurl = apiurl + "/monitors.json";
-                $http.get(myurl, {timeout:10000})
+                $http.get(myurl /*,{timeout:15000}*/)
                     .success(function (data) {
                         //console.log("HTTP success got " + JSON.stringify(data.monitors));
                         monitors = data.monitors;
@@ -256,7 +255,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
                     showBackdrop: true,
                     maxWidth: 200,
                     showDelay: 0,
-                    duration:10000, //specifically for Android - http seems to get stuck at times
+                    duration:15000, //specifically for Android - http seems to get stuck at times
                 });
 
             var d = $q.defer();
@@ -280,7 +279,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
                 return d.promise;
             } else { // not simulated
 
-                $http.get(myurl,  {timeout:10000})
+                $http.get(myurl  /*,{timeout:15000}*/)
                     .success(function (data) {
                         $ionicLoading.hide();
                         myevents = data.events.reverse();
@@ -342,13 +341,5 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion
             return "(Unknown)";
         },
 
-        getMontageImagePath: function () {
-
-            var path = "{{LoginData.url}}/cgi-bin/nph-zms?mode=jpeg&amp;monitor={{monitor.Monitor.Id}}&scale=100&maxfps=3&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}";
-
-            return (path);
-        }
-
-
     };
 }]);
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index 963ef3d3..e4d70eea 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -12,6 +12,10 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion
     }
 
     $scope.reloadView = function () {
+        // All we really need to do here is change the random token
+        // in the image src and it will refresh. No need to reload the view
+        // and if you did reload the view, it would go back to events list
+        // which is the view - and when you are in the modal it will go away
         console.log("*** Refreshing Modal view ***");
         //$state.go($state.current, {}, {reload: true});
         $scope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
@@ -43,9 +47,8 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion
     });
 
 
-    // This is a modal to show the event footage
-
-
+    // These are the commands ZM uses to move around
+    // in ZMS
     var eventCommands = {
         next: "13",
         previous: "12",
@@ -56,14 +59,15 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion
         play: "2"
     }
 
-    
-
+    // When loading images, it sometimes takes time -  the images can be quite
+    // large. What practically was happening was you'd see a blank screen for a few
+    // seconds. Not a good UX. So what I am doing is when the events modal or
+    // monitor modal is loaded, I show an ionic loading. And then when the first frame
+    // finishes loading, I take it away
 
-    $scope.finishedLoadingImage = function()
-    {
-        console.log ("*** Events image FINISHED loading ***");
-         $ionicLoading.hide();
-       // alert ("IMAGE LOADED");
+    $scope.finishedLoadingImage = function () {
+        console.log("*** Events image FINISHED loading ***");
+        $ionicLoading.hide();
     }
 
     $scope.eventCommands = eventCommands;
@@ -84,11 +88,11 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion
         }
 
         $ionicLoading.hide();
-            $ionicLoading.show({
-                template: "please wait...",
-                noBackdrop: true,
-                duration: 10000,
-            });
+        $ionicLoading.show({
+            template: "please wait...",
+            noBackdrop: true,
+            duration: 15000,
+        });
 
         var loginData = ZMDataModel.getLogin();
 
@@ -117,10 +121,15 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion
             break;
         };
 
-        console.log ("** POST URL " +loginData.url+ 'zm/index.php');
+        console.log("** POST URL " + loginData.url + 'zm/index.php');
+        // You need to POST commands to control zms
+        // Note that I am url encoding the parameters into the URL
+        // If I leave it as JSON, it gets converted to OPTONS due
+        // to CORS behaviour and ZM/Apache don't seem to handle it
+
         var req = $http({
             method: 'POST',
-            timeout: 10000,
+            /*timeout: 15000,*/
             url: loginData.url + '/zm/index.php',
             headers: {
                 'Content-Type': 'application/x-www-form-urlencoded',
@@ -163,6 +172,11 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion
         });
     }
 
+    // This is called when we first tap on an event to see
+    // the feed. It's important to instantiate ionicModal here
+    // as otherwise you'd instantiate it when the view loads
+    // and our "Please wait loading" technique I explained
+    //earlier won't work
 
     $scope.openModal = function (eid, ename, edur) {
         console.log("Open Modal");
@@ -173,29 +187,31 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion
         $scope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
 
         $ionicModal.fromTemplateUrl('templates/events-modal.html', {
-            scope: $scope,
-            animation: 'slide-in-up'
-        })
-        .then(function (modal) {
-            $scope.modal = modal;
-
-            $ionicLoading.show({
-                template: "please wait...",
-                noBackdrop: true,
-                duration:10000
-        })
-             $scope.modal.show();
-
-        })
+                scope: $scope,
+                animation: 'slide-in-up'
+            })
+            .then(function (modal) {
+                $scope.modal = modal;
+
+                $ionicLoading.show({
+                    template: "please wait...",
+                    noBackdrop: true,
+                    duration: 10000
+                })
+                $scope.modal.show();
+
+            })
     }
 
-
+    // We need to destroy because we are instantiating
+    // it on open
     $scope.closeModal = function () {
         console.log("Close & Destroy Modal");
         $scope.modal.remove();
 
     };
-    //Cleanup the modal when we're done with it!
+    //Cleanup the modal when we're done with it
+    // I Don't think it ever comes here
     $scope.$on('$destroy', function () {
         console.log("Destroy Modal");
         $scope.modal.remove();
@@ -203,8 +219,11 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion
 
     console.log("***CALLING EVENTS FACTORY");
     var lData = ZMDataModel.getLogin();
-    console.log("ZM Service Username = " + lData.username);
     $scope.monitors = message;
+
+    // I am converting monitor ID to monitor Name
+    // so I can display it along with Events
+    // Is there a better way?
     $scope.events = ZMDataModel.getEvents($scope.id)
         .then(function (data) {
             console.log("EventCtrl Got events");
diff --git a/www/js/EventsGraphsCtrl.js b/www/js/EventsGraphsCtrl.js
index 5cd5e71a..63ec3b56 100644
--- a/www/js/EventsGraphsCtrl.js
+++ b/www/js/EventsGraphsCtrl.js
@@ -2,6 +2,9 @@
 // the main function is generateChart. I call generate chart with required parameters
 // from the template file
 
+// FIXME: I need to clean this up, the animation is stupid because the data loads
+// dynamically
+
 angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', function ($ionicPlatform, $scope, ZMDataModel, $ionicSideMenuDelegate, $rootScope, $http) {
     console.log("Inside Graphs controller");
     $scope.openMenu = function () {
@@ -87,7 +90,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', functio
                     console.log("Monitor event URL:" + url);
                     if (!ZMDataModel.isSimulated())
                     {
-                    $http.get(url, {timeout:10000})
+                    $http.get(url /*,{timeout:15000}*/)
                         .success(function (data) {
                             console.log("**** EVENT COUNT FOR MONITOR " +
                                 monitors[j].Monitor.Id + " IS " + data.pagination.count);
@@ -110,7 +113,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', functio
 
                         });
                     } // is not simulated
-                    else // grab a random event count
+                    else // simulated: grab a random event count
                     {
                         var rndEventCount = Math.floor(Math.random() * (100 - 20 + 1)) + 20;
                         $scope.chartObject.data.push([monitors[j].Monitor.Name, rndEventCount,
diff --git a/www/js/MonitorCtrl.js b/www/js/MonitorCtrl.js
index 4e217464..80758cdd 100644
--- a/www/js/MonitorCtrl.js
+++ b/www/js/MonitorCtrl.js
@@ -1,80 +1,79 @@
 // controller for Monitor View
+// refer to comments in EventCtrl for the modal stuff. They are almost the same
 
-angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', function ($scope, ZMDataModel, message,$ionicSideMenuDelegate, $ionicLoading, $ionicModal, $state, $ionicLoading) {
+angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', function ($scope, ZMDataModel, message, $ionicSideMenuDelegate, $ionicLoading, $ionicModal, $state, $ionicLoading) {
 
     $scope.monitors = [];
 
 
-$scope.openMenu = function () {
-    $ionicSideMenuDelegate.toggleLeft();
-  }
+    $scope.openMenu = function () {
+        $ionicSideMenuDelegate.toggleLeft();
+    }
 
-$scope.reloadView = function ()
-{
-    console.log ("*** Refreshing Modal view ***");
-     $scope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
-    $ionicLoading.show({
-                template: "refreshed view",
-                noBackdrop: true,
-                duration: 2000
-            });
-}
+    $scope.reloadView = function () {
+        console.log("*** Refreshing Modal view ***");
+        $scope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
+        $ionicLoading.show({
+            template: "refreshed view",
+            noBackdrop: true,
+            duration: 2000
+        });
+    }
 
-$scope.isSimulated = function () {
+    $scope.isSimulated = function () {
         return ZMDataModel.isSimulated();
     };
 
-
-$scope.finishedLoadingImage = function()
-    {
-        console.log ("***Monitor image FINISHED Loading***");
+    // same logic as EventCtrl.js
+    $scope.finishedLoadingImage = function () {
+        console.log("***Monitor image FINISHED Loading***");
         $ionicLoading.hide();
-       /* $ionicLoading.show({
-            template: "loading, please wait...",
-            noBackdrop: true,
-        });*/
+        /* $ionicLoading.show({
+             template: "loading, please wait...",
+             noBackdrop: true,
+         });*/
     }
 
-   
 
- $scope.$on('$ionicView.loaded', function(){
-    console.log("**VIEW ** Monitor Ctrl Loaded");
-  });
 
-    $scope.$on('$ionicView.enter', function(){
-    console.log("**VIEW ** Monitor Ctrl Entered");
-  });
+    $scope.$on('$ionicView.loaded', function () {
+        console.log("**VIEW ** Monitor Ctrl Loaded");
+    });
+
+    $scope.$on('$ionicView.enter', function () {
+        console.log("**VIEW ** Monitor Ctrl Entered");
+    });
 
-      $scope.$on('$ionicView.leave', function(){
-    console.log("**VIEW ** Monitor Ctrl Left");
-  });
+    $scope.$on('$ionicView.leave', function () {
+        console.log("**VIEW ** Monitor Ctrl Left");
+    });
 
-         $scope.$on('$ionicView.unloaded', function(){
-    console.log("**VIEW ** Monitor Ctrl Unloaded");
-  });
+    $scope.$on('$ionicView.unloaded', function () {
+        console.log("**VIEW ** Monitor Ctrl Unloaded");
+    });
 
- $scope.openModal = function (mid) {
+    $scope.openModal = function (mid) {
         console.log("Open Monitor Modal");
 
         $scope.monitorId = mid;
         $scope.LoginData = ZMDataModel.getLogin();
         $scope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
 
-     // This is a modal to show the monitor footage
-    $ionicModal.fromTemplateUrl('templates/monitors-modal.html', {
-            scope: $scope,
-            animation: 'slide-in-up'
-        })
-        .then(function (modal) {
-            $scope.modal = modal;
-
-         $ionicLoading.show({
-                template: "please wait...",
-                noBackdrop: true,
-                duration:10000
-        })
-            $scope.modal.show();
-        });
+        // This is a modal to show the monitor footage
+        $ionicModal.fromTemplateUrl('templates/monitors-modal.html', {
+                scope: $scope,
+                animation: 'slide-in-up'
+            })
+            .then(function (modal) {
+                $scope.modal = modal;
+
+                $ionicLoading.show({
+                    template: "please wait...",
+                    noBackdrop: true,
+                    duration: 15000
+                })
+                $scope.modal.show();
+            });
 
     };
     $scope.closeModal = function () {
@@ -93,9 +92,6 @@ $scope.finishedLoadingImage = function()
     console.log("***EVENTS: Waiting for Monitors to load before I proceed");
 
     $scope.monitors = message;
-    // console.log("I GOT " + $scope.monitors);
-
-    console.log("HERE");
 
     $scope.doRefresh = function () {
         console.log("***Pull to Refresh");
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 698c586b..57573c5e 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -1,12 +1,54 @@
 // Controller for the montage view
 
-angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', function ($scope, $rootScope, ZMDataModel, message,$ionicSideMenuDelegate) {
+angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', function ($scope, $rootScope, ZMDataModel, message,$ionicSideMenuDelegate, $timeout, $interval) {
     
+    var timestamp = new Date().getUTCMilliseconds();
+
+
+// In Android, the app runs full steam while in background mode
+// while in iOS it gets suspended unless you ask for specific resources
+// So while this view, we DON'T want Android to keep sending 1 second
+// refreshes to the server for images we are not seeing!
+
+function onPause() {
+ console.log ("*** Moving to Background ***");   // Handle the pause event
+     console.log ("*** CANCELLING INTERVAL ****");
+         $interval.cancel(intervalHandle);
+}
+
+    document.addEventListener("pause", onPause, false);
+
+    // I was facing a lot of problems with Chrome/crosswalk getting stuck with
+    // pending HTTP requests after a while. There is a problem with chrome handling
+    // multiple streams of always open HTTP get's (image streaming). This problem
+    // does not arise when the image is streamed for a single monitor - just multiple
+
+    // To work around this I am taking a single snapshot of ZMS and have implemented a timer
+    // to reload the snapshot every 1 second. Seems to work reliably even thought its a higer
+    // load. Will it bonk with many monitors? Who knows. I have tried with 5 and 1280x960@32bpp
+
+
+     this.loadNotifications = function (){
+     // randomval is appended to img src, so after each interval the image reloads
+      $scope.randomval = (new Date()).getTime();
+      //console.log ("**** NOTIFICATION with rand="+$scope.randomval+"*****");
+     };
+
+    var intervalHandle = $interval(function(){
+      this.loadNotifications();
+   }.bind(this), 1000);
+
+    this.loadNotifications();
     
     $scope.openMenu = function () {
     $ionicSideMenuDelegate.toggleLeft();
   }
 
+     $scope.$on('$destroy', function () {
+         console.log ("*** CANCELLING INTERVAL ****");
+         $interval.cancel(intervalHandle);
+     });
+
 
     $scope.$on('$ionicView.loaded', function(){
     console.log("**VIEW ** Montage Ctrl Loaded");
@@ -25,19 +67,12 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', function ($s
   });
 
 
-
-    $scope.getMontageImagePath = function ()
-    {
-        return ZMDataModel.getMontageImagePath();
-    }
-
     $scope.isSimulated = function ()
     {
         return ZMDataModel.isSimulated();
     }
 
 
-    //var monsize =3;
     console.log("********* Inside Montage Ctrl");
     $scope.LoginData = ZMDataModel.getLogin();
 
@@ -50,11 +85,12 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', function ($s
     $scope.$on('$ionicView.afterEnter', function () {
         // This rand is really used to reload the monitor image in img-src so it is not cached
         // I am making sure the image in montage view is always fresh
+        // I don't think I am using this anymore FIXME: check and delete if needed
         $rootScope.rand = Math.floor((Math.random() * 100000) + 1);
-        console.log("Rootscoxxpe Montage is " + ZMDataModel.getMontageSize() + " and slider montage is " + $scope.slider.monsize);
     });
 
-
+    // we are monitoring the slider for movement here
+    // make sure this is an object - so its passed by reference from the template to the controller!
     $scope.$watch('slider.monsize', function () {
         console.log('Slider has changed');
         ZMDataModel.setMontageSize($scope.slider.monsize);
diff --git a/www/js/app.js b/www/js/app.js
index be83cd23..93c1871b 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -6,46 +6,45 @@ angular.module('zmApp', [
                         ])
 
 
+
+
 // this directive will be load any time an image completes loading 
 // via img tags where this directive is added (I am using this in
 // events and mionitor view to show a loader while the image is
 // downloading from ZM
-.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('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';
+// In Android, HTTP requests seem to get stuck once in a while
+// It may be a crosswalk issue.
+// To tackle this gracefully, I've set up a global interceptor
+// If the HTTP request does not complete in 15 seconds, it cancels
+// That way the user can try again, and won't get stuck
+// Also remember you need to add it to .config
 
+.factory('timeoutHttpIntercept', function ($rootScope, $q) {
+    console.log("*** HTTP INTERCEPTOR CALLED ***");
     return {
-        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
-           // element.error(function () {
-
-          //  });
+        'request': function (config) {
+            config.timeout = 15000;
+            console.log("*** HTTP INTERCEPTOR CALLED ***");
+            return config;
         }
-    }
-})*/
-
-.run(function ($ionicPlatform, $ionicPopup, $rootScope, $state, ZMDataModel,$cordovaSplashscreen) {
+    };
+})
 
-   
+.run(function ($ionicPlatform, $ionicPopup, $rootScope, $state, ZMDataModel, $cordovaSplashscreen) {
 
     ZMDataModel.init();
     var loginData = ZMDataModel.getLogin();
@@ -56,36 +55,35 @@ angular.module('zmApp', [
 
     }
 
-    // This routine is called whenever the orientation changes
-    // so I can recompute my width and height. I use them
-    // for scoping graphs as well as figuring out how many thumbnails
-    // to show for montages
-    window.onorientationchange = function () {
-        console.log("**ORIENTATION CHANGE**");
+
+    // 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
+
+    var checkOrientation = function () {
         var pixelRatio = window.devicePixelRatio || 1;
         $rootScope.devWidth = ((window.innerWidth > 0) ? window.innerWidth : screen.width);
         $rootScope.devHeight = ((window.innerHeight > 0) ? window.innerHeight : screen.height);
-        console.log("********Computed Dev Width & Height as" + $rootScope.devWidth + "*" + $rootScope.devHeight);
-    }
+        console.log("********NEW Computed Dev Width & Height as" + $rootScope.devWidth + "*" + $rootScope.devHeight);
+    };
 
+    window.addEventListener("resize", checkOrientation, false);
 
     $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
-        //   console.log ("***** STATE CHANGE CHECK ****");
         var requireLogin = toState.data.requireLogin;
 
-        if (ZMDataModel.isLoggedIn() || ZMDataModel.isSimulated())
-        {
-            console.log ("State transition is authorized");
+        if (ZMDataModel.isLoggedIn() || ZMDataModel.isSimulated()) {
+            console.log("State transition is authorized");
             return;
         }
 
         if (requireLogin) {
 
-           // alert ("Not logged in");
-            console.log ("**** STATE from "+ "**** STATE TO " + toState.name);
+            console.log("**** STATE from " + "**** STATE TO " + toState.name);
 
-           $ionicPopup.alert ({title: "Credentials Required",
-                             template:"Please provide your ZoneMinder credentials or switch to simulation mode"});
+            $ionicPopup.alert({
+                title: "Credentials Required",
+                template: "Please provide your ZoneMinder credentials or switch to simulation mode"
+            });
             // for whatever reason, .go was resulting in digest loops.
             // if you don't prevent, states will stack
             event.preventDefault();
@@ -96,13 +94,13 @@ angular.module('zmApp', [
 
 
     $ionicPlatform.ready(function () {
-        
-         // generates and error in desktops but works fine
-        console.log ("**** DEVICE READY ***");
-    setTimeout(function() {
-    $cordovaSplashscreen.hide()
-  }, 3000)
-        
+
+        // generates and error in desktops but works fine
+        console.log("**** DEVICE READY ***");
+        setTimeout(function () {
+            $cordovaSplashscreen.hide()
+        }, 3000)
+
         var pixelRatio = window.devicePixelRatio || 1;
         $rootScope.devWidth = ((window.innerWidth > 0) ? window.innerWidth : screen.width);
         $rootScope.devHeight = ((window.innerHeight > 0) ? window.innerHeight : screen.height);
@@ -137,20 +135,21 @@ angular.module('zmApp', [
 })
 
 // My route map connecting menu options to their respective templates and controllers
-.config(function ($stateProvider, $urlRouterProvider) {
+.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
 
+    $httpProvider.interceptors.push('timeoutHttpIntercept');
 
     $stateProvider
         .state('login', {
-        data: {
-            requireLogin: false
-        },
-        url: "/login",
-        templateUrl: "templates/login.html",
-        controller: 'zmApp.LoginCtrl',
+            data: {
+                requireLogin: false
+            },
+            url: "/login",
+            templateUrl: "templates/login.html",
+            controller: 'zmApp.LoginCtrl',
 
 
-    })
+        })
 
     .state('monitors', {
         data: {
@@ -227,9 +226,9 @@ angular.module('zmApp', [
     // If I start using the urlRouterProvider above and the
     // first state is monitors it goes into a digest loop.
 
-     $urlRouterProvider.otherwise( function($injector, $location) {
-            var $state = $injector.get("$state");
-            $state.go("monitors");
-        });
+    $urlRouterProvider.otherwise(function ($injector, $location) {
+        var $state = $injector.get("$state");
+        $state.go("monitors");
+    });
 
 });
diff --git a/www/js/controllers.js b/www/js/controllers.js
index 75875f60..bb0e3208 100644
--- a/www/js/controllers.js
+++ b/www/js/controllers.js
@@ -1,6 +1,7 @@
 
 angular.module('zmApp.controllers', ['ionic',   'googlechart', 'ngCordova', 'ng-mfb' ])
 
+
 .controller('zmApp.AppCtrl', function($scope, $ionicSideMenuDelegate) {
   $scope.openMenu = function () {
     $ionicSideMenuDelegate.toggleLeft();
diff --git a/www/templates/events.html b/www/templates/events.html
index e33a3568..f4cb2571 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -13,64 +13,64 @@
 
         <ion-refresher pulling-text="Pull to reload Events..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher>
         <!--<ion-list>-->
-           <!-- <div ng-repeat="event in events">-->
+        <!-- <div ng-repeat="event in events">-->
 
-                <ion-item collection-repeat="event in events" >
+        <ion-item collection-repeat="event in events">
 
-                    <div class="row"  >
-                        <div class="col col-left">
-                            <!-- this ngswitch displays different icons
+            <div class="row">
+                <div class="col col-left">
+                    <!-- this ngswitch displays different icons
                                 depending on the cause of the event -->
-                            <div ng-switch on="event.Event.Cause">
-                                <div ng-switch-when="Motion">
-                                    <i class="ion-android-walk" style="float:left; font-size:200%;"></i>
-                                    <br/>
-                                </div>
-                                <div ng-switch-when="Signal">
-                                    <i class="ion-wifi" style="float:left; font-size:200%;"></i>
-                                    <br/>
-                                </div>
-                                <div ng-switch-default>
-                                    <i class="ion-ionic" style="float:left; font-size:200%;"></i>
-                                    <br/>
-                                </div>
-                            </div>
-                            <!-- ng switch -->
-                            <!-- {{event.Event.Cause}} -->
-
-                            <br/> <span style="font-size:80%; color:rgb(110,110,110)">{{event.Event.Length}}s</span>
+                    <div ng-switch on="event.Event.Cause">
+                        <div ng-switch-when="Motion">
+                            <i class="ion-android-walk" style="float:left; font-size:200%;"></i>
+                            <br/>
+                        </div>
+                        <div ng-switch-when="Signal">
+                            <i class="ion-wifi" style="float:left; font-size:200%;"></i>
+                            <br/>
                         </div>
-                        <!-- col col left-->
+                        <div ng-switch-default>
+                            <i class="ion-ionic" style="float:left; font-size:200%;"></i>
+                            <br/>
+                        </div>
+                    </div>
+                    <!-- ng switch -->
+                    <!-- {{event.Event.Cause}} -->
+
+                    <br/> <span style="font-size:80%; color:rgb(110,110,110)">{{event.Event.Length}}s</span>
+                </div>
+                <!-- col col left-->
 
-                        <div class="col col-80">
-                            <div class="item-text-wrap"><i class="ion-monitor"></i> <b>{{event.Event.MonitorName}}</b> ({{event.Event.Name}})</div>
+                <div class="col col-80">
+                    <div class="item-text-wrap"><i class="ion-monitor"></i> <b>{{event.Event.MonitorName}}</b> ({{event.Event.Name}})</div>
 
-                            <i class="ion-images"></i> {{event.Event.Frames}} &nbsp;
-                            <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} &nbsp;
-                            <i class="ion-arrow-graph-up-right"></i> {{event.Event.TotScore}}
+                    <i class="ion-images"></i> {{event.Event.Frames}} &nbsp;
+                    <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} &nbsp;
+                    <i class="ion-arrow-graph-up-right"></i> {{event.Event.TotScore}}
 
-                            <span style="float:right">
+                    <span style="float:right">
                                 <button class="button button-small icon icon-left ion-ios-eye" ng-click="openModal(event.Event.Id, event.Event.Name, event.Event.Length)" >View Footage</button></span>
 
-                        </div>
+                </div>
 
-                        <!--<div class="col">
+                <!--<div class="col">
                                 <img ng-src="{{event.image}}" style="float:right; height:40px;" />
                             </div> -->
 
-                    </div>
+            </div>
 
-                    <div class="row" style="font-size:80%; color:rgb(110,110,110)">
-                        <div class="item-text-wrap"><i class="ion-calendar"></i>&nbsp;{{event.Event.StartTime}}
-                            <br/>
-                            <i class="ion-clipboard"></i>&nbsp; {{event.Event.Notes}}
-                            <br/>
-                        </div>
-                    </div>
+            <div class="row" style="font-size:80%; color:rgb(110,110,110)">
+                <div class="item-text-wrap"><i class="ion-calendar"></i>&nbsp;{{event.Event.StartTime}}
+                    <br/>
+                    <i class="ion-clipboard"></i>&nbsp; {{event.Event.Notes}}
+                    <br/>
+                </div>
+            </div>
 
-                </ion-item>
+        </ion-item>
 
-            <!--</div> -->
+        <!--</div> -->
         <!--</ion-list>-->
 
     </ion-content>
diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html
index 47da2917..c974ec25 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  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%"  />
+                <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%" />
             </ion-scroll>
         </div>
 
diff --git a/www/templates/montage.html b/www/templates/montage.html
index f2ba8c78..d8c6ac53 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -26,9 +26,7 @@
                  FIXME: I should probably not pass username and password here - instead go the http interceptor
                  and auth token mode -->
                 <div ng-if="!isSimulated()">
-
-                <img  ng-src="{{LoginData.url}}/cgi-bin/nph-zms?mode=jpeg&amp;monitor={{monitor.Monitor.Id}}&maxfps=3&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}" width="{{((devWidth-30)/(7-slider.monsize))}}px;"   />
-
+                    <img  ng-src="{{LoginData.url}}/cgi-bin/zms?mode=single&monitor={{monitor.Monitor.Id}}&maxfps=3&scale=50&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{randomval}}" width="{{((devWidth-30)/(7-slider.monsize))}}px;"   />
 
                    </div>
 
@@ -37,11 +35,6 @@
                        <img  ng-src="img/demo.gif?rand={{rand}}" width="{{((devWidth-30)/(7-slider.monsize))}}px;">
 
                    </div>
-
-                   <!-- <img  ng-src="img/demo.gif?rand={{rand}}" width="{{((devWidth-30)/(7-slider.monsize))}}px;"   />-->
-
-                    <!-- <br/><i class="ion-monitor"></i> Hello -->
-     
                 </article>
                <span style="font-size:10px;">
                <footer class="footer">
author	ARC <arjunrc@gmail.com>	2015-05-02 16:36:34 -0400
committer	ARC <arjunrc@gmail.com>	2015-05-02 16:36:34 -0400
commit	3eb690e300d797433455c1fcbd9a769c15aa9d7c (patch)
tree	f366512aedac1bba31bf22e440edf49e7003bcf3
parent	9faf95be527b8b7c23e4ed4226c35bb771129f41 (diff)