zone overlay support - tap on the [ ] button #420

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>