From 090afd0f8ab8a77ba6c239dbfc0298b3c529926d Mon Sep 17 00:00:00 2001 From: Pliable Pixels Date: Sun, 1 Jan 2017 18:22:02 -0500 Subject: zone overlay support - tap on the [ ] button #420 --- www/css/style.css | 37 +++++++++++++++ www/js/MonitorModalCtrl.js | 99 +++++++++++++++++++++++++++++++++++++++ www/templates/monitors-modal.html | 23 ++++++++- 3 files changed, 157 insertions(+), 2 deletions(-) (limited to 'www') 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 @@
- + + +
@@ -8,7 +10,17 @@
- + + + +
+ + + + + +
+
@@ -19,6 +31,7 @@
+
@@ -75,6 +88,12 @@
    • + +
  • + +
    • + +
  • -{{cycleText}}
    • -- cgit v1.2.3