#232 undid client side hacks - this needs to be fixed at ZMS, follow the discussion here https://github.com/ZoneMinder/ZoneMinder/issues/1431

Former-commit-id: a5b57378d2fca9bcbc3966ed182a81ccebc84983

4 files changed, 104 insertions, 8 deletions

diff --git a/www/js/MonitorCtrl.js b/www/js/MonitorCtrl.js
index 26bcade0..1fb24a67 100644
--- a/www/js/MonitorCtrl.js
+++ b/www/js/MonitorCtrl.js
@@ -287,7 +287,7 @@ angular.module('zmApp.controllers')
        // console.log("**VIEW ** Monitor Ctrl Unloaded");
     });
 
-    $scope.openModal = function (mid, controllable, controlid, connKey, orient) {
+    $scope.openModal = function (mid, controllable, controlid, connKey, monitor) {
         ZMDataModel.zmDebug("MonitorCtrl:Open Monitor Modal with monitor Id=" + mid +
             " and Controllable:" + controllable + " with control ID:" + controlid);
 
@@ -296,7 +296,7 @@ angular.module('zmApp.controllers')
         $scope.monitorName = ZMDataModel.getMonitorName(mid);
         $scope.LoginData = ZMDataModel.getLogin();
         $scope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
-        $scope.orientation = orient || '0';
+         $scope.refMonitor = monitor;
         ZMDataModel.zmLog("Monitor Orientation is: " + $scope.orientation);
         $rootScope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
         
diff --git a/www/js/MonitorModalCtrl.js b/www/js/MonitorModalCtrl.js
index 789fd6f7..9ae2f324 100644
--- a/www/js/MonitorModalCtrl.js
+++ b/www/js/MonitorModalCtrl.js
@@ -1778,10 +1778,43 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$
         
     }
     
-   
+    //http://stackoverflow.com/questions/10245220/java-image-resize-maintain-aspect-ratio
+    $scope.getScale = function(ow,oh,bw,bh)
+    {
+        
+        var  original_width = ow;
+        var  original_height = oh;
+        var  bound_width = bw;
+        var bound_height = bh;
+        var new_width = original_width;
+        var  new_height = original_height;
+        if (original_width > bound_width) {
+        //scale width to fit
+        new_width = bound_width;
+        //scale height to maintain aspect ratio
+        new_height = (new_width * original_height) / original_width;
+    }
+
+    // then check if we need to scale even with the new height
+        if (new_height > bound_height) {
+            //scale height to fit instead
+            new_height = bound_height;
+            //scale width to maintain aspect ratio
+            new_width = (new_height * original_width) / original_height;
+        }
+        return ({w:new_width, h:new_height});
+
+    };
+    
 
     $scope.$on('modal.shown', function () {
       
+        $scope.mw = $scope.refMonitor.Monitor.Orientation == '0' ? $scope.refMonitor.Monitor.Width: $scope.refMonitor.Monitor.Height;
+        
+         $scope.mh = $scope.refMonitor.Monitor.Orientation == '0' ? $scope.refMonitor.Monitor.Height: $scope.refMonitor.Monitor.Width;
+    
+        
+        
         var ld = ZMDataModel.getLogin();
         currentEvent = $scope.currentEvent;
         $scope.connKey =  (Math.floor((Math.random() * 999999) + 1)).toString();
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 6cc20d65..7da4b99a 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -252,15 +252,19 @@ function initPackery()
                             });
          //console.log ("**** mygrid is " + JSON.stringify(elem));
          
-        imagesLoaded(elem).on('progress', function() {
+        imagesLoaded(elem).on('progress', function(instance, img) {
                 //console.log ("******** SOME IMAGE LOADED");
+                console.log ("IMAGE PROGRESS " + JSON.stringify(img.img));
                 progressCalled = true;
+                
                 if (layouttype) $timeout (function(){layout(pckry);},100);
         });
         
         imagesLoaded(elem).on('always', function() {
                 //console.log ("******** ALL IMAGES LOADED");
                 ZMDataModel.zmDebug ("All images loaded");
+            
+                
                 $ionicLoading.hide();
                 
                 
@@ -624,11 +628,70 @@ function initPackery()
         }
     }
     
+    $scope.getW = function(monitor)
+    {
+        var w,h;
+        if (monitor.Monitor.Orientation == '0')
+                w = monitor.Monitor.Width;
+        else 
+                w = monitor.Monitor.Height;
+        
+         if (monitor.Monitor.Orientation == '0')
+                h = monitor.Monitor.Height;
+        else 
+                h = monitor.Monitor.Width;
+        return (getScale (w,h, $rootScope.devWidth, $rootScope.devHeight).w);
+        
+    };
+    
+    $scope.getH= function(monitor)
+    {
+        var w,h;
+        if (monitor.Monitor.Orientation == '0')
+                w = monitor.Monitor.Width;
+        else 
+                w = monitor.Monitor.Height;
+        
+         if (monitor.Monitor.Orientation == '0')
+                h = monitor.Monitor.Height;
+        else 
+                h = monitor.Monitor.Width;
+        return (getScale (w,h, $rootScope.devWidth, $rootScope.devHeight).h);
+        
+    };
+    
+    
+   function getScale(ow,oh,bw,bh)
+    {
+        
+        var  original_width = ow;
+        var  original_height = oh;
+        var  bound_width = bw;
+        var bound_height = bh;
+        var new_width = original_width;
+        var  new_height = original_height;
+        if (original_width > bound_width) {
+        //scale width to fit
+        new_width = bound_width;
+        //scale height to maintain aspect ratio
+        new_height = (new_width * original_height) / original_width;
+    }
+
+    // then check if we need to scale even with the new height
+        if (new_height > bound_height) {
+            //scale height to fit instead
+            new_height = bound_height;
+            //scale width to maintain aspect ratio
+            new_width = (new_height * original_width) / original_height;
+        }
+        return ({w:Math.round(new_width), h:Math.round(new_height)});
+
+    }
 
     //---------------------------------------------------------------------
     // main monitor modal open - if drag is not on, this is called on touch
     //---------------------------------------------------------------------
-    $scope.openModal = function (mid, controllable, controlid, connKey, orient) {
+    $scope.openModal = function (mid, controllable, controlid, connKey, monitor) {
         ZMDataModel.zmDebug("MontageCtrl: Open Monitor Modal with monitor Id=" + mid + " and Controllable:" + controllable + " with control ID:" + controlid);
         // $scope.isModalActive = true;
         // Note: no need to setAwake(true) as its already awake
@@ -664,8 +727,8 @@ function initPackery()
         
         $scope.connKey = (Math.floor((Math.random() * 999999) + 1)).toString();
        $scope.isControllable = controllable;
-         $scope.orientation = orient || '0';
-          ZMDataModel.zmLog("Monitor Orientation is: " + $scope.orientation);
+        $scope.refMonitor = monitor;
+         
 
         // This is a modal to show the monitor footage
         // We need to switch to always awake if set so the feed doesn't get interrupted
diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html
index 723c9dea..09014d60 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-view="false" style="background-color:#444444"  >
-        <ion-content  >
+        <ion-content on-double-tap="closeModal();"  >
             <!-- <div style="background-color:red; color:white"> Modal Rand:{{$root.modalRand}} </div>-->
             <ion-scroll delegate-handle="imgscroll" has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%;"  >
                 <!-- android needs this 100vh - otherwise max- does not work -->