diff options
| -rw-r--r-- | www/css/style.css | 37 | ||||
| -rw-r--r-- | www/js/MonitorModalCtrl.js | 99 | ||||
| -rw-r--r-- | www/templates/monitors-modal.html | 23 |
3 files changed, 157 insertions, 2 deletions
diff --git a/www/css/style.css b/www/css/style.css index ed8ac441..891ddecb 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -1201,6 +1201,43 @@ videogular div.event-time { -webkit-align-items: center; -ms-flex-align: center; align-items: center; + +} + +.imagecontainer{position:relative; margin:0 auto;} +.zonelayer +{ + position:absolute; + top:0; + left:0; + background:none; + +} + +.zonelayer polygon { + fill-opacity: 0.25; + stroke-width: 2px; +} + +/* Lets use similar colors to ZM zones, but use slate variations */ +.zonelayer .Active { + stroke: #e74c3c; + fill: #e74c3c; +} + +.zonelayer .Inclusive { + stroke: #f39c12; + fill: #f39c12; +} + +.zonelayer .Exclusive { + stroke: #8e44ad; + fill: #8e44ad; +} + +.zonelayer .Preclusive { + stroke: #1F3A93; + fill: #1F3A93; } @media (min-width:600px) { diff --git a/www/js/MonitorModalCtrl.js b/www/js/MonitorModalCtrl.js index 4b3a7288..6f124364 100644 --- a/www/js/MonitorModalCtrl.js +++ b/www/js/MonitorModalCtrl.js @@ -13,6 +13,13 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$ var cycleHandle; var nphTimer; var ld = NVRDataModel.getLogin(); + $scope.svgReady = false; + $scope.zoneArray = []; + var originalZones = []; + + + window.addEventListener("resize", function(){imageLoaded();}, false); + $rootScope.authSession = "undefined"; @@ -390,6 +397,65 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$ }; + $scope.toggleZone = function() + { + $scope.showZones = !$scope.showZones; + }; + + $scope.imageLoaded = function() + { + imageLoaded(); + }; + + // credit: http://stackoverflow.com/questions/41411891/most-elegant-way-to-parse-scale-and-re-string-a-string-of-number-co-ordinates?noredirect=1#41411927 + // This function scales coords of zones based on current image size + function scaleCoords(string, sx, sy) { + var f = [sx, sy]; + return string.split(' ').map(function (a) { + return a.split(',').map(function (b, i) { + return Math.round(b * f[i]); + }).join(','); + }).join(' '); + } + + + + // called when the live monitor image loads + // this is a good time to calculate scaled zone points + function imageLoaded() + { + + var img =document.getElementById("singlemonitor"); + + $scope.cw = img.naturalWidth; + $scope.ch = img.naturalHeight; + + + console.log (img.clientWidth+ "x"+img.clientHeight ); + //https://server/zm/api/zones/forMonitor/7.json + // + $scope.zoneArray = []; + + var ow = $scope.monitor.Monitor.Width; + var oh = $scope.monitor.Monitor.Height; + + // console.log ("MONITOR IS: "+JSON.stringify($scope.monitor)); + + // console.log ("ORIGINAL WH="+ow+"x"+oh); + + for (var i=0; i < originalZones.length; i++) + { + var sx = $scope.cw/ow; + var sy = $scope.ch/oh; + $scope.zoneArray.push({ + coords:scaleCoords(originalZones[i].coords,sx,sy), + type:originalZones[i].type}); + + } + + + } + //------------------------------------------------------------- // this is checked to make sure we are not pulling images // when app is in background. This is a problem with Android, @@ -621,6 +687,7 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$ $scope.monitorId = mid; $scope.monitorName = NVRDataModel.getMonitorName(mid); $scope.monitor = NVRDataModel.getMonitorObject(mid); + getZones(); configurePTZ($scope.monitorId); }, 200); } @@ -919,6 +986,11 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$ { $scope.imageFit = !$scope.imageFit; + if ($scope.imageFit) + $scope.aspectFit=""; + else + $scope.aspectFit = "xMidYMid slice"; + // console.log("Switching image style to " + $scope.imageFit); }; @@ -1320,12 +1392,39 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$ } + function getZones() + { + //https://server/zm/api/zones/forMonitor/7.json + var api = NVRDataModel.getLogin().apiurl+"/zones/forMonitor/"+$scope.monitorId+".json"; + NVRDataModel.debug ("Getting zones using:"+api); + originalZones = []; + $http.get (api) + .then (function (succ) { + console.log (JSON.stringify(succ)); + for (var i=0; i < succ.data.zones.length; i++) + { + originalZones.push ({ + coords:succ.data.zones[i].Zone.Coords, + type:succ.data.zones[i].Zone.Type}); + } + + }, + function (err) { + NVRDataModel.debug ("Error getting zones :"+JSON.stringify(err)); + + }); + + } + $scope.$on('modal.shown', function() { $scope.monStatus = ""; document.addEventListener("pause", onPause, false); document.addEventListener("resume", onResume, false); + $scope.showZones = false; + + getZones(); var ld = NVRDataModel.getLogin(); //currentEvent = $scope.currentEvent; diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html index 931d9c33..a51eba10 100644 --- a/www/templates/monitors-modal.html +++ b/www/templates/monitors-modal.html @@ -1,6 +1,8 @@ <div ng-controller="MonitorModalCtrl" ng-cloak> <ion-modal-view cache-view="false" style="background-color:#444444"> - <ion-content on-double-tap="closeModal();"> + <ion-content ng-cloak on-double-tap="closeModal();"> + + <div id="imagecontainer"> <ion-scroll 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 --> <!-- --> @@ -8,7 +10,17 @@ <div ng-if="$root.authSession!='undefined'"> <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="{{monitor.Monitor.streamingURL}}/nph-zms?mode={{currentStreamMode}}&monitor={{monitorId}}&scale={{quality}}{{$root.authSession}}&rand={{$root.modalRand}}&connkey={{connKey}}" 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();" /> + <img id="singlemonitor" style="width:100vw; height:100vh;" image-spinner-loader="lines" image-spinner-src="{{monitor.Monitor.streamingURL}}/nph-zms?mode={{currentStreamMode}}&monitor={{monitorId}}&scale={{quality}}{{$root.authSession}}&rand={{$root.modalRand}}&connkey={{connKey}}" 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()" /> + + <!-- zone overlays if enabled --> + <div ng-show="showZones"> + <svg width="100vw" height="100vh" class="zonelayer" ng-attr-view_box="0 0 {{cw}} {{ch}}" ng-attr-preserve_aspect_ratio="{{aspectFit}}"> + + <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> + + </svg> + </div> + </div> <div ng-if="animationInProgress || isBackground()"> <img style="width:100vw; height:100vh" ng-src="img/pausevideo.png" class="object-fit_contain" /> @@ -19,6 +31,7 @@ </div> </div> </ion-scroll> + </div> </ion-content> <div ng-show="isControllable=='1' && showPTZ"> <div class="ptzcentered"> @@ -75,6 +88,12 @@ <li> <a href="" ng-click="enableAlarm(monitorId,false)"> <i class="icon ion-flash-off"></i></a> </li> + + <li> + <a href="" ng-click="toggleZone()"> <i class="icon ion-qr-scanner"></i></a> + </li> + + <li> <a href="" ng-click="toggleCycle()"> <i class="icon ion-android-bicycle"></i>-{{cycleText}}</a> </li> |