#119 - fixes to pack in montage - still some odd header behavior but better than what exists now

Former-commit-id: 869cab572aa43f457848bf0b4beab312cb17b6d3

4 files changed, 89 insertions, 40 deletions

diff --git a/www/css/style.css b/www/css/style.css
index 163003a1..b45fd484 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -655,4 +655,16 @@ input[type=range]::-webkit-slider-thumb {
     -webkit-animation-delay: 1s;
 }
 
+.montage_image
+{
+    margin-top:15px;
+    width: 100% !important;
+    height: auto !important;
+}
 
+.montage_image_full_screen
+{
+    margin-top:0px;
+    width: 100% !important;
+    height: auto !important;
+}
\ No newline at end of file
diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index 497cc4b5..6d2bd45a 100644
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -20,7 +20,7 @@ angular.module('zmApp.controllers')
     var zmAppVersion="unknown";
     var isBackground = false;
     var monitorsLoaded = 0;
-    var montageSize = 3;
+    //var montageSize = 3;
     var monitors = [];
     var oldevents = [];
      
@@ -57,8 +57,10 @@ angular.module('zmApp.controllers')
          'montageOrder':'',
          'montageHiddenOrder':'',
          'montageArraySize':'0',
+         
          'graphSize':200,
          'minAlarmCount':'1',
+         'montageSize':'10',
          
         
     };
@@ -211,6 +213,14 @@ angular.module('zmApp.controllers')
                     loginData.minAlarmCount  = '1';
                 }
                 
+                
+                if (typeof loginData.montageSize == 'undefined')
+                {
+                    zmDebug ("montageSize does not exist, setting to 18 (2 per col)");
+                    loginData.montageSize  = 18;
+                }
+                
+                
                 zmLog ("DataModel init recovered this loginData as " + JSON.stringify(loginData));
             }
             else
@@ -929,14 +939,14 @@ angular.module('zmApp.controllers')
         //
         //-----------------------------------------------------------------------------
         getMontageSize: function () {
-            return montageSize;
+            return loginData.montageSize;
         },
 
         //-----------------------------------------------------------------------------
         //
         //-----------------------------------------------------------------------------
         setMontageSize: function (montage) {
-            montageSize = montage;
+            loginData.montageSize = montage;
         },
 
 
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 69ff6129..ae9a9680 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -23,7 +23,10 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
     $scope.scaleDirection = []; // 1 = increase -1 = decrease
 
     $scope.slider = {};
+    
+    console.log ("************ GETTIGN SLIDER AS " + ZMDataModel.getMontageSize());
     $scope.slider.monsize = ZMDataModel.getMontageSize();
+    $scope.revMonSize = 11 - parseInt($scope.slider.monsize);
 
     // The difference between old and original is this:
     // old will have a copy of the last re-arranged monitor list
@@ -110,6 +113,9 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
 
     var timestamp = new Date().getUTCMilliseconds();
     $scope.minimal = $stateParams.minimal;
+    $scope.zmMarginTop = $scope.minimal ? 0:15;
+    console.log ("********* MARGIN IS " + $scope.zmMarginTop);
+    
     $scope.isRefresh = $stateParams.isRefresh;
     var sizeInProgress = false;
     $scope.imageStyle = true;
@@ -793,6 +799,8 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
         //window.localStorage.setItem("montageArraySize", monsizestring);
         sizeInProgress = false;
     }
+    
+ 
 
     //---------------------------------------------------------
     // In full screen montage view, I call this function
@@ -804,7 +812,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
 
         $scope.slider.monsize = newSize;
         if ($scope.slider.monsize < "1") $scope.slider.monsize = "1";
-        if ($scope.slider.monsize > "6") $scope.slider.monsize = "6";
+        if ($scope.slider.monsize > "10") $scope.slider.monsize = "10";
         processSliderChanged($scope.slider.monsize);
 
     };
@@ -818,7 +826,11 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
 
     $scope.sliderChanged = function () {
         processSliderChanged($scope.slider.monsize);
+        
+        
     };
