#209 - mostly working

ZoneMinder · Mar 26, 2016 · 1b6373e · 1b6373e
1 parent 048d06e
commit 1b6373e
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 16 deletions.
diff --git a/www/css/style.css b/www/css/style.css
@@ -848,4 +848,5 @@ body { font-family: sans-serif; }
   outline-offset: -6px;
   -webkit-transition: -webkit-transform 0.2s;
           transition: transform 0.2s;
-}
+}
+
diff --git a/www/js/TimelineModalCtrl.js b/www/js/TimelineModalCtrl.js
@@ -6,9 +6,13 @@
 
 
 
-angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '$rootScope', 'zm', 'ZMDataModel', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$q', '$sce', 'carouselUtils', '$ionicPopup', function ($scope, $rootScope, zm, ZMDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, $q, $sce, carouselUtils, $ionicPopup) {
+angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '$rootScope', 'zm', 'ZMDataModel', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$q', '$sce', 'carouselUtils', '$ionicPopup', 'Hello', function ($scope, $rootScope, zm, ZMDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, $q, $sce, carouselUtils, $ionicPopup,Hello) {
 
+
+
 
+    var Graph2d;
+    var eventImageDigits=5;
     //----------------------------------------------------------------
         // Alarm notification handling
         //----------------------------------------------------------------
@@ -42,16 +46,29 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
     });
 
 
+    $scope.showImage = function (p,r,f, fid)
+    {
+        var img = "<img width='100%' ng-src='"+p+"/index.php?view=image&path="+r+f+"'>";
+        $rootScope.zmPopup = $ionicPopup.alert({title: 'frame:'+fid+'/Event:'+$scope.eid,template:img,  cssClass:'popup80'});
+    };
+
 
     $scope.$on('modal.removed', function () {
 
-
+        Graph2d.destroy();
         // Execute action
     });
 
      $scope.$on('modal.shown', function () {
 
          $scope.dataReady = false;
+
+         ZMDataModel.getKeyConfigParams(0)
+            .then(function (data) {
+                //console.log ("***GETKEY: " + JSON.stringify(data));
+                eventImageDigits = parseInt(data);
+                ZMDataModel.zmLog("Image padding digits reported as " + eventImageDigits);
+            });
 
          $scope.eventdetails = "loading...";
          processEvent();
@@ -83,29 +100,41 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
         console.log ("EVENT IS  " + JSON.stringify(event));
         // Chart.js Data
         var items = [];
-
+        var groups = new vis.DataSet();
+        $scope.eid = event.event.Event.Id;
         for (var i=0; i< event.event.Frame.length; i++)
         {
-            console.log ("Pushing " + event.event.Frame[i].TimeStamp +":"+ event.event.Frame[i].Score);
+
+          //  groups.add({id:i, content:'', //className:'c-'+i
+                    //   });
+           // console.log ("Pushing " + event.event.Frame[i].TimeStamp +":"+ event.event.Frame[i].Score);
             items.push ({x:event.event.Frame[i].TimeStamp,
                          y:event.event.Frame[i].Score,
                          eid: event.event.Event.Id,
-                         fid: event.event.Frame[i].FrameId
+                         fid: event.event.Frame[i].FrameId,
+                         //group:i,
+                         relativePath:computeRelativePath(event.event),
+                         score:event.event.Frame[i].Score,
+                         fname: padToN(event.event.Frame[i].FrameId,eventImageDigits)+"-capture.jpg",
                         });
         }
 
 
         var dataset = new vis.DataSet(items);
       var options = {
+          autoResize:true,
+          height: Math.floor($rootScope.devHeight/2),
+
           style:'bar',
           start: event.event.Frame[0].TimeStamp,
           end: event.event.Frame[event.event.Frame.length-1].TimeStamp,
           max: event.event.Frame[event.event.Frame.length-1].TimeStamp,
           min: event.event.Frame[0].TimeStamp,
+
           barChart:
           {
              width: 50,
-             sideBySide:true,
+             sideBySide:false,
              align:'center'
           },
           dataAxis:
@@ -114,12 +143,35 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
           }
       };
         var container = document.getElementById('timeline-alarm-vis');
-        var Graph2d = new vis.Graph2d(container, dataset, options);
+        Graph2d = new vis.Graph2d(container, dataset, groups, options);
         $scope.dataReady = true;
+        $scope.alarm_data = Hello.get();
+
 
         Graph2d.on('click',function (prop) {
-            console.log ("x="+prop.x);
-            console.log ("val="+JSON.stringify(prop.value));
+
+            $timeout( function() {
+                $scope.alarm_images=[];
+
+                $scope.playbackURL = ZMDataModel.getLogin().url;
+                var t = moment(prop.time);
+                //console.log ("x="+prop.x);
+               // console.log ("val="+JSON.stringify(prop.value));
+                console.log ("date="+t.format("YYYY-MM-DD HH:mm:ss"));
+                var tformat = t.format ("YYYY-MM-DD HH:mm:ss");
+                //console.log ("event="+JSON.stringify(prop.event));
+
+                for (var i=0; i<items.length; i++)
+                {
+                    if (items[i].x == tformat)
+                    {
+                        //console.log ("ITEM " + i + " matches, relative path=" + items[i].relativePath);
+                        $scope.alarm_images.push({relativePath:items[i].relativePath, fid:items[i].fid, fname:items[i].fname, score:items[i].score, eid:items[i].eid});
+
+                    }
+                }
+                //console.log ("I PUSHED " + $scope.alarm_images.length);
+            });
 
         });
 
@@ -199,3 +251,14 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
 
 
 }]);
