#209 - more fixes

ZoneMinder · Mar 26, 2016 · 8605b12 · 8605b12
1 parent 1b6373e
commit 8605b12
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 52 deletions.
diff --git a/config.xml b/config.xml
@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="com.pliablepixels.zmninja-pro" version="1.1.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="com.pliablepixels.zmninja-pro" version="1.1.3" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>zmNinja</name>
     <description>
 	High performance ZoneMinder client

diff --git a/www/css/style.css b/www/css/style.css
@@ -850,3 +850,8 @@ body { font-family: sans-serif; }
           transition: transform 0.2s;
 }
 
+
+.wide-as-needed {
+  overflow: scroll;
+  white-space: nowrap;
+}
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
@@ -222,6 +222,12 @@ function initPackery()
 
     ZMDataModel.zmLog ("Monitors that are active: " + cnt + " while grid has " + positions.length);
 
+    if (cnt > ZMDataModel.getLogin().maxMontage )
+    {
+        cnt = ZMDataModel.getLogin().maxMontage;
+        ZMDataModel.zmLog ("restricting monitor count to " + cnt + " due to max-montage setting");
+    }
+
     if (cnt!= positions.length)
     {
 

diff --git a/www/js/TimelineModalCtrl.js b/www/js/TimelineModalCtrl.js
@@ -6,13 +6,14 @@
 
 
 
-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) {
+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) {
 
 
 
 
     var Graph2d;
     var eventImageDigits=5;
+    $scope.errorDetails="";
     //----------------------------------------------------------------
         // Alarm notification handling
         //----------------------------------------------------------------
@@ -46,6 +47,10 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
     });
 
 
+    //-------------------------------------------------------
+    // Tapping on a frame shows this image
+    //------------------------------------------------------
+
     $scope.showImage = function (p,r,f, fid)
     {
         var img = "<img width='100%' ng-src='"+p+"/index.php?view=image&path="+r+f+"'>";
@@ -59,6 +64,10 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
         // Execute action
     });
 
+    //-------------------------------------------------------
+    // init drawing here
+    //------------------------------------------------------
+
      $scope.$on('modal.shown', function () {
 
          $scope.dataReady = false;
@@ -76,6 +85,10 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
      });
 
 
+    //-------------------------------------------------------
+    // okay, really init drawing here
+    //------------------------------------------------------
+
     function processEvent()
     {
         var eid = $scope.event.Event.Id;
@@ -85,16 +98,22 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
         $http.get (apiurl)
         .then (function (success)
                {
-                    $scope.eventdetails = JSON.stringify(success);
+                    //$scope.eventdetails = JSON.stringify(success);
                     drawGraph(success.data);
         },
                function (error)
                {
-                    $scope.eventdetails = JSON.stringify(error);
+                    $scope.errorDetails = "there was an error rendering the graph. Please see logs";
+                    ZMDataModel.zmLog ("Error in timeline frames " + JSON.stringify(error));
         });
     }
 
 
+    //-------------------------------------------------------
+    // I was kidding, this is where it really is drawn
+    // scout's promise
+    //------------------------------------------------------
+
     function drawGraph(event)
     {
         console.log ("EVENT IS  " + JSON.stringify(event));
@@ -121,56 +140,66 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
 
 
         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:false,
-             align:'center'
-          },
-          dataAxis:
-          {
-              left: {title: {text:'score'}},
-          }
-      };
+          var options = {
+              autoResize:true,
+              height: Math.floor($rootScope.devHeight/2),
+              //clickToUse:true,
+
+              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:false,
+                 align:'center'
+              },
+              dataAxis:
+              {
+                  left: {title: {text:'score'}},
+              }
+          };
         var container = document.getElementById('timeline-alarm-vis');
         Graph2d = new vis.Graph2d(container, dataset, groups, options);
         $scope.dataReady = true;
-        $scope.alarm_data = Hello.get();
+
 
 
+        //-------------------------------------------------------
+        // When you tap on a data node
+        //------------------------------------------------------
+
         Graph2d.on('click',function (prop) {
 
             $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});
+
+                        $scope.alarm_images.push({
+                            relativePath:items[i].relativePath, 
+                            fid:items[i].fid, 
+                            fname:items[i].fname, 
+                            score:items[i].score,
+                            time:moment(items[i].x).format("MMM D,"+ZMDataModel.getTimeFormat()),
+                            eid:items[i].eid});
 
                     }
                 }
-                //console.log ("I PUSHED " + $scope.alarm_images.length);
+
             });
 
         });
@@ -252,13 +281,4 @@ 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,9 +143,7 @@
                                         <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
@@ -4,22 +4,21 @@
     <ion-modal-view cache-view="false">
         <ion-content  ng-cloak on-double-tap="closeModal()">
 <div ng-controller="TimelineModalCtrl">   
-            <center><h5> Showing frames for Event: {{eid}}</h5></center>
-
+            <br/>
+            <center> <h5>Showing for Event: {{eid}} (double-tap to exit)</h5></center>
+               {{errorDetails}}
               <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" >
-
-
+                <ion-scroll direction="x"  class="wide-as-needed">
                         <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)"/>
+                                <figcaption><small>f:{{alarm.fid}} scr:{{alarm.score}} @ {{alarm.time}}</small></figcaption>       
+                                  <img  image-spinner-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>

diff --git a/www/templates/timeline.html b/www/templates/timeline.html
@@ -29,6 +29,8 @@
         {{prettify(fromDate)}} - {{prettify(toDate)}} (only displaying last {{maxItems}} events) 
             </div>
 
+        <ion-spinner icon="spiral" style="position:absolute; top:50%;left:50%" ng-if="!graphLoaded"></ion-spinner>  
+
         <div ng-if="!graphLoaded">
             <br/><br/>
             <center>