+    
+        
 
     $scope.$on('$ionicView.afterEnter', function () {
         // This rand is really used to reload the monitor image in img-src so it is not cached
diff --git a/www/templates/montage.html b/www/templates/montage.html
index d15e4350..9b4b6587 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -10,7 +10,7 @@
                 <button class="button button-icon button-clear ion-arrow-swap"
                         ng-click="toggleReorder();">
                 </button>
-            </span>
+        </span>
         <button class="button button-icon button-clear ion-android-contract" ng-click="switchMinimal()">
         </button>
         <!--<button class="button button-icon ion-ios-help-outline" ng-click="popover.show($event)"></button>-->
@@ -24,72 +24,86 @@
 
         <span ng-show="!minimal">
                 <div class="range range-positive">
-                    <i style="color:#bbbbbb" class="icon ion-arrow-shrink"></i>
+                    <i style="color:#bbbbbb" class="icon ion-image"></i>
                     <input type="range" ng-model="slider.monsize" min="1"
-                           max="6" ng-change="sliderChanged(slider.monsize)">
-                    <i style="color:#bbbbbb" class="icon ion-arrow-expand"></i>
+                           max="10" ng-change="sliderChanged(slider.monsize)">
+                    <i style="color:#bbbbbb" class="icon ion-grid"></i>
 
                 </div>
         </span>
 
-
-        <div class="wrapper">
+        <div style="-webkit-column-count:{{slider.monsize}};-webkit-column-gap:0px;line-height:0px;">
             <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.listDisplay!='noshow'">
+     
+            <!-- back to ng-src. spinner was not updating when rand changes-->
+            <!-- moving to single so I can rely on rand for reloads -->
                 
-                <div  style="position:relative" >
-                    
-                   <span ng-show="!minimal">
-                        <div style="width:{{((devWidth)/(7-monitorSize[$index]))}}px;white-space:nowrap;overflow:hidden; text-overflow:ellipsis">
-                            <header id = "slowpulse" ng-class="monitor.Monitor.isAlarmed=='true'?'alarmed-header animated infinite flash':'header'">&nbsp;<i class="ion-monitor"></i>
-                               {{monitor.Monitor.Name}}&nbsp;
-                            </header>
-                        </div>
-                    </span>
+                <div style="position: relative;width:{{devWidth/slider.monsize}}px;float:left; ">
+                    <div ng-if="!isModalActive">
+                        <span ng-show="!minimal">
 
-            <article class="main">
+                            <div id = "slowpulse"  style="position:absolute; top:0px; left:0px;width:100%;white-space:nowrap;overflow:hidden;" 
+                                 ng-class="monitor.Monitor.isAlarmed=='true'?'alarmed-header animated infinite flash':'header'">
+                                &nbsp;<i class="ion-monitor"></i>
+                               {{monitor.Monitor.Name}}&nbsp;
+                            </div>
+                        </span>
+
+                        <div ng-if="$root.authSession!='undefined'">
+                            <div ng-if = "!minimal">
+                                <img id="img-$index" image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId)" image-spinner-loader="lines" style="margin-top:15px;
+        width: 100% !important;
+        height: auto !important;" />
+                            </div>
+                            
+                            <div ng-if = "minimal">
+                                <img id="img-$index" image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId)" image-spinner-loader="lines" style="margin-top:0px;
+        width: 100% !important;
+        height: auto !important;" />
+                            </div>
+                            
 
-                <!-- back to ng-src. spinner was not updating when rand changes-->
-                <!-- moving to single so I can rely on rand for reloads -->
+                        </div>
 
-                <div ng-if="!isModalActive">
-                    <div ng-if="$root.authSession!='undefined'">
-                        <img id="img-$index" image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId)" style="display:block;" image-spinner-loader="lines" />
+                        <div ng-if="!$root.authSession=='undefined'">
+                            <img id="img-$index" ng-src="img/pausevideo.png" style="width: 100% !important;
+  height: auto !important;" />
+                        </div>
 
                     </div>
+                </div>
 
-                    <div ng-if="!$root.authSession=='undefined'">
-                        <img id="img-$index" ng-src="img/pausevideo.png" style="display:block;" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" />
-                    </div>
 
-                </div>
-                <div ng-if="isModalActive">
-                    <img id="img-$index" ng-src="img/pausevideo.png" style="display:block;" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" />
-                </div>
+            <div ng-if="isModalActive">
+                <img id="img-$index" ng-src="img/pausevideo.png" style="display:block;" />
+            </div>
 
-            </article>
 
             <div id="slowpulse" ng-class="monitor.Monitor.isAlarmed=='true'?'minimized-alarmed-header animated infinite flash':''" ng-if="minimal"></div>
 
-        </div>
-        <!-- alarm flash -->
 
-        </span>
-        <!-- ngrepeat -->
+            <!-- alarm flash -->
+
+            </span>
+            <!-- ngrepeat -->
+
         </div>
-        <!--wrapper-->
 
 
         <ion-item ng-show="!MontageMonitors.length">
             No monitors to display.
         </ion-item>
+
+
+
     </ion-content>
 
     <div ng-show="minimal">
         <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-arrow-expand" label="increase size" ng-click="changeSize(1)">
+            <button mfb-button icon="ion-arrow-expand" label="increase size" ng-click="changeSize(-1)">
             </button>
-            <button mfb-button icon="ion-arrow-shrink" label="decrease size" ng-click="changeSize(-1)">
+            <button mfb-button icon="ion-arrow-shrink" label="decrease size" ng-click="changeSize(1)">
             </button>
             <button mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView();">
             </button>
@@ -104,4 +118,5 @@
 
     </div>
     <br/>
+
 </ion-view>
\ No newline at end of file