Feed screens now have a grey background, also have ability to scale images to crop or fit

7 files changed, 54 insertions, 16 deletions

diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index 8d9bd57b..dacb5345 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -17,6 +17,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$scope', '$r
     var segmentHandle = 0; // holds timer for progress bar
     $scope.totalEventTime = 0; // used to display max of progress bar
     $scope.currentEventTime = 0;
+    $scope.imageStyle=true;
 
 
 
@@ -136,7 +137,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$scope', '$r
         // 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;
+        $rootScope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
         $ionicLoading.show({
             template: "refreshed view",
             noBackdrop: true,
@@ -428,7 +429,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$scope', '$r
         $scope.eventId = eid;
         $scope.eventDur = Math.round(edur);
         $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.totalEventTime = Math.round(parseFloat(edur)) - 1;
         $scope.currentEventTime = 0;
@@ -632,4 +633,10 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$scope', '$r
             });
     }; //dorefresh
 
+        $scope.scaleImage = function() {
+       console.log ("Switching image style");
+        $scope.imageStyle = !$scope.imageStyle;
+
+    };
+
 }]);
diff --git a/www/js/ModalCtrl.js b/www/js/ModalCtrl.js
index 535cadf3..cce6db09 100644
--- a/www/js/ModalCtrl.js
+++ b/www/js/ModalCtrl.js
@@ -9,9 +9,13 @@ angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootSco
 
     console.log("**** INSIDE MODAL CTRL *****");
 
+
     // This holds the PTZ menu control
     // Note that I hacked radialMenu
     // so please don't use the one you get from bower
+
+    //var imageStyle=1;
+    //$scope.imageAspect = "max-width: 100%;max-height: 100%;";
     $scope.radialMenuOptions = {
         content: '',
 
@@ -121,6 +125,10 @@ angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootSco
             },
     ]};
 
+
+
+
+
     //-------------------------------------------------------------
     // Send PTZ command to ZM
     // Note: PTZ fails on desktop, don't bother about it
@@ -214,4 +222,6 @@ angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootSco
     };
 
 
+
+
 }]);
diff --git a/www/js/MonitorCtrl.js b/www/js/MonitorCtrl.js
index a98c6b1b..02a6dcce 100644
--- a/www/js/MonitorCtrl.js
+++ b/www/js/MonitorCtrl.js
@@ -19,6 +19,8 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
     monitorStateCheck();
     console.log ("Setting Awake to "+ZMDataModel.getKeepAwake());
     ZMDataModel.setAwake(ZMDataModel.getKeepAwake());
+    $scope.imageStyle=true;
+
 
 
     $scope.openMenu = function () {
@@ -40,6 +42,8 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
         });
     };
 
+
+
     //-----------------------------------------------------------------------
     // This function takes care of changing monitor parameters
     // For now, I've only limited it to enable/disable and change monitor mode
@@ -345,4 +349,10 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
 
     };
 
+    $scope.scaleImage = function() {
+       console.log ("Switching image style");
+        $scope.imageStyle = !$scope.imageStyle;
+
+    };
+
 }]);
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 94ec78ab..20843a94 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -17,6 +17,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
     $scope.minimal = $stateParams.minimal;
     $scope.isRefresh = $stateParams.isRefresh;
     var sizeInProgress = false;
+    $scope.imageStyle = true;
 
     $ionicSideMenuDelegate.canDragContent(false);
 
@@ -70,8 +71,8 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
 
         console.log("Montage order is " + myorder);
         console.log("Hidden order is " + myhiddenorder);
-        montageOrder = myorder.split(",");
-        hiddenOrder = myhiddenorder.split(",");
+        if (myorder) montageOrder = myorder.split(",");
+        if (myhiddenorder) hiddenOrder = myhiddenorder.split(",");
 
     } // at this stage, the monitor arrangement is not matching
     // the montage order. Its in true order. Let us first process the hiddenOrder part
