#963 allow size selection of thumbs

7 files changed, 92 insertions, 13 deletions

diff --git a/www/css/style.css b/www/css/style.css
index 1ee1b9ab..3cb1ef4a 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -1910,6 +1910,16 @@ fill-opacity: 0.8;
     
 }
 
+.largeThumbs {
+  margin-left:auto;
+  margin-right:auto;
+  display:block;
+}
+
+.smallThumbs {
+  float:right;
+  padding-left:20px;
+}
 
 @media (min-width:600px) {
     .montage-time {
diff --git a/www/js/DevOptionsCtrl.js b/www/js/DevOptionsCtrl.js
index d735f967..2af824b5 100644
--- a/www/js/DevOptionsCtrl.js
+++ b/www/js/DevOptionsCtrl.js
@@ -143,6 +143,8 @@ angular.module('zmApp.controllers').controller('zmApp.DevOptionsCtrl', ['$scope'
 
     NVR.debug("SaveDevOptions: Saving to disk");
     NVR.setLogin($scope.loginData);
+
+    //console.log ($scope.loginData);
     NVR.getMonitors(1);
 
   }
@@ -210,6 +212,33 @@ angular.module('zmApp.controllers').controller('zmApp.DevOptionsCtrl', ['$scope'
     });
   };
 
+  $scope.selectEventViewThumbsSize = function() {
+
+    var buttons = [
+
+      { text: $translate.instant('kEventViewThumbsSmall'), value:'small' },
+      { text: $translate.instant('kEventViewThumbsLarge'), value:'large' },
+
+    ];
+
+    $ionicActionSheet.show({
+      titleText: $translate.instant('kSelect'),
+      buttons: buttons,
+
+      cancelText: $translate.instant('kButtonCancel'),
+      cancel: function() {
+       NVR.debug ('obfuscation actionsheet cancelled');
+      },
+      buttonClicked: function(index) {
+
+        $scope.loginData.eventViewThumbsSize = buttons[index].value;
+        NVR.debug ('changed event view thumbs size to:'+$scope.loginData.eventViewThumbsSize );
+        return true;
+      },
+
+    });
+  };
+
   $scope.saveDevOptions = function () {
 
     saveDevOptions();
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index d7dd4fc1..a83f6b1e 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -195,6 +195,14 @@ angular.module('zmApp.controllers')
       //console.log ("********* BEFORE ENTER");
       //
 
+      $scope.thumbClass = 'small';
+      var ld = NVR.getLogin();
+      if (ld.eventViewThumbsSize == 'large') {
+        NVR.debug ('Switching to big thumbs style');
+        $scope.thumbClass = 'large';
+      } else {
+        NVR.debug ('using small thumbs style');
+      }
       $scope.mid = '';
 
       $scope.$on ("alarm", function() {
@@ -2955,8 +2963,18 @@ angular.module('zmApp.controllers')
 
     function computeThumbnailSize(mw, mh, mo) {
         
-      tw = Math.round(0.9 * $rootScope.devWidth);
-      th = Math.round(0.7 * $rootScope.devHeight);
+      var ld = NVR.getLogin();
+
+      if (ld.eventViewThumbsSize == 'large') {
+        tw = Math.round(0.9 * $rootScope.devWidth);
+        th = Math.round(0.7 * $rootScope.devHeight);
+      } else {
+        tw = Math.round(0.4 * $rootScope.devWidth);
+      th = Math.round(0.3 * $rootScope.devHeight);
+      }
+      
+
+      
 
       var ratio = mw / mh;
       var result = {
diff --git a/www/js/NVR.js b/www/js/NVR.js
index 5bdc23b9..a3cf0189 100644
--- a/www/js/NVR.js
+++ b/www/js/NVR.js
@@ -227,7 +227,9 @@ angular.module('zmApp.controllers')
         'httpCordovaNoEncode': false,
         'currentZMGroupNames': [],
         'unsupported': {},
-        'monitorSpecific': {}
+        'monitorSpecific': {},
+        'eventViewThumbs': true,
+        'eventViewThumbsSize': 'small',
         
 
       };
@@ -1567,6 +1569,12 @@ angular.module('zmApp.controllers')
 
         }
 
+        if (typeof loginData.eventViewThumbsSize == 'undefined') {
+
+          loginData.eventViewThumbsSize = 'small';
+
+        }
+
         if (typeof loginData.enableSlowLoading == 'undefined') {
 
           loginData.enableSlowLoading = false;
diff --git a/www/lang/locale-en.json b/www/lang/locale-en.json
index 088f21b3..abae59f6 100644
--- a/www/lang/locale-en.json
+++ b/www/lang/locale-en.json
@@ -113,6 +113,9 @@
     "kEventServerVersionTitle"   :"Event Server version not supported",
     "kEventSingleImageScale"     :"Event single image scale",
     "kEventStillRecording"       :"event is still recording - showing live feed",
+    "kEventViewThumbsSize"       :"thumbnail size",
+    "kEventViewThumbsSmall"      :"small",
+    "kEventViewThumbsLarge"      :"large",
     "kEvents"                    :"events",
     "kEventsCap"                 :"Events",
     "kExampleServer"             :"eg. My House",
diff --git a/www/templates/devoptions.html b/www/templates/devoptions.html
index 00361460..68f605cd 100644
--- a/www/templates/devoptions.html
+++ b/www/templates/devoptions.html
@@ -199,6 +199,15 @@
       </label>
 
       <label>
+        <div class="item item-button-right">
+          {{'kEventViewThumbsSize' | translate}}: <button class="button button-calm" ng-click="selectEventViewThumbsSize()">
+            <i class="icon ion-gear-b"></i>
+          </button>
+          <p>{{loginData.eventViewThumbsSize}}</p>
+        </div>
+      </label>
+
+      <label>
         <ion-toggle ng-model="loginData.montageHideFooter" toggle-class="toggle-calm">
           <span class="item-text-wrap">{{'kMontageHideFooter' | translate}}
           </span>
diff --git a/www/templates/events.html b/www/templates/events.html
index 00fd0951..ca6853cb 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -44,20 +44,22 @@
           <span style="float:right;margin-top:-18px;background-color:#444444;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;">&nbsp;&nbsp;&nbsp;
             <i class="ion-clock"></i>&nbsp;&nbsp;{{prettifyDate(event.Event.StartTime)}} &nbsp;{{tzAbbr}}&nbsp;
           </span>
-          <div class="row" style="font-size:90%;">
-            <div ng-if="loginData.eventViewThumbs!='none'" style="margin-left: auto;margin-right: auto;">
 
+          <div class="row" style="font-size:80%; color:rgb(110,110,110)">
+        
 
-              <img bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}" on-tap="closeIfOpen(event);openModalWithSnapshot(event)"
-                width="{{event.Event.thumbWidth}}px" height="{{event.Event.thumbHeight}}px"  fallback-src="img/noimage.png" />
-
+        
 
-            </div>
-          </div>
+          <!--</div>-->
           <!--row-->
-          <div class="row" style="font-size:80%; color:rgb(110,110,110)">
-            <div class="col">
+          <!--<div class="row" style="font-size:80%; color:rgb(110,110,110)">-->
+           <!-- <div class="col">-->
               <div class="item-text-wrap">
+
+                <div ng-if="loginData.eventViewThumbs!='none'" ng-class="::{'largeThumbs': thumbClass=='large', 'smallThumbs': thumbClass=='small'}">
+                  <img bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}" on-tap="closeIfOpen(event);openModalWithSnapshot(event)"
+                    width="{{event.Event.thumbWidth}}px" height="{{event.Event.thumbHeight}}px"  fallback-src="img/noimage.png" />
+                </div>
               <!-- this ngswitch displays different icons
                                         depending on the cause of the event -->
               <span ng-switch on="event.Event.Cause">
@@ -98,7 +100,7 @@
 
                 <!-- <br/> Default video:{{event.Event.relativePath}}{{event.Event.DefaultVideo}}-->
               </div>
-            </div>
+            <!--</div>-->
           </div>
 		  <div class="row" style="float:right; margin-right: 10px; display: block;">
           <span style="float:right">