diff options
| -rw-r--r-- | package.json | 4 | ||||
| -rw-r--r-- | www/js/DevOptionsCtrl.js | 3 | ||||
| -rw-r--r-- | www/js/EventCtrl.js | 37 | ||||
| -rw-r--r-- | www/lang/locale-en.json | 1 | ||||
| -rw-r--r-- | www/templates/events-popover.html | 2 | ||||
| -rw-r--r-- | www/templates/events.html | 4 |
6 files changed, 40 insertions, 11 deletions
diff --git a/package.json b/package.json index 77b86ccc..0ea65508 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,9 @@ "ANDROID_GSON_VERSION": "2.8.6" }, "cordova-plugin-advanced-http": {}, + "cordova-plugin-ionic-webview": { + "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+" + }, "cordova-plugin-media-pp-fork": {} } }, @@ -97,6 +100,7 @@ "cordova-plugin-ignore-lint-translation": "0.0.1", "cordova-plugin-insomnia": "^4.3.0", "cordova-plugin-ionic-keyboard": "^2.2.0", + "cordova-plugin-ionic-webview": "git+https://github.com/pliablepixels/cordova-plugin-ionic-webview.git", "cordova-plugin-media-pp-fork": "^1.0.2-dev", "cordova-plugin-multi-window": "0.0.3", "cordova-plugin-network-information": "^2.0.2", diff --git a/www/js/DevOptionsCtrl.js b/www/js/DevOptionsCtrl.js index 2af824b5..6ca300ca 100644 --- a/www/js/DevOptionsCtrl.js +++ b/www/js/DevOptionsCtrl.js @@ -216,8 +216,9 @@ angular.module('zmApp.controllers').controller('zmApp.DevOptionsCtrl', ['$scope' var buttons = [ + { text: $translate.instant('kEventViewThumbsXSmall'), value:'xsmall' }, { text: $translate.instant('kEventViewThumbsSmall'), value:'small' }, - { text: $translate.instant('kEventViewThumbsLarge'), value:'large' }, + { text: $translate.instant('kEventViewThumbsLarge'), value:'large' } ]; diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js index be1bf1f9..ca16c5e5 100644 --- a/www/js/EventCtrl.js +++ b/www/js/EventCtrl.js @@ -72,6 +72,12 @@ angular.module('zmApp.controllers') var eHandle; var scrubOngoing = false; + $scope.thumbSizeOptions = { + 'xsmall': $translate.instant('kEventViewThumbsXSmall'), + 'small': $translate.instant('kEventViewThumbsSmall'), + 'large':$translate.instant('kEventViewThumbsLarge'), + }; + //--------------------------------------------------- // initial code @@ -262,9 +268,13 @@ angular.module('zmApp.controllers') if (ld.eventViewThumbsSize == 'large') { NVR.debug ('Switching to big thumbs style'); $scope.thumbClass = 'large'; - } else { - NVR.debug ('using small thumbs style'); + } else if (ld.eventViewThumbsSize == 'small') { + NVR.debug ('Switching to small thumbs style'); $scope.thumbClass = 'small'; + } + else { + NVR.debug ('using xsmall thumbs style'); + $scope.thumbClass = 'xsmall'; } } else { NVR.debug ('No thumbs'); @@ -286,14 +296,13 @@ angular.module('zmApp.controllers') The layout I am using: a) If you are using large thumbs, it's a single column format - b) If you are using small thumbs, it's a two column format + b) If you are using small or xsmall thumbs, it's a two column format The max size of the image is in computeThumbnailSize() */ - + var ld = NVR.getLogin(); recomputeRowHeights(); $scope.mid = ''; - var ld = NVR.getLogin(); if (ld.eventViewThumbs != 'objdetect_gif') { maxEventsToLoad = 50; } else { @@ -3427,7 +3436,7 @@ angular.module('zmApp.controllers') return calculateAspectRatioFit(mw, mh, maxThumbWidth, maxThumbHeight); } - } else { // small + } else if (ld.eventViewThumbsSize == 'small') { // small maxThumbHeight = 250; maxThumbWidth = 0.5* $rootScope.devWidth; if (landscape) { @@ -3438,6 +3447,17 @@ angular.module('zmApp.controllers') return calculateAspectRatioFit(mw, mh, maxThumbWidth, maxThumbHeight); } + } else { // xsmall + maxThumbHeight = 280; + maxThumbWidth = 0.2* $rootScope.devWidth; + if (landscape) { + // go till 50% of width in small landscape, but restricted to useable row height + return calculateAspectRatioFit(mw, mh, maxThumbWidth, maxThumbHeight); + } else { + // go till 30% of width in small portrait, but restricted to useable row height + return calculateAspectRatioFit(mw, mh, maxThumbWidth, maxThumbHeight); + } + } } @@ -3495,7 +3515,10 @@ angular.module('zmApp.controllers') $scope.toggleThumbSize = function() { var ld = NVR.getLogin(); - ld.eventViewThumbsSize = (ld.eventViewThumbsSize == 'large')?'small':'large'; + if (ld.eventViewThumbsSize=='xsmall') {ld.eventViewThumbsSize='small';} + else if (ld.eventViewThumbsSize=='small') {ld.eventViewThumbsSize='large';} + else if (ld.eventViewThumbsSize=='large') {ld.eventViewThumbsSize='xsmall';} + NVR.debug ('changing thumb size to:'+ld.eventViewThumbsSize); NVR.setLogin(ld); $scope.loginData = ld; recomputeRowHeights(); diff --git a/www/lang/locale-en.json b/www/lang/locale-en.json index a4208e97..e23d44a8 100644 --- a/www/lang/locale-en.json +++ b/www/lang/locale-en.json @@ -114,6 +114,7 @@ "kEventSingleImageScale" :"Event single image scale", "kEventStillRecording" :"event is still recording - showing live feed", "kEventViewThumbsSize" :"thumbnail size", + "kEventViewThumbsXSmall" :"x-small", "kEventViewThumbsSmall" :"small", "kEventViewThumbsLarge" :"large", "kEvents" :"events", diff --git a/www/templates/events-popover.html b/www/templates/events-popover.html index 425360c5..b37a70a0 100644 --- a/www/templates/events-popover.html +++ b/www/templates/events-popover.html @@ -7,7 +7,7 @@ Event Graphs </a>--> <a class="item" style="text-transform:capitalize;" ng-href="" ng-click="popover.hide();toggleThumbSize();doRefresh();"> - {{'kEventViewThumbsSize' | translate}}:{{(loginData.eventViewThumbsSize == 'small' ? 'kEventViewThumbsSmall': 'kEventViewThumbsLarge') | translate}} + {{'kEventViewThumbsSize' | translate}}: {{thumbSizeOptions[loginData.eventViewThumbsSize]}} </a> <a class="item" ng-href="" ng-click="popover.hide();doRefresh();"> {{'kRefresh' | translate}} diff --git a/www/templates/events.html b/www/templates/events.html index 681356ff..c2c0c30f 100644 --- a/www/templates/events.html +++ b/www/templates/events.html @@ -79,7 +79,7 @@ <!-- this ngswitch displays different icons depending on the cause of the event --> <span ng-switch on="event.Event.Cause" - ng-class="::{'largeThumbsSpan': thumbClass=='large', 'smallThumbsSpan': thumbClass=='small'}"> + ng-class="::{'largeThumbsSpan': thumbClass=='large', 'smallThumbsSpan': (thumbClass=='small' || thumbClass=='xsmall')}"> <span ng-switch-when="Motion"> <i class="ion-android-walk" style="font-size:150%;"></i> <!-- <i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i>--> @@ -106,7 +106,7 @@ </span> </div> <!-- col--> <!-- 2 col format for small, 1 col format for large --> - <span ng-if="thumbClass=='small' && loginData.eventViewThumbs!='none'"> + <span ng-if="(thumbClass=='small' || thumbClass=='xsmall') && loginData.eventViewThumbs!='none'"> <div class="col"> <img bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}" on-tap="closeIfOpen(event);openModalWithSnapshot(event)" width="{{event.Event.thumbWidth}}px" |