@@ -158,7 +159,6 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
     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 () {
@@ -377,7 +377,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
         // in montage view
         $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
@@ -607,5 +607,11 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
 
     };
 
+        $scope.scaleImage = function() {
+       console.log ("Switching image style");
+        $scope.imageStyle = !$scope.imageStyle;
+
+    };
+
 
 }]);
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index a37e12d2..9f3f257f 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -1,12 +1,14 @@
 <ion-modal-view cache="false">
-    <ion-content>
+    <ion-content style="background-color:#444444">
         <!-- so I can access my common modal controller
             which is shared between events and monitors for modal views -->
         <div ng-controller="ModalCtrl">
             <ion-scroll has-bouncing=false min-zoom=1 zooming="true"
                         direction="xy" style="width: 100%; ">
+                   <div style="height: 100vh;">
                 <img imageonload="finishedLoadingImage()"
-                     ng-src="{{loginData.streamingurl}}/cgi-bin/zms?source=event&mode=jpeg&event={{eventId}}&frame=1&maxfps={{loginData.maxFPS}}&replay=single&user={{loginData.username}}&pass={{loginData.password}}&connkey={{connKey}}&rand={{rand}}" width="100%" />
+                     ng-src="{{loginData.streamingurl}}/cgi-bin/zms?source=event&mode=jpeg&event={{eventId}}&frame=1&maxfps={{loginData.maxFPS}}&replay=single&user={{loginData.username}}&pass={{loginData.password}}&connkey={{connKey}}&rand={{rand}}" ng-class="{'zm-image-fit':imageStyle==true, 'zm-image-crop':imageStyle==false}" />
+                </div>
             </ion-scroll>
         </div>
 
diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html
index 0e1401ab..e1d5c98a 100644
--- a/www/templates/monitors-modal.html
+++ b/www/templates/monitors-modal.html
@@ -1,18 +1,20 @@
 <ion-modal-view cache="false">
-    <ion-content>
+    <ion-content style="background-color:#444444">
         <div ng-controller="ModalCtrl">
 
             <!-- replay can also be gapless imageonload="finishedLoadingImage()"-->
 
             <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%; ">
+                <!-- android needs this 100vh - otherwise max- does not work -->
+                <div style="height: 100vh;">
 
-                <img imageonload="finishedLoadingImage()" ng-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=jpeg&amp;monitor={{monitorId}}&maxfps={{LoginData.maxFPS}}&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}" width="100%" />
-
+                    <img imageonload="finishedLoadingImage()"
+                         ng-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':imageStyle==true, 'zm-image-crop':imageStyle==false}" />
+                </div>
 
             </ion-scroll>
     </ion-content>
 
-
     <div ng-show="isControllable=='1' && showPTZ">
         <div class="ptzcentered">
             <circular options="radialMenuOptions">
@@ -24,7 +26,8 @@
 </ion-modal-view>
 
 <nav mfb-menu position="br" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click">
-    <button mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView()"></button>
+    <button mfb-button icon="ion-arrow-resize" label="fit image" ng-click="scaleImage();"></button>
+    <button mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView();"></button>
     <button mfb-button icon="ion-arrow-expand" label="pan/tilt/zoom" ng-click="togglePTZ();"></button>
-    <button mfb-button icon="ion-close" label="exit live view" ng-click="closeModal()"></button>
+    <button mfb-button icon="ion-close" label="exit live view" ng-click="closeModal();"></button>
 </nav>
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 00ac7d62..d63a3bcd 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -26,9 +26,9 @@
     </ion-nav-buttons>
 
 
-    <ion-content has-bouncing="false">
+    <ion-content has-bouncing="false" >
         <div ng-controller="ModalCtrl">
-           <!-- <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher>-->
+           <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher>
             <span ng-show="!minimal">
                 <div class=" range range-positive">
                     <i class="icon ion-arrow-shrink"></i>