diff options
Diffstat (limited to 'www')
| -rw-r--r-- | www/js/MonitorModalCtrl.js | 24 | ||||
| -rw-r--r-- | www/templates/monitors-modal.html | 75 |
2 files changed, 25 insertions, 74 deletions
diff --git a/www/js/MonitorModalCtrl.js b/www/js/MonitorModalCtrl.js index 903c2e2a..19117627 100644 --- a/www/js/MonitorModalCtrl.js +++ b/www/js/MonitorModalCtrl.js @@ -22,6 +22,24 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$ $scope.ptzButtonsShown = true; + var streamState = { + SNAPSHOT: 1, + SNAPSHOT_LOWQUALITY:2, + ACTIVE: 3, + STOPPED: 4, + PAUSED: 5 + }; + + var currentStreamState = streamState.SNAPSHOT_LOWQUALITY; + + // incase imageload is never called + $timeout (function () { + if (currentStreamState != streamState.SNAPSHOT) { + currentStreamState = streamState.SNAPSHOT; + NVR.debug ('Forcing stream to regular quality, imageLoaded() was never called'); + } + + },10000); @@ -672,6 +690,8 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$ // this is a good time to calculate scaled zone points function imageLoaded() { + currentStreamState = streamState.SNAPSHOT; + if ($scope.animationInProgress) return; /* var img = document.getElementById("singlemonitor"); @@ -1259,12 +1279,14 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$ $scope.constructSingleStream = function () { + var scale = (currentStreamState == streamState.SNAPSHOT_LOWQUALITY) ? '10':$scope.quality; + var stream; var fps = NVR.getLogin().singleliveFPS; stream = $scope.monitor.Monitor.streamingURL + "/nph-zms?mode=" + getSingleStreamMode() + "&monitor=" + $scope.monitorId + - "&scale=" + $scope.quality + + "&scale=" + scale + '&buffer=1000'; if (fps) { diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html index bd64cdd5..68b0beef 100644 --- a/www/templates/monitors-modal.html +++ b/www/templates/monitors-modal.html @@ -3,7 +3,7 @@ <ion-content ng-cloak on-double-tap="closeModal();" scroll="false"> <div id="imagecontainer"> - <ion-scroll ng-if="!isZoneEdit" on-scroll="checkZoom()" delegate-handle="imgscroll" has-bouncing=false min-zoom=1 + <ion-scroll on-scroll="checkZoom()" delegate-handle="imgscroll" has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%;" overflow-scroll="false"> <!-- android needs this 100vh - otherwise max- does not work --> <!-- --> @@ -32,53 +32,6 @@ </ion-scroll> - - - <!-- egads, ion-scroll is a bind-on-start directive, so I have to repeat this thanks to zooming = false. Must be a better way --> - <ion-scroll ng-if="isZoneEdit" delegate-handle="imgscroll" has-bouncing=false min-zoom=1 zooming="false" - direction="xy" style="width: 100%;" overflow-scroll="false"> - <!-- android needs this 100vh - otherwise max- does not work --> - <!-- --> - <div id="monitorimage" style="height: 100vh;" class="main"> - - <div ng-if="!animationInProgress && !isBackground() && connKey"> - <!--<span style="color:white">{{currentStreamMode}}</span>--> - - <img id="singlemonitor" style="width:100vw; height:100vh;" image-spinner-loader="lines" - image-spinner-src="{{constructSingleStream()}}" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" - on-swipe-left="onSwipe(monitorId,1)" on-swipe-right="onSwipe(monitorId,-1)" on-double-tap="closeModal();" - imageonload="imageLoaded()" /> - </div> - <div ng-if="animationInProgress || isBackground()"> - <img style="width:100vw; height:100vh" ng-src="img/noimage.png" class="object-fit_contain" /> - </div> - - - <img id="singlemonitor" ng-src="img/noimage.png" style="width:100vw; height:100vh; display:block;" - class="object-fit_contain" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" /> - - </div> - </ion-scroll> - - <!-- zone overlays if enabled --> - <div ng-show="showZones"> - <svg id="zsvg" width="100vw" height="100vh" class="zonelayer" ng-attr-view_box="0 0 {{cw}} {{ch}}" - ng-attr-preserve_aspect_ratio="{{aspectFit}}" on-swipe-left="onSwipe(monitorId,1)" on-swipe-right="onSwipe(monitorId,-1)" - on-double-tap="closeModal();"> - - <polygon ng-repeat="item in zoneArray track by $index" ng-class="{'object-fit_cover {{item.type}}':imageFit==false, 'object-fit_contain {{item.type}}':imageFit==true}" - ng-attr-points="{{item.coords}}" /> - </polygon> - - - <circle id="circle-{{$index}}" ng-show="isZoneEdit" ng-repeat="item in circlePoints track by $index" class="zonepoint" - ng-class="{'object-fit_cover {{item.type}}':imageFit==false, 'object-fit_contain {{item.type}}':imageFit==true}" - ng-attr-cx="{{item.x}}" ng-attr-cy="{{item.y}}" ng-attr-r="{{csize}}" /> - - - </svg> - </div> - </div> </ion-content> @@ -167,31 +120,7 @@ </a> </li> - <!-- <li ng-if="isToggleListMenu"> - <a href="" ng-click="toggleZone()"> - <i class="icon ion-qr-scanner"></i> - </a> - </li>--> - - <!-- zone editing is TBD --> - <li ng-if="showZones && 0 && isToggleListMenu"> - <a href="" ng-click="toggleZoneEdit()"> - <i class="icon ion-edit"></i> - </a> - </li> - - <li ng-if="showZones && isZoneEdit && isToggleListMenu"> - <a href="" ng-click="saveZones()"> - <i class="icon ion-android-done-all"></i> - </a> - </li> - - <li ng-if="showZones && isZoneEdit && isToggleListMenu"> - <a href="" ng-click="changeCircleSize()"> - <i class="icon ion-navigate"></i> - </a> - </li> - + <li ng-if="isToggleListMenu" ng-style="{'background-color': isCycle?'rgba(69, 170, 242,0.7)':'rgba(108, 122, 137, 0.7)'}"> <a href="" ng-click="toggleCycle()"> <i class="icon ion-android-bicycle"></i>-{{cycleText}}</a> |