diff options
| -rw-r--r-- | www/css/style.css | 7 | ||||
| -rw-r--r-- | www/js/MonitorModalCtrl.js | 95 | ||||
| -rw-r--r-- | www/templates/monitors-modal.html | 19 |
3 files changed, 119 insertions, 2 deletions
diff --git a/www/css/style.css b/www/css/style.css index 891ddecb..c25dfd59 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -1220,11 +1220,18 @@ videogular div.event-time { } /* Lets use similar colors to ZM zones, but use slate variations */ + +.zonelayer .zonepoint { + stroke:#2ecc71; + fill:#2ecc71; +} + .zonelayer .Active { stroke: #e74c3c; fill: #e74c3c; } + .zonelayer .Inclusive { stroke: #f39c12; fill: #f39c12; diff --git a/www/js/MonitorModalCtrl.js b/www/js/MonitorModalCtrl.js index 08140a6e..af1cd5d4 100644 --- a/www/js/MonitorModalCtrl.js +++ b/www/js/MonitorModalCtrl.js @@ -16,6 +16,7 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$ $scope.svgReady = false; $scope.zoneArray = []; var originalZones = []; + $scope.isZoneEdit = false; window.addEventListener("resize", function(){imageLoaded();}, false); @@ -397,9 +398,31 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$ }; + + $scope.saveZones = function() + { + + $rootScope.zmPopup = SecuredPopups.show('confirm', + { + title: 'Sure', + template: 'Shall we save?', + okText: $translate.instant('kButtonOk'), + cancelText: $translate.instant('kButtonCancel'), + }); + + }; + + $scope.toggleZoneEdit = function() + { + $scope.isZoneEdit = !$scope.isZoneEdit; + + }; + $scope.toggleZone = function() { $scope.showZones = !$scope.showZones; + if (!$scope.showZones) + $scope.isZoneEdit = false; }; $scope.imageLoaded = function() @@ -407,6 +430,50 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$ imageLoaded(); }; + $scope.circleTouch = function (evt) + { + console.log ("TOUCH"); + }; + + $scope.circleOnDrag = function (evt, ndx) + { + + //console.log ("DRAG"); + + //evt.preventDefault(); + //evt.stopPropagation(); + var ax = evt.gesture.center.pageX; + var ay = evt.gesture.center.pageY; + + // we get screen X/Y - need to translate + // to SVG points + var svg=document.getElementById('zsvg'); + var pt = svg.createSVGPoint(); + pt.x = ax; + pt.y = ay; + var svgP = pt.matrixTransform(svg.getScreenCTM().inverse()); + + $scope.circlePoints[ndx].x = Math.round(svgP.x); + $scope.circlePoints[ndx].y = Math.round(svgP.y); + + // get related polygon set + var zi = $scope.circlePoints[ndx].zoneIndex; + var newPoints=""; + for ( var i=0; i < $scope.circlePoints.length; i++) + { + if ($scope.circlePoints[i].zoneIndex == zi) + { + newPoints = newPoints + " " +$scope.circlePoints[i].x+","+$scope.circlePoints[i].y; + } + } + // console.log ("OLD ZONE FOR:"+zi+" is "+$scope.zoneArray[zi].coords ); + //console.log ("NEW ZONE FOR:"+zi+" is "+newPoints); + $scope.zoneArray[zi].coords = newPoints; + + //console.log ("INDEX="+ndx+" DRAG="+svgP.x+":"+svgP.y); + + }; + // 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) { @@ -435,6 +502,7 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$ //https://server/zm/api/zones/forMonitor/7.json // $scope.zoneArray = []; + $scope.circlePoints = []; var ow = $scope.monitor.Monitor.Width; var oh = $scope.monitor.Monitor.Height; @@ -453,6 +521,22 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$ } + // now create a points array for circle handles + for (i=0; i < $scope.zoneArray.length; i++) + { + /*jshint loopfunc: true */ + console.log ("ZONE ARRAY="+$scope.zoneArray[i].coords); + $scope.zoneArray[i].coords.split(' ') + .forEach( function(itm) + { + var o=itm.split(','); + $scope.circlePoints.push({x:o[0],y:o[1], zoneIndex:i}); + console.log ("CIRCLE X="+o[0]+"Y="+o[1]); + }); + + } + + } @@ -598,6 +682,11 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$ $scope.onSwipe = function(m, d) { + if ($scope.isZoneEdit) + { + NVRDataModel.log ("swipe disabled as you are in edit mode"); + return; + } var ld = NVRDataModel.getLogin(); if (!ld.canSwipeMonitors) return; @@ -613,6 +702,11 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$ function moveToMonitor(m, d) { + + if ($scope.isZoneEdit) + { + NVRDataModel.log ("Not cycling, as you are editing zones"); + } var curstate = $ionicHistory.currentStateName(); var found = 0; var mid; @@ -688,6 +782,7 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$ $scope.monitorName = NVRDataModel.getMonitorName(mid); $scope.monitor = NVRDataModel.getMonitorObject(mid); $scope.zoneArray=[]; + $scope.circlePoints=[]; getZones(); configurePTZ($scope.monitorId); }, 200); diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html index bf76e46a..6da3cbff 100644 --- a/www/templates/monitors-modal.html +++ b/www/templates/monitors-modal.html @@ -14,9 +14,13 @@ <!-- 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}}" on-swipe-left="onSwipe(monitorId,1)" on-swipe-right="onSwipe(monitorId,-1)" on-double-tap="closeModal();"> + <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> + <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 ng-show="isZoneEdit" ng-repeat="item in circlePoints track by $index" on-drag="circleOnDrag($event, $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}}" r="7"/> + </svg> </div> @@ -92,11 +96,22 @@ <li> <a href="" ng-click="toggleZone()"> <i class="icon ion-qr-scanner"></i></a> </li> + + <!-- zone editing is TBD --> + <li ng-if="showZones && $root.platformOS=='desktop' && 0"> + <a href="" ng-click="toggleZoneEdit()"> <i class="icon ion-edit"></i></a> + </li> + <li ng-if="showZones && isZoneEdit "> + <a href="" ng-click="saveZones()"> <i class="icon ion-android-done-all"></i></a> + </li> <li> <a href="" ng-click="toggleCycle()"> <i class="icon ion-android-bicycle"></i>-{{cycleText}}</a> </li> + + + <!--<li> <a href="" ng-click="cast(monitorId, monitor)"> <i class="icon ion-android-funnel"></i></a> |