+
+angular.module('zmApp.controllers')
+.factory('Hello', function()
+{
+    var data = 12;
+    return {
+        'set': function(val) {data=val;},
+        'get': function() {return data;}
+    };
+
+});
diff --git a/www/templates/events.html b/www/templates/events.html
@@ -143,6 +143,9 @@
                                         <span ng-repeat="alarm in alarm_images">
 
                                             <figure style="display:inline-block">
+                                                <small>
+                                                {{playbackURL}}/index.php?view=image&amp;path={{event.Event.relativePath}}{{alarm.fname}}&amp;height=380"  
+                                                </small>
                                                 <figcaption><p>frame:{{alarm.id}} score:{{alarm.score}}</p></figcaption>       
                                                   <img  image-spinner-src="{{playbackURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380"    style="width: auto; height: auto;max-width: 100%;max-height: 170px" />
 

diff --git a/www/templates/timeline-modal.html b/www/templates/timeline-modal.html
@@ -1,16 +1,38 @@
-<div ng-controller="TimelineModalCtrl">
+
+
     <!-- style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;"-->
     <ion-modal-view cache-view="false">
         <ion-content  ng-cloak on-double-tap="closeModal()">
-
-              <div id="timeline-alarm-vis"></div>
+<div ng-controller="TimelineModalCtrl">   
+            <center><h5> Showing frames for Event: {{eid}}</h5></center>
+
+              <div id="timeline-alarm-vis" ></div>
 
-
-
+              <ion-spinner icon="spiral" style="position:absolute; top:50%;left:50%" ng-if="!dataReady"></ion-spinner>     
+
+            <div style="height:190px;">
+                <ion-scroll direction="x" >
+
+
+                        <span ng-repeat="alarm in alarm_images">
+
+
+                            <figure style="display:inline-block">
+                                <figcaption><small>frame:{{alarm.fid}} score:{{alarm.score}}</small></figcaption>       
+                                  <img  ng-src="{{playbackURL}}/index.php?view=image&path={{alarm.relativePath}}{{alarm.fname}}&height=380"    style="width: auto; height: auto;max-width: 100%;max-height: 170px"  on-tap="showImage(playbackURL,alarm.relativePath,alarm.fname, alarm.fid)"/>
+
+
+                                </figure>
+
+                        </span>
+
+                </ion-scroll>
+            </div>
+         </div>
         </ion-content>
 
     </ion-modal-view>
 
 
 
-</div>
+